More component tests

frontend/src/components/CelexSelector/CelexSelector.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { examples } from "../../lib/examples";
+import useNavState from "../../store/navStore";
+import CelexSelector from "./CelexSelector";
+
+jest.mock("../../store/navStore");
+
+describe("CelexSelector", () => {
+  const mockSetCelexId = jest.fn();
+  const mockSetArticleId = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(useNavState).mockReturnValue({
+      celexId: "",
+      setCelexId: mockSetCelexId,
+      setArticleId: mockSetArticleId,
+    });
+  });
+
+  it("renders the dropdown with options", () => {
+    render(<CelexSelector />);
+
+    expect(screen.getByLabelText("Select example:")).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(examples.length);
+    for (const i in examples) {
+      expect(options[i]).toHaveValue(examples[i].id);
+      expect(options[i]).toHaveTextContent(examples[i].name);
+    }
+  });
+
+  it("calls setCelexId and setArticleId on selection change", () => {
+    const celexId = "32016R0679";
+    render(<CelexSelector />);
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: celexId },
+    });
+
+    expect(mockSetCelexId).toHaveBeenCalledWith(celexId);
+    expect(mockSetArticleId).toHaveBeenCalledWith(1);
+  });
+
+  it("sets the correct value in the dropdown based on celexId", () => {
+    const mockCelexId = "32024R1689";
+    jest.mocked(useNavState).mockReturnValue({
+      celexId: mockCelexId,
+      setCelexId: mockSetCelexId,
+      setArticleId: mockSetArticleId,
+    });
+
+    render(<CelexSelector />);
+
+    expect(screen.getByRole("combobox")).toHaveValue(mockCelexId);
+  });
+});