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,24 +7,27 @@ type ArticleSelectorProps = {
   toc: Division[];
 };
 
-function ArticleSelector({ toc }: ArticleSelectorProps) {
-  const { articleId, setArticleId } = useNavState();
-
+/**
+ * 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={c.id} value={c.id}>
-            {c.title}: {c.subtitle}
+        <option key={title} value={c.id}>
+          {title}
         </option>
       );
     }
   });
 
-    if (div.level === 0) {
   const title = `${div.title}: ${div.subtitle}`;
+  if (div.level === 0) {
     return (
       // For top-level divisions, we can use optgroup
       <optgroup key={title} label={title}>
@@ -33,21 +36,20 @@ function ArticleSelector({ toc }: ArticleSelectorProps) {
     );
   } else {
     // HTML does not support nested optgroups, so we need to flatten the structure
-      return <>{contents}</>;
+    return <Fragment key={title}>{contents}</Fragment>;
   }
 }
 
+function ArticleSelector({ toc }: ArticleSelectorProps) {
+  const { articleId, setArticleId } = useNavState();
+
   return (
     <select
-      data-testid="article-selector"
       value={articleId || undefined}
       className={styles.articleSelector}
-      onChange={(e) => {
-        const id = parseInt(e.target.value);
-        setArticleId(id);
-      }}
+      onChange={(e) => setArticleId(parseInt(e.target.value))}
     >
-      {toc.map((div) => renderDivision(div))}
+      {toc.map(renderDivision)}
     </select>
   );
 }

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