test: Improve coverage for low-coverage widgets and data files (42-73% → 80%+) (#637)

* Initial plan

* Improve data layer and common component test coverage to 80%+

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

* Enhance widget test coverage for CostEstimation and ValueCreation widgets

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

* refactor: use ALL_SECURITY_LEVELS constant and fix import order

- Extract securityLevels array to use ALL_SECURITY_LEVELS from constants
- Fix import organization in ValueDisplay.test.tsx (Vitest before RTL)
- Addresses code review feedback for better code reusability

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

* Changes before error encountered

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

* fix: resolve TypeScript build errors and scope issues in test files

- Add securityLevels constant to each describe block scope
- Fix undefined type errors with nullish coalescing operator
- Fix type guard for ResourceCard description prop
- All 1545 tests passing, build successful

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
Co-authored-by: James Pether Sörling <pethers@users.noreply.github.com>

Author: Copilot

src/components/common/ResourceCard.test.tsx

@@ -0,0 +1,251 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ResourceCard from "./ResourceCard";
+import { SecurityResource } from "../../types/securityResources";
+
+describe("ResourceCard Component", () => {
+  const mockResource: SecurityResource = {
+    id: "test-1",
+    title: "Test Resource",
+    description: "This is a test resource description",
+    url: "https://example.com",
+    type: "Guide",
+    component: "availability",
+    source: "NIST",
+    level: "Moderate",
+    tags: ["tag1", "tag2", "tag3"],
+  };
+
+  it("renders without crashing", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByTestId("resource-item")).toBeInTheDocument();
+    expect(screen.getByText("Test Resource")).toBeInTheDocument();
+  });
+
+  it("displays resource title", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByText("Test Resource")).toBeInTheDocument();
+  });
+
+  it("displays resource description", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    if (mockResource.description) {
+      expect(screen.getByText(mockResource.description)).toBeInTheDocument();
+    }
+  });
+
+  it("displays resource type", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByText("Guide")).toBeInTheDocument();
+  });
+
+  it("displays component information when available", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByText(/Component: availability/i)).toBeInTheDocument();
+  });
+
+  it("displays source information when available", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByText(/Source: NIST/i)).toBeInTheDocument();
+  });
+
+  it("displays level information when available", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    expect(screen.getByText(/Level: Moderate/i)).toBeInTheDocument();
+  });
+
+  it("displays all tags", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    mockResource.tags?.forEach((tag) => {
+      expect(screen.getByText(tag)).toBeInTheDocument();
+    });
+  });
+
+  it("opens URL in new tab when clicked without custom onClick", () => {
+    const windowOpenSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+    render(<ResourceCard resource={mockResource} />);
+
+    const card = screen.getByTestId("resource-item");
+    fireEvent.click(card);
+
+    expect(windowOpenSpy).toHaveBeenCalledWith(
+      mockResource.url,
+      "_blank",
+      "noopener,noreferrer"
+    );
+
+    windowOpenSpy.mockRestore();
+  });
+
+  it("calls custom onClick handler when provided", () => {
+    const mockOnClick = vi.fn();
+    render(<ResourceCard resource={mockResource} onClick={mockOnClick} />);
+
+    const card = screen.getByTestId("resource-item");
+    fireEvent.click(card);
+
+    expect(mockOnClick).toHaveBeenCalledWith(mockResource);
+  });
+
+  it("handles keyboard Enter key", () => {
+    const mockOnClick = vi.fn();
+    render(<ResourceCard resource={mockResource} onClick={mockOnClick} />);
+
+    const card = screen.getByTestId("resource-item");
+    fireEvent.keyDown(card, { key: "Enter" });
+
+    expect(mockOnClick).toHaveBeenCalledWith(mockResource);
+  });
+
+  it("handles keyboard Space key", () => {
+    const mockOnClick = vi.fn();
+    render(<ResourceCard resource={mockResource} onClick={mockOnClick} />);
+
+    const card = screen.getByTestId("resource-item");
+    fireEvent.keyDown(card, { key: " " });
+
+    expect(mockOnClick).toHaveBeenCalledWith(mockResource);
+  });
+
+  it("does not trigger action on other keyboard keys", () => {
+    const mockOnClick = vi.fn();
+    render(<ResourceCard resource={mockResource} onClick={mockOnClick} />);
+
+    const card = screen.getByTestId("resource-item");
+    fireEvent.keyDown(card, { key: "a" });
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  it("truncates long descriptions", () => {
+    const longDescription = "a".repeat(150);
+    const resourceWithLongDesc: SecurityResource = {
+      ...mockResource,
+      description: longDescription,
+    };
+
+    render(<ResourceCard resource={resourceWithLongDesc} />);
+
+    // Check that the description was truncated by looking for the ellipsis
+    const descriptionElement = screen.getByText(/\.\.\.$/);
+    expect(descriptionElement).toBeInTheDocument();
+    expect(descriptionElement.textContent?.length).toBeLessThanOrEqual(103); // 100 chars + "..."
+  });
+
+  it("applies custom className", () => {
+    render(<ResourceCard resource={mockResource} className="custom-class" />);
+
+    const card = screen.getByTestId("resource-item");
+    expect(card.className).toContain("custom-class");
+  });
+
+  it("uses custom testId when provided", () => {
+    render(<ResourceCard resource={mockResource} testId="custom-test-id" />);
+
+    expect(screen.getByTestId("custom-test-id")).toBeInTheDocument();
+  });
+
+  it("handles missing description gracefully", () => {
+    const resourceWithoutDesc: SecurityResource = {
+      ...mockResource,
+      description: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutDesc} />);
+
+    expect(screen.getByTestId("resource-item")).toBeInTheDocument();
+  });
+
+  it("handles empty description", () => {
+    const resourceWithEmptyDesc: SecurityResource = {
+      ...mockResource,
+      description: "",
+    };
+
+    render(<ResourceCard resource={resourceWithEmptyDesc} />);
+
+    expect(screen.getByTestId("resource-item")).toBeInTheDocument();
+  });
+
+  it("displays General type when type is missing", () => {
+    const resourceWithoutType: SecurityResource = {
+      ...mockResource,
+      type: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutType} />);
+
+    expect(screen.getByText("General")).toBeInTheDocument();
+  });
+
+  it("does not display component info when not available", () => {
+    const resourceWithoutComponent: SecurityResource = {
+      ...mockResource,
+      component: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutComponent} />);
+
+    expect(screen.queryByText(/Component:/)).not.toBeInTheDocument();
+  });
+
+  it("does not display source info when not available", () => {
+    const resourceWithoutSource: SecurityResource = {
+      ...mockResource,
+      source: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutSource} />);
+
+    expect(screen.queryByText(/Source:/)).not.toBeInTheDocument();
+  });
+
+  it("does not display level info when not available", () => {
+    const resourceWithoutLevel: SecurityResource = {
+      ...mockResource,
+      level: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutLevel} />);
+
+    expect(screen.queryByText(/Level:/)).not.toBeInTheDocument();
+  });
+
+  it("handles resources without tags", () => {
+    const resourceWithoutTags: SecurityResource = {
+      ...mockResource,
+      tags: undefined,
+    };
+
+    render(<ResourceCard resource={resourceWithoutTags} />);
+
+    expect(screen.getByTestId("resource-item")).toBeInTheDocument();
+  });
+
+  it("handles resources with empty tags array", () => {
+    const resourceWithEmptyTags: SecurityResource = {
+      ...mockResource,
+      tags: [],
+    };
+
+    render(<ResourceCard resource={resourceWithEmptyTags} />);
+
+    expect(screen.getByTestId("resource-item")).toBeInTheDocument();
+  });
+
+  it("has proper accessibility attributes", () => {
+    render(<ResourceCard resource={mockResource} />);
+
+    const card = screen.getByTestId("resource-item");
+    expect(card).toHaveAttribute("role", "button");
+    expect(card).toHaveAttribute("tabIndex", "0");
+  });
+});

src/components/common/ValueDisplay.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import ValueDisplay from "./ValueDisplay";
 
@@ -35,4 +36,119 @@ describe("ValueDisplay Component", () => {
     // Find the value span and check its class using getByText instead of querySelector
     expect(screen.getByText("Large Text").className).contain("text-lg");
   });
+
+  it("renders without label", () => {
+    render(<ValueDisplay value="No Label Value" />);
+
+    expect(screen.getByText("No Label Value")).toBeInTheDocument();
+  });
+
+  it("applies default variant styling when variant is not specified", () => {
+    render(<ValueDisplay value="Default" />);
+
+    const valueElement = screen.getByText("Default");
+    expect(valueElement).toBeInTheDocument();
+    expect(valueElement.className).toContain("text-blue");
+  });
+
+  it("applies default size styling when size is not specified", () => {
+    render(<ValueDisplay value="Default Size" />);
+
+    const valueElement = screen.getByText("Default Size");
+    expect(valueElement).toBeInTheDocument();
+    expect(valueElement.className).toContain("text-base");
+  });
+
+  it("applies danger variant styling", () => {
+    render(<ValueDisplay value="Danger" variant="danger" />);
+
+    const valueElement = screen.getByText("Danger");
+    expect(valueElement.className).toContain("text-red");
+  });
+
+  it("applies warning variant styling", () => {
+    render(<ValueDisplay value="Warning" variant="warning" />);
+
+    const valueElement = screen.getByText("Warning");
+    expect(valueElement.className).toContain("text-yellow");
+  });
+
+  it("applies info variant styling", () => {
+    render(<ValueDisplay value="Info" variant="info" />);
+
+    const valueElement = screen.getByText("Info");
+    expect(valueElement.className).toContain("text-blue");
+  });
+
+  it("applies primary variant styling", () => {
+    render(<ValueDisplay value="Primary" variant="primary" />);
+
+    const valueElement = screen.getByText("Primary");
+    expect(valueElement.className).toContain("text-blue");
+  });
+
+  it("applies small size styling", () => {
+    render(<ValueDisplay value="Small" size="sm" />);
+
+    const valueElement = screen.getByText("Small");
+    expect(valueElement.className).toContain("text-sm");
+  });
+
+  it("applies medium size styling", () => {
+    render(<ValueDisplay value="Medium" size="md" />);
+
+    const valueElement = screen.getByText("Medium");
+    expect(valueElement.className).toContain("text-base");
+  });
+
+  it("applies large size styling", () => {
+    render(<ValueDisplay value="Large" size="lg" />);
+
+    const valueElement = screen.getByText("Large");
+    expect(valueElement.className).toContain("text-lg");
+  });
+
+  it("renders with empty string value", () => {
+    render(<ValueDisplay value="" />);
+
+    expect(screen.getByTestId("value-display")).toBeInTheDocument();
+  });
+
+  it("renders with numeric value", () => {
+    render(<ValueDisplay value={12345} />);
+
+    expect(screen.getByText("12345")).toBeInTheDocument();
+  });
+
+  it("renders label after value", () => {
+    render(<ValueDisplay label="suffix" value="Test Value" />);
+
+    const container = screen.getByTestId("value-display");
+    expect(container).toBeInTheDocument();
+    expect(screen.getByText("Test Value")).toBeInTheDocument();
+    expect(screen.getByText("suffix")).toBeInTheDocument();
+  });
+
+  it("renders with combined variant and size props", () => {
+    render(<ValueDisplay value="Combined" variant="success" size="lg" />);
+
+    const valueElement = screen.getByText("Combined");
+    expect(valueElement.className).toContain("text-green");
+    expect(valueElement.className).toContain("text-lg");
+  });
+
+  it("applies font-medium class to value", () => {
+    render(<ValueDisplay value="Bold Value" />);
+
+    const valueElement = screen.getByText("Bold Value");
+    expect(valueElement.className).toContain("font-medium");
+  });
+
+  it("applies smaller text and gray color to label", () => {
+    render(<ValueDisplay value="Value" label="Label" />);
+
+    const labelElement = screen.getByText("Label");
+    expect(labelElement.className).toContain("text-xs");
+    expect(labelElement.className).toContain("text-gray");
+  });
 });