create-ailk 0.21.0 → 0.23.0

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

@@ -0,0 +1,216 @@
+/**
+ * /pricing reads `?plan=<key>` into the Pricing section (#8842).
+ *
+ * A diagnostic that recommends a plan links to `/pricing?plan=<key>`. The
+ * page hands that key to every `pricing` section as its `recommended` value;
+ * the section moves the authored "Recommended" treatment onto the plan whose
+ * `key` matches (case-insensitive) and scrolls that card into view on load.
+ * No key, or a key no plan carries, leaves the authored recommendation and
+ * scrolls nothing.
+ *
+ * MDX is DI-injected (no fs reads); the real SectionRenderer and Pricing
+ * section render, so the assertions read the served DOM.
+ */
+import { act, render, screen, within } from "@testing-library/react";
+
+import PricingPage from "../page";
+
+const PLANS = [
+  {
+    key: "basic",
+    name: "Basic",
+    price: { monthly: "$29" },
+    features: ["One site"],
+    cta: { label: "Choose Basic", href: "/checkout/basic", variant: "outline" },
+  },
+  {
+    key: "business",
+    name: "Business",
+    price: { monthly: "$79" },
+    features: ["Three sites"],
+    cta: {
+      label: "Choose Business",
+      href: "/checkout/business",
+      variant: "default",
+    },
+    highlighted: true,
+    badge: "Recommended",
+  },
+  {
+    key: "agency",
+    name: "Agency",
+    price: { monthly: "$199" },
+    features: ["Unlimited sites"],
+    cta: {
+      label: "Choose Agency",
+      href: "/checkout/agency",
+      variant: "outline",
+    },
+  },
+] as const;
+
+const getMdxSource = jest.fn().mockResolvedValue({
+  frontmatter: {
+    type: "Pricing",
+    slug: "pricing",
+    title: "Pricing",
+    description: "Plans for every stage.",
+  },
+  body: "",
+});
+
+const getPageSections = jest.fn().mockResolvedValue([
+  {
+    id: "plans",
+    type: "pricing",
+    data: {
+      variant: "three-tiers-with-toggle",
+      billingToggle: false,
+      plans: PLANS,
+    },
+  },
+]);
+
+const scrollIntoView = jest.fn();
+let reducedMotion = false;
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = scrollIntoView;
+});
+
+beforeEach(() => {
+  scrollIntoView.mockClear();
+  reducedMotion = false;
+  // Answer the reduced-motion query from `reducedMotion`.
+  jest.spyOn(window, "matchMedia").mockImplementation(
+    (query: string): MediaQueryList => ({
+      matches: query === "(prefers-reduced-motion: reduce)" && reducedMotion,
+      media: query,
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    }),
+  );
+});
+
+// #8927 — the page reads the Offerings shown set first; these cases are an
+// unconnected site's, so the read answers `unconnected` and the page is today's.
+beforeEach(() => {
+  global.fetch = jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    json: async () => ({ ok: true, data: { status: "unconnected" } }),
+  })) as jest.Mock;
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+async function renderPricing(search: Record<string, string | string[]>) {
+  const element = await PricingPage({
+    params: Promise.resolve({ locale: "en" }),
+    searchParams: Promise.resolve(search),
+    getMdxSource,
+    getPageSections,
+  });
+  await act(async () => {
+    render(element);
+  });
+}
+
+/** The tier card carrying the "Recommended" badge — the only highlighted card. */
+function recommendedCard(): HTMLElement {
+  const badge = screen.getByTestId("tier-badge");
+  const card = badge.closest<HTMLElement>("[data-testid='pricing-tier-card']");
+  if (!card) throw new Error("badge is not inside a tier card");
+  return card;
+}
+
+describe("/pricing ?plan=<key> (#8842)", () => {
+  it("moves the Recommended badge and the filled button to the named plan", async () => {
+    await renderPricing({ plan: "agency" });
+
+    expect(screen.getAllByTestId("tier-badge")).toHaveLength(1);
+    const card = recommendedCard();
+    expect(within(card).getByText("Agency")).toBeTruthy();
+    expect(card.getAttribute("aria-current")).toBe("true");
+    // The badge says why this card is emphasised — a recommendation, never the
+    // authored text, which may be a popularity claim about a different plan.
+    expect(screen.getByTestId("tier-badge").textContent).toBe("Recommended for you");
+
+    // The authored recommendation gives up its emphasis and its filled CTA.
+    const cards = screen.getAllByTestId("pricing-tier-card");
+    expect(cards.filter((c) => c.getAttribute("aria-current") === "true")).toEqual([card]);
+    const business = cards.find((c) => within(c).queryByText("Business"));
+    expect(
+      within(business!).getByRole("link", { name: "Choose Business" }).className,
+    ).toBe(within(cards[0]!).getByRole("link", { name: "Choose Basic" }).className);
+    expect(within(card).getByRole("link", { name: "Choose Agency" }).className).not.toBe(
+      within(business!).getByRole("link", { name: "Choose Business" }).className,
+    );
+  });
+
+  it("matches the plan key case-insensitively", async () => {
+    await renderPricing({ plan: "BASIC" });
+
+    expect(within(recommendedCard()).getByText("Basic")).toBeTruthy();
+  });
+
+  it("scrolls the recommended card into view, centred and smooth", async () => {
+    await renderPricing({ plan: "agency" });
+
+    expect(scrollIntoView).toHaveBeenCalledTimes(1);
+    expect(scrollIntoView.mock.contexts[0]).toBe(recommendedCard());
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "center",
+      behavior: "smooth",
+    });
+  });
+
+  it("jumps without animation when the visitor prefers reduced motion", async () => {
+    reducedMotion = true;
+    await renderPricing({ plan: "agency" });
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "center",
+      behavior: "auto",
+    });
+  });
+
+  it.each([
+    ["no plan parameter", {}],
+    ["an unknown key", { plan: "enterprise" }],
+    ["an empty key", { plan: "" }],
+  ])("keeps the authored recommendation and does not scroll for %s", async (_label, search) => {
+    await renderPricing(search);
+
+    expect(screen.getAllByTestId("tier-badge")).toHaveLength(1);
+    expect(within(recommendedCard()).getByText("Business")).toBeTruthy();
+    expect(scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("keeps the authored recommendation when the key names a plan the variant does not show", async () => {
+    // two-tiers-with-extra-tier renders the first two plans only.
+    getPageSections.mockResolvedValueOnce([
+      {
+        id: "plans",
+        type: "pricing",
+        data: { variant: "two-tiers-with-extra-tier", plans: PLANS },
+      },
+    ]);
+    await renderPricing({ plan: "agency" });
+
+    expect(within(recommendedCard()).getByText("Business")).toBeTruthy();
+    expect(scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("reads the first value when the parameter repeats", async () => {
+    await renderPricing({ plan: ["agency", "basic"] });
+
+    expect(within(recommendedCard()).getByText("Agency")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,236 @@
+/**
+ * An unconnected site's /pricing is today's page, byte for byte (#8927 AC-4,
+ * spec docs/specs/8927-pricing-renders-the-shown-set-spec.md D2 step 1, D7).
+ *
+ * Two oracles. The committed snapshot was recorded against `page.tsx` as it
+ * stood before #8927, in an earlier commit than the page change, and is never
+ * regenerated. The equality oracle renders `renderPage` called directly with
+ * today's `?plan=` wrapper (copied below), so it holds whatever the commit
+ * order. Both read today's DI fixture; the equality oracle also reads the
+ * site's own `content/en/Pricing/pricing.mdx` through the default loader. The
+ * snapshot of the monorepo's own pricing.mdx is `monorepo-only.test.tsx`'s,
+ * which no scaffold ships (#9179).
+ *
+ * `global.fetch` answers the shown-offerings route's `unconnected`; with
+ * `NODE_ENV` `production` and no API origin, the page makes no call at all.
+ */
+import { act, render } from "@testing-library/react";
+import {
+  getPageSections as loadPageSections,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { PageSection } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+import * as pricingPage from "../page";
+import PricingPage, { generateMetadata } from "../page";
+
+const PLANS = [
+  {
+    key: "basic",
+    name: "Basic",
+    price: { monthly: "$29" },
+    features: ["One site"],
+    cta: { label: "Choose Basic", href: "/checkout/basic", variant: "outline" },
+  },
+  {
+    key: "business",
+    name: "Business",
+    price: { monthly: "$79" },
+    features: ["Three sites"],
+    cta: {
+      label: "Choose Business",
+      href: "/checkout/business",
+      variant: "default",
+    },
+    highlighted: true,
+    badge: "Recommended",
+  },
+  {
+    key: "agency",
+    name: "Agency",
+    price: { monthly: "$199" },
+    features: ["Unlimited sites"],
+    cta: {
+      label: "Choose Agency",
+      href: "/checkout/agency",
+      variant: "outline",
+    },
+  },
+] as const;
+
+const getMdxSource = jest.fn().mockResolvedValue({
+  frontmatter: {
+    type: "Pricing",
+    slug: "pricing",
+    title: "Pricing",
+    description: "Plans for every stage.",
+  },
+  body: "",
+});
+
+const getPageSections = jest.fn().mockResolvedValue([
+  {
+    id: "plans",
+    type: "pricing",
+    data: {
+      variant: "three-tiers-with-toggle",
+      billingToggle: false,
+      plans: PLANS,
+    },
+  },
+]);
+
+/** Today's `withRecommendedPlan` (#8842), copied as the oracle's wrapper. */
+function todaysSections(
+  load: (frontmatter: unknown) => Promise<PageSection[]>,
+  plan: string | undefined,
+): (frontmatter: unknown) => Promise<PageSection[]> {
+  if (!plan) return load;
+  return async (frontmatter) =>
+    (await load(frontmatter)).map((section) =>
+      section.type === "pricing"
+        ? {
+            ...section,
+            data: { ...section.data, recommended: plan } as typeof section.data,
+          }
+        : section,
+    );
+}
+
+const API_ENV = [
+  "AILK_API_URL",
+  "NEXT_PUBLIC_AILK_API_URL",
+  "NEXT_PUBLIC_API_URL",
+] as const;
+const priorEnv = new Map<string, string | undefined>(
+  [...API_ENV, "NODE_ENV"].map((name) => [name, process.env[name]]),
+);
+
+const fetchMock: jest.Mock = jest.fn(async () => ({
+  ok: true,
+  status: 200,
+  json: async () => ({ ok: true, data: { status: "unconnected" } }),
+}));
+
+let clock = Date.now();
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = jest.fn();
+});
+
+beforeEach(() => {
+  // Each case reads afresh: the page shares one read for 15 seconds.
+  clock += 16_000;
+  jest.spyOn(Date, "now").mockImplementation(() => clock);
+  global.fetch = fetchMock;
+  fetchMock.mockClear();
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+  for (const [name, value] of priorEnv) {
+    if (value === undefined)
+      delete (process.env as Record<string, string | undefined>)[name];
+    else (process.env as Record<string, string | undefined>)[name] = value;
+  }
+});
+
+/**
+ * `useId` values renumbered by first appearance. A client render draws them
+ * from one counter shared by every root in the process, so the same tree
+ * rendered second gets different numbers; the served (server) HTML does not.
+ */
+function stableIds(markup: string): string {
+  const seen = new Map<string, string>();
+  return markup.replace(/_r_[0-9a-z]+_/g, (id) => {
+    if (!seen.has(id)) seen.set(id, `_r_id${seen.size}_`);
+    return seen.get(id)!;
+  });
+}
+
+async function html(element: ReactElement): Promise<string> {
+  let container: HTMLElement | undefined;
+  await act(async () => {
+    ({ container } = render(element));
+  });
+  return stableIds(container!.innerHTML);
+}
+
+async function pageHtml(
+  search: Record<string, string>,
+  di: boolean,
+): Promise<string> {
+  return html(
+    await PricingPage({
+      params: Promise.resolve({ locale: "en" }),
+      searchParams: Promise.resolve(search),
+      ...(di ? { getMdxSource, getPageSections } : {}),
+    }),
+  );
+}
+
+async function oracleHtml(
+  plan: string | undefined,
+  di: boolean,
+): Promise<string> {
+  return html(
+    await renderPage({
+      type: "Pricing",
+      slug: "pricing",
+      locale: "en",
+      translationsNamespace: "pricing",
+      ...(di ? { getMdxSource } : {}),
+      getPageSections: todaysSections(
+        di ? getPageSections : loadPageSections,
+        plan,
+      ),
+    }),
+  );
+}
+
+describe("/pricing on an unconnected site is today's page (#8927 AC-4)", () => {
+  it.each([
+    ["no plan", {}],
+    ["?plan=agency", { plan: "agency" }],
+    ["?plan=BASIC", { plan: "BASIC" }],
+  ] as const)("renders today's DI page for %s", async (_label, search) => {
+    const served = await pageHtml(search, true);
+    const plan = "plan" in search ? search.plan : undefined;
+
+    expect(served).toBe(await oracleHtml(plan, true));
+    expect(served).toMatchSnapshot();
+  });
+
+  it("renders the site's own pricing.mdx unchanged", async () => {
+    const served = await pageHtml({}, false);
+
+    expect(served).toBe(await oracleHtml(undefined, false));
+  });
+
+  it("makes no call and renders today's page in production with no API origin", async () => {
+    for (const name of API_ENV) delete process.env[name];
+    (process.env as Record<string, string>).NODE_ENV = "production";
+
+    const served = await pageHtml({}, true);
+
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(served).toBe(await oracleHtml(undefined, true));
+  });
+
+  it("keeps the MDX page's metadata and renders per request", async () => {
+    const params = Promise.resolve({ locale: "en" });
+
+    expect(await generateMetadata({ params })).toEqual(
+      await renderPageMetadata({
+        type: "Pricing",
+        slug: "pricing",
+        locale: "en",
+      }),
+    );
+    expect((pricingPage as { dynamic?: unknown }).dynamic).toBe(
+      "force-dynamic",
+    );
+  });
+});