community-rule/tests/pages/page-flow.test.jsx

import {
  renderWithProviders as render,
  screen,
  cleanup,
  waitFor,
} from "../utils/test-utils";
import userEvent from "@testing-library/user-event";
import { vi, describe, test, expect, afterEach } from "vitest";
import React from "react";
import Page from "../../app/(marketing)/page";

vi.mock("next/dynamic", async () => {
  const { default: syncDynamic } = await import("../utils/mockNextDynamicSync.js");
  return { default: syncDynamic };
});

function renderPage(ui = <Page />) {
  return render(ui);
}

afterEach(() => {
  cleanup();
});

describe("Page Flow Integration", () => {
  test("renders complete page with all sections in correct order", async () => {
    renderPage();

    // Hero Banner section
    expect(
      screen.getByRole("heading", { name: "Build structure" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "before you need it" }),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        "Strong communities agree on four things early. They settle how they talk, who belongs, how they decide and what happens when they disagree. Write yours down together.",
      ),
    ).toBeInTheDocument();
    const ctaButtons = screen.getAllByRole("link", {
      name: "Talk to a facilitator",
    });
    expect(ctaButtons.length).toBeGreaterThan(0);

    await waitFor(() => {
      expect(screen.getByAltText("Food Not Bombs")).toBeInTheDocument();
    });
    expect(screen.getByAltText("Boulder Street Medics")).toBeInTheDocument();
    expect(screen.getByAltText("Mutual Aid Colorado")).toBeInTheDocument();
    expect(screen.queryByAltText("Start COOP")).not.toBeInTheDocument();

    await waitFor(() => {
      expect(
        screen.getByRole("heading", { name: /How CommunityRule helps/ }),
      ).toBeInTheDocument();
    });
    expect(
      screen.getByText(
        "Here's a quick overview of the process, from start to finish.",
      ),
    ).toBeInTheDocument();
    expect(
      screen.getByText("See what has worked for other communities"),
    ).toBeInTheDocument();
    expect(
      screen.getByText("Decide how you will decide, while things are calm"),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        "Invite your members and change it together as you grow",
      ),
    ).toBeInTheDocument();

    await waitFor(() => {
      expect(
        screen.getByRole("heading", { name: "Devolution" }),
      ).toBeInTheDocument();
    });
    expect(
      screen.getByRole("heading", { name: "Consensus" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "Do-ocracy" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { name: "Quadratic Governance" }),
    ).toBeInTheDocument();

    await waitFor(() => {
      expect(
        screen.getByRole("heading", {
          name: "Tools for the parts that get hard",
        }),
      ).toBeInTheDocument();
    });
    expect(
      screen.getByText(
        "Every community runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
      ),
    ).toBeInTheDocument();

    expect(
      screen.getByText(/The rules of decision-making must be open/),
    ).toBeInTheDocument();

    expect(
      screen.getByRole("heading", { name: "Still have questions?" }),
    ).toBeInTheDocument();
    expect(
      screen.getByText("Get answers from an experienced organizer"),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: /ask an organizer/i }),
    ).toBeInTheDocument();
  });

  test("hero banner CTA button is interactive", async () => {
    const user = userEvent.setup();
    renderPage();

    const ctaLinks = screen.getAllByRole("link", {
      name: "Talk to a facilitator",
    });
    const ctaLink = ctaLinks[0];
    expect(ctaLink).toBeInTheDocument();
    expect(ctaLink).toHaveAttribute("href", "/workshops");

    await user.click(ctaLink);
    expect(ctaLink).toBeInTheDocument();
  });

  test("CardSteps section shows step tiles with expected icon/color props", async () => {
    renderPage();

    await waitFor(() => {
      const cards = screen.getAllByText(
        /See what has worked for other communities|Decide how you will decide|Invite your members and change it together/,
      );
      expect(cards.length).toBeGreaterThan(0);
    });

    const cards = screen.getAllByText(
      /See what has worked for other communities|Decide how you will decide|Invite your members and change it together/,
    );
    expect(cards.length).toBeGreaterThan(0);

    const sectionNumbers = screen.getAllByText(/1|2|3/);
    expect(sectionNumbers.length).toBeGreaterThan(0);
  });

  test("rule stack shows four featured templates and link to full catalog", async () => {
    renderPage();

    await waitFor(() => {
      expect(screen.getByText("Devolution")).toBeInTheDocument();
    });
    expect(screen.queryByText("Solidarity Network")).not.toBeInTheDocument();
    expect(screen.getAllByText("Consensus").length).toBeGreaterThan(0);
    expect(screen.getAllByText("Do-ocracy").length).toBeGreaterThan(0);
    expect(screen.getByText("Quadratic Governance")).toBeInTheDocument();

    const seeAll = screen.getByRole("link", { name: "See all templates" });
    expect(seeAll).toHaveAttribute("href", "/templates");

    const seeHowLink = screen.getByRole("link", {
      name: "See how it works",
    });
    expect(seeHowLink).toHaveAttribute("href", "/how-it-works");
  });

  test("ask organizer section has proper call-to-action", () => {
    renderPage();

    const askCta = screen.getByRole("button", { name: /ask an organizer/i });
    expect(askCta).toBeInTheDocument();
    expect(askCta).not.toHaveAttribute("href");
  });

  test("page maintains proper semantic structure", async () => {
    renderPage();

    await waitFor(() => {
      const headings = screen.getAllByRole("heading");
      expect(headings.length).toBeGreaterThan(4);
    });

    const headings = screen.getAllByRole("heading");
    expect(headings.length).toBeGreaterThan(4);

    const mainContent = screen.getByText(
      /Strong communities agree on four things early/,
    );
    expect(mainContent).toBeInTheDocument();
  });

  test("all interactive elements are accessible", async () => {
    renderPage();

    await waitFor(() => {
      expect(screen.getAllByRole("button").length).toBeGreaterThan(0);
    });

    const buttons = screen.getAllByRole("button");
    buttons.forEach((button) => {
      expect(button).toBeInTheDocument();
    });

    await waitFor(() => {
      expect(screen.getAllByRole("link").length).toBeGreaterThan(0);
    });

    const links = screen.getAllByRole("link");
    links.forEach((link) => {
      expect(link).toBeInTheDocument();
    });
  });

  test("page content flows logically from top to bottom", async () => {
    renderPage();

    expect(
      screen.getByText(/Strong communities agree on four things early/),
    ).toBeInTheDocument();

    await waitFor(() => {
      expect(screen.getByText("How CommunityRule helps")).toBeInTheDocument();
    });

    await waitFor(() => {
      expect(screen.getByText("Devolution")).toBeInTheDocument();
    });

    await waitFor(() => {
      expect(
        screen.getByText("Tools for the parts that get hard"),
      ).toBeInTheDocument();
    });

    expect(
      screen.getByText(/The rules of decision-making must be open/),
    ).toBeInTheDocument();

    expect(screen.getByText("Still have questions?")).toBeInTheDocument();
  });
});