Add unit tests

(generated by Claude Opus 4.6)

Author: apdavison

apps/model_catalog/package-lock.json

@@ -36,19 +36,28 @@
         "preview": "vite preview",
         "serve:e2e": "vite --port 5173",
         "e2e": "npx cypress run --browser chrome",
-        "e2e:ci": "npx start-server-and-test serve:e2e http://localhost:5173 e2e"
+        "e2e:ci": "npx start-server-and-test serve:e2e http://localhost:5173 e2e",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage"
     },
     "devDependencies": {
         "@eslint/js": "^9.19.0",
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/user-event": "^13.5.0",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
         "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/coverage-v8": "^4.1.2",
         "cypress": "^13.17.0",
         "globals": "^15.14.0",
+        "jsdom": "^29.0.1",
         "prettier": "^2.3.0",
         "start-server-and-test": "^1.12.2",
         "vite": "^6.1.0",
         "vite-plugin-commonjs": "^0.10.4",
-        "vite-plugin-node-polyfills": "^0.23.0"
+        "vite-plugin-node-polyfills": "^0.23.0",
+        "vitest": "^4.1.2"
     }
 }

apps/model_catalog/package.json

@@ -0,0 +1,24 @@
+import React from "react";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "./helpers/renderWithProviders";
+import AuthWidget from "../AuthWidget";
+
+describe("AuthWidget", () => {
+    it("renders a Login button when no user is logged in", () => {
+        renderWithProviders(<AuthWidget currentUser={null} />);
+        expect(screen.getByRole("button", { name: /login/i })).toBeInTheDocument();
+    });
+
+    it("renders a person icon button when user is logged in", () => {
+        renderWithProviders(<AuthWidget currentUser="John Doe" />);
+        // The icon button should be present instead of a Login text button
+        expect(screen.queryByRole("button", { name: /login/i })).not.toBeInTheDocument();
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("shows the username in a tooltip when user is logged in", () => {
+        renderWithProviders(<AuthWidget currentUser="John Doe" />);
+        // The tooltip title is set to the currentUser prop
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});

apps/model_catalog/src/__tests__/AuthWidget.test.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ColoredCircularProgress from "../ColoredCircularProgress";
+
+describe("ColoredCircularProgress", () => {
+    it("renders a progress indicator", () => {
+        render(<ColoredCircularProgress />);
+        expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+});

apps/model_catalog/src/__tests__/ColoredCircularProgress.test.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import CompareMultiGraphs from "../CompareMultiGraphs";
+
+vi.mock("react-plotly.js", () => ({
+    default: () => <div data-testid="plotly-mock" />,
+}));
+
+vi.mock("react-plotly.js/factory", () => ({
+    default: () => () => <div data-testid="plotly-mock" />,
+}));
+
+vi.mock("plotly.js", () => ({}));
+
+describe("CompareMultiGraphs (smoke test)", () => {
+    it("renders without crashing with empty results", () => {
+        render(
+            <CompareMultiGraphs
+                results={[]}
+                model_ids={[]}
+                test_ids={[]}
+            />
+        );
+    });
+});

apps/model_catalog/src/__tests__/CompareMultiGraphs.test.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { renderWithProviders } from "./helpers/renderWithProviders";
+import { createMockDatastore } from "./helpers/mockDatastore";
+import CompareMultiResults from "../CompareMultiResults";
+
+vi.mock("../datastore", () => ({
+    datastore: createMockDatastore(),
+}));
+
+vi.mock("react-plotly.js", () => ({
+    default: () => <div data-testid="plotly-mock" />,
+}));
+
+vi.mock("react-plotly.js/factory", () => ({
+    default: () => () => <div data-testid="plotly-mock" />,
+}));
+
+describe("CompareMultiResults (smoke test)", () => {
+    it("renders without crashing", () => {
+        renderWithProviders(
+            <CompareMultiResults
+                open={true}
+                onClose={vi.fn()}
+            />
+        );
+    });
+});

apps/model_catalog/src/__tests__/CompareMultiResults.test.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ConfigDisplaySimple from "../ConfigDisplaySimple";
+
+describe("ConfigDisplaySimple", () => {
+    const defaultFilters = {
+        species: ["Rattus norvegicus"],
+        brain_region: ["CA1 field of hippocampus"],
+        cell_type: [],
+        model_scope: [],
+        abstraction_level: [],
+        test_type: [],
+        score_type: [],
+        recording_modality: [],
+        implementation_status: [],
+        project_id: [],
+    };
+
+    it("renders filter chips for active filters", () => {
+        render(
+            <ConfigDisplaySimple display="Models and Tests" filters={defaultFilters} />
+        );
+        expect(screen.getByText("Rattus norvegicus")).toBeInTheDocument();
+        expect(screen.getByText("CA1 field of hippocampus")).toBeInTheDocument();
+    });
+
+    it("renders no chips when all filters are empty", () => {
+        const emptyFilters = {
+            species: [],
+            brain_region: [],
+            cell_type: [],
+            model_scope: [],
+            abstraction_level: [],
+            test_type: [],
+            score_type: [],
+            recording_modality: [],
+            implementation_status: [],
+            project_id: [],
+        };
+        render(
+            <ConfigDisplaySimple display="Models and Tests" filters={emptyFilters} />
+        );
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("shows only model filters when display is Only Models", () => {
+        const filters = {
+            ...defaultFilters,
+            test_type: ["single cell"],
+        };
+        render(
+            <ConfigDisplaySimple display="Only Models" filters={filters} />
+        );
+        // Model filters should be shown
+        expect(screen.getByText("Rattus norvegicus")).toBeInTheDocument();
+        // Test-only filters should not be shown
+        expect(screen.queryByText("single cell")).not.toBeInTheDocument();
+    });
+
+    it("shows only test filters when display is Only Tests", () => {
+        const filters = {
+            ...defaultFilters,
+            model_scope: ["network"],
+            test_type: ["single cell"],
+        };
+        render(
+            <ConfigDisplaySimple display="Only Tests" filters={filters} />
+        );
+        // Test filters should be shown
+        expect(screen.getByText("single cell")).toBeInTheDocument();
+        // Model-only filters should not be shown
+        expect(screen.queryByText("network")).not.toBeInTheDocument();
+    });
+});

apps/model_catalog/src/__tests__/ConfigDisplaySimple.test.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ConfigDisplayTop from "../ConfigDisplayTop";
+
+describe("ConfigDisplayTop", () => {
+    const defaultFilters = {
+        species: ["Rattus norvegicus"],
+        brain_region: [],
+        cell_type: [],
+        model_scope: [],
+        abstraction_level: [],
+        test_type: [],
+        score_type: [],
+        recording_modality: [],
+        implementation_status: [],
+        project_id: [],
+    };
+
+    it("renders the accordion with header text", () => {
+        render(
+            <ConfigDisplayTop display="Models and Tests" filters={defaultFilters} />
+        );
+        expect(screen.getByText("View Current Configuration")).toBeInTheDocument();
+    });
+
+    it("renders the display chip", () => {
+        render(
+            <ConfigDisplayTop display="Models and Tests" filters={defaultFilters} />
+        );
+        expect(screen.getByText("Models and Tests")).toBeInTheDocument();
+    });
+
+    it("renders active filter values as chips", () => {
+        render(
+            <ConfigDisplayTop display="Models and Tests" filters={defaultFilters} />
+        );
+        expect(screen.getByText("Rattus norvegicus")).toBeInTheDocument();
+    });
+
+    it("renders '<< all >>' for empty filter values", () => {
+        render(
+            <ConfigDisplayTop display="Models and Tests" filters={defaultFilters} />
+        );
+        // brain_region and others are empty, so they should show "<< all >>"
+        const allChips = screen.getAllByText("<< all >>");
+        expect(allChips.length).toBeGreaterThan(0);
+    });
+
+    it("renders configure instruction text", () => {
+        render(
+            <ConfigDisplayTop display="Models and Tests" filters={defaultFilters} />
+        );
+        expect(
+            screen.getByText(/To re-configure the app, click on the configure icon/)
+        ).toBeInTheDocument();
+    });
+
+    it("shows only model filters when display is Only Models", () => {
+        const filters = {
+            ...defaultFilters,
+            test_type: ["single cell"],
+        };
+        render(
+            <ConfigDisplayTop display="Only Models" filters={filters} />
+        );
+        expect(screen.getByText("Rattus norvegicus")).toBeInTheDocument();
+        // test_type is test-only, should not appear
+        expect(screen.queryByText("single cell")).not.toBeInTheDocument();
+    });
+});

apps/model_catalog/src/__tests__/ConfigDisplayTop.test.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderWithContext } from "./helpers/renderWithProviders";
+import { mockVocab } from "./helpers/fixtures";
+import ConfigForm from "../ConfigForm";
+
+describe("ConfigForm", () => {
+    const defaultConfig = {
+        species: [],
+        brain_region: [],
+        cell_type: [],
+        model_scope: [],
+        abstraction_level: [],
+        test_type: [],
+        score_type: [],
+        recording_modality: [],
+        implementation_status: [],
+        project_id: [],
+    };
+
+    const defaultProps = {
+        open: true,
+        onClose: vi.fn(),
+        config: defaultConfig,
+        display: "Models and Tests",
+    };
+
+    const contextOverrides = {
+        validFilterValues: [mockVocab, vi.fn()],
+    };
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("renders the dialog with title", () => {
+        renderWithContext(<ConfigForm {...defaultProps} />, contextOverrides);
+        expect(screen.getByText("Configure App")).toBeInTheDocument();
+    });
+
+    it("renders Cancel and Ok buttons", () => {
+        renderWithContext(<ConfigForm {...defaultProps} />, contextOverrides);
+        expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Ok" })).toBeInTheDocument();
+    });
+
+    it("calls onClose with cancel flag when Cancel is clicked", () => {
+        renderWithContext(<ConfigForm {...defaultProps} />, contextOverrides);
+        fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+        expect(defaultProps.onClose).toHaveBeenCalledWith(
+            "Models and Tests",
+            defaultConfig,
+            true
+        );
+    });
+
+    it("calls onClose without cancel flag when Ok is clicked", () => {
+        renderWithContext(<ConfigForm {...defaultProps} />, contextOverrides);
+        fireEvent.click(screen.getByRole("button", { name: "Ok" }));
+        expect(defaultProps.onClose).toHaveBeenCalledWith(
+            "Models and Tests",
+            defaultConfig
+        );
+    });
+
+    it("does not render when open is false", () => {
+        renderWithContext(<ConfigForm {...defaultProps} open={false} />, contextOverrides);
+        expect(screen.queryByText("Configure App")).not.toBeInTheDocument();
+    });
+
+    it("renders the display switch options", () => {
+        renderWithContext(<ConfigForm {...defaultProps} />, contextOverrides);
+        expect(screen.getByText("Only Models")).toBeInTheDocument();
+        expect(screen.getByText("Only Tests")).toBeInTheDocument();
+    });
+});