Test mobile search behaviour when pagination becomes visible

frontend/src/test/CatalogueControls.test.tsx

@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CatalogueControls from "../components/CatalogueControls";
+import { useArtists } from "../hooks/useArtists";
+import type { ComponentProps } from "react";
+
+vi.mock("../hooks/useArtists", () => ({
+  useArtists: vi.fn(),
+}));
+
+const mockedUseArtists = vi.mocked(useArtists);
+
+function createProps(): ComponentProps<typeof CatalogueControls> {
+  return {
+    onSearch: vi.fn(),
+    artist: "",
+    onArtistChange: vi.fn(),
+    sort: undefined,
+    onSortChange: vi.fn(),
+    totalCount: 25,
+    onReset: vi.fn(),
+    showFilters: false,
+    onToggleFilters: vi.fn(),
+    paginationVisible: false,
+  };
+}
+
+describe("CatalogueControls mobile search", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+
+    mockedUseArtists.mockReturnValue({
+      artists: [],
+      loading: false,
+      error: "",
+    });
+  });
+
+  it("closes mobile search when pagination appears and allows reopening later", async () => {
+    const user = userEvent.setup();
+    const props = createProps();
+
+    const { rerender } = render(<CatalogueControls {...props} />);
+
+    const findMobileSearch = () =>
+      screen.queryByLabelText("Search artworks by title or artist", {
+        selector: "#mobile-artwork-search",
+      });
+
+    expect(findMobileSearch()).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Open search" }));
+
+    expect(findMobileSearch()).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Close search" }),
+    ).toHaveAttribute("aria-expanded", "true");
+
+    rerender(<CatalogueControls {...props} paginationVisible={true} />);
+
+    expect(findMobileSearch()).not.toBeInTheDocument();
+
+    rerender(<CatalogueControls {...props} paginationVisible={false} />);
+
+    expect(findMobileSearch()).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open search" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open search" }));
+
+    expect(findMobileSearch()).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Close search" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+});