[Issue HHS#2040] Hide pagination component if no results are found (#175

)

Fixes HHS#2040

> Updated pagination component to hide if there are no results.
Previously it would show 7 pages that you could navigate between, all
with no results.

Updated all unit tests for pagination component. They were broken and
commented out previously.

![2024-08-08 15 45
10](https://github.com/user-attachments/assets/27e8dc6a-dddd-4c52-8086-4cd4579d73fe)

frontend/src/components/search/SearchPagination.tsx

@@ -42,17 +42,19 @@ export default function SearchPagination({
 
   return (
     <div className={`grants-pagination ${loading ? "disabled" : ""}`}>
-      <Pagination
-        pathname="/search"
-        totalPages={pages}
-        currentPage={page}
-        maxSlots={MAX_SLOTS}
-        onClickNext={() => updatePage(page + 1)}
-        onClickPrevious={() => updatePage(page > 1 ? page - 1 : 0)}
-        onClickPageNumber={(event: React.MouseEvent, page: number) =>
-          updatePage(page)
-        }
-      />
+      {pages > 0 && (
+        <Pagination
+          pathname="/search"
+          totalPages={pages}
+          currentPage={page}
+          maxSlots={MAX_SLOTS}
+          onClickNext={() => updatePage(page + 1)}
+          onClickPrevious={() => updatePage(page > 1 ? page - 1 : 0)}
+          onClickPageNumber={(event: React.MouseEvent, page: number) =>
+            updatePage(page)
+          }
+        />
+      )}
     </div>
   );
 }

frontend/tests/components/search/SearchPagination.test.tsx

@@ -1,29 +1,26 @@
-/* eslint-disable jest/no-commented-out-tests */
+/* eslint-disable testing-library/no-node-access */
 import "@testing-library/jest-dom/extend-expect";
+import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
-import { render } from "tests/react-utils";
 import React from "react";
 import SearchPagination from "src/components/search/SearchPagination";
 
-const mockUpdateQueryParams = jest.fn();
-
+// Mock the useSearchParamUpdater hook
 jest.mock("src/hooks/useSearchParamUpdater", () => ({
   useSearchParamUpdater: () => ({
-    updateQueryParams: mockUpdateQueryParams,
+    updateQueryParams: jest.fn(),
   }),
 }));
 
-// import SearchPagination, {
-//   PaginationPosition,
-// } from "../../../src/components/search/SearchPagination";
-
-// import { render } from "@testing-library/react";
+beforeEach(() => {
+  jest.clearAllMocks();
+});
 
-// TODO (Issue #1936): Uncomment tests after React 19 upgrade
 describe("SearchPagination", () => {
-  it("pass test", () => {
-    expect(1).toBe(1);
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
+
   it("should not have basic accessibility issues", async () => {
     const { container } = render(<SearchPagination page={1} query={"test"} />);
 
@@ -36,73 +33,14 @@ describe("SearchPagination", () => {
     });
     expect(results).toHaveNoViolations();
   });
+  it("Renders Pagination component when pages > 0", () => {
+    render(<SearchPagination page={1} query={"test"} total={10} />);
 
-  //   it("renders hidden input when showHiddenInput is true", () => {
-  //     render(
-  //       <SearchPagination
-  //         showHiddenInput={true}
-  //         totalPages={totalPages}
-  //         page={page}
-  //         handlePageChange={mockHandlePageChange}
-  //         position={PaginationPosition.Top}
-  //       />,
-  //     );
-
-  //     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}
-  //         position={PaginationPosition.Top}
-  //       />,
-  //     );
-  //     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}
-  //         position={PaginationPosition.Top}
-  //       />,
-  //     );
-  //     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}
-  //         position={PaginationPosition.Top}
-  //       />,
-  //     );
-  //     fireEvent.click(screen.getByLabelText("Previous page"));
-  //     expect(mockHandlePageChange).toHaveBeenCalledWith(1);
-  //   });
+    expect(screen.getByRole("navigation")).toBeInTheDocument();
+  });
+  it("Does not render Pagination component when pages <= 0", () => {
+    render(<SearchPagination page={1} query={"test"} total={0} />);
 
-  //   it("returns null when searchResultsLength is less than 1", () => {
-  //     const { container } = render(
-  //       <SearchPagination
-  //         showHiddenInput={true}
-  //         page={page}
-  //         handlePageChange={mockHandlePageChange}
-  //         searchResultsLength={0} // No results, pagination should be hidden
-  //         position={PaginationPosition.Top}
-  //       />,
-  //     );
-  //     expect(container).toBeEmptyDOMElement();
-  //   });
+    expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
+  });
 });