CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update create flow pages

Browse Source
This commit is contained in:
adilallo
2026-04-13 18:24:13 -06:00
parent a39b4aa04b
commit a0de78c020
66 changed files with 1028 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/AuthModalContext.test.tsx
+5 -5
View File
@@ -31,10 +31,10 @@ vi.mock("../../lib/create/api", () => ({
requestMagicLink: vi.fn(),
}));
vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
const actual =
await importOriginal<
typeof import("../../app/create/anonymousDraftStorage")
typeof import("../../app/create/utils/anonymousDraftStorage")
>();
return {
...actual,
@@ -43,7 +43,7 @@ vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
});
import { requestMagicLink } from "../../lib/create/api";
import { setTransferPendingFlag } from "../../app/create/anonymousDraftStorage";
import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
function LoginTrigger() {
const { openLogin, closeLogin } = useAuthModal();
@@ -57,7 +57,7 @@ function LoginTrigger() {
onClick={() =>
openLogin({
variant: "saveProgress",
nextPath: "/create/select?syncDraft=1",
nextPath: "/create/community-size?syncDraft=1",
})
}
>
@@ -143,7 +143,7 @@ describe("AuthModalProvider (header overlay)", () => {
await waitFor(() => {
expect(requestMagicLink).toHaveBeenCalledWith(
"guest@example.com",
"/create/select?syncDraft=1",
"/create/community-size?syncDraft=1",
);
});
expect(setTransferPendingFlag).toHaveBeenCalled();
tests/components/CompletedPage.test.tsx
+9 -9
View File
@@ -1,16 +1,16 @@
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";
import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
describe("CompletedPage", () => {
describe("CompletedScreen", () => {
it("renders without crashing", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
});
it("renders HeaderLockup with expected title", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
expect(
screen.getByRole("heading", {
name: "Mutual Aid Mondays",
@@ -19,7 +19,7 @@ describe("CompletedPage", () => {
});
it("renders HeaderLockup with expected description", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
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,
@@ -28,7 +28,7 @@ describe("CompletedPage", () => {
});
it("renders Community Rule document with section labels", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
expect(screen.getByText("Values")).toBeInTheDocument();
expect(screen.getByText("Communication")).toBeInTheDocument();
expect(screen.getByText("Membership")).toBeInTheDocument();
@@ -37,7 +37,7 @@ describe("CompletedPage", () => {
});
it("renders document entry titles", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
expect(screen.getByText("Solidarity Forever")).toBeInTheDocument();
expect(screen.getByText("Shared Leadership")).toBeInTheDocument();
expect(screen.getByText("Organizing Offline")).toBeInTheDocument();
@@ -45,7 +45,7 @@ describe("CompletedPage", () => {
});
it("renders toast alert when page loads", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
expect(
screen.getByText(
"This is what folks see when you share your CommunityRule",
@@ -59,7 +59,7 @@ describe("CompletedPage", () => {
});
it("renders toast with role status", () => {
render(<CompletedPage />);
render(<CompletedScreen />);
const statusRegions = screen.getAllByRole("status");
expect(statusRegions.length).toBeGreaterThanOrEqual(1);
expect(
tests/components/ConfirmStakeholdersPage.test.tsx
+5 -5
View File
@@ -2,11 +2,11 @@ import { describe, it, expect } from "vitest";
import userEvent from "@testing-library/user-event";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import ConfirmStakeholdersPage from "../../app/create/confirm-stakeholders/page";
import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
describe("ConfirmStakeholdersPage", () => {
describe("ConfirmStakeholdersScreen", () => {
it("renders title and description", () => {
render(<ConfirmStakeholdersPage />);
render(<ConfirmStakeholdersScreen />);
expect(
screen.getByRole("heading", {
name: /Do other stakeholders need to be involved/i,
@@ -20,7 +20,7 @@ describe("ConfirmStakeholdersPage", () => {
});
it("renders Add stakeholder control", () => {
render(<ConfirmStakeholdersPage />);
render(<ConfirmStakeholdersScreen />);
expect(
screen.getByRole("button", { name: "Add stakeholder" }),
).toBeInTheDocument();
@@ -28,7 +28,7 @@ describe("ConfirmStakeholdersPage", () => {
it("shows draft toast and can dismiss it", async () => {
const user = userEvent.setup();
render(<ConfirmStakeholdersPage />);
render(<ConfirmStakeholdersScreen />);
expect(
screen.getByText(/Congratulations! You've drafted your CommunityRule!/i),
).toBeInTheDocument();
tests/components/FinalReviewPage.test.tsx
+11 -11
View File
@@ -6,7 +6,7 @@ import {
waitFor,
} from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import FinalReviewPage from "../../app/create/final-review/page";
import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
import { useCreateFlow } from "../../app/create/context/CreateFlowContext";
const FALLBACK_CARD_TITLE = "Your community";
@@ -24,17 +24,17 @@ function FinalReviewWithFlowState({
useLayoutEffect(() => {
replaceState({ title, ...(summary !== undefined ? { summary } : {}) });
}, [replaceState, title, summary]);
return <FinalReviewPage />;
return <FinalReviewScreen />;
}
describe("FinalReviewPage", () => {
describe("FinalReviewScreen", () => {
it("renders without crashing", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
});
it("renders lockup title", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(
screen.getByRole("heading", {
name: "Review your CommunityRule",
@@ -43,7 +43,7 @@ describe("FinalReviewPage", () => {
});
it("renders lockup description", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
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,
@@ -52,12 +52,12 @@ describe("FinalReviewPage", () => {
});
it("renders RuleCard with fallback title when context has no name", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(screen.getByText(FALLBACK_CARD_TITLE)).toBeInTheDocument();
});
it("renders RuleCard with fallback description when context has no summary", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(
screen.getByText(new RegExp(FALLBACK_CARD_DESCRIPTION_SNIPPET, "i")),
).toBeInTheDocument();
@@ -76,7 +76,7 @@ describe("FinalReviewPage", () => {
});
it("renders RuleCard as a button (card is interactive)", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
const buttons = screen.getAllByRole("button");
expect(buttons.length).toBeGreaterThanOrEqual(1);
expect(
@@ -85,7 +85,7 @@ describe("FinalReviewPage", () => {
});
it("renders expanded RuleCard with category labels", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(screen.getByText("Values")).toBeInTheDocument();
expect(screen.getByText("Communication")).toBeInTheDocument();
expect(screen.getByText("Membership")).toBeInTheDocument();
@@ -94,7 +94,7 @@ describe("FinalReviewPage", () => {
});
it("renders category chips", () => {
render(<FinalReviewPage />);
render(<FinalReviewScreen />);
expect(screen.getByText("Consciousness")).toBeInTheDocument();
expect(screen.getByText("Signal")).toBeInTheDocument();
expect(screen.getByText("Open Admission")).toBeInTheDocument();
tests/components/InformationalPage.test.tsx
+5 -5
View File
@@ -1,11 +1,11 @@
import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import InformationalPage from "../../app/create/informational/page";
import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
describe("InformationalPage", () => {
describe("InformationalScreen", () => {
it("renders without crashing", () => {
render(<InformationalPage />);
render(<InformationalScreen />);
expect(
screen.getByRole("heading", {
name: "How CommunityRule helps groups like yours",
@@ -14,7 +14,7 @@ describe("InformationalPage", () => {
});
it("renders lockup description", () => {
render(<InformationalPage />);
render(<InformationalScreen />);
expect(
screen.getByText(
/This flow will give you recommendations to improve your community/i,
@@ -23,7 +23,7 @@ describe("InformationalPage", () => {
});
it("renders first numbered list item title", () => {
render(<InformationalPage />);
render(<InformationalScreen />);
expect(
screen.getByText("Tell us about your organization"),
).toBeInTheDocument();
tests/components/LoginForm.test.tsx
+5 -5
View File
@@ -32,10 +32,10 @@ vi.mock("../../lib/create/api", () => ({
requestMagicLink: vi.fn(),
}));
vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
const actual =
await importOriginal<
typeof import("../../app/create/anonymousDraftStorage")
typeof import("../../app/create/utils/anonymousDraftStorage")
>();
return {
...actual,
@@ -44,7 +44,7 @@ vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
});
import { requestMagicLink } from "../../lib/create/api";
import { setTransferPendingFlag } from "../../app/create/anonymousDraftStorage";
import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
function renderLoginForm() {
return renderWithProviders(
@@ -119,7 +119,7 @@ describe("LoginForm", () => {
<Suspense fallback={null}>
<LoginForm
variant="saveProgress"
magicLinkNextPath="/create/select?syncDraft=1"
magicLinkNextPath="/create/community-size?syncDraft=1"
/>
</Suspense>,
);
@@ -133,7 +133,7 @@ describe("LoginForm", () => {
await waitFor(() => {
expect(requestMagicLink).toHaveBeenCalledWith(
"save@example.com",
"/create/select?syncDraft=1",
"/create/community-size?syncDraft=1",
);
});
expect(setTransferPendingFlag).toHaveBeenCalled();
tests/components/ReviewPage.test.tsx
+8 -8
View File
@@ -1,16 +1,16 @@
import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import ReviewPage from "../../app/create/review/page";
import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
describe("ReviewPage", () => {
describe("CommunityReviewScreen", () => {
it("renders without crashing", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
});
it("renders HeaderLockup with expected title", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
expect(
screen.getByRole("heading", {
name: "Your community is added - congrats!",
@@ -19,7 +19,7 @@ describe("ReviewPage", () => {
});
it("renders HeaderLockup with expected description", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
expect(
screen.getByText(
/In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared./i,
@@ -28,12 +28,12 @@ describe("ReviewPage", () => {
});
it("renders RuleCard with title", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
});
it("renders RuleCard with description", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
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,
@@ -42,7 +42,7 @@ describe("ReviewPage", () => {
});
it("renders RuleCard as a button (card is interactive)", () => {
render(<ReviewPage />);
render(<CommunityReviewScreen />);
const buttons = screen.getAllByRole("button");
expect(buttons.length).toBeGreaterThanOrEqual(1);
expect(
tests/components/SelectPage.test.tsx
+7 -7
View File
@@ -1,20 +1,20 @@
import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import SelectPage from "../../app/create/select/page";
import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
describe("SelectPage", () => {
describe("CommunitySizeSelectScreen", () => {
it("renders HeaderLockup title", () => {
render(<SelectPage />);
render(<CommunitySizeSelectScreen />);
expect(
screen.getByRole("heading", {
name: "What is your community called?",
name: "How large is your community?",
}),
).toBeInTheDocument();
});
it("renders MultiSelect add control", () => {
render(<SelectPage />);
render(<CommunitySizeSelectScreen />);
const addButtons = screen.getAllByRole("button", {
name: "Add organization type",
});
@@ -22,8 +22,8 @@ describe("SelectPage", () => {
});
it("renders preset chip labels", () => {
render(<SelectPage />);
render(<CommunitySizeSelectScreen />);
expect(screen.getByText("1 member")).toBeInTheDocument();
expect(screen.getByText("Non-profit")).toBeInTheDocument();
expect(screen.getByText("2-10 members")).toBeInTheDocument();
});
});
tests/components/TextPage.test.tsx
+16 -4
View File
@@ -1,11 +1,17 @@
import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import TextPage from "../../app/create/text/page";
import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
describe("TextPage", () => {
describe("CreateFlowTextFieldScreen (community name)", () => {
it("renders main heading", () => {
render(<TextPage />);
render(
<CreateFlowTextFieldScreen
messageNamespace="create.communityName"
stateField="title"
maxLength={48}
/>,
);
expect(
screen.getByRole("heading", {
name: "What is your community called?",
@@ -14,7 +20,13 @@ describe("TextPage", () => {
});
it("renders description and text field", () => {
render(<TextPage />);
render(
<CreateFlowTextFieldScreen
messageNamespace="create.communityName"
stateField="title"
maxLength={48}
/>,
);
expect(
screen.getByText("This will be the name of your community"),
).toBeInTheDocument();
tests/components/UploadPage.test.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import UploadPage from "../../app/create/upload/page";
import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
describe("UploadPage", () => {
describe("CommunityUploadScreen", () => {
it("renders HeaderLockup", () => {
render(<UploadPage />);
render(<CommunityUploadScreen />);
expect(
screen.getByRole("heading", {
name: "How should conflicts be resolved?",
@@ -14,7 +14,7 @@ describe("UploadPage", () => {
});
it("renders Upload control and helper copy", () => {
render(<UploadPage />);
render(<CommunityUploadScreen />);
expect(screen.getByRole("button", { name: "Upload" })).toBeInTheDocument();
expect(
screen.getByText(/Add images, PDFs, and other files to the policy/i),
tests/pages/cards.test.jsx
+5 -5
View File
@@ -6,7 +6,7 @@ import {
} from "../utils/test-utils";
import userEvent from "@testing-library/user-event";
import { describe, test, expect, afterEach } from "vitest";
import CardsPage from "../../app/create/cards/page";
import { CardsScreen } from "../../app/create/screens/card/CardsScreen";
afterEach(() => {
cleanup();
@@ -15,7 +15,7 @@ afterEach(() => {
describe("Create flow cards page", () => {
test("clicking a card opens the Create modal", async () => {
const user = userEvent.setup();
render(<CardsPage />);
render(<CardsScreen />);
const signalCards = screen.getAllByRole("button", {
name: /Signal: Encrypted messaging/,
@@ -29,7 +29,7 @@ describe("Create flow cards page", () => {
});
test("renders without error", () => {
render(<CardsPage />);
render(<CardsScreen />);
expect(
screen.getByText(
@@ -39,7 +39,7 @@ describe("Create flow cards page", () => {
});
test("renders HeaderLockup and CardStack content", () => {
render(<CardsPage />);
render(<CardsScreen />);
expect(
screen.getByText(
@@ -53,7 +53,7 @@ describe("Create flow cards page", () => {
test("toggle expands and shows Show less", async () => {
const user = userEvent.setup();
render(<CardsPage />);
render(<CardsScreen />);
const toggle = screen.getByRole("button", {
name: "See all communication approaches",
tests/pages/right-rail.test.jsx
+10 -10
View File
@@ -6,7 +6,7 @@ import {
} from "../utils/test-utils";
import userEvent from "@testing-library/user-event";
import { describe, test, expect, afterEach } from "vitest";
import RightRailPage from "../../app/create/right-rail/page";
import { RightRailScreen } from "../../app/create/screens/right-rail/RightRailScreen";
afterEach(() => {
cleanup();
@@ -14,7 +14,7 @@ afterEach(() => {
describe("Create flow right-rail page", () => {
test("renders without error", () => {
render(<RightRailPage />);
render(<RightRailScreen />);
expect(
screen.getByRole("heading", {
@@ -24,7 +24,7 @@ describe("Create flow right-rail page", () => {
});
test("renders sidebar description with add link", () => {
render(<RightRailPage />);
render(<RightRailScreen />);
const description = screen.getByText((content, element) => {
if (element?.tagName !== "P") return false;
@@ -39,7 +39,7 @@ describe("Create flow right-rail page", () => {
});
test("renders message box with title and checkboxes", () => {
render(<RightRailPage />);
render(<RightRailScreen />);
const region = screen.getByRole("region", {
name: "Consider defining approaches to steward key resources:",
@@ -65,7 +65,7 @@ describe("Create flow right-rail page", () => {
});
test("renders card stack with See all decision approaches toggle", () => {
render(<RightRailPage />);
render(<RightRailScreen />);
expect(
screen.getByRole("button", { name: "See all decision approaches" }),
@@ -73,7 +73,7 @@ describe("Create flow right-rail page", () => {
});
test("renders recommended approach cards", () => {
render(<RightRailPage />);
render(<RightRailScreen />);
expect(
screen.getByRole("button", {
@@ -94,7 +94,7 @@ describe("Create flow right-rail page", () => {
test("toggle expands and shows Show less", async () => {
const user = userEvent.setup();
render(<RightRailPage />);
render(<RightRailScreen />);
const toggle = screen.getByRole("button", {
name: "See all decision approaches",
@@ -108,7 +108,7 @@ describe("Create flow right-rail page", () => {
test("expanded view shows Label cards", async () => {
const user = userEvent.setup();
render(<RightRailPage />);
render(<RightRailScreen />);
const toggle = screen.getByRole("button", {
name: "See all decision approaches",
@@ -121,7 +121,7 @@ describe("Create flow right-rail page", () => {
test("clicking a card toggles selection", async () => {
const user = userEvent.setup();
render(<RightRailPage />);
render(<RightRailScreen />);
const mediationCard = screen.getByRole("button", {
name: /Mediation: Collaborative work to reach a resolution/,
@@ -133,7 +133,7 @@ describe("Create flow right-rail page", () => {
test("message box checkboxes are interactive", async () => {
const user = userEvent.setup();
render(<RightRailPage />);
render(<RightRailScreen />);
const amendCheckbox = screen.getByRole("checkbox", {
name: "Amend your CommunityRule",
tests/pages/templates.test.jsx
+7 -3
View File
@@ -5,7 +5,7 @@ import {
} from "../utils/test-utils";
import userEvent from "@testing-library/user-event";
import { describe, test, expect, afterEach, beforeEach } from "vitest";
import TemplatesPage from "../../app/(marketing)/templates/page";
import TemplatesPageClient from "../../app/(marketing)/templates/TemplatesPageClient";
import { testRouter } from "../mocks/navigation";
import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
@@ -19,7 +19,9 @@ afterEach(() => {
describe("Templates page (/templates)", () => {
test("renders title, intro, and full catalog", () => {
render(<TemplatesPage />);
render(
<TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
);
expect(
screen.getByRole("heading", { name: "Templates", level: 1 }),
@@ -35,7 +37,9 @@ describe("Templates page (/templates)", () => {
test("each template card navigates to review flow for its slug", async () => {
const user = userEvent.setup();
render(<TemplatesPage />);
render(
<TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
);
const consensusCard = screen.getByText("Consensus").closest("div");
await user.click(consensusCard);
tests/unit/flowSteps.test.ts
+1 -1
View File
@@ -34,7 +34,7 @@ describe("flowSteps", () => {
});
it("isValidStep reflects FLOW_STEP_ORDER membership", () => {
expect(isValidStep("select")).toBe(true);
expect(isValidStep("community-size")).toBe(true);
expect(isValidStep("confirm-stakeholders")).toBe(true);
expect(isValidStep("nope")).toBe(false);
expect(isValidStep(null)).toBe(false);
tests/unit/hasCreateFlowUserInput.test.ts
+4 -2
View File
@@ -1,5 +1,5 @@
import { describe, it, expect } from "vitest";
import { hasCreateFlowUserInput } from "../../app/create/hasCreateFlowUserInput";
import { hasCreateFlowUserInput } from "../../app/create/utils/hasCreateFlowUserInput";
describe("hasCreateFlowUserInput", () => {
it("returns false for empty state", () => {
@@ -7,7 +7,9 @@ describe("hasCreateFlowUserInput", () => {
});
it("ignores currentStep alone", () => {
expect(hasCreateFlowUserInput({ currentStep: "text" })).toBe(false);
expect(hasCreateFlowUserInput({ currentStep: "informational" })).toBe(
false,
);
});
it("returns true for non-empty title", () => {