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" },
+];