create-ailk 0.21.0 → 0.23.0

package/templates/apps/web/app/[locale]/pricing/__tests__/offerings.test.tsx

@@ -0,0 +1,599 @@
+/**
+ * /pricing renders the workspace's Offerings shown set (#8927, spec
+ * docs/specs/8927-pricing-renders-the-shown-set-spec.md AC-1–AC-3, AC-5).
+ *
+ * A connected fixture workspace (C1): `global.fetch` answers
+ * `GET <base>/v1/content/shown-offerings` with the route's own envelope and a
+ * `shownSet` in the wire shape the route sends (no workspace or organization
+ * id). The real api-client, the real mapper and the real Pricing section run.
+ * The site's contact email is read from a temporary content root's
+ * `_site.mdx`. The fixture is parsed with the shown-set schema first, so it
+ * cannot drift from spec 8876 D4.
+ *
+ * The page shares one read for 15 seconds, so the suite moves `Date.now` 16
+ * seconds before every case; AC-2 moves it by hand inside its cases.
+ */
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import {
+  PageSectionsSchema,
+  workspaceShownSetSchema,
+  type OfferingsPrice,
+  type OfferingsProduct,
+} from "@working-theory/validation";
+
+import PricingPage, { generateMetadata } from "../page";
+
+const SITE_EMAIL = "hello@example.com";
+const HOSTILE = "</script><script>alert(1)</script>";
+
+// ── The connected fixture ────────────────────────────────────────────────────
+
+const INTERVAL = { monthly: "month", yearly: "year", once: null } as const;
+
+function price(
+  plan: string,
+  period: OfferingsPrice["period"],
+  amount: number,
+): OfferingsPrice {
+  return {
+    priceId: `price_${plan.replace(/-/g, "")}${period}`,
+    lookupKey: `${plan}_${period}`,
+    plan,
+    period,
+    interval: INTERVAL[period],
+    amount,
+    currency: "usd",
+  };
+}
+
+function product(
+  plan: string,
+  ailkGroup: OfferingsProduct["ailkGroup"],
+  name: string,
+  prices: OfferingsPrice[],
+  extra: Partial<OfferingsProduct> = {},
+): OfferingsProduct {
+  return {
+    productId: `prod_${plan.replace(/-/g, "")}`,
+    plan,
+    name,
+    description: null,
+    marketingFeatures: [],
+    unitLabel: null,
+    note: null,
+    termsNote: null,
+    ailkGroup,
+    ailkOrder: null,
+    prices,
+    recommended: false,
+    ...extra,
+  };
+}
+
+const STARTER = {
+  name: "Starter",
+  description: "For one small site",
+  features: ["One site", "Email support", "Weekly backups"],
+  unitLabel: "per site",
+  note: "Billed per live site",
+  termsNote: "Cancel any time",
+  monthly: "$19/mo",
+  annual: "$190/yr",
+};
+
+function offerings(): OfferingsProduct[] {
+  return [
+    product(
+      "starter",
+      "plan",
+      STARTER.name,
+      [price("starter", "monthly", 1900), price("starter", "yearly", 19000)],
+      {
+        description: STARTER.description,
+        marketingFeatures: STARTER.features,
+        unitLabel: STARTER.unitLabel,
+        note: STARTER.note,
+        termsNote: STARTER.termsNote,
+      },
+    ),
+    product("growth", "plan", "Growth", [price("growth", "monthly", 4900)], {
+      recommended: true,
+    }),
+    product("scale", "plan", "Scale", [price("scale", "once", 150000)]),
+    product(
+      "seo-audit",
+      "addon",
+      "SEO audit",
+      [price("seo-audit", "monthly", 1500)],
+      { unitLabel: "per audit" },
+    ),
+  ];
+}
+
+/** The shown set as the route sends it: parsed, then without the two ids. */
+function wireSet(
+  edit: (list: OfferingsProduct[]) => OfferingsProduct[] = (l) => l,
+) {
+  const list = edit(offerings());
+  const {
+    workspaceId: _w,
+    organizationId: _o,
+    ...wire
+  } = workspaceShownSetSchema.parse({
+    workspaceId: "wksp_01890a5d-ac96-774b-bcce-b302099a8057",
+    organizationId: "org_01890a5d-ac96-774b-bcce-b302099a8058",
+    productIds: list.map((o) => o.productId),
+    recommended: {
+      plan:
+        list.find((o) => o.ailkGroup === "plan" && o.recommended)?.productId ??
+        null,
+      addon: null,
+    },
+    offerings: list,
+    state: "current",
+    snapshotAt: "2026-10-18T00:00:00.000Z",
+  });
+  return wire;
+}
+
+// ── The fetch stub ───────────────────────────────────────────────────────────
+
+type Answer =
+  | { status: number; body: unknown }
+  | { status: number; notJson: true }
+  | { reject: true };
+
+function shown(set: unknown = wireSet()): Answer {
+  return {
+    status: 200,
+    body: { ok: true, data: { status: "shown", shownSet: set } },
+  };
+}
+
+const answers: Answer[] = [];
+let answer: Answer = shown();
+
+const fetchMock: jest.Mock = jest.fn(async () => {
+  const next = answers.shift() ?? answer;
+  if ("reject" in next) throw new TypeError("fetch failed");
+  return {
+    ok: next.status >= 200 && next.status < 300,
+    status: next.status,
+    json: async () => {
+      if ("notJson" in next) throw new SyntaxError("Unexpected token <");
+      return next.body;
+    },
+  };
+});
+
+// ── The authored page ────────────────────────────────────────────────────────
+
+const getMdxSource = jest.fn().mockResolvedValue({
+  frontmatter: {
+    type: "Pricing",
+    slug: "pricing",
+    title: "Pricing",
+    description: "Plans for every stage.",
+  },
+  body: "",
+});
+
+const HERO = {
+  id: "hero",
+  type: "hero",
+  data: { headline: "Plans that grow with you", variant: "default" },
+};
+const FAQ = {
+  id: "faq",
+  type: "faq",
+  data: {
+    headline: "Questions",
+    items: [{ question: "Can I cancel?", answer: "Yes, any time." }],
+  },
+};
+const AUTHORED_PLANS = {
+  id: "plans",
+  type: "pricing",
+  data: {
+    eyebrow: "Plans",
+    headline: "Pick a plan",
+    variant: "three-tiers-with-toggle",
+    billingToggle: false,
+    plans: [
+      {
+        key: "basic",
+        name: "Authored Basic",
+        price: { monthly: "$29" },
+        features: ["Authored feature"],
+        cta: { label: "Choose Basic", href: "/checkout/basic" },
+      },
+      {
+        key: "business",
+        name: "Authored Business",
+        price: { monthly: "$29.50" },
+        features: ["Another authored feature"],
+        cta: { label: "Choose Business", href: "/checkout/business" },
+        highlighted: true,
+      },
+    ],
+  },
+};
+const AUTHORED_ADDONS = {
+  id: "addons",
+  type: "pricing",
+  data: {
+    variant: "addons",
+    plans: [],
+    addons: [{ name: "Authored add-on", price: "$29", features: [] }],
+  },
+};
+
+const authoredPage = PageSectionsSchema.parse([
+  HERO,
+  AUTHORED_PLANS,
+  AUTHORED_ADDONS,
+  FAQ,
+]);
+const pageWithoutPricing = PageSectionsSchema.parse([HERO, FAQ]);
+
+const getPageSections = jest.fn();
+
+let clock = Date.now();
+
+/** A content root whose `_site.mdx` publishes `contactEmail`, or none. */
+const contentRoot = mkdtempSync(join(tmpdir(), "ailk-8927-"));
+const priorContentRoot = process.env.AILK_CONTENT_ROOT;
+
+function publishContactEmail(email: string | undefined): void {
+  writeFileSync(
+    join(contentRoot, "_site.mdx"),
+    `---\nsiteName: Example\n${email ? `contactEmail: ${email}\n` : ""}---\n`,
+  );
+}
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = jest.fn();
+});
+
+afterAll(() => {
+  rmSync(contentRoot, { recursive: true, force: true });
+});
+
+beforeEach(() => {
+  clock += 16_000;
+  jest.spyOn(Date, "now").mockImplementation(() => clock);
+  global.fetch = fetchMock;
+  fetchMock.mockClear();
+  answers.length = 0;
+  answer = shown();
+  getPageSections.mockResolvedValue(authoredPage);
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+async function renderPricing(
+  search: Record<string, string> = {},
+): Promise<HTMLElement> {
+  const element = await PricingPage({
+    params: Promise.resolve({ locale: "en" }),
+    searchParams: Promise.resolve(search),
+    getMdxSource,
+    getPageSections,
+  });
+  let container: HTMLElement | undefined;
+  await act(async () => {
+    ({ container } = render(element));
+  });
+  return container!;
+}
+
+function tierCards(): HTMLElement[] {
+  return screen.queryAllByTestId("pricing-tier-card");
+}
+
+function cardNamed(name: string): HTMLElement {
+  const card = tierCards().find((c) => within(c).queryByText(name));
+  if (!card) throw new Error(`no tier card named ${name}`);
+  return card;
+}
+
+/** True when `a` comes before `b` in document order. */
+function before(a: Element, b: Element): boolean {
+  return (
+    (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+  );
+}
+
+/** Every JSON-LD node on the page, `@graph` flattened. */
+function jsonLdNodes(container: HTMLElement): Array<Record<string, unknown>> {
+  const script = container.querySelector('script[type="application/ld+json"]');
+  if (!script) return [];
+  const doc = JSON.parse(script.textContent ?? "") as Record<string, unknown>;
+  const graph = doc["@graph"];
+  return Array.isArray(graph)
+    ? (graph as Array<Record<string, unknown>>)
+    : [doc];
+}
+
+/** Every value of `key` anywhere in `value`. */
+function valuesOf(value: unknown, key: string): unknown[] {
+  if (Array.isArray(value)) return value.flatMap((v) => valuesOf(v, key));
+  if (value === null || typeof value !== "object") return [];
+  return Object.entries(value).flatMap(([k, v]) =>
+    k === key ? [v, ...valuesOf(v, key)] : valuesOf(v, key),
+  );
+}
+
+// ── AC-1 ─────────────────────────────────────────────────────────────────────
+
+describe("/pricing on a connected workspace shows its Stripe cards (#8927 AC-1)", () => {
+  it("renders one card per shown plan, every visible fact, and the add-on tile", async () => {
+    await renderPricing();
+
+    expect(
+      tierCards().map(
+        (c) => within(c).getByRole("heading", { level: 3 }).textContent,
+      ),
+    ).toEqual(["Starter", "Growth", "Scale"]);
+    const starter = cardNamed("Starter");
+    for (const text of [
+      STARTER.description,
+      ...STARTER.features,
+      STARTER.monthly,
+      STARTER.unitLabel,
+      STARTER.note,
+      STARTER.termsNote,
+    ]) {
+      expect(within(starter).getByText(text, { exact: false })).toBeTruthy();
+    }
+    expect(
+      within(cardNamed("Growth")).getByText("$49/mo", { exact: false }),
+    ).toBeTruthy();
+    expect(within(cardNamed("Growth")).getByText("Recommended")).toBeTruthy();
+    expect(
+      within(cardNamed("Scale")).getByText("$1,500 one-time", { exact: false }),
+    ).toBeTruthy();
+
+    const tiles = screen.getAllByTestId("addon-card");
+    expect(tiles).toHaveLength(1);
+    for (const text of ["SEO audit", "$15/mo", "per audit"]) {
+      expect(within(tiles[0]!).getByText(text, { exact: false })).toBeTruthy();
+    }
+    expect(tierCards().some((c) => within(c).queryByText("SEO audit"))).toBe(
+      false,
+    );
+
+    const body = document.body.textContent ?? "";
+    for (const authored of [
+      "Authored Basic",
+      "Authored Business",
+      "Authored add-on",
+      "$29",
+    ]) {
+      expect(body).not.toContain(authored);
+    }
+
+    const hero = screen.getByText("Plans that grow with you");
+    const faq = screen.getByText("Can I cancel?");
+    expect(before(hero, tierCards()[0]!)).toBe(true);
+    expect(before(tiles[0]!, faq)).toBe(true);
+    // The authored plans section's copy stays on the Stripe cards.
+    expect(screen.getByText("Pick a plan")).toBeTruthy();
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(String(fetchMock.mock.calls[0]![0])).toMatch(
+      /\/v1\/content\/shown-offerings$/,
+    );
+  });
+
+  it("shows the annual phrase once Annually is pressed", async () => {
+    await renderPricing();
+    expect(screen.queryByText(STARTER.annual, { exact: false })).toBeNull();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("billing-toggle-annual"));
+    });
+
+    expect(
+      within(cardNamed("Starter")).getByText(STARTER.annual, { exact: false }),
+    ).toBeTruthy();
+  });
+
+  it("places the plans after the hero and the add-ons after the plans on a page with no pricing section", async () => {
+    getPageSections.mockResolvedValue(pageWithoutPricing);
+    await renderPricing();
+
+    const hero = screen.getByText("Plans that grow with you");
+    const cards = tierCards();
+    const tile = screen.getByTestId("addon-card");
+    const faq = screen.getByText("Can I cancel?");
+    expect(cards).toHaveLength(3);
+    expect(before(hero, cards[0]!)).toBe(true);
+    expect(before(cards[2]!, tile)).toBe(true);
+    expect(before(tile, faq)).toBe(true);
+    // An inserted add-ons section carries its own headline (D4, D6), so the
+    // lone tile is never an unlabeled band.
+    const addonsHeadline = screen.getByText("Add-ons");
+    expect(before(cards[2]!, addonsHeadline)).toBe(true);
+    expect(before(addonsHeadline, tile)).toBe(true);
+  });
+});
+
+// ── AC-2 ─────────────────────────────────────────────────────────────────────
+
+/** The one tier card the page highlights — Stripe's pick or ?plan='s. */
+function highlightedCard(): HTMLElement {
+  const lit = tierCards().filter(
+    (c) =>
+      within(c).queryByText("Recommended") ||
+      within(c).queryByText("Recommended for you"),
+  );
+  expect(lit).toHaveLength(1);
+  return lit[0]!;
+}
+
+describe("/pricing ?plan= and a product switched off (#8927 AC-2)", () => {
+  it("moves the recommendation to the card whose {plan} matches", async () => {
+    await renderPricing({ plan: "scale" });
+
+    const card = highlightedCard();
+    expect(within(card).getByText("Scale")).toBeTruthy();
+    expect(card.getAttribute("aria-current")).toBe("true");
+    expect(within(card).getByText("Recommended for you")).toBeTruthy();
+    // One label, not two: the mapper's "Recommended" pill does not ride along
+    // with the moved recommendation (D4).
+    expect(within(card).queryByText("Recommended")).toBeNull();
+    expect(screen.queryByText("Recommended")).toBeNull();
+  });
+
+  it.each(["Scale", "scale_monthly", "enterprise", ""])(
+    "keeps the workspace's own recommendation for ?plan=%j",
+    async (plan) => {
+      await renderPricing({ plan });
+
+      expect(within(highlightedCard()).getByText("Growth")).toBeTruthy();
+    },
+  );
+
+  it("shares one read for 15 seconds and drops a switched-off product on the next read", async () => {
+    answers.push(
+      shown(),
+      shown(wireSet((list) => list.filter((o) => o.plan !== "scale"))),
+    );
+    await renderPricing();
+    clock += 10_000;
+    await renderPricing();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    document.body.innerHTML = "";
+    clock += 6_000;
+    await renderPricing();
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(tierCards()).toHaveLength(2);
+    expect(screen.queryByText("Scale")).toBeNull();
+  });
+});
+
+// ── AC-3 ─────────────────────────────────────────────────────────────────────
+
+const FAILED_READS: Array<[string, Answer]> = [
+  ["shown, state expired", shown({ ...wireSet(), state: "expired" })],
+  ["shown, state empty", shown({ ...wireSet(), state: "empty" })],
+  [
+    "shown, no offerings",
+    shown({ ...wireSet(), offerings: [], productIds: [] }),
+  ],
+  [
+    "status empty",
+    { status: 200, body: { ok: true, data: { status: "empty" } } },
+  ],
+  ["a 500", { status: 500, body: { ok: false, error: "internal_error" } }],
+  ["a 429", { status: 429, body: { ok: false, error: "rate_limited" } }],
+  [
+    "an unknown status",
+    { status: 200, body: { ok: true, data: { status: "maybe" } } },
+  ],
+  ["a non-JSON body", { status: 200, notJson: true }],
+  ["a rejected fetch", { reject: true }],
+];
+
+describe("/pricing shows the contact email when there is nothing to sell (#8927 AC-3)", () => {
+  beforeEach(() => {
+    process.env.AILK_CONTENT_ROOT = contentRoot;
+    publishContactEmail(SITE_EMAIL);
+  });
+
+  afterEach(() => {
+    if (priorContentRoot === undefined) delete process.env.AILK_CONTENT_ROOT;
+    else process.env.AILK_CONTENT_ROOT = priorContentRoot;
+  });
+
+  it.each(FAILED_READS)(
+    "renders the contact email for %s",
+    async (_label, failure) => {
+      answer = failure;
+      const container = await renderPricing();
+
+      const fallback = screen.getByTestId("contact-fallback");
+      expect(within(fallback).getByText("Get in touch")).toBeTruthy();
+      expect(fallback.textContent).toContain(SITE_EMAIL);
+      expect(screen.queryAllByTestId("pricing-tier-card")).toHaveLength(0);
+      expect(screen.queryAllByTestId("addon-card")).toHaveLength(0);
+      expect(document.body.textContent).not.toContain("$29");
+
+      const section = fallback.closest("[data-testid='contact-form']");
+      expect(section).not.toBeNull();
+      expect(
+        before(screen.getByText("Plans that grow with you"), section!),
+      ).toBe(true);
+      expect(before(section!, screen.getByText("Can I cancel?"))).toBe(true);
+
+      expect(valuesOf(jsonLdNodes(container), "@type").flat()).not.toContain(
+        "Offer",
+      );
+    },
+  );
+
+  it("says no contact details are published when the site has no email", async () => {
+    answer = { status: 200, body: { ok: true, data: { status: "empty" } } };
+    publishContactEmail(undefined);
+    await renderPricing();
+
+    expect(screen.getByTestId("contact-fallback-no-email")).toBeTruthy();
+  });
+});
+
+// ── AC-5 ─────────────────────────────────────────────────────────────────────
+
+const OFFERINGS_SOURCES = [
+  "apps/web/app/[locale]/pricing/page.tsx",
+  "apps/web/lib/offerings-pricing.ts",
+];
+const REPO_ROOT = resolve(__dirname, "../../../../../..");
+
+describe("/pricing keeps Stripe text in its element and out of the metadata (#8927 AC-5)", () => {
+  it("serializes a hostile product name into JSON-LD without breaking out of it", async () => {
+    answer = shown(
+      wireSet((list) =>
+        list.map((o) => (o.plan === "growth" ? { ...o, name: HOSTILE } : o)),
+      ),
+    );
+    const container = await renderPricing();
+
+    const scripts = container.querySelectorAll("script");
+    expect(scripts).toHaveLength(1);
+    expect(scripts[0]!.getAttribute("data-testid")).toBe("json-ld");
+    expect(scripts[0]!.textContent).not.toContain("</script");
+    expect(valuesOf(jsonLdNodes(container), "name")).toContain(HOSTILE);
+    expect(screen.getByText(HOSTILE)).toBeTruthy();
+  });
+
+  it("keeps every fixture product name out of the page metadata", async () => {
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ locale: "en" }),
+    });
+    const fields = JSON.stringify([
+      metadata.title,
+      metadata.description,
+      metadata.openGraph,
+    ]);
+
+    for (const name of [HOSTILE, "Starter", "Growth", "Scale", "SEO audit"]) {
+      expect(fields).not.toContain(name);
+    }
+  });
+
+  it.each(OFFERINGS_SOURCES)("%s never serializes into __html", (path) => {
+    const source = readFileSync(join(REPO_ROOT, path), "utf8");
+
+    expect(source).not.toContain("__html");
+    expect(source).not.toContain("JSON.stringify");
+  });
+});