Paragraph-level links, preview tooltips

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

@@ -1,30 +1,18 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { examples } from "../../lib/examples";
-import useNavState from "../../store/navStore";
+import useNavStore 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 />);
+    const { getByLabelText, getAllByRole, getByRole } = render(
+      <CelexSelector />
+    );
 
-    expect(screen.getByLabelText("Select example:")).toBeInTheDocument();
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(getByLabelText("Select example:")).toBeInTheDocument();
+    expect(getByRole("combobox")).toBeInTheDocument();
 
-    const options = screen.getAllByRole("option");
+    const options = getAllByRole("option");
     expect(options).toHaveLength(examples.length);
     for (const i in examples) {
       expect(options[i]).toHaveValue(examples[i].id);
@@ -32,28 +20,15 @@ describe("CelexSelector", () => {
     }
   });
 
-  it("calls setCelexId and setArticleId on selection change", () => {
-    const celexId = "32016R0679";
-    render(<CelexSelector />);
+  it("calls setCelexId and setArticleId on selection change", async () => {
+    const celexId = examples[2].id;
+    const { getByRole } = render(<CelexSelector />);
 
-    fireEvent.change(screen.getByRole("combobox"), {
+    fireEvent.change(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);
+    expect(useNavStore.getState().celexId).toEqual(celexId);
+    expect(useNavStore.getState().articleId).toEqual(1);
   });
 });