diff --git a/frontend/src/components/search/SearchPagination.tsx b/frontend/src/components/search/SearchPagination.tsx index a23a30ea1..3249589d6 100644 --- a/frontend/src/components/search/SearchPagination.tsx +++ b/frontend/src/components/search/SearchPagination.tsx @@ -47,17 +47,19 @@ export default function SearchPagination({ opacity: loading ? 0.5 : 1, }} > - updatePage(page + 1)} - onClickPrevious={() => updatePage(page > 1 ? page - 1 : 0)} - onClickPageNumber={(event: React.MouseEvent, page: number) => - updatePage(page) - } - /> + {pages > 0 && ( + updatePage(page + 1)} + onClickPrevious={() => updatePage(page > 1 ? page - 1 : 0)} + onClickPageNumber={(event: React.MouseEvent, page: number) => + updatePage(page) + } + /> + )} ); } diff --git a/frontend/tests/components/search/SearchPagination.test.tsx b/frontend/tests/components/search/SearchPagination.test.tsx index bfbd28b0c..934581e29 100644 --- a/frontend/tests/components/search/SearchPagination.test.tsx +++ b/frontend/tests/components/search/SearchPagination.test.tsx @@ -1,29 +1,44 @@ /* eslint-disable jest/no-commented-out-tests */ import "@testing-library/jest-dom/extend-expect"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; import { axe } from "jest-axe"; -import { render } from "tests/react-utils"; import React from "react"; +import { QueryContext } from "src/app/[locale]/search/QueryProvider"; import SearchPagination from "src/components/search/SearchPagination"; +import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater"; -const mockUpdateQueryParams = jest.fn(); - +// Mocking the useSearchParamUpdater hook jest.mock("src/hooks/useSearchParamUpdater", () => ({ useSearchParamUpdater: () => ({ - updateQueryParams: mockUpdateQueryParams, + updateQueryParams: jest.fn(), }), })); -// import SearchPagination, { -// PaginationPosition, -// } from "../../../src/components/search/SearchPagination"; +// Create a mock QueryProvider +const mockUpdateQueryTerm = jest.fn(); +const mockUpdateTotalPages = jest.fn(); +const mockUpdateTotalResults = jest.fn(); -// import { render } from "@testing-library/react"; +const MockQueryProvider = ({ children }: { children: React.ReactNode }) => ( + + {children} + +); -// 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(); @@ -36,73 +51,121 @@ describe("SearchPagination", () => { }); expect(results).toHaveNoViolations(); }); + it("Renders Pagination component when pages > 0", () => { + render(); - // it("renders hidden input when showHiddenInput is true", () => { - // render( - // , - // ); + expect(screen.getByRole("navigation")).toBeInTheDocument(); + }); + it("Does not render Pagination component when pages <= 0", () => { + render(); - // const hiddenInput = screen.getByTestId("hiddenCurrentPage"); - // expect(hiddenInput).toHaveValue("1"); - // }); + expect(screen.queryByRole("navigation")).not.toBeInTheDocument(); + }); + it("calls updateQueryParams with correct arguments when page number is clicked", async () => { + const { updateQueryParams } = useSearchParamUpdater(); - // it("does not render hidden input when showHiddenInput is false", () => { - // render( - // , - // ); - // expect(screen.queryByTestId("hiddenCurrentPage")).not.toBeInTheDocument(); - // }); + render( + + + , + ); - // it("calls handlePageChange with next page on next button click", () => { - // render( - // , - // ); - // fireEvent.click(screen.getByLabelText("Next page")); - // expect(mockHandlePageChange).toHaveBeenCalledWith(page + 1); - // }); + // Simulate clicking a page number + fireEvent.click(screen.getByText("2")); + // Check if updateQueryParams was called with the correct arguments + waitFor(() => { + expect(updateQueryParams).toHaveBeenCalledWith( + "2", + "page", + "test", + false, + ); + }); + }); + it("disables interaction and reduces opacity when loading", () => { + render( + + + , + ); + const container = screen.getByText("Next").closest("div"); - // it("calls handlePageChange with previous page on previous button click", () => { - // render( - // , - // ); - // fireEvent.click(screen.getByLabelText("Previous page")); - // expect(mockHandlePageChange).toHaveBeenCalledWith(1); - // }); + // Check styles when loading + waitFor(() => { + expect(container).toHaveStyle("pointer-events: none"); + expect(container).toHaveStyle("opacity: 0.5"); + }); + }); + it("calls updateQueryParams with correct arguments when next is clicked", async () => { + const { updateQueryParams } = useSearchParamUpdater(); - // it("returns null when searchResultsLength is less than 1", () => { - // const { container } = render( - //