Ask the six optional setup questions after size so each tick can change suggested cards, keeping the answers on the draft and off the published Rule.

tests/pages/setup-questions.test.tsx

@@ -0,0 +1,90 @@
+import "@testing-library/jest-dom/vitest";
+import { useLayoutEffect } from "react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+import { SetupQuestionsScreen } from "../../app/(app)/create/screens/select/SetupQuestionsScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import type { CreateFlowState } from "../../app/(app)/create/types";
+import { TRAIT_KEYS } from "../../lib/create/deckTypes";
+import messages from "../../messages/en/index";
+import {
+  cleanup,
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+
+const copy = messages.create.community.setupQuestions;
+
+function ScreenWithState({ initial }: { initial: CreateFlowState }) {
+  const { replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState(initial);
+  }, [replaceState, initial]);
+  return <SetupQuestionsScreen />;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Create flow setup-questions page", () => {
+  it("renders the six questions off by default with a help line under each", () => {
+    render(<SetupQuestionsScreen />);
+
+    expect(
+      screen.getByRole("heading", { name: copy.title }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(copy.description)).toBeInTheDocument();
+
+    for (const question of copy.questions) {
+      const checkbox = screen.getByRole("checkbox", { name: question.label });
+      expect(checkbox).toHaveAttribute("aria-checked", "false");
+      expect(screen.getByText(question.help)).toBeInTheDocument();
+    }
+    expect(copy.questions).toHaveLength(6);
+    expect(copy.questions.map((question) => question.id)).toEqual([
+      ...TRAIT_KEYS,
+    ]);
+  });
+
+  it("ticks a question from the box or the help line", async () => {
+    const user = userEvent.setup();
+    render(<SetupQuestionsScreen />);
+
+    await user.click(
+      screen.getByRole("checkbox", { name: copy.questions[2].label }),
+    );
+    expect(
+      screen.getByRole("checkbox", { name: copy.questions[2].label }),
+    ).toHaveAttribute("aria-checked", "true");
+
+    await user.click(screen.getByText(copy.questions[0].help));
+    expect(
+      screen.getByRole("checkbox", { name: copy.questions[0].label }),
+    ).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("restores ticked answers from the draft", () => {
+    render(
+      <ScreenWithState
+        initial={{ setupTraits: { employer: true, sponsor: false } }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: copy.questions[2].label }),
+    ).toHaveAttribute("aria-checked", "true");
+    expect(
+      screen.getByRole("checkbox", { name: copy.questions[3].label }),
+    ).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("does not ask about police, immigration enforcement, or protest", () => {
+    const blob = `${copy.title} ${copy.description} ${copy.questions
+      .map((question) => `${question.label} ${question.help}`)
+      .join(" ")}`.toLowerCase();
+    expect(blob).not.toMatch(/police/);
+    expect(blob).not.toMatch(/immigration/);
+    expect(blob).not.toMatch(/protest/);
+  });
+});