create-ailk 0.11.5 → 0.12.1

package/templates/apps/web/lib/__tests__/listings.test.tsx

@@ -0,0 +1,352 @@
+/**
+ * The listicle directory's page extension (#7521 D6, AC-5).
+ *
+ * Every dependency is injected — no network, no headers(), no paid package —
+ * so each case pins one decision: which path segment is the landing page,
+ * which links the cards get, when the extension makes NO read at all, and
+ * that a failed, slow or malformed read renders the page as today.
+ */
+import { render } from "@testing-library/react";
+import type { ListingEntryPublic } from "@working-theory/validation";
+import React from "react";
+
+import {
+  createListingExtension,
+  type ListingExtensionDeps,
+  type ListingUiModule,
+} from "../listings";
+
+function entry(slug: string, name: string): ListingEntryPublic {
+  return {
+    id: `prjl_${slug}`,
+    slug,
+    name,
+    summary: `${name} in one line.`,
+    url: `https://${slug}.example.com`,
+    logoMarkUrl: `https://${slug}.example.com/logo.png`,
+    featured: false,
+    status: "active",
+    windowEndsAt: "2099-01-01T00:00:00.000Z",
+    decidedAt: "2026-09-10T00:00:00.000Z",
+    waitlistCount: 3,
+    profile: [{ name: "stage", label: "Stage", value: "Live", kind: "select" }],
+  };
+}
+
+function directory(landingPage: string, entryType = "Organization") {
+  return {
+    landingPage,
+    entryType,
+    entries: [entry("acme", "Acme"), entry("globex", "Globex")],
+  };
+}
+
+const shelvesProps: Array<Record<string, unknown>> = [];
+const detailProps: Array<Record<string, unknown>> = [];
+const STUB_UI: ListingUiModule = {
+  ListingShelves: (props) => {
+    shelvesProps.push({ ...props });
+    return <div data-testid="stub-shelves" />;
+  },
+  ListingDetail: (props) => {
+    detailProps.push({ ...props });
+    return <div data-testid="stub-detail">{props.entry.name}</div>;
+  },
+};
+
+let path: string | null;
+let fetchDirectory: jest.Mock;
+
+function extension(overrides: Partial<ListingExtensionDeps> = {}) {
+  return createListingExtension({
+    siteKey: () => "k",
+    pathname: async () => path,
+    locales: () => ["en", "fr"],
+    fetchDirectory,
+    loadUi: async () => STUB_UI,
+    translate: async () => (key: string) => `listings.${key}`,
+    baseUrl: () => "https://site.test",
+    ...overrides,
+  });
+}
+
+const ok = (body: unknown) => Promise.resolve({ ok: true, body });
+
+function jsonLdOf(container: HTMLElement): Record<string, unknown>[] {
+  return [...container.querySelectorAll("script[type='application/ld+json']")].map(
+    (s) => JSON.parse(s.textContent ?? "null") as Record<string, unknown>,
+  );
+}
+
+beforeEach(() => {
+  shelvesProps.length = 0;
+  detailProps.length = 0;
+  fetchDirectory = jest.fn((_key: string, landingPage: string) => ok(directory(landingPage)));
+});
+
+describe("appendix — the shelves on a landing page", () => {
+  it("renders the shelves with locale links and one ItemList JSON-LD block", async () => {
+    path = "/en/partners";
+
+    const node = await extension().appendix!({ type: "AboutPage", slug: "partners", locale: "en" });
+    const { container, getByTestId } = render(<>{node}</>);
+
+    expect(getByTestId("stub-shelves")).toBeTruthy();
+    expect(fetchDirectory).toHaveBeenCalledWith("k", "/partners", "en");
+    const hrefFor = shelvesProps[0]!["hrefFor"] as (e: { slug: string }) => string;
+    expect(hrefFor({ slug: "acme" })).toBe("/en/partners/acme");
+    expect(hrefFor({ slug: "globex" })).toBe("/en/partners/globex");
+
+    const blocks = jsonLdOf(container);
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0]!["@type"]).toBe("ItemList");
+    expect(
+      (blocks[0]!["itemListElement"] as Array<{ url: string; position: number; name: string }>).map(
+        (item) => [item.position, item.url, item.name],
+      ),
+    ).toEqual([
+      [1, "https://site.test/en/partners/acme", "Acme"],
+      [2, "https://site.test/en/partners/globex", "Globex"],
+    ]);
+  });
+
+  it("an unprefixed default-locale path reads its whole path as the landing page", async () => {
+    path = "/tools";
+
+    render(<>{await extension().appendix!({ type: "WebPage", slug: "tools", locale: "en" })}</>);
+
+    expect(fetchDirectory).toHaveBeenCalledWith("k", "/tools", "en");
+    const hrefFor = shelvesProps[0]!["hrefFor"] as (e: { slug: string }) => string;
+    expect(hrefFor({ slug: "acme" })).toBe("/tools/acme");
+  });
+
+  it("a non-default locale's links keep its prefix", async () => {
+    path = "/fr/partners";
+
+    render(<>{await extension().appendix!({ type: "AboutPage", slug: "partners", locale: "fr" })}</>);
+
+    const hrefFor = shelvesProps[0]!["hrefFor"] as (e: { slug: string }) => string;
+    expect(hrefFor({ slug: "acme" })).toBe("/fr/partners/acme");
+  });
+
+  it("a page no live listicle names renders nothing", async () => {
+    path = "/en/about";
+    fetchDirectory.mockImplementation(() => ok(null));
+
+    expect(await extension().appendix!({ type: "AboutPage", slug: "about", locale: "en" })).toBeNull();
+  });
+
+  it("a two-segment path never reaches appendix's read", async () => {
+    path = "/en/partners/acme";
+
+    expect(await extension().appendix!({ type: "AboutPage", slug: "acme", locale: "en" })).toBeNull();
+    expect(fetchDirectory).not.toHaveBeenCalled();
+  });
+});
+
+describe("detailFallback — an entry at /<landingPage>/<slug>", () => {
+  it("renders ListingDetail for an accepted entry, with entry-type JSON-LD", async () => {
+    path = "/en/partners/acme";
+
+    const node = await extension().detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+    const { container, getByTestId } = render(<>{node}</>);
+
+    expect(getByTestId("stub-detail").textContent).toBe("Acme");
+    expect(fetchDirectory).toHaveBeenCalledWith("k", "/partners", "en");
+    const [ld] = jsonLdOf(container);
+    expect(ld).toEqual({
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "@id": "https://site.test/en/partners/acme",
+      name: "Acme",
+      description: "Acme in one line.",
+      url: "https://acme.example.com",
+      image: "https://acme.example.com/logo.png",
+    });
+  });
+
+  it("answers null for an unknown slug", async () => {
+    path = "/en/partners/nope";
+
+    expect(await extension().detailFallback!({ type: "Partner", slug: "nope", locale: "en" })).toBeNull();
+  });
+
+  it("resolves samhenry's /projects/<slug> shape the same way", async () => {
+    path = "/en/projects/acme";
+    fetchDirectory.mockImplementation(() => ok(directory("/projects", "CreativeWork")));
+
+    const node = await extension().detailFallback!({ type: "Project", slug: "acme", locale: "en" });
+    const { container } = render(<>{node}</>);
+
+    expect(fetchDirectory).toHaveBeenCalledWith("k", "/projects", "en");
+    expect(jsonLdOf(container)[0]!["@type"]).toBe("CreativeWork");
+  });
+
+  it("a one-segment path never reaches detailFallback's read", async () => {
+    path = "/en/partners";
+
+    expect(await extension().detailFallback!({ type: "Partner", slug: "partners", locale: "en" })).toBeNull();
+    expect(fetchDirectory).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ["a dotted segment", "/en/partners/a.b", "a.b"],
+    ["a slug other than renderPage's", "/en/partners/acme", "acme-2"],
+    ["an upper-case segment", "/en/Partners/acme", "acme"],
+  ])("answers null with no read for %s", async (_label, at, slug) => {
+    path = at;
+
+    expect(await extension().detailFallback!({ type: "Partner", slug, locale: "en" })).toBeNull();
+    expect(fetchDirectory).not.toHaveBeenCalled();
+  });
+
+  it("detailMetadata titles the entry, and shares one read with detailFallback", async () => {
+    path = "/en/partners/acme";
+    const ext = extension();
+
+    const meta = await ext.detailMetadata!({ type: "Partner", slug: "acme", locale: "en" });
+    await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+    await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+
+    expect(meta).toEqual({ title: "Acme", description: "Acme in one line." });
+    expect(fetchDirectory).toHaveBeenCalledTimes(1);
+  });
+
+  it("re-reads once the 30-second memo expires", async () => {
+    path = "/en/partners/acme";
+    let now = 1_000_000;
+    const ext = extension({ now: () => now });
+
+    await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+    now += 29_000;
+    await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+    expect(fetchDirectory).toHaveBeenCalledTimes(1);
+    now += 2_000;
+    await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" });
+    expect(fetchDirectory).toHaveBeenCalledTimes(2);
+  });
+
+  it("entryAt serves the [slug]/[detail] route from an explicit path", async () => {
+    const hubExists = jest.fn(async () => true);
+    const node = await extension().entryAt("/tools/acme", "acme", "en", hubExists);
+    const { getByTestId } = render(<>{node}</>);
+
+    expect(getByTestId("stub-detail").textContent).toBe("Acme");
+    expect(hubExists).toHaveBeenCalledTimes(1);
+    expect(fetchDirectory).toHaveBeenCalledWith("k", "/tools", "en");
+  });
+
+  it("entryAt makes no read for a hub that is not a page (SEC-7521-D1)", async () => {
+    const ext = extension();
+    const missing = async () => false;
+    for (const hub of ["aaa", "bbb", "ccc"]) {
+      expect(await ext.entryAt(`/${hub}/acme`, "acme", "en", missing)).toBeNull();
+      expect(await ext.entryMetadataAt(`/${hub}/acme`, "acme", "en", missing)).toBeNull();
+    }
+    expect(fetchDirectory).toHaveBeenCalledTimes(0);
+  });
+
+  it("a locale the site does not enable makes no read, whatever x-pathname says (SEC-7521-C1)", async () => {
+    // A dotted path such as /x1.y/services/a skips the middleware, so the
+    // client supplies x-pathname; the dotted segment arrives as the locale.
+    const ext = extension();
+    path = "/anything1/a";
+    expect(await ext.detailFallback!({ type: "Service", slug: "a", locale: "x1.y" })).toBeNull();
+    expect(await ext.detailMetadata!({ type: "Service", slug: "a", locale: "x1.y" })).toBeNull();
+    path = "/anything1";
+    expect(await ext.appendix!({ type: "LandingPage", slug: "anything1", locale: "x1.y" })).toBeNull();
+    expect(await ext.entryAt("/tools/acme", "acme", "x1.y", async () => true)).toBeNull();
+    expect(fetchDirectory).toHaveBeenCalledTimes(0);
+  });
+
+  it("entryAt never probes the hub without a site key", async () => {
+    const hubExists = jest.fn(async () => true);
+    const ext = extension({ siteKey: () => undefined });
+    expect(await ext.entryAt("/tools/acme", "acme", "en", hubExists)).toBeNull();
+    expect(hubExists).not.toHaveBeenCalled();
+    expect(fetchDirectory).toHaveBeenCalledTimes(0);
+  });
+
+  it("entryAt and entryMetadataAt answer null when the paid package fails to load", async () => {
+    const warn = jest.spyOn(console, "warn").mockImplementation(() => undefined);
+    const ext = extension({ loadUi: () => Promise.reject(new Error("chunk load failed")) });
+    const hub = async () => true;
+    expect(await ext.entryAt("/tools/acme", "acme", "en", hub)).toBeNull();
+    expect(await ext.entryMetadataAt("/tools/acme", "acme", "en", hub)).toBeNull();
+    warn.mockRestore();
+  });
+});
+
+describe("no read without a key or the paid package", () => {
+  it.each([
+    ["no site key", { siteKey: () => undefined }],
+    ["an empty site key", { siteKey: () => "" }],
+    ["no paid package", { loadUi: async () => null }],
+  ])("makes zero reads with %s", async (_label, overrides) => {
+    const ext = extension(overrides as Partial<ListingExtensionDeps>);
+    path = "/en/partners";
+    expect(await ext.appendix!({ type: "AboutPage", slug: "partners", locale: "en" })).toBeNull();
+    path = "/en/partners/acme";
+    expect(await ext.detailFallback!({ type: "Partner", slug: "acme", locale: "en" })).toBeNull();
+    expect(await ext.detailMetadata!({ type: "Partner", slug: "acme", locale: "en" })).toBeNull();
+
+    expect(fetchDirectory).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe("a failed read renders the page as today", () => {
+  let warn: jest.SpyInstance;
+  beforeEach(() => {
+    path = "/en/partners";
+    warn = jest.spyOn(console, "warn").mockImplementation(() => undefined);
+  });
+  afterEach(() => {
+    warn.mockRestore();
+    jest.useRealTimers();
+  });
+
+  it.each([
+    ["rejects", () => Promise.reject(new Error("ECONNREFUSED"))],
+    ["answers 500", () => Promise.resolve({ ok: false, status: 500, body: {} })],
+    ["answers a body failing the schema", () => ok({ landingPage: "/partners", entries: "nope" })],
+  ])("yields null when the read %s, and logs without the key", async (_label, impl) => {
+    fetchDirectory.mockImplementation(impl);
+
+    expect(await extension().appendix!({ type: "AboutPage", slug: "partners", locale: "en" })).toBeNull();
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(JSON.stringify(warn.mock.calls)).not.toContain('"k"');
+  });
+
+  it("retries a failed read after 5 s, not the full 30 s memo", async () => {
+    fetchDirectory.mockImplementation(() => Promise.resolve({ ok: false, status: 429, body: {} }));
+    let now = 0;
+    const ext = extension({ now: () => now });
+    const appendix = () => ext.appendix!({ type: "AboutPage", slug: "partners", locale: "en" });
+
+    expect(await appendix()).toBeNull();
+    now += 4_000;
+    expect(await appendix()).toBeNull();
+    expect(fetchDirectory).toHaveBeenCalledTimes(1);
+
+    fetchDirectory.mockImplementation((_key: string, landingPage: string) => ok(directory(landingPage)));
+    now += 2_000;
+    expect(await appendix()).not.toBeNull();
+    expect(fetchDirectory).toHaveBeenCalledTimes(2);
+  });
+
+  it("yields null when the read resolves after 2000 ms", async () => {
+    jest.useFakeTimers();
+    fetchDirectory.mockImplementation(
+      () => new Promise((resolve) => setTimeout(() => resolve({ ok: true, body: directory("/partners") }), 2500)),
+    );
+
+    const pending = extension().appendix!({ type: "AboutPage", slug: "partners", locale: "en" });
+    await jest.advanceTimersByTimeAsync(2000);
+
+    expect(await pending).toBeNull();
+    expect(warn).toHaveBeenCalledWith(
+      "[listings] directory read failed; rendering the page without it",
+      { landingPage: "/partners", reason: "timeout" },
+    );
+  });
+});