Create use cases pages

tests/pages/use-cases-detail.test.jsx

@@ -0,0 +1,85 @@
+import { describe, test, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders as render } from "../utils/test-utils";
+import UseCaseDetailPage from "../../app/(marketing)/use-cases/[slug]/page";
+import messages from "../../messages/en/index";
+import { USE_CASE_DETAIL_SLUGS } from "../../lib/useCaseSyntheticPost";
+
+vi.mock("next/navigation", () => ({
+  notFound: vi.fn(),
+}));
+
+vi.mock("../../app/components/sections/ContentBanner", () => ({
+  default: ({ post, variant, rulePreview }) => (
+    <section data-testid="content-banner" data-variant={variant}>
+      <h1>{post.frontmatter.title}</h1>
+      <p>{post.frontmatter.description}</p>
+      {rulePreview ? (
+        <>
+          <p>{rulePreview.title}</p>
+          <p>{rulePreview.description}</p>
+        </>
+      ) : null}
+    </section>
+  ),
+}));
+
+vi.mock("../../app/components/sections/AskOrganizer", () => ({
+  default: ({ title, subtitle, buttonText, variant }) => (
+    <section data-testid="ask-organizer" data-variant={variant}>
+      <h2>{title}</h2>
+      <p>{subtitle}</p>
+      <button type="button">{buttonText}</button>
+    </section>
+  ),
+}));
+
+describe("UseCaseDetailPage", () => {
+  test.each(USE_CASE_DETAIL_SLUGS)(
+    "renders banner, body, footer, and ask organizer for %s",
+    async (slug) => {
+      const detail = messages.pages.useCasesDetail;
+      const contentKey =
+        slug === "mutual-aid-colorado"
+          ? "mutualAidColorado"
+          : slug === "food-not-bombs"
+            ? "foodNotBombs"
+            : "boulderCountyStreetMedics";
+      const entry = detail[contentKey];
+
+      render(
+        await UseCaseDetailPage({
+          params: Promise.resolve({ slug }),
+        }),
+      );
+
+      expect(screen.getByTestId("content-banner")).toHaveAttribute(
+        "data-variant",
+        "useCase",
+      );
+      expect(
+        screen.getByRole("heading", { name: entry.banner.title }),
+      ).toBeInTheDocument();
+      expect(screen.getByText(entry.ruleCard.description)).toBeInTheDocument();
+
+      const bodySnippet =
+        slug === "mutual-aid-colorado"
+          ? /Coordinating a statewide network/
+          : slug === "food-not-bombs"
+            ? /Food Not Bombs operates on a fundamentally decentralized model/
+            : /When communities like the BoCo Street Medics operate/;
+      expect(screen.getByText(bodySnippet)).toBeInTheDocument();
+
+      expect(
+        document.querySelector('[data-figma-node="22015:42622"]'),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId("ask-organizer")).toHaveAttribute(
+        "data-variant",
+        "use-case-detail",
+      );
+      expect(
+        screen.getByRole("button", { name: /ask an organizer/i }),
+      ).toBeInTheDocument();
+    },
+  );
+});

tests/pages/use-cases.test.jsx

@@ -0,0 +1,35 @@
+import { describe, test, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders as render } from "../utils/test-utils";
+import UseCasesPage from "../../app/(marketing)/use-cases/page";
+import messages from "../../messages/en/index";
+
+vi.mock("next/dynamic", () => ({
+  default: () => {
+    const Component = vi.fn(() => (
+      <section data-testid="related-articles">Related articles</section>
+    ));
+    return Component;
+  },
+}));
+
+vi.mock("next/link", () => ({
+  default: ({ children, href, ...props }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+describe("UseCasesPage", () => {
+  const links = messages.pages.useCases.caseStudyTiles.links;
+
+  test("renders case study tiles as links to detail pages", () => {
+    render(<UseCasesPage />);
+
+    for (const link of links) {
+      const anchor = screen.getByRole("link", { name: link.ariaLabel });
+      expect(anchor).toHaveAttribute("href", link.href);
+    }
+  });
+});