Implement about page

tests/components/cards/Stat.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Stat from "../../../app/components/cards/Stat";
+
+describe("Stat", () => {
+  it("renders value and label", () => {
+    render(
+      <Stat
+        value="420M+"
+        label="open source projects"
+        asOf="as of June 30, 2024"
+      />,
+    );
+
+    expect(screen.getByText("420M+")).toBeInTheDocument();
+    expect(screen.getByText("open source projects")).toBeInTheDocument();
+    expect(screen.getByText("as of June 30, 2024")).toBeInTheDocument();
+  });
+});

tests/components/layout/Accordion.test.tsx

@@ -0,0 +1,22 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Accordion from "../../../app/components/layout/Accordion";
+
+describe("Accordion", () => {
+  it("toggles panel content", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Accordion title="Question" defaultOpen={false}>
+        Answer copy
+      </Accordion>,
+    );
+
+    expect(screen.queryByText("Answer copy")).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Question" }));
+
+    expect(screen.getByText("Answer copy")).toBeInTheDocument();
+  });
+});

tests/components/sections/Stats.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Stats from "../../../app/components/sections/Stats";
+
+describe("Stats", () => {
+  it("renders heading and stat cards", () => {
+    render(
+      <Stats
+        titlePrefix="From"
+        titleEmphasis="projects"
+        titleSuffix="to communities"
+        items={[
+          {
+            value: "27%",
+            label: "year over year growth",
+            asOf: "as of June 30, 2024",
+            shapeVariant: "purple",
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: /From projects to communities/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("27%")).toBeInTheDocument();
+  });
+});

tests/components/type/AboutHeader.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import AboutHeader from "../../../app/components/type/AboutHeader";
+
+describe("AboutHeader", () => {
+  it("renders segmented headline", () => {
+    render(
+      <AboutHeader
+        segments={[
+          { type: "word", text: "CommunityRule" },
+          { type: "word", text: "helps" },
+        ]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: /CommunityRule helps/i }),
+    ).toBeInTheDocument();
+  });
+});

tests/components/type/TripleTextBlock.test.tsx

@@ -0,0 +1,51 @@
+import "@testing-library/jest-dom/vitest";
+import { describe, expect, it } from "vitest";
+import TripleTextBlock from "../../../app/components/type/TripleTextBlock";
+import {
+  renderWithProviders as render,
+  screen,
+} from "../../utils/test-utils";
+
+describe("TripleTextBlock", () => {
+  it("renders stacked and lg copy when lgTitle/lgDescription provided", () => {
+    render(
+      <TripleTextBlock
+        columns={[
+          {
+            title: "Stacked headline",
+            description: "Long stacked body.",
+            lgTitle: "Wide headline",
+            lgDescription: "Short wide body.",
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Stacked headline" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Wide headline" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Long stacked body.")).toBeInTheDocument();
+    expect(screen.getByText("Short wide body.")).toBeInTheDocument();
+  });
+
+  it("renders a single column variant when lg fields omitted", () => {
+    render(
+      <TripleTextBlock
+        columns={[
+          {
+            title: "Only headline",
+            description: "Only body.",
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getAllByRole("heading", { name: "Only headline" })).toHaveLength(
+      1,
+    );
+    expect(screen.getByText("Only body.")).toBeInTheDocument();
+  });
+});