+
+
+ {}}
/>
- {/* Content area: summary or checklist can be added per Figma */}
);
diff --git a/app/create/layout.tsx b/app/create/layout.tsx
index b7e5ec0..770e26c 100644
--- a/app/create/layout.tsx
+++ b/app/create/layout.tsx
@@ -92,7 +92,9 @@ function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={handleNext}
>
- Next
+ {currentStep === "final-review"
+ ? "Finalize CommunityRule"
+ : "Next"}
) : null
}
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
new file mode 100644
index 0000000..2395f39
--- /dev/null
+++ b/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(
);
+ expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+ });
+
+ it("renders HeaderLockup with expected title", () => {
+ render(
);
+ expect(
+ screen.getByRole("heading", {
+ name: "Review your CommunityRule",
+ }),
+ ).toBeInTheDocument();
+ });
+
+ it("renders HeaderLockup with expected description", () => {
+ render(
);
+ 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(
);
+ expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
+ });
+
+ it("renders RuleCard with description", () => {
+ render(
);
+ 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(
);
+ 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(
);
+ 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(
);
+ expect(screen.getByText("Consciousness")).toBeInTheDocument();
+ expect(screen.getByText("Signal")).toBeInTheDocument();
+ expect(screen.getByText("Open Admission")).toBeInTheDocument();
+ });
+});
diff --git a/tests/pages/user-journey.test.jsx b/tests/pages/user-journey.test.jsx
index 31be9bf..e1bcbbc 100644
--- a/tests/pages/user-journey.test.jsx
+++ b/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
;
+ 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
;
+ }
+ return DynamicWrapper;
},
};
});