create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/(authed)/waitlist/__tests__/comparison.test.tsx

@@ -0,0 +1,273 @@
+/**
+ * Tests for the operator dashboard's comparison view (#4665 D10, AC2/AC4).
+ *
+ * Covers:
+ *   1. Renders per-waitlist + total comparison rows, computed per D4.
+ *   2. Renders a `null` qualified/rate as "—" for a lead-capture experiment
+ *      (D4 — never `0`).
+ *   3. Renders the per-waitlist tabs (by-source table + distributions).
+ *   4. Renders the signups table with a "next" link when nextCursor is present.
+ *   5. Calls notFound() on a 404.
+ *   6. Renders ForbiddenState on a 401/403.
+ */
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: jest.fn().mockImplementation(async () => (key: string, values?: Record<string, unknown>) =>
+    values ? `copy:${key}:${JSON.stringify(values)}` : `copy:${key}`,
+  ),
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+}));
+
+const mockComparison = jest.fn();
+const mockSignups = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistExperiments: {
+    comparison: (...args: unknown[]) => mockComparison(...args),
+    signups: (...args: unknown[]) => mockSignups(...args),
+  },
+}));
+
+import Page from "../[experimentId]/page";
+
+const EXPERIMENT = {
+  id: "wlexp_1",
+  siteId: "site_1",
+  key: "early-access",
+  mode: "lead-capture" as const,
+  status: "live" as const,
+  createdAt: "2026-08-01T00:00:00.000Z",
+  updatedAt: "2026-09-01T00:00:00.000Z",
+  waitlists: [{ key: "main", flowSlug: "main-flow" }],
+  counts: { raw: 100, qualified: null, qualificationRate: null },
+};
+
+const COMPARISON = {
+  experiment: EXPERIMENT,
+  questions: [
+    {
+      id: "q1",
+      prompt: { en: "Do you use a CRM?" },
+      answerType: "single" as const,
+      options: [{ value: "yes", label: { en: "Yes" } }],
+    },
+  ],
+  serviceableExcludes: [],
+  waitlists: [
+    {
+      key: "main",
+      raw: 100,
+      qualified: null,
+      qualificationRate: null,
+      byTier: [],
+      bySource: [{ source: "google", raw: 60, qualified: null, qualificationRate: null }],
+      distributions: [
+        { questionId: "q1", answerType: "single" as const, answered: 60, options: [{ value: "yes", count: 60, share: 1 }] },
+      ],
+    },
+  ],
+  total: {
+    key: "total" as const,
+    raw: 100,
+    qualified: null,
+    qualificationRate: null,
+    byTier: [],
+    bySource: [{ source: "google", raw: 60, qualified: null, qualificationRate: null }],
+    distributions: [
+      { questionId: "q1", answerType: "single" as const, answered: 60, options: [{ value: "yes", count: 60, share: 1 }] },
+    ],
+  },
+};
+
+const SIGNUPS = {
+  experimentId: "wlexp_1",
+  items: [
+    {
+      leadId: "lead_1",
+      waitlistKey: "main",
+      email: "a@example.com",
+      createdAt: "2026-08-15T00:00:00.000Z",
+      source: "google",
+      tier: null,
+      score: null,
+    },
+  ],
+  nextCursor: "lead_1",
+};
+
+// FEAT-074 U4a (#4715, AC-5) — the SAME comparison + signups fixtures, with
+// `experiment.key: "targeting-maturity"` and a `level_N` tier so the Level
+// display + distribution can be asserted.
+const TARGETING_MATURITY_EXPERIMENT = { ...EXPERIMENT, key: "targeting-maturity" };
+
+const TARGETING_MATURITY_COMPARISON = {
+  ...COMPARISON,
+  experiment: TARGETING_MATURITY_EXPERIMENT,
+  waitlists: [
+    {
+      ...COMPARISON.waitlists[0],
+      byTier: [
+        { tier: "level_0", count: 2 },
+        { tier: "level_1", count: 5 },
+      ],
+    },
+  ],
+  total: {
+    ...COMPARISON.total,
+    byTier: [
+      { tier: "level_0", count: 2 },
+      { tier: "level_1", count: 5 },
+    ],
+  },
+};
+
+const TARGETING_MATURITY_SIGNUPS = {
+  experimentId: "wlexp_1",
+  items: [{ ...SIGNUPS.items[0]!, tier: "level_3" }],
+  nextCursor: "lead_1",
+};
+
+function baseProps() {
+  return {
+    params: Promise.resolve({ locale: "en", experimentId: "wlexp_1" }),
+    searchParams: Promise.resolve({}),
+  };
+}
+
+describe("WaitlistComparisonPage — comparison + signups (AC2/AC4)", () => {
+  beforeEach(() => {
+    mockComparison.mockReset();
+    mockSignups.mockReset();
+    mockNotFound.mockClear();
+    mockSignups.mockResolvedValue({ ok: true, body: SIGNUPS });
+  });
+
+  it("renders the top comparison table with null rendered as unavailable", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("metric-comparison-table-cell-raw-total")).toHaveTextContent("100");
+    expect(screen.getByTestId("metric-comparison-table-cell-qualified-total")).toHaveTextContent(
+      "copy:common.unavailable",
+    );
+  });
+
+  it("renders per-waitlist tabs with a by-source table and distributions", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("waitlist-comparison-tabs")).toBeInTheDocument();
+    expect(screen.getByText("Do you use a CRM?")).toBeInTheDocument();
+  });
+
+  it("wires the by-source table's row-header label to the source-column message", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(
+      screen.getAllByTestId("metric-comparison-table-row-header")[1],
+    ).toHaveTextContent("copy:comparison.bySourceColumnSource");
+  });
+
+  it("renders the signups table with a next link when nextCursor is present", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("signups-table-row-lead_1")).toBeInTheDocument();
+    expect(screen.getByTestId("signups-table-next")).toHaveAttribute(
+      "href",
+      "/en/waitlist/wlexp_1?cursor=lead_1",
+    );
+  });
+
+  it("omits the next link when nextCursor is null", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    mockSignups.mockResolvedValue({ ok: true, body: { ...SIGNUPS, nextCursor: null } });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.queryByTestId("signups-table-next")).not.toBeInTheDocument();
+  });
+
+  it("calls notFound() on a 404", async () => {
+    mockComparison.mockResolvedValue({
+      ok: false,
+      status: 404,
+      body: { error: { code: "not_found", message: "Experiment not found" } },
+    });
+    await expect(Page(baseProps())).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+
+  it("renders ForbiddenState on a 403", async () => {
+    mockComparison.mockResolvedValue({
+      ok: false,
+      status: 403,
+      body: { error: { code: "forbidden", message: "Forbidden" } },
+    });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("waitlist-forbidden")).toBeInTheDocument();
+  });
+});
+
+describe("WaitlistComparisonPage — FEAT-074 U4a targeting-maturity Level display (#4715, AC-5)", () => {
+  beforeEach(() => {
+    mockComparison.mockReset();
+    mockSignups.mockReset();
+    mockNotFound.mockClear();
+  });
+
+  it("shows Level distribution rows (Gate / Level N) instead of raw tier strings", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: TARGETING_MATURITY_COMPARISON });
+    mockSignups.mockResolvedValue({ ok: true, body: TARGETING_MATURITY_SIGNUPS });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByText("copy:level.gate")).toBeInTheDocument();
+    expect(screen.getByText('copy:level.label:{"n":1}')).toBeInTheDocument();
+    expect(screen.queryByText(/copy:comparison.tierRowPrefix/)).not.toBeInTheDocument();
+  });
+
+  it("SignupsTable shows the Level label, not the raw level_N tier string", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: TARGETING_MATURITY_COMPARISON });
+    mockSignups.mockResolvedValue({ ok: true, body: TARGETING_MATURITY_SIGNUPS });
+    const element = await Page(baseProps());
+    render(element);
+
+    const row = screen.getByTestId("signups-table-row-lead_1");
+    expect(row).toHaveTextContent('copy:level.label:{"n":3}');
+    expect(row).not.toHaveTextContent("level_3");
+  });
+
+  it("a non-targeting experiment's SignupsTable renders the raw tier unchanged (byte-unchanged floor)", async () => {
+    mockComparison.mockResolvedValue({ ok: true, body: COMPARISON });
+    mockSignups.mockResolvedValue({
+      ok: true,
+      body: { ...SIGNUPS, items: [{ ...SIGNUPS.items[0]!, tier: "qualified" }] },
+    });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("signups-table-row-lead_1")).toHaveTextContent("qualified");
+  });
+});

package/templates/apps/web/app/[locale]/(authed)/waitlist/__tests__/gate.test.tsx

@@ -0,0 +1,172 @@
+/**
+ * Tests for the `(authed)` group's session guard (#4665 D9, AC7).
+ *
+ * Covers:
+ *   1. No session → AuthedLayout renders SignInGate.
+ *   2. A session → AuthedLayout renders its children.
+ *   3. SignInGate with active providers → renders AuthPanel with those providers.
+ *   4. SignInGate with zero active providers → renders an EmptyState.
+ *   5. AILK_AUTH_REQUIRED has no effect on the guard (D9/AC7).
+ *   6. SignInGate links to `/sign-in?next=<pathname>` in both the providers
+ *      and the zero-provider branches (#4984).
+ */
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: jest.fn().mockResolvedValue((key: string) => `copy:${key}`),
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue(new Headers()),
+}));
+
+const mockGetSession = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth.ts's lazy Better-Auth singleton has no HTTP/DB boundary a unit test of the session-branch can mock without standing up Prisma.
+jest.mock("../../../../../auth", () => ({
+  __esModule: true,
+  auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
+}));
+
+const mockGetActiveProviderIds = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth-env.ts is a pure env-introspection module with no external boundary to mock instead.
+jest.mock("../../../../../lib/auth-env", () => ({
+  __esModule: true,
+  getActiveProviderIds: () => mockGetActiveProviderIds(),
+}));
+
+const mockUsePathname = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  usePathname: () => mockUsePathname(),
+}));
+
+const mockSignInSocial = jest.fn();
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({ signIn: { social: mockSignInSocial } }),
+}));
+
+import AuthedLayout from "../../layout";
+import { SignInGate } from "../../sign-in-gate";
+
+describe("AuthedLayout — the (authed) session guard", () => {
+  beforeEach(() => {
+    mockGetSession.mockReset();
+    mockGetActiveProviderIds.mockReset().mockReturnValue(["google"]);
+    mockUsePathname.mockReset().mockReturnValue("/en/waitlist");
+  });
+
+  it("renders SignInGate when there is no session", async () => {
+    mockGetSession.mockResolvedValue(null);
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
+    expect(screen.queryByTestId("dashboard-content")).not.toBeInTheDocument();
+    // #4984 — the layout wires the sign-in link: `localeHref("en", "/sign-in")`
+    // + the current pathname as `?next=`.
+    expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Fen%2Fwaitlist",
+    );
+  });
+
+  it("renders children when a session exists", async () => {
+    mockGetSession.mockResolvedValue({ user: { id: "user_1" } });
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("dashboard-content")).toBeInTheDocument();
+    expect(screen.queryByTestId("sign-in-gate")).not.toBeInTheDocument();
+  });
+
+  it("ignores AILK_AUTH_REQUIRED entirely — never read by the guard", async () => {
+    const original = process.env.AILK_AUTH_REQUIRED;
+    process.env.AILK_AUTH_REQUIRED = "0";
+    mockGetSession.mockResolvedValue(null);
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
+    process.env.AILK_AUTH_REQUIRED = original;
+  });
+});
+
+const GATE_LABELS = {
+  emptyHeadline: "No providers",
+  emptyDescription: "Configure one",
+  signInLinkLabel: "Go to the sign-in page",
+};
+
+describe("<SignInGate/> — the dashboard's own front door", () => {
+  beforeEach(() => {
+    mockGetActiveProviderIds.mockReset().mockReturnValue(["google", "github"]);
+    mockUsePathname.mockReset().mockReturnValue("/en/waitlist");
+    mockSignInSocial.mockReset();
+  });
+
+  it("renders AuthPanel with the active providers", () => {
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" />,
+    );
+    expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-panel-card")).toBeInTheDocument();
+  });
+
+  it("renders an EmptyState when no provider is active", () => {
+    mockGetActiveProviderIds.mockReturnValue([]);
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" />,
+    );
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
+    expect(screen.getByText("No providers")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
+  });
+
+  it("filters an inactive/unsupported provider id out of the panel", () => {
+    mockGetActiveProviderIds.mockReturnValue(["email"]);
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" />,
+    );
+    // "email" is reported by getActiveProviderIds but is not a supported
+    // AuthPanel provider (google | github) — treated as zero active providers.
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
+  });
+
+  // ── #4984 — the link to apps/web's own /sign-in page ──────────────────────
+
+  it("links to /sign-in?next=<pathname> under the AuthPanel", () => {
+    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    const link = screen.getByTestId("sign-in-gate-link");
+    expect(link).toHaveAttribute("href", "/sign-in?next=%2Fen%2Fwaitlist");
+    expect(link).toHaveTextContent("Go to the sign-in page");
+    expect(screen.getByTestId("auth-panel-card")).toBeInTheDocument();
+  });
+
+  it("links to /sign-in?next=<pathname> in the zero-provider branch too", () => {
+    mockGetActiveProviderIds.mockReturnValue([]);
+    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
+    expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Fen%2Fwaitlist",
+    );
+  });
+
+  it("encodes the current pathname — /account round-trips as ?next=%2Faccount", () => {
+    mockUsePathname.mockReturnValue("/account");
+    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Faccount",
+    );
+  });
+});

package/templates/apps/web/app/[locale]/(authed)/waitlist/__tests__/list.test.tsx

@@ -0,0 +1,171 @@
+/**
+ * Tests for the operator dashboard's list + rollup view (#4665 D10, AC1).
+ *
+ * Covers:
+ *   1. Renders the experiments table + rollup from a D6 fixture list.
+ *   2. Renders both active (live) and completed (closed) experiments, with
+ *      status visible.
+ *   3. Renders an EmptyState when the scope has no experiments.
+ *   4. Renders ForbiddenState on a 401/403 rather than throwing.
+ */
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: jest.fn().mockImplementation(async () => (key: string, values?: Record<string, unknown>) =>
+    values ? `copy:${key}:${JSON.stringify(values)}` : `copy:${key}`,
+  ),
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockList = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistExperiments: { list: (...args: unknown[]) => mockList(...args) },
+}));
+
+import Page from "../page";
+
+const FIXTURE_LIST = {
+  scope: "site" as const,
+  experiments: [
+    {
+      id: "wlexp_live",
+      siteId: "site_1",
+      key: "early-access",
+      mode: "qualifying" as const,
+      status: "live" as const,
+      createdAt: "2026-08-01T00:00:00.000Z",
+      updatedAt: "2026-09-01T00:00:00.000Z",
+      waitlists: [{ key: "main", flowSlug: "main-flow" }],
+      counts: { raw: 120, qualified: 90, qualificationRate: 0.75 },
+    },
+    {
+      id: "wlexp_closed",
+      siteId: "site_1",
+      key: "beta-cohort",
+      mode: "lead-capture" as const,
+      status: "closed" as const,
+      createdAt: "2026-07-01T00:00:00.000Z",
+      updatedAt: "2026-08-01T00:00:00.000Z",
+      waitlists: [{ key: "main", flowSlug: "main-flow" }],
+      counts: { raw: 40, qualified: null, qualificationRate: null },
+    },
+  ],
+  rollup: {
+    experiments: { total: 2, live: 1, closed: 1, draft: 0 },
+    raw: 160,
+    qualified: 90,
+    qualificationRate: 0.5625,
+    sites: 1,
+  },
+};
+
+describe("WaitlistListPage — list + rollup (AC1)", () => {
+  beforeEach(() => {
+    mockList.mockReset();
+  });
+
+  it("renders active and completed experiments with status visible", async () => {
+    mockList.mockResolvedValue({ ok: true, body: FIXTURE_LIST });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    expect(screen.getByTestId("experiments-table-row-wlexp_live")).toBeInTheDocument();
+    expect(screen.getByTestId("experiments-table-row-wlexp_closed")).toBeInTheDocument();
+    expect(screen.getAllByTestId("experiment-status-badge")).toHaveLength(2);
+  });
+
+  it("renders the rollup strip", async () => {
+    mockList.mockResolvedValue({ ok: true, body: FIXTURE_LIST });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    expect(screen.getByTestId("rollup-ticker")).toBeInTheDocument();
+  });
+
+  it("renders an EmptyState when there are no experiments", async () => {
+    mockList.mockResolvedValue({
+      ok: true,
+      body: { ...FIXTURE_LIST, experiments: [], rollup: { ...FIXTURE_LIST.rollup, experiments: { total: 0, live: 0, closed: 0, draft: 0 }, raw: 0, qualified: 0, qualificationRate: null } },
+    });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    expect(screen.getByTestId("experiments-table-empty")).toBeInTheDocument();
+  });
+
+  it("renders ForbiddenState on a 403 rather than throwing", async () => {
+    mockList.mockResolvedValue({ ok: false, status: 403, body: { error: { code: "forbidden", message: "Forbidden" } } });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    expect(screen.getByTestId("waitlist-forbidden")).toBeInTheDocument();
+  });
+
+  it("rethrows a non-403/401 error", async () => {
+    mockList.mockResolvedValue({ ok: false, status: 500, body: { error: { code: "internal_error", message: "Boom" } } });
+    await expect(Page({ params: Promise.resolve({ locale: "en" }) })).rejects.toThrow();
+  });
+});
+
+// ── #4839 AC-3 — the per-offer funnel renders for a recommending experiment ──
+
+const RECOMMENDING_EXPERIMENT = {
+  id: "wlexp_reco",
+  siteId: "site_1",
+  key: "ailk-reco",
+  mode: "recommending" as const,
+  status: "live" as const,
+  createdAt: "2026-09-01T00:00:00.000Z",
+  updatedAt: "2026-09-04T00:00:00.000Z",
+  waitlists: [{ key: "main", flowSlug: "ailk-reco" }],
+  counts: {
+    raw: 3,
+    qualified: null,
+    qualificationRate: null,
+    offers: [
+      { offerKey: "pro", recommended: 2, saved: 1, checkedOut: 2 },
+      { offerKey: "starter", recommended: 1, saved: 0, checkedOut: 0 },
+    ],
+  },
+};
+
+describe("WaitlistListPage — per-offer funnel (#4839 AC-3)", () => {
+  beforeEach(() => {
+    mockList.mockReset();
+  });
+
+  it("renders one funnel table per recommending experiment, one row per offer, counts formatted", async () => {
+    mockList.mockResolvedValue({
+      ok: true,
+      body: { ...FIXTURE_LIST, experiments: [...FIXTURE_LIST.experiments, RECOMMENDING_EXPERIMENT] },
+    });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    const funnel = screen.getByTestId("experiments-offer-funnel-wlexp_reco");
+    expect(funnel).toBeInTheDocument();
+    expect(funnel).toHaveTextContent("copy:list.offers.captionPrefix ailk-reco");
+    expect(screen.getByTestId("experiments-offer-funnel-wlexp_reco-pro")).toHaveTextContent("pro");
+    expect(screen.getByTestId("experiments-offer-funnel-wlexp_reco-pro")).toHaveTextContent("2");
+    expect(screen.getByTestId("experiments-offer-funnel-wlexp_reco-pro")).toHaveTextContent("1");
+    expect(screen.getByTestId("experiments-offer-funnel-wlexp_reco-starter")).toHaveTextContent("starter");
+    expect(screen.getAllByTestId(/^experiments-offer-funnel-wlexp_reco-/)).toHaveLength(2);
+    expect(screen.getAllByTestId(/^experiments-offer-funnel-wlexp_/)).toHaveLength(3);
+    // The experiments table is still the list's first table, untouched.
+    expect(screen.getByTestId("experiments-table-row-wlexp_reco")).toBeInTheDocument();
+  });
+
+  it("renders no funnel when only non-recommending experiments are in scope", async () => {
+    mockList.mockResolvedValue({ ok: true, body: FIXTURE_LIST });
+    const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+    render(element);
+
+    expect(screen.queryAllByTestId(/^experiments-offer-funnel-/)).toHaveLength(0);
+  });
+});