Tests and fixes for ArticleSelector component

frontend/src/components/ArticleSelector/ArticleSelector.test.tsx

@@ -0,0 +1,64 @@
+import { render } from "@testing-library/react";
+import type { Division } from "../../lib/types";
+import ArticleSelector from "./ArticleSelector";
+
+describe("ArticleSelector", () => {
+  const mockDivision: Division = {
+    type: "division",
+    title: "Chapter 1",
+    subtitle: "Introduction",
+    level: 0,
+    content: [
+      {
+        type: "division",
+        title: "Section 1.1",
+        subtitle: "Overview",
+        level: 2,
+        content: [
+          {
+            type: "article",
+            id: 1,
+            title: "Article 1",
+            subtitle: "Details",
+          },
+          {
+            type: "article",
+            id: 2,
+            title: "Article 2",
+            subtitle: "Summary",
+          },
+        ],
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders a top-level division as an optgroup", () => {
+    const { getByRole } = render(<ArticleSelector toc={[mockDivision]} />);
+
+    const optgroup = getByRole("group", {
+      name: "Chapter 1: Introduction",
+    });
+    expect(optgroup).toBeInTheDocument();
+  });
+
+  test("renders nested divisions as options", () => {
+    const { getByText } = render(<ArticleSelector toc={[mockDivision]} />);
+
+    const option1 = getByText("Article 1: Details");
+    const option2 = getByText("Article 2: Summary");
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).toBeInTheDocument();
+  });
+
+  test("flattens nested divisions correctly", () => {
+    const { container } = render(<ArticleSelector toc={[mockDivision]} />);
+
+    const options = container.querySelectorAll("option");
+    expect(options).toHaveLength(2); // Two options rendered
+  });
+});

frontend/src/components/ArticleSelector/ArticleSelector.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "react";
+import { Fragment, JSX } from "react";
 import type { Division } from "../../lib/types";
 import useNavState from "../../store/navStore";
 import styles from "./ArticleSelector.module.css";
@@ -7,49 +7,50 @@ type ArticleSelectorProps = {
   toc: Division[];
 };
 
+/**
+ * Renders a division and its contents as a nested structure of optgroups and options.
+ * @param {Division} div - The division to render.
+ * @returns {JSX.Element} The rendered division, suitable for use inside a `select` tag.
+ */
+function renderDivision(div: Division): JSX.Element {
+  const contents = div.content.map((c) => {
+    if (c.type === "division") {
+      return renderDivision(c);
+    } else {
+      const title = `${c.title}: ${c.subtitle}`;
+      return (
+        <option key={title} value={c.id}>
+          {title}
+        </option>
+      );
+    }
+  });
+
+  const title = `${div.title}: ${div.subtitle}`;
+  if (div.level === 0) {
+    return (
+      // For top-level divisions, we can use optgroup
+      <optgroup key={title} label={title}>
+        {contents}
+      </optgroup>
+    );
+  } else {
+    // HTML does not support nested optgroups, so we need to flatten the structure
+    return <Fragment key={title}>{contents}</Fragment>;
+  }
+}
+
 function ArticleSelector({ toc }: ArticleSelectorProps) {
   const { articleId, setArticleId } = useNavState();
 
-  function renderDivision(div: Division): JSX.Element {
-    const contents = div.content.map((c) => {
-      if (c.type === "division") {
-        return renderDivision(c);
-      } else {
-        return (
-          <option key={c.id} value={c.id}>
-            {c.title}: {c.subtitle}
-          </option>
-        );
-      }
-    });
-
-    if (div.level === 0) {
-      const title = `${div.title}: ${div.subtitle}`;
-      return (
-        // For top-level divisions, we can use optgroup
-        <optgroup key={title} label={title}>
-          {contents}
-        </optgroup>
-      );
-    } else {
-      // HTML does not support nested optgroups, so we need to flatten the structure
-      return <>{contents}</>;
-    }
-  }
-
   return (
-    <>
-      <select
-        value={articleId || undefined}
-        className={styles.articleSelector}
-        onChange={(e) => {
-          const id = parseInt(e.target.value);
-          setArticleId(id);
-        }}
-      >
-        {toc.map((div) => renderDivision(div))}
-      </select>
-    </>
+    <select
+      value={articleId || undefined}
+      className={styles.articleSelector}
+      onChange={(e) => setArticleId(parseInt(e.target.value))}
+    >
+      {toc.map(renderDivision)}
+    </select>
   );
 }
 

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);
+  });
+});

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();
 

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(<LanguageSwitcher defaultLang={defaultLang} onChange={onChange} />);
-};
-
-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(<LanguageSwitcher defaultLang={defaultLang} onChange={onChange} />);
+  };
 
-  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());
+    });
   });
 });

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

frontend/src/lib/types.ts

@@ -16,7 +16,7 @@ type Division = {
   title: string;
   subtitle: string;
   level: number;
-  content: Article[] | Division[];
+  content: (Article | Division)[];
 };
 
 export { Language };