test: adds unit-tests

frontend/src/components/CANs/CanDetailTabs/CanDetailTabs.test.jsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import CanDetailTabs from "./CanDetailTabs";
+
+// Mock the router hooks
+vi.mock("react-router-dom", () => ({
+    BrowserRouter: ({ children }) => <div>{children}</div>,
+    useLocation: () => ({ pathname: "/cans/123" }),
+    useNavigate: () => mockNavigate
+}));
+
+// Create a mock navigate function outside
+const mockNavigate = vi.fn();
+
+describe("CanDetailTabs", () => {
+    const mockCanId = 123;
+
+    // Clear mock calls between tests
+    beforeEach(() => {
+        mockNavigate.mockClear();
+    });
+
+    it("renders all tab buttons with correct labels", () => {
+        render(<CanDetailTabs canId={mockCanId} />);
+
+        // Check if all tab labels are rendered
+        expect(screen.getByText("CAN Details")).toBeInTheDocument();
+        expect(screen.getByText("CAN Spending")).toBeInTheDocument();
+        expect(screen.getByText("CAN Funding")).toBeInTheDocument();
+    });
+
+    it("renders tab buttons with correct data-value attributes", () => {
+        render(<CanDetailTabs canId={mockCanId} />);
+
+        // Check if all buttons have correct data-value attributes
+        const buttons = screen.getAllByRole("button");
+
+        expect(buttons[0]).toHaveAttribute("data-value", `/cans/${mockCanId}`);
+        expect(buttons[1]).toHaveAttribute("data-value", `/cans/${mockCanId}/spending`);
+        expect(buttons[2]).toHaveAttribute("data-value", `/cans/${mockCanId}/funding`);
+    });
+
+    it("renders the correct number of tabs", () => {
+        render(<CanDetailTabs canId={mockCanId} />);
+
+        const buttons = screen.getAllByRole("button");
+        expect(buttons).toHaveLength(3);
+    });
+
+    it("renders with correct data-cy attributes", () => {
+        render(<CanDetailTabs canId={mockCanId} />);
+
+        expect(screen.getByText("CAN Details")).toHaveAttribute("data-cy", "details-tab-CAN Details");
+        expect(screen.getByText("CAN Spending")).toHaveAttribute("data-cy", "details-tab-CAN Spending");
+        expect(screen.getByText("CAN Funding")).toHaveAttribute("data-cy", "details-tab-CAN Funding");
+    });
+
+    it("navigates when a tab is clicked", () => {
+        render(<CanDetailTabs canId={mockCanId} />);
+
+        const spendingTab = screen.getByText("CAN Spending");
+        fireEvent.click(spendingTab);
+
+        expect(mockNavigate).toHaveBeenCalledWith(`/cans/${mockCanId}/spending`);
+    });
+});

frontend/src/components/UI/Tabs/Tabs.test.jsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import Tabs from "./Tabs";
+
+// Mock the router hooks
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", () => ({
+    useLocation: () => ({ pathname: "/test/path1" }),
+    useNavigate: () => mockNavigate
+}));
+
+describe("Tabs", () => {
+    const mockPaths = [
+        {
+            label: "Path 1",
+            pathName: "/test/path1"
+        },
+        {
+            label: "Path 2",
+            pathName: "/test/path2"
+        },
+        {
+            label: "Path 3",
+            pathName: "/test/path3"
+        }
+    ];
+
+    beforeEach(() => {
+        mockNavigate.mockClear();
+    });
+
+    it("renders all tabs with correct labels", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        mockPaths.forEach((path) => {
+            expect(screen.getByText(path.label)).toBeInTheDocument();
+        });
+    });
+
+    it("renders navigation with correct aria-label", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        const nav = screen.getByRole("navigation");
+        expect(nav).toHaveAttribute("aria-label", "Agreement Tab Sections");
+    });
+
+    it("applies selected class to active tab", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        const selectedButton = screen.getByText("Path 1");
+        const notSelectedButton = screen.getByText("Path 2");
+
+        expect(selectedButton.className).toContain("listItemSelected");
+        expect(notSelectedButton.className).toContain("listItemNotSelected");
+    });
+
+    it("navigates when a tab is clicked", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        const secondTab = screen.getByText("Path 2");
+        fireEvent.click(secondTab);
+
+        expect(mockNavigate).toHaveBeenCalledWith("/test/path2");
+    });
+
+    it("renders correct data-cy attributes", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        mockPaths.forEach((path) => {
+            const button = screen.getByText(path.label);
+            expect(button).toHaveAttribute("data-cy", `details-tab-${path.label}`);
+        });
+    });
+
+    it("renders correct data-value attributes", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        mockPaths.forEach((path) => {
+            const button = screen.getByText(path.label);
+            expect(button).toHaveAttribute("data-value", path.pathName);
+        });
+    });
+
+    it("renders all tabs as buttons", () => {
+        render(<Tabs paths={mockPaths} />);
+
+        const buttons = screen.getAllByRole("button");
+        expect(buttons).toHaveLength(mockPaths.length);
+    });
+
+    // Test empty paths array
+    it("renders no buttons when paths array is empty", () => {
+        render(<Tabs paths={[]} />);
+
+        const nav = screen.getByRole("navigation");
+        const { queryAllByRole } = within(nav);
+        const buttons = queryAllByRole("button");
+
+        expect(buttons).toHaveLength(0);
+    });
+});