Completed template

tests/components/CompletedPage.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import CompletedPage from "../../app/create/completed/page";
+
+describe("CompletedPage", () => {
+  it("renders without crashing", () => {
+    render(<CompletedPage />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected title", () => {
+    render(<CompletedPage />);
+    expect(
+      screen.getByRole("heading", {
+        name: "Mutual Aid Mondays",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected description", () => {
+    render(<CompletedPage />);
+    expect(
+      screen.getByText(
+        /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders Community Rule document with section labels", () => {
+    render(<CompletedPage />);
+    expect(screen.getByText("Values")).toBeInTheDocument();
+    expect(screen.getByText("Communication")).toBeInTheDocument();
+    expect(screen.getByText("Membership")).toBeInTheDocument();
+    expect(screen.getByText("Decision-making")).toBeInTheDocument();
+    expect(screen.getByText("Conflict management")).toBeInTheDocument();
+  });
+
+  it("renders document entry titles", () => {
+    render(<CompletedPage />);
+    expect(screen.getByText("Solidarity Forever")).toBeInTheDocument();
+    expect(screen.getByText("Shared Leadership")).toBeInTheDocument();
+    expect(screen.getByText("Organizing Offline")).toBeInTheDocument();
+    expect(screen.getByText("Circular Food Systems")).toBeInTheDocument();
+  });
+
+  it("renders toast alert when page loads", () => {
+    render(<CompletedPage />);
+    expect(
+      screen.getByText(
+        "This is what folks see when you share your CommunityRule",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Your group can use this document as an operating manual.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders toast with role status", () => {
+    render(<CompletedPage />);
+    const statusRegions = screen.getAllByRole("status");
+    expect(statusRegions.length).toBeGreaterThanOrEqual(1);
+    expect(
+      statusRegions.some((el) =>
+        el.textContent?.includes("This is what folks see when you share"),
+      ),
+    ).toBe(true);
+  });
+});

tests/components/Logo.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import Logo from "../../app/components/icons/Logo";
+import Logo from "../../app/components/asset/logo";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,
@@ -45,13 +45,22 @@ describe("Logo (behavioral tests)", () => {
     expect(screen.getByText("CommunityRule")).toBeInTheDocument();
   });
 
-  it("hides text when showText is false", () => {
-    const { container } = render(<Logo showText={false} />);
+  it("hides wordmark when wordmark is false", () => {
+    const { container } = render(<Logo wordmark={false} />);
     const textElement = container.querySelector(".hidden");
     expect(textElement).toBeInTheDocument();
     expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
   });
 
+  it("applies inverse palette styling when palette is inverse", () => {
+    render(<Logo palette="inverse" />);
+    const link = screen.getByRole("link");
+    const textEl = link.querySelector(".font-bricolage-grotesque");
+    const img = link.querySelector("img");
+    expect(textEl).toHaveClass("text-[var(--color-content-invert-primary)]");
+    expect(img).toHaveClass("brightness-0");
+  });
+
   it("renders with different size variants", () => {
     const { rerender } = render(<Logo size="default" />);
     expect(screen.getByRole("link")).toBeInTheDocument();

tests/pages/user-journey.test.jsx

@@ -17,9 +17,7 @@ vi.mock("next/dynamic", () => {
       function DynamicWrapper(props) {
         const [Component, setComponent] = React.useState(null);
         React.useEffect(() => {
-          importFn().then((mod) =>
-            setComponent(() => mod.default || mod),
-          );
+          importFn().then((mod) => setComponent(() => mod.default || mod));
         }, []);
         if (!Component) {
           return options?.loading ? options.loading() : null;