Right rail template

tests/pages/cards.test.jsx

@@ -32,7 +32,9 @@ describe("Create flow cards page", () => {
     render(<CardsPage />);
 
     expect(
-      screen.getByText("How should this community communicate with each-other?"),
+      screen.getByText(
+        "How should this community communicate with each-other?",
+      ),
     ).toBeInTheDocument();
   });
 
@@ -58,7 +60,9 @@ describe("Create flow cards page", () => {
     });
     await user.click(toggle);
 
-    expect(screen.getByRole("button", { name: "Show less" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
     expect(
       screen.getByText(
         "What method should this community use to communicate with eachother?",

tests/pages/right-rail.test.jsx

@@ -0,0 +1,145 @@
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  within,
+} 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";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Create flow right-rail page", () => {
+  test("renders without error", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("heading", {
+        name: "How should conflicts be resolved?",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders sidebar description with add link", () => {
+    render(<RightRailPage />);
+
+    const description = screen.getByText((content, element) => {
+      if (element?.tagName !== "P") return false;
+      const text = element.textContent ?? "";
+      return (
+        text.includes("You can also combine or") &&
+        text.includes("add") &&
+        text.includes("new approaches to the list")
+      );
+    });
+    expect(description).toBeInTheDocument();
+  });
+
+  test("renders message box with title and checkboxes", () => {
+    render(<RightRailPage />);
+
+    const region = screen.getByRole("region", {
+      name: "Consider defining approaches to steward key resources:",
+    });
+    expect(region).toBeInTheDocument();
+
+    expect(
+      within(region).getByRole("checkbox", {
+        name: "Amend your CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", { name: "Steward finances" }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", { name: "Project level decisions" }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", {
+        name: "Discipline and member termination",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders card stack with See all decision approaches toggle", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("button", { name: "See all decision approaches" }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders recommended approach cards", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("button", {
+        name: /Mediation: Collaborative work to reach a resolution/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: /Facilitated dialogue: Structured sessions/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: /Invite-only: Private discussions with selected participants/,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("toggle expands and shows Show less", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const toggle = screen.getByRole("button", {
+      name: "See all decision approaches",
+    });
+    await user.click(toggle);
+
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
+  });
+
+  test("expanded view shows Label cards", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const toggle = screen.getByRole("button", {
+      name: "See all decision approaches",
+    });
+    await user.click(toggle);
+
+    const labelButtons = screen.getAllByRole("button", { name: /^Label/ });
+    expect(labelButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test("clicking a card toggles selection", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const mediationCard = screen.getByRole("button", {
+      name: /Mediation: Collaborative work to reach a resolution/,
+    });
+    await user.click(mediationCard);
+
+    expect(screen.getByText("SELECTED")).toBeInTheDocument();
+  });
+
+  test("message box checkboxes are interactive", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const amendCheckbox = screen.getByRole("checkbox", {
+      name: "Amend your CommunityRule",
+    });
+    expect(amendCheckbox).not.toBeChecked();
+    await user.click(amendCheckbox);
+    expect(amendCheckbox).toBeChecked();
+  });
+});

tests/pages/user-journey.test.jsx

@@ -15,10 +15,8 @@ vi.mock("next/dynamic", () => {
     default: (importFn, options) => {
       // In tests, resolve the dynamic import immediately and return the component
       let Component = null;
-      let resolved = false;
       importFn().then((mod) => {
         Component = mod.default || mod;
-        resolved = true;
       });
       // Return a synchronous wrapper that uses the mocked component
       return (props) => {
@@ -261,10 +259,12 @@ describe("User Journey Integration", () => {
         },
         { timeout: 3000 },
       );
-    } catch (error) {
+    } catch {
       // Dynamic import may not resolve in test environment - this is a known limitation
       // The component functionality is tested in RuleStack.test.jsx
-      console.warn("Dynamic import for RuleStack did not resolve in test environment");
+      console.warn(
+        "Dynamic import for RuleStack did not resolve in test environment",
+      );
     }
 
     // 4. User sees features and benefits - wait for dynamically imported component