Unit tests for main index components

tests/unit/FeatureGrid.test.jsx

@@ -0,0 +1,145 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, test, expect, afterEach } from "vitest";
+import FeatureGrid from "../../app/components/FeatureGrid";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("FeatureGrid Component", () => {
+  test("renders with title and subtitle", () => {
+    render(
+      <FeatureGrid
+        title="Feature Tools"
+        subtitle="Everything you need to build better communities"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Feature Tools" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: "Everything you need to build better communities",
+      })
+    ).toBeInTheDocument();
+  });
+
+  test("renders with custom className", () => {
+    render(
+      <FeatureGrid title="Test" subtitle="Test" className="custom-class" />
+    );
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("custom-class");
+  });
+
+  test("renders all four MiniCard components", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    // Check for all four MiniCard components
+    expect(
+      screen.getByRole("link", { name: "Decision-making support tools" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Values alignment exercises" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Membership guidance resources" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Conflict resolution tools" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders ContentLockup with feature variant", () => {
+    render(<FeatureGrid title="Feature Title" subtitle="Feature Subtitle" />);
+
+    expect(
+      screen.getByRole("heading", { name: "Feature Title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Feature Subtitle" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Learn more" })
+    ).toBeInTheDocument();
+  });
+
+  test("has proper accessibility attributes", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveAttribute("aria-labelledby", "feature-grid-headline");
+    expect(section).toHaveAttribute("tabIndex", "-1");
+
+    const grid = screen.getByRole("grid");
+    expect(grid).toHaveAttribute("aria-label", "Feature tools and services");
+  });
+
+  test("renders with design tokens", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("p-0", "lg:p-[var(--spacing-scale-064)]");
+
+    const container = section.querySelector('[class*="bg-[#171717]"]');
+    expect(container).toBeInTheDocument();
+  });
+
+  test("applies responsive grid layout", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    const grid = screen.getByRole("grid");
+    expect(grid).toHaveClass("grid", "grid-cols-2", "md:grid-cols-4");
+  });
+
+  test("renders MiniCard with correct props", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    // Check first MiniCard (Decision-making support)
+    const firstCard = screen.getByRole("link", {
+      name: "Decision-making support tools",
+    });
+    expect(firstCard).toHaveAttribute("href", "#decision-making");
+
+    // Check second MiniCard (Values alignment)
+    const secondCard = screen.getByRole("link", {
+      name: "Values alignment exercises",
+    });
+    expect(secondCard).toHaveAttribute("href", "#values-alignment");
+  });
+
+  test("renders with proper semantic structure", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+
+    const grid = screen.getByRole("grid");
+    expect(grid).toBeInTheDocument();
+  });
+
+  test("handles missing optional props gracefully", () => {
+    render(<FeatureGrid />);
+
+    // Should still render the structure
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+
+    // Should render default MiniCards
+    expect(
+      screen.getByRole("link", { name: "Decision-making support tools" })
+    ).toBeInTheDocument();
+  });
+
+  test("applies focus-within styles", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+
+    const container = document
+      .querySelector("section")
+      .querySelector('[class*="focus-within:ring-2"]');
+    expect(container).toBeInTheDocument();
+  });
+});