create-ailk 0.22.0 → 0.23.0

package/templates/apps/web/app/[locale]/careers/__tests__/page-renderer-migration.test.tsx

@@ -33,9 +33,10 @@ jest.mock("next-mdx-remote/rsc", () => ({
     React.createElement("div", { "data-testid": "mdx-rendered" }, source),
 }));
 
-// ── #8746 — the job page's #apply section reads the API and _site.mdx ─────────
-// Stubbed so the migration snapshot stays offline and deterministic; the
-// section itself is covered by job-apply-page.test.tsx.
+// ── #8746 — the careers routes once read the API and _site.mdx ────────────────
+// Stubbed so the migration snapshot stays offline and deterministic. Since
+// #8849 neither page reads them (the form is on the apply page, covered by
+// job-apply-page.test.tsx).
 jest.mock("@working-theory/api-client", () => ({
   flows: {
     get: jest.fn().mockResolvedValue({ ok: false, status: 404, body: null }),
@@ -75,23 +76,62 @@ describe("careers/page — snapshot regression", () => {
   });
 
   it("populated state renders deterministic HTML", async () => {
-    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
-      frontmatter: {
-        type: "CareersList",
-        slug: "careers",
-        title: "Careers at AILK",
-        description: "Join the team building the AX-first platform.",
-      },
-      body: "mdx-body-content",
-    });
+    // #8849 D10 — sections mode: one generated items section per posting,
+    // first, with the search box; the ItemList carries ListItems.
+    const getMdxSourcePopulated = jest.fn<
+      ReturnType<typeof pageRenderer.getMdxSource>,
+      Parameters<typeof pageRenderer.getMdxSource>
+    >(async (type) =>
+      type === "CareersList"
+        ? {
+            frontmatter: {
+              type: "CareersList" as const,
+              slug: "careers",
+              title: "Careers at AILK",
+              description: "Join the team building the AX-first platform.",
+            },
+            body: "mdx-body-content",
+          }
+        : {
+            frontmatter: {
+              type: "JobPosting" as const,
+              slug: "senior-engineer",
+              title: "Senior Engineer",
+              description: "Build the AILK platform.",
+              employmentType: "FULL_TIME" as const,
+              location: "Remote (US)",
+            },
+            body: "",
+          },
+    );
 
     const element = await CareersPage({
       params: Promise.resolve({ locale: "en" }),
       getMdxSource: getMdxSourcePopulated,
+      getMdxSlugs: jest.fn().mockResolvedValue(["senior-engineer"]),
     });
     const { container } = render(element);
+    const jsonLd = JSON.parse(
+      container.querySelector("[data-testid='json-ld']")!.textContent!,
+    ) as { mainEntity: { itemListElement: Record<string, unknown>[] } };
+    expect(jsonLd.mainEntity.itemListElement).toEqual([
+      {
+        "@type": "ListItem",
+        position: 1,
+        url: "http://localhost:3000/en/careers/senior-engineer",
+        item: {
+          "@type": "JobPosting",
+          name: "Senior Engineer",
+          description: "Build the AILK platform.",
+        },
+      },
+    ]);
+    expect(
+      container.querySelector("[data-testid='items-filter-search']"),
+    ).not.toBeNull();
+    expect(container.querySelector("[data-testid='mdx-body']")).toBeNull();
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Careers at AILK","description":"Join the team building the AX-first platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"JobPosting"}]}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Careers at AILK</h1><p data-testid="careers-description" class="mt-block-tight text-lead">Join the team building the AX-first platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">mdx-body-content</div></div></article></div></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Careers at AILK","description":"Join the team building the AX-first platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"ListItem","position":1,"url":"http://localhost:3000/en/careers/senior-engineer","item":{"@type":"JobPosting","name":"Senior Engineer","description":"Build the AILK platform."}}]}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Careers at AILK</h1><p data-testid="careers-description" class="mt-block-tight text-lead">Join the team building the AX-first platform.</p></div><div class="ailk-section-renderer" data-testid="section-renderer"><span id="section-open-positions" class="ailk-section-anchor" aria-hidden="true" data-testid="section-anchor"></span><section class="py-section bg-(--color-bg)" data-testid="items" data-section="items"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8"><div class="mb-block-loose" data-testid="section-frame-header"><div><h2 class="text-heading-1 lg:text-display-sm font-display text-fg whitespace-pre-line max-w-3xl">Open positions</h2></div></div><div data-testid="items-filter-island" class="mt-10"><div class="flex flex-col gap-4 md:flex-row md:items-end" data-testid="items-filter"><div class="flex flex-col gap-1.5 md:flex-1"><div class="flex items-center justify-between gap-2"><label class="text-body-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="_r_0_-search">Search roles</label></div><input data-testid="items-filter-search" class="flex rounded-control border-hairline text-body-sm text-(--color-fg) file:border-0 file:bg-transparent file:text-body-sm file:font-medium file:text-(--color-fg) placeholder:text-(--color-text-muted) focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors bg-(--color-surface-raised) border-(--color-border-strong) hover:enabled:border-transparent hover:enabled:ring-1 hover:enabled:ring-(--color-border-strong) focus-visible:border-transparent focus-visible:ring-(--color-brand) h-(--control-height-default) px-3 py-1.5 w-full" id="_r_0_-search" type="search" value=""></div><div class="flex flex-col gap-1.5 md:w-56"><div class="flex items-center justify-between gap-2"><label class="text-body-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="_r_0_-type">Type</label></div><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-testid="items-filter-facet-type" class="flex w-full items-center justify-between rounded-control border-hairline border-(--color-border) bg-(--color-surface-secondary) text-body-sm text-(--color-fg) placeholder:text-(--color-text-muted) focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-(--color-accent) hover:enabled:border-transparent hover:enabled:ring-1 hover:enabled:ring-(--color-border) disabled:cursor-not-allowed disabled:opacity-50 h-(--control-height-default) px-3 py-1.5 w-full" id="_r_0_-type"><span style="pointer-events: none;">All types</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="flex flex-col gap-1.5 md:w-56"><div class="flex items-center justify-between gap-2"><label class="text-body-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="_r_0_-location">Location</label></div><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-testid="items-filter-facet-location" class="flex w-full items-center justify-between rounded-control border-hairline border-(--color-border) bg-(--color-surface-secondary) text-body-sm text-(--color-fg) placeholder:text-(--color-text-muted) focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-(--color-accent) hover:enabled:border-transparent hover:enabled:ring-1 hover:enabled:ring-(--color-border) disabled:cursor-not-allowed disabled:opacity-50 h-(--control-height-default) px-3 py-1.5 w-full" id="_r_0_-location"><span style="pointer-events: none;">All locations</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></div><div role="status" aria-live="polite" class="mt-4 text-body-sm text-muted" data-testid="items-filter-status">1 open position</div><div class="grid gap-grid max-w-2xl justify-items-center mx-auto mt-6" data-testid="items-grid" data-separation="gapped"><div class="contents" data-testid="items-filter-slot"><div class="h-full rounded-card p-card flex flex-col border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><span class="text-body font-body leading-normal text-fg mb-1 block text-eyebrow eyebrow-case" style="color: var(--items-item-eyebrow-color, var(--color-brand));">Full-time · Remote (US)</span><h3 class="text-heading-3 font-display text-fg">Senior Engineer</h3><p class="text-body font-body leading-normal text-(--color-text-muted) mt-2 text-sm">Build the AILK platform.</p><div class="mt-auto pt-4" data-testid="card-footer"><a class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-brand) rounded-sm mt-4 inline-block text-sm font-medium text-brand underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" href="/careers/senior-engineer" data-testid="items-item-link-0">View role</a></div></div></div></div></div></div></section></div></main>"`,
     );
   });
 });
@@ -115,15 +155,10 @@ describe("careers/[slug]/page — snapshot regression", () => {
       getMdxSource: getMdxSourcePopulated,
     });
     const { container } = render(element);
-    // #8746 AC-1 — the JobPosting's ApplyAction (the breadcrumb's own page
-    // URL + #apply) is the one deliberate JSON-LD change in this pin.
-    // #8746 — the page appends an #apply section after renderPage's output;
-    // it is covered by job-apply-page.test.tsx. Left out of a copy so this
-    // snapshot keeps pinning renderPage's output byte for byte.
-    const pinned = container.cloneNode(true) as HTMLElement;
-    pinned.querySelector("#apply")?.remove();
-    expect(pinned.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform.","potentialAction":{"@type":"ApplyAction","target":"http://localhost:3000/en/careers/senior-engineer#apply"}}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Senior Engineer</h1><p data-testid="senior-engineer-description" class="mt-block-tight text-lead">Build the AILK platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">mdx-body-content</div></div></article></div></div></div></main>"`,
+    // #8849 D3, D8 — the JobPosting's ApplyAction targets the apply page, and
+    // the page passes renderPage an Apply button inside <main>.
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform.","potentialAction":{"@type":"ApplyAction","target":"http://localhost:3000/en/careers/senior-engineer/apply"}}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Senior Engineer</h1><p data-testid="senior-engineer-description" class="mt-block-tight text-lead">Build the AILK platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">mdx-body-content</div></div></article></div></div></div><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 pb-section"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big)" href="/careers/senior-engineer/apply" data-testid="job-apply-cta">Apply for this role</a></div></main>"`,
     );
   });
 

package/templates/apps/web/app/[locale]/careers/page.tsx

@@ -1,13 +1,59 @@
-// Careers list page. Reads CareersList MDX via the content adapter and emits
-// a JSON-LD CollectionPage. Links to JobPosting detail pages at /careers/<slug>.
-import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+// Careers list page (#8849 D10) — the /alternatives pattern. Reads CareersList
+// MDX via the content adapter and puts one generated `items` section first,
+// one card per JobPosting, so the visible card grid and the CollectionPage's
+// ItemList JSON-LD (built from the same sections) always agree. Each card
+// links to /careers/<slug>. The section carries a search box and employment-
+// type and location filters (the Items filter, #8849 D6) whose facets read the
+// postings' first-class `employmentType` and `location` frontmatter, never
+// `schema.mainEntity`. Every posting stays in the server HTML.
+//
+// A missing seed renders the `careers` empty state; a seed with no postings
+// renders its declared sections alone.
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getMdxSlugs as defaultGetMdxSlugs,
+  getPageSections as defaultGetPageSections,
+} from "@working-theory/page-renderer";
+import {
+  getMdxSlugs as loadMdxSlugs,
+  getMdxSource as loadMdxSource,
+  getPageSections as loadPageSections,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
 interface Props {
   params: Promise<{ locale: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+
+/** Each `employmentType` value's `careers` message key. */
+const EMPLOYMENT_TYPE_KEYS = {
+  FULL_TIME: "employmentTypeFullTime",
+  PART_TIME: "employmentTypePartTime",
+  CONTRACTOR: "employmentTypeContractor",
+  TEMPORARY: "employmentTypeTemporary",
+  INTERN: "employmentTypeIntern",
+  VOLUNTEER: "employmentTypeVolunteer",
+  PER_DIEM: "employmentTypePerDiem",
+  OTHER: "employmentTypeOther",
+} as const;
+
+type EmploymentType = keyof typeof EMPLOYMENT_TYPE_KEYS;
+
+interface PostingFields {
+  title?: string;
+  description?: string;
+  publishedAt?: string;
+  employmentType?: EmploymentType;
+  location?: string;
 }
 
 export async function generateMetadata({
@@ -20,14 +66,92 @@ export async function generateMetadata({
 export default async function Page({
   params,
   getMdxSource,
+  getMdxSlugs,
+  getPageSections,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
+  const load = getMdxSource ?? loadMdxSource;
+  const listSlugs = getMdxSlugs ?? loadMdxSlugs;
+  const loadSections = getPageSections ?? loadPageSections;
+  const t = await getTranslations({ locale, namespace: "careers" });
+
+  /**
+   * Put one generated `items` section first — the postings are the page's
+   * main content — followed by the declared sections. Absent when there are
+   * no postings.
+   */
+  async function withPostings(frontmatter: unknown): Promise<Section[]> {
+    const declared = await loadSections(frontmatter);
+    const slugs = await listSlugs("JobPosting", locale);
+    if (slugs.length === 0) return declared;
+
+    const postings = await Promise.all(
+      slugs.map(async (slug) => {
+        const source = await load("JobPosting", slug, locale);
+        return { slug, fm: (source?.frontmatter ?? {}) as PostingFields };
+      }),
+    );
+    // Newest `publishedAt` first, then by slug; no date sorts last.
+    postings.sort(
+      (a, b) =>
+        (b.fm.publishedAt ?? "").localeCompare(a.fm.publishedAt ?? "") ||
+        a.slug.localeCompare(b.slug),
+    );
+
+    const items = postings.map(({ slug, fm }) => {
+      const type =
+        fm.employmentType !== undefined
+          ? t(EMPLOYMENT_TYPE_KEYS[fm.employmentType])
+          : undefined;
+      const eyebrow = [type, fm.location].filter(Boolean).join(" · ");
+      const facets = {
+        ...(type !== undefined && { type }),
+        ...(fm.location !== undefined && { location: fm.location }),
+      };
+      return {
+        title: fm.title ?? slug,
+        description: fm.description ?? "",
+        ...(eyebrow !== "" && { eyebrow }),
+        link: { label: t("viewRole"), href: `/careers/${slug}` },
+        ...(Object.keys(facets).length > 0 && { facets }),
+      };
+    });
+
+    const filter = {
+      searchLabel: t("filterSearch"),
+      facets: [
+        { key: "type", label: t("filterType"), allLabel: t("filterAllTypes") },
+        {
+          key: "location",
+          label: t("filterLocation"),
+          allLabel: t("filterAllLocations"),
+        },
+      ],
+      emptyText: t("filterEmpty"),
+      // The island fills `{count}` in the browser, so the template passes
+      // through with its placeholder intact.
+      countText: {
+        one: t("filterCountOne"),
+        other: t("filterCountOther", { count: "{count}" }),
+      },
+    };
+
+    return [
+      {
+        type: "items" as const,
+        id: "open-positions",
+        data: { headline: t("openPositions"), items, filter },
+      },
+      ...declared,
+    ];
+  }
+
   return renderPage({
     type: "CareersList",
     slug: "careers",
     locale,
     translationsNamespace: "careers",
-    bodyMode: "mdx-body",
+    getPageSections: withPostings,
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

package/templates/apps/web/app/[locale]/contact/__tests__/contact-magnet-page.test.tsx

@@ -219,7 +219,7 @@ describe("contact/page — rendering (AC-3)", () => {
     expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
   });
 
-  it("links Terms, Privacy Policy and Working Agreement in the statement", async () => {
+  it("links Terms and Privacy Policy in the two-link statement (#8847 D2)", async () => {
     mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
 
     await renderPage();
@@ -232,10 +232,7 @@ describe("contact/page — rendering (AC-3)", () => {
       "href",
       localeHref("en", "/privacy"),
     );
-    expect(screen.getByTestId("consent-policy-link-working_agreement")).toHaveAttribute(
-      "href",
-      localeHref("en", "/working-agreement"),
-    );
+    expect(screen.queryByTestId("consent-policy-link-working_agreement")).toBeNull();
   });
 
   it("a magnet-driven post reaches leads.submit as flow:contact with its subject", async () => {
@@ -315,7 +312,7 @@ describe("contact/page — fallback (AC-5)", () => {
     expect(screen.getByTestId("contact-submit")).toHaveTextContent("Request a demo");
   });
 
-  it("the built-in form takes its labels from the contact catalog and the section's copy", async () => {
+  it("the built-in form takes its labels from the contact catalog and ends on the built-in ending (#8847 D7)", async () => {
     mockFlowsGet.mockResolvedValue({ ok: false, status: 404, body: {} });
     const messages = jest.requireActual("../../../../messages/en.json") as {
       contact: Record<string, string>;
@@ -332,13 +329,16 @@ describe("contact/page — fallback (AC-5)", () => {
     const form = screen.getByTestId("lead-capture-form");
     expect(form).toHaveTextContent(messages.contact.nameLabel!);
     expect(form).toHaveTextContent(messages.contact.messageLabel!);
-    expect(screen.getByTestId("contact-submit")).toHaveTextContent("Say hello");
+    expect(screen.getByTestId("contact-submit")).toHaveTextContent(messages.contact.sendMessage!);
 
     await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
-    await waitFor(() => expect(document.body).toHaveTextContent("Got it, thanks."));
+    await waitFor(() =>
+      expect(screen.getByTestId("contact-success-headline")).toHaveTextContent("Message sent."),
+    );
+    expect(document.body).not.toHaveTextContent("Got it, thanks.");
   });
 
-  it("a magnet's submit label wins, and the section's success message still applies", async () => {
+  it("a magnet's submit label and ending win over the section's copy (#8847 D7)", async () => {
     mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
 
     await renderPage([
@@ -349,13 +349,121 @@ describe("contact/page — fallback (AC-5)", () => {
       },
     ]);
 
-    const form = screen.getByTestId("lead-capture-form");
     expect(screen.getByTestId("contact-submit")).toHaveTextContent(
       contactFormFromConfig(contactFormFlowConfig, "en")!.submitLabel!,
     );
 
     await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
-    await waitFor(() => expect(document.body).toHaveTextContent("Got it, thanks."));
+    await waitFor(() =>
+      expect(screen.getByTestId("contact-success-headline")).toHaveTextContent("Message sent."),
+    );
+    expect(document.body).not.toHaveTextContent("Got it, thanks.");
+  });
+});
+
+// ── #8847 AC-2 — /contact is the magnet ─────────────────────────────────────
+
+/** A served Contact form whose every visible fact differs from the default. */
+function sayHelloConfig(): FlowConfig {
+  const config = JSON.parse(JSON.stringify(contactFormFlowConfig)) as FlowConfig;
+  const step = config.steps[0] as FieldStep;
+  step.copy = { title: { en: "Say hello" }, body: { en: "Two days, tops." }, cta: { en: "Send" } };
+  step.fields.find((f) => f.name === "terms")!.copy.label = { en: "I agree to the [Terms](terms)." };
+  config.ending = { default: { kind: "screen", headline: { en: "Got it, {name}." } } };
+  return config;
+}
+
+const COLUMN_SECTION = {
+  id: "contact-form",
+  type: "contact-form",
+  data: { variant: "column", headline: "Old heading", description: "Old line", fields: [] },
+};
+
+async function renderColumnPage() {
+  const element = await ContactPage({
+    params: Promise.resolve({ locale: "en" }),
+    getMdxSource: jest.fn().mockResolvedValue({
+      ...source,
+      frontmatter: { ...source.frontmatter, title: "Old title" },
+    }),
+    getPageSections: jest.fn().mockResolvedValue([COLUMN_SECTION]),
+  });
+  return render(element);
+}
+
+describe("contact/page — every visible fact comes from the magnet (#8847 AC-2)", () => {
+  it("the H1, the line, the consent and the ending are the served magnet's", async () => {
+    mockFlowsGet.mockResolvedValue(served(sayHelloConfig()));
+
+    await renderColumnPage();
+
+    const headings = screen.getAllByRole("heading", { level: 1 });
+    expect(headings).toHaveLength(1);
+    expect(headings[0]).toHaveTextContent("Say hello");
+    expect(screen.getByTestId("contact-form-column")).toHaveTextContent("Two days, tops.");
+    expect(
+      document.getElementById("lead-capture-consent-statement")!.textContent,
+    ).toBe("I agree to the Terms.");
+    expect(screen.getByTestId("consent-policy-link-terms")).toBeInTheDocument();
+    for (const old of ["Old heading", "Old line", "Old title"]) {
+      expect(document.body).not.toHaveTextContent(old);
+    }
+
+    await tickAndSubmit({ name: "Ada", email: "ada@example.com" });
+    await waitFor(() =>
+      expect(screen.getByTestId("contact-success-headline")).toHaveTextContent("Got it, Ada."),
+    );
+    const messages = jest.requireActual("../../../../messages/en.json") as {
+      contact: Record<string, string>;
+    };
+    expect(document.body).not.toHaveTextContent(messages.contact.successMessage!);
+  });
+
+  it("generateMetadata's title is the magnet's step title", async () => {
+    mockFlowsGet.mockResolvedValue(served(sayHelloConfig()));
+
+    const metadata = await pageModule.generateMetadata({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: jest.fn().mockResolvedValue({
+        ...source,
+        frontmatter: { ...source.frontmatter, title: "Old title" },
+      }),
+      getPageSections: jest.fn().mockResolvedValue([COLUMN_SECTION]),
+    });
+
+    expect(String((metadata.title as { absolute?: string })?.absolute ?? metadata.title)).toContain(
+      "Say hello",
+    );
+  });
+
+  it("with the hub unreadable, the built-in config's title and two-link statement render", async () => {
+    mockFlowsGet.mockRejectedValue(new Error("hub down"));
+
+    await renderColumnPage();
+
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Get in touch");
+    expect(
+      document.getElementById("lead-capture-consent-statement")!.textContent,
+    ).toBe("I accept the Terms and Privacy Policy.");
+  });
+
+  it("under the form, 'Prefer email?' links the _site.mdx contact email; absent with none", async () => {
+    const { readSiteContactEmail } = jest.requireMock("../site-contact-email") as {
+      readSiteContactEmail: jest.Mock;
+    };
+    mockFlowsGet.mockResolvedValue(served(contactFormFlowConfig));
+    readSiteContactEmail.mockReturnValue("hi@x.co");
+
+    const view = await renderColumnPage();
+
+    const line = screen.getByTestId("contact-prefer-email");
+    expect(line).toHaveTextContent("Prefer email? hi@x.co");
+    expect(line.querySelector("a")).toHaveAttribute("href", "mailto:hi@x.co");
+    view.unmount();
+
+    readSiteContactEmail.mockReturnValue(undefined);
+    await renderColumnPage();
+    expect(screen.queryByTestId("contact-prefer-email")).toBeNull();
   });
 });