From 5a36cc039eacb6c60cea42eced28179aea237cb6 Mon Sep 17 00:00:00 2001
From: Ryan Lewis <93001277+rylew1@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:08:32 -0700
Subject: [PATCH] [Issue #1471]: Tests for search components (#1617)

## Summary
Fixes #1471

## Changes
- Tests for most of the search components
---
 .../SearchFilterSection/SectionLinkLabel.tsx  |  16 +-
 .../components/search/SearchPagination.tsx    |   1 +
 .../src/components/search/SearchSortBy.tsx    |   1 +
 .../components/search/SearchBar.test.tsx      |  49 ++++++
 .../SearchFilterAccordion.test.tsx            | 152 ++++++++++++++++++
 .../SearchFilterCheckbox.test.tsx             |  74 +++++++++
 .../SearchFilterSection.test.tsx              |  98 +++++++++++
 .../SectionLinkCount.test.tsx                 |  26 +++
 .../SectionLinkLabel.test.tsx                 |  44 +++++
 .../SearchFilterToggleAll.test.tsx            |  83 ++++++++++
 .../search/SearchPagination.test.tsx          |  88 ++++++++++
 .../search/SearchResultsHeader.test.tsx       |  45 ++++++
 .../search/SearchResultsListItem.test.tsx     |  37 +++++
 .../components/search/SearchSortBy.test.tsx   |  65 ++++++++
 14 files changed, 777 insertions(+), 2 deletions(-)
 create mode 100644 frontend/tests/components/search/SearchBar.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterCheckbox.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SearchFilterSection.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkCount.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.test.tsx
 create mode 100644 frontend/tests/components/search/SearchFilterAccordion/SearchFilterToggleAll.test.tsx
 create mode 100644 frontend/tests/components/search/SearchPagination.test.tsx
 create mode 100644 frontend/tests/components/search/SearchResultsHeader.test.tsx
 create mode 100644 frontend/tests/components/search/SearchResultsListItem.test.tsx
 create mode 100644 frontend/tests/components/search/SearchSortBy.test.tsx

diff --git a/frontend/src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.tsx b/frontend/src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.tsx
index 1726990eb..a894f3a42 100644
--- a/frontend/src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.tsx
+++ b/frontend/src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.tsx
@@ -8,12 +8,24 @@ export default function SectionLinkLabel({
   childrenVisible: boolean;
   option: FilterOption;
 }) {
+  // When the arrow is down, the section is collapsed, and we can expand the section
+  // When the arrow is up, the section is expanded, and we can collapse the section
+  const ariaLabel = childrenVisible ? "Collapse section" : "Expand section";
+
   return (
     <span className="grid-col flex-fill">
       {childrenVisible ? (
-        <Icon.ArrowDropUp size={5} className="text-middle" />
+        <Icon.ArrowDropUp
+          size={5}
+          className="text-middle"
+          aria-label={ariaLabel}
+        />
       ) : (
-        <Icon.ArrowDropDown size={5} className="text-middle" />
+        <Icon.ArrowDropDown
+          size={5}
+          className="text-middle"
+          aria-label={ariaLabel}
+        />
       )}
       {option.label}{" "}
       {/* Assuming you want to display the option's label instead of its ID */}
diff --git a/frontend/src/components/search/SearchPagination.tsx b/frontend/src/components/search/SearchPagination.tsx
index f1ac88144..29dd6389c 100644
--- a/frontend/src/components/search/SearchPagination.tsx
+++ b/frontend/src/components/search/SearchPagination.tsx
@@ -28,6 +28,7 @@ export default function SearchPagination({
           name="currentPage"
           ref={paginationRef}
           value={page}
+          data-testid="hiddenCurrentPage"
         />
       )}
       <Pagination
diff --git a/frontend/src/components/search/SearchSortBy.tsx b/frontend/src/components/search/SearchSortBy.tsx
index 56da5f7b6..ebd706898 100644
--- a/frontend/src/components/search/SearchSortBy.tsx
+++ b/frontend/src/components/search/SearchSortBy.tsx
@@ -49,6 +49,7 @@ const SearchSortBy: React.FC<SearchSortByProps> = ({
         id="search-sort-by-select"
         onChange={handleChange}
         value={sortBy}
+        aria-label="Sort By"
       >
         {SORT_OPTIONS.map((option) => (
           <option key={option.value} value={option.value}>
diff --git a/frontend/tests/components/search/SearchBar.test.tsx b/frontend/tests/components/search/SearchBar.test.tsx
new file mode 100644
index 000000000..227faa3fd
--- /dev/null
+++ b/frontend/tests/components/search/SearchBar.test.tsx
@@ -0,0 +1,49 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import React from "react";
+import SearchBar from "../../../src/components/search/SearchBar";
+import { axe } from "jest-axe";
+
+// Mock the hook since it's used in the component
+const mockUpdateQueryParams = jest.fn();
+
+jest.mock("../../../src/hooks/useSearchParamUpdater", () => ({
+  useSearchParamUpdater: () => ({
+    updateQueryParams: mockUpdateQueryParams,
+  }),
+}));
+
+describe("SearchBar", () => {
+  const initialQueryParams = "initial query";
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchBar initialQueryParams={initialQueryParams} />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("updates the input value when typing in the search field", () => {
+    render(<SearchBar initialQueryParams={initialQueryParams} />);
+
+    const input = screen.getByRole("searchbox");
+    fireEvent.change(input, { target: { value: "new query" } });
+
+    expect(input).toHaveValue("new query");
+  });
+
+  it("calls updateQueryParams with the correct argument when submitting the form", () => {
+    render(<SearchBar initialQueryParams={initialQueryParams} />);
+
+    const input = screen.getByRole("searchbox");
+    fireEvent.change(input, { target: { value: "new query" } });
+
+    const searchButton = screen.getByRole("button", { name: /search/i });
+    fireEvent.click(searchButton);
+
+    expect(mockUpdateQueryParams).toHaveBeenCalledWith("new query", "query");
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx
new file mode 100644
index 000000000..65934258e
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx
@@ -0,0 +1,152 @@
+import "@testing-library/jest-dom/extend-expect";
+
+import SearchFilterAccordion, {
+  FilterOption,
+} from "../../../../src/components/search/SearchFilterAccordion/SearchFilterAccordion";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import React from "react";
+import { axe } from "jest-axe";
+
+const initialFilterOptions: FilterOption[] = [
+  {
+    id: "funding-instrument-cooperative_agreement",
+    label: "Cooperative Agreement",
+    value: "cooperative_agreement",
+  },
+  {
+    id: "funding-instrument-grant",
+    label: "Grant",
+    value: "grant",
+  },
+  {
+    id: "funding-instrument-procurement_contract",
+    label: "Procurement Contract ",
+    value: "procurement_contract",
+  },
+  {
+    id: "funding-instrument-other",
+    label: "Other",
+    value: "other",
+  },
+];
+
+describe("SearchFilterAccordion", () => {
+  const title = "Test Accordion";
+  const queryParamKey = "status";
+  const initialQueryParams = new Set("");
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchFilterAccordion
+        initialFilterOptions={initialFilterOptions}
+        title={title}
+        queryParamKey={queryParamKey}
+        initialQueryParams={initialQueryParams}
+        formRef={React.createRef()}
+      />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("displays the correct checkbox labels", () => {
+    render(
+      <SearchFilterAccordion
+        initialFilterOptions={initialFilterOptions}
+        title={title}
+        queryParamKey={queryParamKey}
+        initialQueryParams={initialQueryParams}
+        formRef={React.createRef()}
+      />,
+    );
+
+    expect(screen.getByText("Cooperative Agreement")).toBeInTheDocument();
+    expect(screen.getByText("Grant")).toBeInTheDocument();
+    expect(screen.getByText("Procurement Contract")).toBeInTheDocument();
+    expect(screen.getByText("Other")).toBeInTheDocument();
+  });
+
+  it("displays select all and clear all correctly", () => {
+    render(
+      <SearchFilterAccordion
+        initialFilterOptions={initialFilterOptions}
+        title={title}
+        queryParamKey={queryParamKey}
+        initialQueryParams={initialQueryParams}
+        formRef={React.createRef()}
+      />,
+    );
+
+    const selectAllButton = screen.getByText("Select All");
+    expect(selectAllButton).toBeInTheDocument();
+    expect(selectAllButton).toBeEnabled();
+
+    const clearAllButton = screen.getByText("Clear All");
+    expect(clearAllButton).toBeInTheDocument();
+    expect(clearAllButton).toBeDisabled();
+
+    const cooperativeAgreementCheckbox = screen.getByLabelText(
+      "Cooperative Agreement",
+    );
+
+    // after clicking one of the boxes, both select all and clear all should be enabled
+    fireEvent.click(cooperativeAgreementCheckbox);
+    expect(selectAllButton).toBeEnabled();
+    expect(clearAllButton).toBeEnabled();
+  });
+
+  it("has hidden attribute when collapsed", () => {
+    render(
+      <SearchFilterAccordion
+        initialFilterOptions={initialFilterOptions}
+        title={title}
+        queryParamKey={queryParamKey}
+        initialQueryParams={initialQueryParams}
+        formRef={React.createRef()}
+      />,
+    );
+
+    const accordionToggleButton = screen.getByTestId(
+      "accordionButton_funding-instrument-filter",
+    );
+    const contentDiv = screen.getByTestId(
+      "accordionItem_funding-instrument-filter",
+    );
+    expect(contentDiv).toHaveAttribute("hidden");
+
+    // Toggle the accordion and the hidden attribute should be removed
+    fireEvent.click(accordionToggleButton);
+    expect(contentDiv).not.toHaveAttribute("hidden");
+  });
+
+  it("checks boxes correctly and updates count", () => {
+    render(
+      <SearchFilterAccordion
+        initialFilterOptions={initialFilterOptions}
+        title={title}
+        queryParamKey={queryParamKey}
+        initialQueryParams={initialQueryParams}
+        formRef={React.createRef()}
+      />,
+    );
+
+    const cooperativeAgreementCheckbox = screen.getByLabelText(
+      "Cooperative Agreement",
+    );
+    fireEvent.click(cooperativeAgreementCheckbox);
+
+    const grantCheckbox = screen.getByLabelText("Grant");
+    fireEvent.click(grantCheckbox);
+
+    // Verify the count updates to 2
+    const countSpan = screen.getByText("2", {
+      selector: ".usa-tag.usa-tag--big.radius-pill.margin-left-1",
+    });
+    expect(countSpan).toBeInTheDocument();
+
+    // Verify the checkboxes are checked
+    expect(cooperativeAgreementCheckbox).toBeChecked();
+    expect(grantCheckbox).toBeChecked();
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterCheckbox.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterCheckbox.test.tsx
new file mode 100644
index 000000000..c76242906
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterCheckbox.test.tsx
@@ -0,0 +1,74 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import React from "react";
+import SearchFilterCheckbox from "../../../../src/components/search/SearchFilterAccordion/SearchFilterCheckbox";
+import { axe } from "jest-axe";
+
+const mockIncrement = jest.fn();
+const mockDecrement = jest.fn();
+const mockUpdateCheckedOption = jest.fn();
+const option = {
+  id: "test-option",
+  label: "Test Option",
+  value: "test",
+  isChecked: false,
+};
+describe("SearchFilterCheckbox", () => {
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchFilterCheckbox
+        option={option}
+        increment={mockIncrement}
+        decrement={mockDecrement}
+        mounted={true}
+        updateCheckedOption={mockUpdateCheckedOption}
+        accordionTitle={"Test Accordion"}
+      />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("calls the appropriate handlers when the checkbox is clicked", async () => {
+    render(
+      <SearchFilterCheckbox
+        option={option}
+        increment={mockIncrement}
+        decrement={mockDecrement}
+        mounted={true}
+        updateCheckedOption={mockUpdateCheckedOption}
+        accordionTitle={"Test Accordion"}
+      />,
+    );
+
+    // Simulate user clicking the checkbox
+    const checkbox = screen.getByLabelText(option.label);
+    fireEvent.click(checkbox);
+
+    // Wait for the increment function to be called
+    await waitFor(() => {
+      expect(mockIncrement).toHaveBeenCalledTimes(1);
+    });
+
+    // Wait for the updateCheckedOption function to be called with the checkbox being checked
+    await waitFor(() => {
+      expect(mockUpdateCheckedOption).toHaveBeenCalledWith(option.id, true);
+    });
+
+    // Simulate user clicking the checkbox again to uncheck it
+    fireEvent.click(checkbox);
+
+    // TODO (Issue #1618): Resolve issues with unchecking
+
+    // await waitFor(() => {
+    //   expect(mockDecrement).toHaveBeenCalledTimes(1);
+    // });
+
+    // // Wait for the updateCheckedOption function to be called with the checkbox being unchecked
+    // await waitFor(() => {
+    //   expect(mockUpdateCheckedOption).toHaveBeenCalledWith(option.id, false);
+    // });
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SearchFilterSection.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SearchFilterSection.test.tsx
new file mode 100644
index 000000000..8a77b3163
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SearchFilterSection.test.tsx
@@ -0,0 +1,98 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import React from "react";
+import SearchFilterSection from "../../../../../src/components/search/SearchFilterAccordion/SearchFilterSection/SearchFilterSection";
+import { axe } from "jest-axe";
+
+const defaultProps = {
+  option: {
+    id: "1",
+    label: "Option 1",
+    value: "some value",
+    children: [
+      {
+        id: "1-1",
+        label: "Child 1",
+        isChecked: false,
+        value: "1st child value",
+      },
+      {
+        id: "1-2",
+        label: "Child 2",
+        isChecked: true,
+        value: "2nd child value",
+      },
+    ],
+  },
+  incrementTotal: jest.fn(),
+  decrementTotal: jest.fn(),
+  mounted: true,
+  updateCheckedOption: jest.fn(),
+  toggleSelectAll: jest.fn(),
+  accordionTitle: "Default Title",
+  isSectionAllSelected: false,
+  isSectionNoneSelected: true,
+};
+
+describe("SearchFilterSection", () => {
+  it("should not have accessibility violations", async () => {
+    const { container } = render(<SearchFilterSection {...defaultProps} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("toggles children visibility on button click", () => {
+    render(<SearchFilterSection {...defaultProps} />);
+
+    // Section is collapsed on not visible
+    expect(screen.queryByText("Select All")).not.toBeInTheDocument();
+    expect(screen.queryByText("Clear All")).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("checkbox", { name: "Child 1" }),
+    ).not.toBeInTheDocument();
+
+    // uncollapse section
+    fireEvent.click(screen.getByRole("button"));
+
+    // Toggle all links and checkbox appear
+    expect(screen.getByText("Select All")).toBeInTheDocument();
+    expect(screen.getByText("Clear All")).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Child 1" }),
+    ).toBeInTheDocument();
+  });
+
+  it("correctly updates the section count", async () => {
+    // Render the component with default props
+    render(<SearchFilterSection {...defaultProps} />);
+
+    // Just 1 is checked initially, so count should be 1
+    const countSpanAsOne = screen.getByText("1", { selector: ".usa-tag" });
+    expect(countSpanAsOne).toBeInTheDocument();
+
+    // uncollapse section
+    fireEvent.click(screen.getByRole("button"));
+
+    // Check the 1st box in the section
+    const checkboxForChild1 = screen.getByLabelText("Child 1");
+    fireEvent.click(checkboxForChild1);
+
+    await waitFor(() => {
+      // count should now be 2
+      expect(
+        screen.getByText("2", { selector: ".usa-tag" }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("renders hidden inputs for checked children when collapsed", () => {
+    // checkbox "1-2" is checked, but when the section is collapsed we still need to send the value
+    // to the form to submit, so we use a hidden input. It must be present.
+    render(<SearchFilterSection {...defaultProps} />);
+    const hiddenInput = screen.getByDisplayValue("on");
+    expect(hiddenInput).toBeInTheDocument();
+    expect(hiddenInput).toHaveAttribute("name", "1-2");
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkCount.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkCount.test.tsx
new file mode 100644
index 000000000..0b00fe4f7
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkCount.test.tsx
@@ -0,0 +1,26 @@
+import "@testing-library/jest-dom";
+
+import { render, screen } from "@testing-library/react";
+
+import React from "react";
+import SectionLinkCount from "../../../../../src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkCount";
+import { axe } from "jest-axe";
+
+describe("SectionLinkCount", () => {
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(<SectionLinkCount sectionCount={5} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders the count when sectionCount is greater than 0", () => {
+    const sectionCount = 5;
+    render(<SectionLinkCount sectionCount={sectionCount} />);
+    expect(screen.getByText(sectionCount.toString())).toBeInTheDocument();
+  });
+
+  it("does not render the count when sectionCount is 0", () => {
+    render(<SectionLinkCount sectionCount={0} />);
+    expect(screen.queryByText("0")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.test.tsx
new file mode 100644
index 000000000..66fed544a
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel.test.tsx
@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+
+import { render, screen } from "@testing-library/react";
+
+import { FilterOption } from "../../../../../src/components/search/SearchFilterAccordion/SearchFilterAccordion";
+import React from "react";
+import SectionLinkLabel from "../../../../../src/components/search/SearchFilterAccordion/SearchFilterSection/SectionLinkLabel";
+import { axe } from "jest-axe";
+
+// Mock the Icon component from "@trussworks/react-uswds"
+jest.mock("@trussworks/react-uswds", () => ({
+  Icon: {
+    ArrowDropUp: () => <span>ArrowDropUp Icon</span>,
+    ArrowDropDown: () => <span>ArrowDropDown Icon</span>,
+  },
+}));
+
+describe("SectionLinkLabel", () => {
+  const optionMock: FilterOption = {
+    id: "test ud",
+    label: "Test Label",
+    value: "test value",
+  };
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SectionLinkLabel childrenVisible={false} option={optionMock} />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders with the dropdown icon when children are not visible", () => {
+    render(<SectionLinkLabel childrenVisible={false} option={optionMock} />);
+    expect(screen.getByText("ArrowDropDown Icon")).toBeInTheDocument();
+    expect(screen.getByText(optionMock.label)).toBeInTheDocument();
+  });
+
+  it("renders with the dropup icon when children are visible", () => {
+    render(<SectionLinkLabel childrenVisible={true} option={optionMock} />);
+    expect(screen.getByText("ArrowDropUp Icon")).toBeInTheDocument();
+    expect(screen.getByText(optionMock.label)).toBeInTheDocument();
+  });
+});
diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterToggleAll.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterToggleAll.test.tsx
new file mode 100644
index 000000000..75984d5d3
--- /dev/null
+++ b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterToggleAll.test.tsx
@@ -0,0 +1,83 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import React from "react";
+import SearchFilterToggleAll from "../../../../src/components/search/SearchFilterAccordion/SearchFilterToggleAll";
+import { axe } from "jest-axe";
+
+describe("SearchFilterToggleAll", () => {
+  const mockOnSelectAll = jest.fn();
+  const mockOnClearAll = jest.fn();
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchFilterToggleAll
+        onSelectAll={mockOnSelectAll}
+        onClearAll={mockOnClearAll}
+        isAllSelected={false}
+        isNoneSelected={false}
+      />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('calls onSelectAll when "Select All" is clicked', () => {
+    render(
+      <SearchFilterToggleAll
+        onSelectAll={mockOnSelectAll}
+        onClearAll={mockOnClearAll}
+        isAllSelected={false}
+        isNoneSelected={false}
+      />,
+    );
+
+    const selectAllButton = screen.getByText("Select All");
+    fireEvent.click(selectAllButton);
+    expect(mockOnSelectAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClearAll when "Clear All" is clicked', () => {
+    render(
+      <SearchFilterToggleAll
+        onSelectAll={mockOnSelectAll}
+        onClearAll={mockOnClearAll}
+        isAllSelected={false}
+        isNoneSelected={false}
+      />,
+    );
+
+    const clearAllButton = screen.getByText("Clear All");
+    fireEvent.click(clearAllButton);
+    expect(mockOnClearAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables "Select All" button when all items are selected', () => {
+    render(
+      <SearchFilterToggleAll
+        onSelectAll={mockOnSelectAll}
+        onClearAll={mockOnClearAll}
+        isAllSelected={true}
+        isNoneSelected={false}
+      />,
+    );
+
+    const selectAllButton = screen.getByText("Select All");
+    expect(selectAllButton).toBeDisabled();
+  });
+
+  it('disables "Clear All" button when no items are selected', () => {
+    render(
+      <SearchFilterToggleAll
+        onSelectAll={mockOnSelectAll}
+        onClearAll={mockOnClearAll}
+        isAllSelected={false}
+        isNoneSelected={true}
+      />,
+    );
+
+    const clearAllButton = screen.getByText("Clear All");
+    expect(clearAllButton).toBeDisabled();
+  });
+});
diff --git a/frontend/tests/components/search/SearchPagination.test.tsx b/frontend/tests/components/search/SearchPagination.test.tsx
new file mode 100644
index 000000000..49ed5e00b
--- /dev/null
+++ b/frontend/tests/components/search/SearchPagination.test.tsx
@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import React from "react";
+import SearchPagination from "../../../src/components/search/SearchPagination";
+import { axe } from "jest-axe";
+
+describe("SearchPagination", () => {
+  const mockHandlePageChange = jest.fn();
+  const totalPages = 10;
+  const page = 1;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchPagination
+        showHiddenInput={true}
+        totalPages={totalPages}
+        page={page}
+        handlePageChange={mockHandlePageChange}
+      />,
+    );
+    const results = await axe(container, {
+      rules: {
+        // Disable specific rules that are known to fail due to third-party components
+        list: { enabled: false },
+        "svg-img-alt": { enabled: false },
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders hidden input when showHiddenInput is true", () => {
+    render(
+      <SearchPagination
+        showHiddenInput={true}
+        totalPages={totalPages}
+        page={page}
+        handlePageChange={mockHandlePageChange}
+      />,
+    );
+
+    const hiddenInput = screen.getByTestId("hiddenCurrentPage");
+    expect(hiddenInput).toHaveValue("1");
+  });
+
+  it("does not render hidden input when showHiddenInput is false", () => {
+    render(
+      <SearchPagination
+        showHiddenInput={false}
+        totalPages={totalPages}
+        page={page}
+        handlePageChange={mockHandlePageChange}
+      />,
+    );
+    expect(screen.queryByTestId("hiddenCurrentPage")).not.toBeInTheDocument();
+  });
+
+  it("calls handlePageChange with next page on next button click", () => {
+    render(
+      <SearchPagination
+        showHiddenInput={true}
+        totalPages={totalPages}
+        page={page}
+        handlePageChange={mockHandlePageChange}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Next page"));
+    expect(mockHandlePageChange).toHaveBeenCalledWith(page + 1);
+  });
+
+  it("calls handlePageChange with previous page on previous button click", () => {
+    render(
+      <SearchPagination
+        showHiddenInput={true}
+        totalPages={totalPages}
+        page={2} // Set to second page to test going back to first page
+        handlePageChange={mockHandlePageChange}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Previous page"));
+    expect(mockHandlePageChange).toHaveBeenCalledWith(1);
+  });
+});
diff --git a/frontend/tests/components/search/SearchResultsHeader.test.tsx b/frontend/tests/components/search/SearchResultsHeader.test.tsx
new file mode 100644
index 000000000..50a9fcb23
--- /dev/null
+++ b/frontend/tests/components/search/SearchResultsHeader.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+
+import React from "react";
+import SearchResultsHeader from "../../../src/components/search/SearchResultsHeader";
+import { axe } from "jest-axe";
+
+jest.mock("../../../src/components/search/SearchSortBy", () => {
+  return {
+    __esModule: true,
+    default: () => <div>Mock SearchSortBy</div>,
+  };
+});
+
+describe("SearchResultsHeader", () => {
+  const initialQueryParams = "";
+  const formRef = React.createRef<HTMLFormElement>();
+
+  it("should not have basic accessibility issues", async () => {
+    const searchResultsLength = 100;
+    const { container } = render(
+      <SearchResultsHeader
+        searchResultsLength={searchResultsLength}
+        formRef={formRef}
+        initialQueryParams={initialQueryParams}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders correctly and displays the number of opportunities", () => {
+    const searchResultsLength = 100;
+    render(
+      <SearchResultsHeader
+        searchResultsLength={searchResultsLength}
+        formRef={formRef}
+        initialQueryParams={initialQueryParams}
+      />,
+    );
+
+    expect(screen.getByText("100 Opportunities")).toBeInTheDocument();
+    expect(screen.getByText("Mock SearchSortBy")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/tests/components/search/SearchResultsListItem.test.tsx b/frontend/tests/components/search/SearchResultsListItem.test.tsx
new file mode 100644
index 000000000..0a7a255b1
--- /dev/null
+++ b/frontend/tests/components/search/SearchResultsListItem.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+
+import { Opportunity } from "../../../src/types/search/searchResponseTypes";
+import React from "react";
+import SearchResultsListItem from "../../../src/components/search/SearchResultsListItem";
+import { axe } from "jest-axe";
+
+const mockOpportunity: Opportunity = {
+  opportunity_id: 12345,
+  opportunity_title: "Test Opportunity",
+  opportunity_status: "posted",
+  summary: {
+    archive_date: "2023-01-01",
+    close_date: "2023-02-01",
+    post_date: "2023-01-15",
+    agency_name: "Test Agency",
+    award_ceiling: 50000,
+    award_floor: 10000,
+  },
+  opportunity_number: "OPP-12345",
+} as Opportunity;
+
+describe("SearchResultsListItem", () => {
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchResultsListItem opportunity={mockOpportunity} />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders opportunity title and number", () => {
+    render(<SearchResultsListItem opportunity={mockOpportunity} />);
+    expect(screen.getByText("Test Opportunity")).toBeInTheDocument();
+    expect(screen.getByText("OPP-12345")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/tests/components/search/SearchSortBy.test.tsx b/frontend/tests/components/search/SearchSortBy.test.tsx
new file mode 100644
index 000000000..3dff473bd
--- /dev/null
+++ b/frontend/tests/components/search/SearchSortBy.test.tsx
@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import React from "react";
+import SearchSortBy from "../../../src/components/search/SearchSortBy";
+import { axe } from "jest-axe";
+
+// Mock the useSearchParamUpdater hook
+jest.mock("../../../src/hooks/useSearchParamUpdater", () => ({
+  useSearchParamUpdater: () => ({
+    updateQueryParams: jest.fn(),
+  }),
+}));
+
+describe("SearchSortBy", () => {
+  const initialQueryParams = "opportunityNumberAsc";
+  const mockFormRef = React.createRef<HTMLFormElement>();
+
+  it("should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <SearchSortBy
+        formRef={mockFormRef}
+        initialQueryParams={initialQueryParams}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders correctly with initial query params", () => {
+    render(
+      <SearchSortBy
+        formRef={mockFormRef}
+        initialQueryParams={initialQueryParams}
+      />,
+    );
+
+    expect(
+      screen.getByDisplayValue("Opportunity Number (Ascending)"),
+    ).toBeInTheDocument();
+  });
+
+  it("updates sort option and submits the form on change", () => {
+    const formElement = document.createElement("form");
+    const requestSubmitMock = jest.fn();
+    formElement.requestSubmit = requestSubmitMock;
+
+    render(
+      <SearchSortBy
+        formRef={{ current: formElement }}
+        initialQueryParams={initialQueryParams}
+      />,
+    );
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "opportunityTitleDesc" },
+    });
+
+    expect(
+      screen.getByDisplayValue("Opportunity Title (Descending)"),
+    ).toBeInTheDocument();
+
+    expect(requestSubmitMock).toHaveBeenCalled();
+  });
+});