create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.permalink.test.tsx

@@ -0,0 +1,445 @@
+/**
+ * Tests for FlowStepperClient's permalink completion redirect on a
+ * `mode:"recommending"` flow (#4770 D1/D7/D12).
+ *
+ * A SEPARATE file from `FlowStepperClient.test.tsx` — the regression floor
+ * §5.2 requires stay UNEDITED — because that file's fixtures are all
+ * `qualifying`-shaped (no `mode`/`offers`), so it never exercises the
+ * recommending branch this spec adds. Scope extension (§4's own D6
+ * precedent): the smallest addition that gives AC5's two novel assertions a
+ * test home without touching the regression-floor file.
+ *
+ * AC5 (bullet 5, this file's half) — completing a recommending flow pushes
+ * the results permalink, whose decoded payload matches the answers
+ * submitted. (The qualifying-flow half of AC5 is already covered, unedited,
+ * by `FlowStepperClient.test.tsx`'s own AC1/AC4 suites.)
+ *
+ * AC5 (bullet 6) — a recommending flow whose field steps submitted an
+ * email, a name, a phone number, and free text produces a payload whose
+ * decoded answers contain NONE of those four submitted substrings, and
+ * whose keys are exactly the flow's segmentation question ids.
+ *
+ * `@working-theory/ui`'s FlowStepper is mocked as a minimal stub that
+ * captures the `onSubmitStep`/`onCompleted` props it receives, exactly as
+ * the sibling file does — this file's scope is FlowStepperClient's own
+ * wiring, not FlowStepper's own submission/step-navigation behavior
+ * (covered by its own package test).
+ */
+import { render } from "@testing-library/react";
+import type { FlowConfig } from "@working-theory/validation";
+import { decodePermalink } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+// FlowStepperClient binds onSubmitStep directly to this Server Action, and
+// the boundary under test here is the onCompleted -> router.push wiring, not
+// the action itself (covered by flow.actions.test.ts) — mirrors the sibling
+// FlowStepperClient.test.tsx's identical narrow-scope justification.
+// eslint-disable-next-line no-restricted-syntax -- see comment above
+jest.mock("../flow.actions", () => ({
+  submitFlowStepAction: jest.fn(),
+}));
+
+interface MockFlowStepperProps {
+  onSubmitStep: (payload: {
+    stepKey: string;
+    values: Record<string, unknown>;
+    locale?: string;
+  }) => Promise<{
+    ok: boolean;
+    kind?: string;
+    response?: { completed: boolean; segment?: string };
+  }>;
+  onCompleted?: (result: { segment?: string }) => void;
+}
+
+let captured: MockFlowStepperProps | undefined;
+
+jest.mock("@working-theory/ui", () => ({
+  FlowStepper: (props: MockFlowStepperProps) => {
+    captured = props;
+    return require("react").createElement("div", {
+      "data-testid": "mock-flow-stepper",
+    }) as ReactElement;
+  },
+}));
+
+import { submitFlowStepAction } from "../flow.actions";
+import { FlowStepperClient } from "../FlowStepperClient";
+
+const mockSubmitFlowStepAction = submitFlowStepAction as jest.MockedFunction<
+  typeof submitFlowStepAction
+>;
+
+const SLUG = "ailk-recommender";
+
+function recommendingFlowConfig(): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "team",
+        type: "segmentation",
+        copy: { title: { en: "Team" } },
+        questions: [
+          {
+            name: "team_size",
+            options: [
+              { value: "solo", label: { en: "Solo" } },
+              { value: "agency", label: { en: "Agency" } },
+            ],
+          },
+          {
+            name: "wants_seo",
+            options: [
+              { value: "yes", label: { en: "Yes" } },
+              { value: "no", label: { en: "No" } },
+            ],
+          },
+        ],
+      },
+      {
+        key: "contact",
+        type: "field",
+        copy: { title: { en: "Contact" } },
+        fields: [
+          {
+            name: "email",
+            inputType: "email",
+            required: true,
+            copy: { label: { en: "Email" } },
+          },
+          {
+            name: "name",
+            inputType: "text",
+            required: true,
+            copy: { label: { en: "Name" } },
+          },
+          {
+            name: "phone",
+            inputType: "tel",
+            copy: { label: { en: "Phone" } },
+          },
+          {
+            name: "message",
+            inputType: "textarea",
+            copy: { label: { en: "Message" } },
+          },
+        ],
+      },
+    ],
+    offers: [
+      {
+        key: "free_oss",
+        copy: { name: { en: "Free" } },
+        price: { kind: "label", label: { en: "Free" } },
+        rules: [
+          {
+            when: { answer: "team_size", eq: "solo" },
+            reason: { en: "You're solo" },
+          },
+        ],
+      },
+    ],
+  } as FlowConfig;
+}
+
+function pushedPayload(): string {
+  expect(mockPush).toHaveBeenCalledTimes(1);
+  const pushedUrl = mockPush.mock.calls[0]?.[0] as string;
+  const match = pushedUrl.match(new RegExp(`^/en/flows/${SLUG}/results/(.+)$`));
+  expect(match).not.toBeNull();
+  return match![1]!;
+}
+
+beforeEach(() => {
+  mockPush.mockClear();
+  mockSubmitFlowStepAction.mockClear();
+  captured = undefined;
+});
+
+describe("FlowStepperClient — permalink completion on a recommending flow (#4770 AC5 bullet 5)", () => {
+  it("pushes the results permalink, whose decoded payload matches the answers submitted", async () => {
+    mockSubmitFlowStepAction.mockResolvedValueOnce({
+      ok: true,
+      response: {
+        sessionId: "sess1",
+        landed: "team",
+        nextStepKey: null,
+        completed: true,
+      },
+    });
+
+    render(
+      <FlowStepperClient
+        config={recommendingFlowConfig()}
+        locale="en"
+        slug={SLUG}
+      />,
+    );
+
+    const result = await captured!.onSubmitStep({
+      stepKey: "team",
+      values: { team_size: "solo", wants_seo: "yes" },
+      locale: "en",
+    });
+    expect(result.ok).toBe(true);
+
+    captured!.onCompleted?.({});
+
+    const decoded = decodePermalink(pushedPayload());
+    expect(decoded.ok).toBe(true);
+    if (!decoded.ok) return;
+    expect(decoded.value.flowSlug).toBe(SLUG);
+    expect(decoded.value.answers).toEqual({
+      team_size: "solo",
+      wants_seo: "yes",
+    });
+  });
+});
+
+describe("FlowStepperClient — PII exclusion on a recommending flow (#4770 AC5 bullet 6)", () => {
+  it("excludes every field-step value; keys are exactly the segmentation question ids", async () => {
+    mockSubmitFlowStepAction
+      .mockResolvedValueOnce({
+        ok: true,
+        response: {
+          sessionId: "sess1",
+          landed: "team",
+          nextStepKey: "contact",
+          completed: false,
+        },
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        response: {
+          sessionId: "sess1",
+          landed: "contact",
+          nextStepKey: null,
+          completed: true,
+        },
+      });
+
+    render(
+      <FlowStepperClient
+        config={recommendingFlowConfig()}
+        locale="en"
+        slug={SLUG}
+      />,
+    );
+
+    await captured!.onSubmitStep({
+      stepKey: "team",
+      values: { team_size: "agency", wants_seo: "no" },
+      locale: "en",
+    });
+
+    const PII_PAYLOAD = {
+      email: "jane@example.com",
+      name: "Jane Doe",
+      phone: "555-123-4567",
+      message: "Please reach out about the enterprise plan as soon as possible",
+    };
+    await captured!.onSubmitStep({
+      stepKey: "contact",
+      values: PII_PAYLOAD,
+      locale: "en",
+    });
+
+    captured!.onCompleted?.({});
+
+    const decoded = decodePermalink(pushedPayload());
+    expect(decoded.ok).toBe(true);
+    if (!decoded.ok) return;
+
+    expect(Object.keys(decoded.value.answers).sort()).toEqual([
+      "team_size",
+      "wants_seo",
+    ]);
+
+    const serializedAnswers = JSON.stringify(decoded.value.answers);
+    for (const value of Object.values(PII_PAYLOAD)) {
+      expect(serializedAnswers).not.toContain(value);
+    }
+  });
+});
+
+// Code-review finding (#4770): the permalink's answer set must include the
+// `whenHidden` auto-answers of a currently-hidden segmentation step —
+// exactly what the server's own completion-payload assembly
+// (flow-engine.ts's completeSubmission) merges in via `hiddenAnswers()` —
+// so a cold-load recommendation never silently diverges from what the same
+// walk would score through the server's own pipeline.
+function recommendingFlowConfigWithHiddenStep(): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "team",
+        type: "segmentation",
+        copy: { title: { en: "Team" } },
+        questions: [
+          {
+            name: "team_size",
+            options: [
+              { value: "solo", label: { en: "Solo" } },
+              { value: "agency", label: { en: "Agency" } },
+            ],
+          },
+        ],
+      },
+      {
+        key: "extras",
+        type: "segmentation",
+        copy: { title: { en: "Extras" } },
+        // Hidden whenever team_size !== "agency" — never landed/submitted
+        // for a "solo" visitor, so its answer never reaches answersRef.
+        showIf: { answer: "team_size", eq: "agency" },
+        whenHidden: { extras_included: "none" },
+        questions: [
+          {
+            name: "extras_included",
+            options: [
+              { value: "none", label: { en: "None" } },
+              { value: "addon", label: { en: "Add-on" } },
+            ],
+          },
+        ],
+      },
+    ],
+    offers: [
+      {
+        key: "free_oss",
+        copy: { name: { en: "Free" } },
+        price: { kind: "label", label: { en: "Free" } },
+        rules: [
+          {
+            when: { answer: "team_size", eq: "solo" },
+            reason: { en: "You're solo" },
+          },
+        ],
+      },
+    ],
+  } as FlowConfig;
+}
+
+describe("FlowStepperClient — hidden-step whenHidden auto-answers reach the permalink (code-review finding, #4770)", () => {
+  it("includes a currently-hidden segmentation step's whenHidden auto-answer, never submitted directly", async () => {
+    mockSubmitFlowStepAction.mockResolvedValueOnce({
+      ok: true,
+      response: {
+        sessionId: "sess1",
+        landed: "team",
+        nextStepKey: null,
+        completed: true,
+      },
+    });
+
+    render(
+      <FlowStepperClient
+        config={recommendingFlowConfigWithHiddenStep()}
+        locale="en"
+        slug={SLUG}
+      />,
+    );
+
+    // Only "team" is ever submitted — "extras" is hidden (showIf fails for
+    // team_size:"solo") and its step is never landed/submitted.
+    await captured!.onSubmitStep({
+      stepKey: "team",
+      values: { team_size: "solo" },
+      locale: "en",
+    });
+
+    captured!.onCompleted?.({});
+
+    const decoded = decodePermalink(pushedPayload());
+    expect(decoded.ok).toBe(true);
+    if (!decoded.ok) return;
+
+    expect(decoded.value.answers).toEqual({
+      team_size: "solo",
+      extras_included: "none",
+    });
+  });
+});
+
+// ─── #4842 AC-6 (the write half) — the walk's session id rides sessionStorage
+// (additive; the cases above are the regression floor and stay as they were) ─
+
+describe("FlowStepperClient — session hand-off on completion (#4842 AC-6, write half)", () => {
+  const STORAGE_KEY = `ailk:flow-session:${SLUG}`;
+
+  beforeEach(() => {
+    window.sessionStorage.clear();
+  });
+
+  it("a recommending completion writes the LAST onSubmitStep result's response.sessionId before router.push", async () => {
+    mockSubmitFlowStepAction
+      .mockResolvedValueOnce({
+        ok: true,
+        response: { sessionId: "sess-first", landed: "team", nextStepKey: "contact", completed: false },
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        response: { sessionId: "sess-last", landed: "contact", nextStepKey: null, completed: true },
+      });
+    let storedAtPush: string | null | undefined;
+    mockPush.mockImplementationOnce(() => {
+      storedAtPush = window.sessionStorage.getItem(STORAGE_KEY);
+    });
+
+    render(<FlowStepperClient config={recommendingFlowConfig()} locale="en" slug={SLUG} />);
+
+    await captured!.onSubmitStep({
+      stepKey: "team",
+      values: { team_size: "solo", wants_seo: "yes" },
+      locale: "en",
+    });
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+    await captured!.onSubmitStep({
+      stepKey: "contact",
+      values: { email: "jane@example.com", name: "Jane" },
+      locale: "en",
+    });
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+
+    captured!.onCompleted?.({});
+
+    expect(mockPush).toHaveBeenCalledTimes(1);
+    expect(storedAtPush).toBe("sess-last");
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBe("sess-last");
+  });
+
+  it("a qualifying completion writes nothing", async () => {
+    mockSubmitFlowStepAction.mockResolvedValueOnce({
+      ok: true,
+      response: { sessionId: "sess-q", landed: "team", nextStepKey: null, completed: true },
+    });
+    const { mode: _mode, offers: _offers, ...qualifying } = recommendingFlowConfig();
+
+    render(<FlowStepperClient config={qualifying as FlowConfig} locale="en" slug={SLUG} />);
+
+    await captured!.onSubmitStep({
+      stepKey: "team",
+      values: { team_size: "solo", wants_seo: "yes" },
+      locale: "en",
+    });
+    captured!.onCompleted?.({});
+
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+});