Final review template

tests/components/FinalReviewPage.test.tsx

@@ -0,0 +1,69 @@
+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 FinalReviewPage from "../../app/create/final-review/page";
+
+describe("FinalReviewPage", () => {
+  it("renders without crashing", () => {
+    render(<FinalReviewPage />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected title", () => {
+    render(<FinalReviewPage />);
+    expect(
+      screen.getByRole("heading", {
+        name: "Review your CommunityRule",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected description", () => {
+    render(<FinalReviewPage />);
+    expect(
+      screen.getByText(
+        /Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders RuleCard with title", () => {
+    render(<FinalReviewPage />);
+    expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
+  });
+
+  it("renders RuleCard with description", () => {
+    render(<FinalReviewPage />);
+    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 RuleCard as a button (card is interactive)", () => {
+    render(<FinalReviewPage />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.length).toBeGreaterThanOrEqual(1);
+    expect(
+      buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays")),
+    ).toBe(true);
+  });
+
+  it("renders expanded RuleCard with category labels", () => {
+    render(<FinalReviewPage />);
+    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 category chips", () => {
+    render(<FinalReviewPage />);
+    expect(screen.getByText("Consciousness")).toBeInTheDocument();
+    expect(screen.getByText("Signal")).toBeInTheDocument();
+    expect(screen.getByText("Open Admission")).toBeInTheDocument();
+  });
+});

tests/pages/user-journey.test.jsx

@@ -9,24 +9,24 @@ import { vi, describe, test, expect, afterEach } from "vitest";
 import React from "react";
 import Page from "../../app/(marketing)/page";
 
-// Mock next/dynamic to return components synchronously in tests
+// Mock next/dynamic so dynamically loaded components render after the import resolves
 vi.mock("next/dynamic", () => {
+  const React = require("react");
   return {
     default: (importFn, options) => {
-      // In tests, resolve the dynamic import immediately and return the component
-      let Component = null;
-      importFn().then((mod) => {
-        Component = mod.default || mod;
-      });
-      // Return a synchronous wrapper that uses the mocked component
-      return (props) => {
-        // Use the mocked component directly once resolved
-        if (Component) {
-          return <Component {...props} />;
+      function DynamicWrapper(props) {
+        const [Component, setComponent] = React.useState(null);
+        React.useEffect(() => {
+          importFn().then((mod) =>
+            setComponent(() => mod.default || mod),
+          );
+        }, []);
+        if (!Component) {
+          return options?.loading ? options.loading() : null;
         }
-        // Fallback: return the loading placeholder if component not ready
-        return options?.loading ? options.loading() : null;
-      };
+        return <Component {...props} />;
+      }
+      return DynamicWrapper;
     },
   };
 });