diff --git a/frontend/src/components/ArticleSelector/ArticleSelector.tsx b/frontend/src/components/ArticleSelector/ArticleSelector.tsx index a1a476d..4388915 100644 --- a/frontend/src/components/ArticleSelector/ArticleSelector.tsx +++ b/frontend/src/components/ArticleSelector/ArticleSelector.tsx @@ -38,18 +38,17 @@ function ArticleSelector({ toc }: ArticleSelectorProps) { } return ( - <> - - + ); } diff --git a/frontend/src/components/CelexSelector/CelexSelector.test.tsx b/frontend/src/components/CelexSelector/CelexSelector.test.tsx new file mode 100644 index 0000000..2bed4e7 --- /dev/null +++ b/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(); + + 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(); + + 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(); + + expect(screen.getByRole("combobox")).toHaveValue(mockCelexId); + }); +}); diff --git a/frontend/src/components/CelexSelector/CelexSelector.tsx b/frontend/src/components/CelexSelector/CelexSelector.tsx index 77c6e0e..8698051 100644 --- a/frontend/src/components/CelexSelector/CelexSelector.tsx +++ b/frontend/src/components/CelexSelector/CelexSelector.tsx @@ -1,11 +1,6 @@ +import { examples } from "../../lib/examples"; import useNavState from "../../store/navStore"; -const examples = [ - { name: "GDPR", id: "32016R0679" }, - { name: "AI Act", id: "32024R1689" }, - { name: "Cyber Resilience Act", id: "32024R2847" }, -]; - function CelexSelector() { const { celexId, setCelexId, setArticleId } = useNavState(); diff --git a/frontend/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx b/frontend/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx index 27fdcb9..c31f740 100644 --- a/frontend/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx +++ b/frontend/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx @@ -3,35 +3,42 @@ import userEvent from "@testing-library/user-event"; import { Language } from "../../lib/types"; import LanguageSwitcher from "./LanguageSwitcher"; -const renderSwitcher = (onChange = () => {}, defaultLang = Language.ENG) => { - render(); -}; - -test("renders LanguageSwitcher component", async () => { - renderSwitcher(); - const switcher = screen.getByTestId("language-switcher") as HTMLSelectElement; - - expect(switcher.value).toBe(Language.ENG); -}); - -test("calls onChange handler when a new language is selected", async () => { +describe("LanguageSwitcher", () => { const mockOnChange = jest.fn(); - renderSwitcher(mockOnChange); + const renderSwitcher = ( + onChange = mockOnChange, + defaultLang = Language.ENG + ) => { + render(); + }; - const switcher = screen.getByTestId("language-switcher") as HTMLSelectElement; + beforeEach(() => { + jest.clearAllMocks(); + }); - await userEvent.selectOptions(switcher, Language.ESP); - expect(mockOnChange).toHaveBeenCalledWith(Language.ESP); -}); + test("renders with correct default language", async () => { + renderSwitcher(); -test("renders all language options correctly", () => { - renderSwitcher(); - const options = screen.getAllByRole("option"); - const languageValues = Object.values(Language); + expect(screen.getByRole("combobox")).toHaveValue(Language.ENG); + }); - expect(options).toHaveLength(languageValues.length); - languageValues.forEach((lang, index) => { - expect(options[index]).toHaveValue(lang); - expect(options[index]).toHaveTextContent(lang.toUpperCase()); + test("calls onChange handler when a new language is selected", async () => { + renderSwitcher(); + + await userEvent.selectOptions(screen.getByRole("combobox"), Language.ESP); + + expect(mockOnChange).toHaveBeenCalledWith(Language.ESP); + }); + + test("renders all language options correctly", () => { + renderSwitcher(); + + const options = screen.getAllByRole("option"); + const languageValues = Object.values(Language); + expect(options).toHaveLength(languageValues.length); + languageValues.forEach((lang, index) => { + expect(options[index]).toHaveValue(lang); + expect(options[index]).toHaveTextContent(lang.toUpperCase()); + }); }); }); diff --git a/frontend/src/lib/examples.ts b/frontend/src/lib/examples.ts new file mode 100644 index 0000000..95d1e21 --- /dev/null +++ b/frontend/src/lib/examples.ts @@ -0,0 +1,5 @@ +export const examples = [ + { name: "GDPR", id: "32016R0679" }, + { name: "AI Act", id: "32024R1689" }, + { name: "Cyber Resilience Act", id: "32024R2847" }, +];