create-ailk 0.2.0 → 0.4.0

package/templates/apps/web/app/[locale]/flows/[slug]/results/[payload]/__tests__/ResultsClient.checkout.test.tsx

@@ -1,457 +0,0 @@
-/**
- * Tests for the results page's purchase hand-off composition (#4842).
- *
- * AC-1 — no PII request leaves before the visitor chooses: with the actions
- *   mocked and `globalThis.fetch` spied, rendering, opening "Why this?",
- *   selecting Get Started (the email step + price card appear), and an
- *   INVALID email submit all invoke nothing; only a valid email + Pay calls
- *   `startCheckoutAction` — call counts asserted at each of the four points.
- * AC-2 — Pay calls `startCheckoutAction(slug, input)` once with the answers,
- *   email, locale, offerKey, the card's CURRENT seats / period / creditStop,
- *   and the permalink `payload` the action builds the two return URLs from
- *   (server-side, from the app's own origin — the #4875 security fix; the
- *   URLs themselves are asserted in `checkout.actions.test.ts`) — no
- *   `amount` / `total` / `unitAmount`.
- * AC-3 — the configurable price card renders in the frame's SECOND slot
- *   (`flow-frame-active` — DESIGN §7.6's flip: fields left, price card
- *   right) at the D3 initial state showing `$249` (major units); stepping
- *   seats to 2
- *   re-renders `$498` with no request, and Pay then sends `seats: 2`; the
- *   three frame regions are the SAME DOM nodes before and after the
- *   transition; an offer with no seat-rate row — and every offer on a
- *   register with no `rateTable.currency` — gets Book a Call, never Get
- *   Started.
- * AC-4 — "Email me this plan" + a valid email calls
- *   `saveRecommendationAction` once, renders the saved micro-state, never
- *   calls checkout, and leaves the safe-default side panel in place.
- * AC-6 (the read half) — a `sessionStorage` entry rides as `sessionId` in
- *   both bodies; absent, the key is omitted entirely.
- *
- * Mocks: `../../../checkout.actions` (both actions — the boundary under
- * test is ResultsClient → the actions, covered on their own by
- * `checkout.actions.test.ts`), `next-intl` (identity translator), and a
- * `globalThis.fetch` spy. `@working-theory/api-client` is mocked exactly as
- * `page.test.tsx` does so an accidental import can never reach the network.
- */
-import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type { FlowConfig } from "@working-theory/validation";
-import type { ReactElement } from "react";
-
-const mockGet = jest.fn();
-jest.mock("@working-theory/api-client", () => ({
-  __esModule: true,
-  flows: { get: (...args: unknown[]) => mockGet(...args) },
-}));
-
-const mockStart = jest.fn();
-const mockSave = jest.fn();
-// The boundary under test is ResultsClient's own wiring to its two Server
-// Actions, not the actions themselves (checkout.actions.test.ts) — the same
-// narrow-scope justification FlowStepperClient.permalink.test.tsx carries.
-// eslint-disable-next-line no-restricted-syntax -- see comment above
-jest.mock("../../../checkout.actions", () => ({
-  startCheckoutAction: (...args: unknown[]) => mockStart(...args),
-  saveRecommendationAction: (...args: unknown[]) => mockSave(...args),
-}));
-
-jest.mock("next-intl", () => ({
-  __esModule: true,
-  useTranslations: () => (key: string) => key,
-  useMessages: () => ({}),
-}));
-
-import { ResultsClient } from "../ResultsClient";
-
-const SLUG = "ailk-recommender";
-const PAYLOAD = "v1-abc123";
-const ANSWERS = { team_size: "agency", wants_seo: "yes" };
-const STORAGE_KEY = `ailk:flow-session:${SLUG}`;
-
-function fixtureConfig(overrides: Partial<FlowConfig> = {}): 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" } },
-            ],
-          },
-        ],
-      },
-    ],
-    offers: [
-      {
-        key: "pro",
-        copy: { name: { en: "Pro" }, description: { en: "For teams." } },
-        price: { kind: "exact", amount: 249, period: "annual" },
-        rules: [
-          { when: { answer: "team_size", eq: "agency" }, reason: { en: "You run an agency." } },
-        ],
-      },
-      {
-        key: "consult",
-        copy: { name: { en: "Consulting" } },
-        price: { kind: "label", label: { en: "Application-based" } },
-        rules: [
-          { when: { answer: "wants_seo", eq: "yes" }, reason: { en: "You want organic reach." } },
-        ],
-      },
-      {
-        key: "free",
-        copy: { name: { en: "Free" } },
-        price: { kind: "label", label: { en: "Free" } },
-        rules: [{ when: { answer: "team_size", eq: "solo" }, reason: { en: "Solo." } }],
-      },
-    ],
-    pairings: [
-      {
-        offers: ["pro", "consult"],
-        reason: { en: "Pro plus a consult covers both." },
-        when: { answer: "wants_seo", eq: "yes" },
-      },
-    ],
-    rateTable: {
-      currency: "usd",
-      seatRates: [
-        { offer: "pro", amount: 249, period: "annual" },
-        { offer: "pro", amount: 25, period: "monthly" },
-      ],
-      creditLadder: {
-        denomination: "annual",
-        tiers: [
-          { credits: 10, amount: 99 },
-          { credits: 50, amount: 399 },
-        ],
-        custom: { en: "Contact us" },
-      },
-    },
-    recommendation: { key: "recommendation", copy: { title: { en: "Your recommendation" } } },
-    ...overrides,
-  } as FlowConfig;
-}
-
-function renderResults(
-  config: FlowConfig = fixtureConfig(),
-  extra: { returnState?: "success" | "cancelled" } = {},
-): ReactElement {
-  const element = (
-    <ResultsClient
-      config={config}
-      locale="en"
-      answers={ANSWERS}
-      slug={SLUG}
-      payload={PAYLOAD}
-      {...extra}
-    />
-  );
-  render(element);
-  return element;
-}
-
-const fetchSpy = jest.fn();
-
-function expectNothingSent(): void {
-  expect(mockStart).not.toHaveBeenCalled();
-  expect(mockSave).not.toHaveBeenCalled();
-  expect(fetchSpy).not.toHaveBeenCalled();
-  expect(mockGet).not.toHaveBeenCalled();
-}
-
-const EXPECTED_INITIAL_BODY = {
-  answers: ANSWERS,
-  email: "jane@example.com",
-  locale: "en",
-  offerKey: "pro",
-  seats: 1,
-  period: "annual",
-  creditStop: { kind: "none" },
-  payload: PAYLOAD,
-};
-
-/**
- * What a redirecting Server Action's `await` surfaces to the client on the
- * SUCCESS path — Next's `NEXT_REDIRECT` control-flow error, recognised by its
- * digest (`redirect-error.js`: `NEXT_REDIRECT;<push|replace>;<url>;<status>;`).
- */
-function nextRedirectError(url: string): Error {
-  const err = new Error("NEXT_REDIRECT");
-  (err as Error & { digest: string }).digest = `NEXT_REDIRECT;push;${url};307;`;
-  return err;
-}
-
-beforeAll(() => {
-  Object.defineProperty(globalThis, "fetch", {
-    value: fetchSpy,
-    configurable: true,
-    writable: true,
-  });
-});
-
-beforeEach(() => {
-  mockGet.mockReset();
-  mockStart.mockReset();
-  mockSave.mockReset();
-  fetchSpy.mockReset();
-  window.sessionStorage.clear();
-  // A redirecting action never resolves with a value on success (Next
-  // navigates) — the default mock mirrors that: it resolves `undefined`.
-  mockStart.mockResolvedValue(undefined);
-  mockSave.mockResolvedValue({ ok: true, leadId: "lead_1" });
-});
-
-async function submitEmail(
-  user: ReturnType<typeof userEvent.setup>,
-  email: string,
-  via: "enter" | "pay" | "save" = "enter",
-): Promise<void> {
-  const input = screen.getByLabelText(
-    via === "save" ? "emailStepSaveTitle" : "emailStepTitle",
-  );
-  await user.clear(input);
-  await user.type(input, email);
-  if (via === "enter") {
-    await user.keyboard("{Enter}");
-  } else {
-    await user.click(
-      screen.getByTestId(via === "pay" ? "flow-results-pay" : "flow-results-save"),
-    );
-  }
-}
-
-describe("AC-1 — no PII request leaves before the visitor chooses", () => {
-  it("invokes neither action nor fetch until a valid email + Pay", async () => {
-    const user = userEvent.setup();
-    renderResults();
-
-    // Point 1 — the cold render.
-    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
-    expectNothingSent();
-
-    // Point 2 — opening a "Why this?" disclosure.
-    await user.click(screen.getByTestId("recommendation-card-pro-why-trigger"));
-    expect(screen.getByText("You run an agency.")).toBeInTheDocument();
-    expectNothingSent();
-
-    // Point 3 — Get Started: the email step + the price card appear.
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    expect(screen.getByTestId("results-email-step")).toBeInTheDocument();
-    expect(screen.getByTestId("checkout-price-card")).toBeInTheDocument();
-    expectNothingSent();
-
-    // Point 4 — an invalid email shows the validation message, sends nothing.
-    await submitEmail(user, "not-an-email");
-    expect(screen.getByRole("alert")).toHaveTextContent("validationInvalidEmail");
-    expectNothingSent();
-
-    // Only a valid email + Pay (Enter submits — #4806 FR4) calls the action.
-    await submitEmail(user, "jane@example.com");
-    expect(mockStart).toHaveBeenCalledTimes(1);
-    expect(mockSave).not.toHaveBeenCalled();
-    expect(fetchSpy).not.toHaveBeenCalled();
-  });
-});
-
-describe("AC-2 — Pay calls checkout once, with no amount", () => {
-  it("sends exactly the answers, email, locale, offerKey, the card's state and the permalink payload", async () => {
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await submitEmail(user, "jane@example.com", "pay");
-
-    expect(mockStart).toHaveBeenCalledTimes(1);
-    expect(mockStart).toHaveBeenCalledWith(SLUG, EXPECTED_INITIAL_BODY);
-    const body = mockStart.mock.calls[0]?.[1] as Record<string, unknown>;
-    expect(body).toEqual(EXPECTED_INITIAL_BODY);
-    for (const key of ["amount", "total", "unitAmount", "successUrl", "cancelUrl"]) {
-      expect(Object.keys(body)).not.toContain(key);
-    }
-    expect(body).not.toHaveProperty("sessionId");
-  });
-
-  it("never converts a NEXT_REDIRECT (the success path) into the error micro-state — Pay + Back stay pending", async () => {
-    const redirectErr = nextRedirectError("https://checkout.stripe.com/c/pay/cs_test_123");
-    mockStart.mockImplementation(() => {
-      throw redirectErr;
-    });
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await submitEmail(user, "jane@example.com", "pay");
-    // Let the settled handler flush.
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    expect(mockStart).toHaveBeenCalledTimes(1);
-    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
-    expect(screen.getByTestId("flow-results-pay")).toBeDisabled();
-    expect(screen.getByRole("button", { name: "back" })).toBeDisabled();
-  });
-
-  it("a NON-redirect throw from the action IS the error micro-state", async () => {
-    mockStart.mockImplementation(() => {
-      throw new TypeError("fetch failed");
-    });
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await submitEmail(user, "jane@example.com", "pay");
-    expect(await screen.findByRole("alert")).toHaveTextContent("checkoutError");
-    expect(screen.getByTestId("flow-results-pay")).not.toBeDisabled();
-  });
-
-  it("renders the checkout error and re-enables Pay when the action returns a failure", async () => {
-    mockStart.mockResolvedValue({ ok: false, kind: "not_configured" });
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await submitEmail(user, "jane@example.com", "pay");
-    expect(await screen.findByRole("alert")).toHaveTextContent("checkoutError");
-    expect(screen.getByTestId("flow-results-pay")).not.toBeDisabled();
-  });
-});
-
-describe("AC-3 — the configurable price card mirrors price() in major units; unquotable offers get Book a Call", () => {
-  it("shows $249 at the D3 initial state, $498 after one seat step with no request, and Pay sends seats: 2", async () => {
-    const user = userEvent.setup();
-    renderResults();
-
-    const side = screen.getByTestId("flow-frame-side");
-    const activeRegion = screen.getByTestId("flow-frame-active");
-    const bar = screen.getByTestId("flow-frame-bar");
-    expect(within(side).getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
-
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-
-    // The same three DOM nodes — the frame is never remounted (#4806 FR7).
-    expect(screen.getByTestId("flow-frame-side")).toBe(side);
-    expect(screen.getByTestId("flow-frame-active")).toBe(activeRegion);
-    expect(screen.getByTestId("flow-frame-bar")).toBe(bar);
-
-    // DESIGN §7.6 — the flip: the email step takes the FIRST slot (left at
-    // md+, first in the mobile stack); the price card takes the SECOND.
-    expect(within(side).getByTestId("results-email-step")).toBeInTheDocument();
-    expect(within(side).queryByTestId("flow-side-panel-safe-default")).not.toBeInTheDocument();
-    const card = within(activeRegion).getByTestId("checkout-price-card");
-    expect(within(card).getByTestId("checkout-price-card-offer-name")).toHaveTextContent("Pro");
-    expect(within(card).getByTestId("checkout-price-card-total")).toHaveTextContent("$249");
-    expect(within(card).queryByText("$2.49")).not.toBeInTheDocument();
-    expect(within(bar).getByTestId("flow-results-pay")).toBeInTheDocument();
-
-    await user.click(within(card).getByTestId("checkout-price-card-seats-increment"));
-    expect(within(card).getByTestId("checkout-price-card-total")).toHaveTextContent("$498");
-    expectNothingSent();
-
-    await submitEmail(user, "jane@example.com", "pay");
-    expect(mockStart).toHaveBeenCalledTimes(1);
-    expect(mockStart.mock.calls[0]?.[1]).toEqual({
-      ...EXPECTED_INITIAL_BODY,
-      seats: 2,
-      period: "annual",
-      creditStop: { kind: "none" },
-    });
-  });
-
-  it("Back returns to the results view with the recommendation intact and nothing sent", async () => {
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await user.click(screen.getByRole("button", { name: "back" }));
-    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
-    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
-    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
-    expectNothingSent();
-  });
-
-  it("an offer with no seat-rate row renders Book a Call, never Get Started", () => {
-    renderResults();
-    expect(screen.getByTestId("recommendation-card-consult-terminal-bookCall")).toBeInTheDocument();
-    expect(
-      screen.queryByTestId("recommendation-card-consult-terminal-getStarted"),
-    ).not.toBeInTheDocument();
-    expect(screen.getByTestId("recommendation-card-pro-terminal-getStarted")).toBeInTheDocument();
-    expect(screen.getByTestId("recommendation-pairing")).toBeInTheDocument();
-  });
-
-  it("every offer on a register with no rateTable.currency renders Book a Call", () => {
-    const config = fixtureConfig();
-    const { currency: _currency, ...rateTable } = config.rateTable!;
-    renderResults({ ...config, rateTable });
-    expect(screen.getByTestId("recommendation-card-pro-terminal-bookCall")).toBeInTheDocument();
-    expect(screen.getByTestId("recommendation-card-consult-terminal-bookCall")).toBeInTheDocument();
-    expect(screen.queryAllByTestId(/-terminal-getStarted$/)).toHaveLength(0);
-  });
-});
-
-describe("AC-4 — Email me this plan", () => {
-  it("calls saveRecommendationAction once, renders the saved state, never calls checkout, keeps the safe-default panel", async () => {
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
-    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
-    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
-    expectNothingSent();
-
-    await submitEmail(user, "jane@example.com", "save");
-
-    expect(mockSave).toHaveBeenCalledTimes(1);
-    expect(mockSave).toHaveBeenCalledWith(SLUG, {
-      answers: ANSWERS,
-      email: "jane@example.com",
-      locale: "en",
-    });
-    expect(await screen.findByTestId("results-email-step-saved")).toBeInTheDocument();
-    expect(mockStart).not.toHaveBeenCalled();
-    expect(fetchSpy).not.toHaveBeenCalled();
-    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
-    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
-  });
-});
-
-describe("AC-6 (read half) — session resume is forwarded, never fabricated", () => {
-  it("forwards a stored session id in both bodies", async () => {
-    window.sessionStorage.setItem(STORAGE_KEY, "fs_walk_1");
-    const user = userEvent.setup();
-    renderResults();
-
-    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
-    await submitEmail(user, "jane@example.com", "save");
-    expect(mockSave.mock.calls[0]?.[1]).toMatchObject({ sessionId: "fs_walk_1" });
-
-    await user.click(screen.getByRole("button", { name: "back" }));
-    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
-    await submitEmail(user, "jane@example.com", "pay");
-    expect(mockStart.mock.calls[0]?.[1]).toMatchObject({ sessionId: "fs_walk_1" });
-  });
-
-  it("omits the key entirely when no entry exists", async () => {
-    const user = userEvent.setup();
-    renderResults();
-    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
-    await submitEmail(user, "jane@example.com", "save");
-    expect(mockSave.mock.calls[0]?.[1]).not.toHaveProperty("sessionId");
-  });
-});
-
-describe("D6 — the return micro-state renders over the same recommendation", () => {
-  it("renders the status line for success and nothing for an unrecognised value", () => {
-    renderResults(fixtureConfig(), { returnState: "success" });
-    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutSuccess");
-    expect(screen.getByTestId("recommendation-card-pro")).toBeInTheDocument();
-  });
-});