community-rule/tests/pages/about.test.tsx

import { afterEach, describe, expect, test } from "vitest";
import { within } from "@testing-library/react";
import {
  cleanup,
  fireEvent,
  renderWithProviders as render,
  screen,
} from "../utils/test-utils";
import AboutPage from "../../app/(marketing)/about/page";
import { testRouter } from "../mocks/navigation";

afterEach(() => {
  cleanup();
  testRouter.push.mockClear();
});

describe("AboutPage", () => {
  test("opens with the centered header and the new opening statement", () => {
    render(<AboutPage />);

    expect(
      screen.getByRole("heading", {
        level: 1,
        name: "Every community has rules written or not",
      }),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        "From the Media Economies Design Lab at the University of Colorado Boulder",
      ),
    ).toBeInTheDocument();
    expect(
      screen.getByText("Our communities deserve better."),
    ).toBeInTheDocument();
    expect(
      screen.queryByRole("heading", {
        name: /CommunityRule is a tool that helps groups/i,
      }),
    ).not.toBeInTheDocument();
  });

  test("tells the study story without the old stats, books, or FAQ", () => {
    render(<AboutPage />);

    expect(
      screen.getByRole("heading", {
        name: "The idea is old. Our first tries fell short",
      }),
    ).toBeInTheDocument();
    expect(screen.getByText("regula").tagName).toBe("EM");
    expect(
      screen.getByText(/far fewer stayed to write/),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", {
        name: "We went looking for communities that had figured it out",
      }),
    ).toBeInTheDocument();
    const participant = screen
      .getByRole("heading", {
        name: "We went looking for communities that had figured it out",
      })
      .closest("section");
    expect(participant).not.toBeNull();
    expect(
      within(participant as HTMLElement).getByText(
        "Names appear only for pilot communities",
      ),
    ).toBeInTheDocument();
    expect(
      within(participant as HTMLElement).queryByText(/Colorado/),
    ).not.toBeInTheDocument();
    expect(screen.getByText("How do you talk?")).toBeInTheDocument();
    expect(screen.getByText("What happens when you disagree?")).toBeInTheDocument();
    expect(screen.getByText("9 in 10")).toBeInTheDocument();
    expect(screen.getByText("2 in 3")).toBeInTheDocument();
    expect(screen.getByText("1 in 2")).toBeInTheDocument();
    expect(
      screen.getByText(
        "From interviews with members of forty communities from April 2025 to February 2026.",
      ),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", {
        name: "We rebuilt the tool around what organizers told us",
      }),
    ).toBeInTheDocument();

    expect(screen.queryByText("420M+")).not.toBeInTheDocument();
    expect(
      screen.queryByRole("heading", { name: "Get Structure Before Crisis" }),
    ).not.toBeInTheDocument();
    expect(
      screen.queryByRole("heading", { name: "Get the Community Rules Book" }),
    ).not.toBeInTheDocument();
    expect(
      screen.queryByRole("heading", { name: "Get answers to your questions" }),
    ).not.toBeInTheDocument();
  });

  test("keeps unapproved narrative sentences off the page and wires the approved actions", () => {
    render(<AboutPage />);

    expect(
      screen.getByRole("heading", { name: "What organizers gave, we give back" }),
    ).toBeInTheDocument();
    expect(screen.getByText(/GNU General Public License version 3/)).toBeInTheDocument();
    expect(screen.getByText(/CC BY-SA 4.0/)).toBeInTheDocument();
    expect(screen.queryByText(/CC0/)).not.toBeInTheDocument();
    expect(screen.queryByText(/public domain/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/stays private unless you share/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/co-op lawyers/i)).not.toBeInTheDocument();

    expect(screen.getByRole("link", { name: "Help build" })).toHaveAttribute(
      "href",
      "https://git.medlab.host",
    );
    expect(
      screen.getByRole("link", { name: "Talk to a facilitator" }),
    ).toHaveAttribute("href", "/workshops");
    expect(screen.getByRole("link", { name: "Read the FAQ" })).toHaveAttribute(
      "href",
      "/learn#faq",
    );

    fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
    expect(testRouter.push).toHaveBeenCalledWith("/create/informational");

    fireEvent.click(screen.getByRole("button", { name: "Share your experiences" }));
    expect(screen.getByRole("dialog", { name: "Ask an organizer" })).toBeInTheDocument();
  });

  test("names the people who made it", () => {
    render(<AboutPage />);

    expect(
      screen.getByRole("heading", { name: "Who made this" }),
    ).toBeInTheDocument();
    expect(screen.getByText("Nathan Schneider")).toBeInTheDocument();
    expect(screen.getByText("Dani Shipley")).toBeInTheDocument();
    expect(screen.getByText("Andy DiLallo")).toBeInTheDocument();
    expect(
      screen.getByText(
        "Media Economies Design Lab, University of Colorado Boulder",
      ),
    ).toBeInTheDocument();
  });
});