create-ailk 0.1.0

package/templates/apps/web/__tests__/section-routes.test.tsx

@@ -0,0 +1,693 @@
+// Section-catalog route skeleton tests.
+// Each route is an async server component; we await the returned ReactElement.
+// getMdxSource and getPageSections are injected via optional props instead of
+// mocking internal modules — tests are independent of the on-disk /content/
+// tree without coupling to module internals.
+// next-mdx-remote/rsc is mocked (external boundary — RSC compiler not available under jsdom).
+//
+// Coverage per spec:
+//   - route-renders (with seed MDX) — confirms page renders and emits JSON-LD
+//   - empty-state (without seed MDX) — confirms graceful fallback, no crash
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }): React.ReactElement => (
+    <div data-testid="mdx-rendered">{source}</div>
+  ),
+}));
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+// Renders a real <h1>/<p> for a leading hero section — mirroring the real
+// Hero section component (packages/ui) closely enough to exercise the
+// renderPage leading-hero carve-out (#3301: renderPage omits its own
+// top-level <h1>/<p> when sections[0] is a hero, trusting the hero section
+// to supply the page's sole heading + lead paragraph).
+jest.mock("@working-theory/ui", () => ({
+  __esModule: true,
+  SectionRenderer: ({
+    sections,
+  }: {
+    sections: Array<{
+      type: string;
+      data?: { headline?: string; subheadline?: string };
+    }>;
+  }): React.ReactElement => (
+    <div data-testid="section-renderer" data-section-count={sections.length}>
+      {sections.map((section, i) =>
+        section.type === "hero" ? (
+          <div key={i} data-testid="section-item">
+            <h1>{section.data?.headline}</h1>
+            {section.data?.subheadline ? (
+              <p>{section.data.subheadline}</p>
+            ) : null}
+          </div>
+        ) : (
+          <div key={i} data-testid="section-item" />
+        ),
+      )}
+    </div>
+  ),
+}));
+
+import * as React from "react";
+
+import { notFound } from "next/navigation";
+
+import AboutPage from "../app/[locale]/about/page";
+import ContactPage from "../app/[locale]/contact/page";
+import FaqPage from "../app/[locale]/faq/page";
+import ProductsPage from "../app/[locale]/products/page";
+import ProductSlugPage from "../app/[locale]/products/[slug]/page";
+import ServicesPage from "../app/[locale]/services/page";
+import ServiceSlugPage from "../app/[locale]/services/[slug]/page";
+import ProjectsPage from "../app/[locale]/projects/page";
+import ProjectSlugPage from "../app/[locale]/projects/[slug]/page";
+
+import type { getMdxSource, getPageSections } from "@working-theory/page-renderer";
+
+type GetMdxSource = typeof getMdxSource;
+type GetPageSections = typeof getPageSections;
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+async function renderAsync(
+  element: Promise<React.ReactElement> | React.ReactElement,
+): Promise<void> {
+  const resolved = await element;
+  render(resolved);
+}
+
+const CONTACT_HERO = {
+  id: "hero-1",
+  type: "hero" as const,
+  data: { headline: "Contact AI Launch Kit" },
+};
+const CONTACT_CONTENT_BLOCK = {
+  id: "cb-1",
+  type: "content-block" as const,
+  data: { body: "Open an issue on GitHub for bugs and feature requests." },
+};
+const CONTACT_CTA = {
+  id: "cta-1",
+  type: "cta" as const,
+  data: {
+    headline: "Have a question?",
+    primaryCta: { label: "Open an issue", href: "https://github.com/tailwind-ai/ai-launch-kit/issues" },
+  },
+};
+
+const FAQ_HERO = {
+  id: "hero-1",
+  type: "hero" as const,
+  data: { headline: "Frequently Asked Questions" },
+};
+const FAQ_FAQ = {
+  id: "faq-1",
+  type: "faq" as const,
+  data: {
+    headline: "Common questions",
+    items: [
+      { question: "What is AEO?", answer: "AEO is Answer Engine Optimization." },
+    ],
+    variant: "offset" as const,
+    presentation: "expanded" as const,
+  },
+};
+
+const ABOUT_HERO = {
+  id: "hero-1",
+  type: "hero" as const,
+  data: { headline: "About AI Launch Kit" },
+};
+const ABOUT_CONTENT_BLOCK = {
+  id: "cb-1",
+  type: "content-block" as const,
+  data: { body: "The AX-first template extracted from production." },
+};
+const ABOUT_CTA = {
+  id: "cta-1",
+  type: "cta" as const,
+  data: {
+    headline: "Try it now",
+    primaryCta: { label: "Clone", href: "https://github.com" },
+  },
+};
+
+describe("apps/web — section-catalog route skeletons", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  // ── /about ────────────────────────────────────────────────────────────────
+
+  describe("/about", () => {
+    describe("with AboutPage MDX present and sections", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "AboutPage",
+          slug: "about",
+          title: "About AI Launch Kit",
+          description: "Why AILK exists.",
+        },
+        body: "# About\n\nBody copy.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([
+        ABOUT_HERO,
+        ABOUT_CONTENT_BLOCK,
+        ABOUT_CTA,
+      ]);
+
+      beforeEach(() => {
+        stubGetMdxSource.mockClear();
+        stubGetPageSections.mockClear();
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "About AI Launch Kit",
+        );
+      });
+
+      it("emits a JSON-LD script tag with @type AboutPage", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const script = screen.getByTestId("json-ld");
+        expect(script.getAttribute("type")).toBe("application/ld+json");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("AboutPage");
+      });
+
+      it("renders SectionRenderer with sections from frontmatter", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const renderer = screen.getByTestId("section-renderer");
+        expect(renderer.dataset.sectionCount).toBe("3");
+      });
+
+      it("does not render the MDX body directly", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.queryByTestId("mdx-body")).toBeNull();
+      });
+    });
+
+    describe("with AboutPage MDX present but no sections (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "AboutPage",
+          slug: "about",
+          title: "About AI Launch Kit",
+          description: "Why AILK exists.",
+        },
+        body: "# About\n\nBody copy.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the page without crashing (200)", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "About AI Launch Kit",
+        );
+      });
+    });
+
+    describe("with no AboutPage MDX (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the fallback sentinel without crashing", async () => {
+        await renderAsync(AboutPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── /contact ──────────────────────────────────────────────────────────────
+
+  describe("/contact", () => {
+    describe("with ContactPage MDX present and sections", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ContactPage",
+          slug: "contact",
+          title: "Contact",
+          description: "Get in touch.",
+        },
+        body: "# Contact\n\nBody.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([
+        CONTACT_HERO,
+        CONTACT_CONTENT_BLOCK,
+        CONTACT_CTA,
+      ]);
+
+      beforeEach(() => {
+        stubGetMdxSource.mockClear();
+        stubGetPageSections.mockClear();
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Contact",
+        );
+      });
+
+      it("emits a JSON-LD script tag with @type ContactPage", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("ContactPage");
+      });
+
+      it("renders SectionRenderer with sections from frontmatter", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const renderer = screen.getByTestId("section-renderer");
+        expect(renderer.dataset.sectionCount).toBe("3");
+      });
+
+      it("does not render the MDX body directly", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.queryByTestId("mdx-body")).toBeNull();
+      });
+    });
+
+    describe("with ContactPage MDX present but no sections (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ContactPage",
+          slug: "contact",
+          title: "Contact",
+          description: "Get in touch.",
+        },
+        body: "# Contact\n\nBody.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the page without crashing (200)", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Contact",
+        );
+      });
+
+      it("renders a SectionRenderer with zero sections", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const renderer = screen.getByTestId("section-renderer");
+        expect(renderer.dataset.sectionCount).toBe("0");
+      });
+    });
+
+    describe("with no ContactPage MDX (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the fallback sentinel without crashing", async () => {
+        await renderAsync(ContactPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── /faq ──────────────────────────────────────────────────────────────────
+
+  describe("/faq", () => {
+    describe("with FAQPage MDX present and sections", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "FAQPage",
+          slug: "faq",
+          title: "Frequently Asked Questions",
+          description: "Answers to common questions.",
+          schema: {
+            mainEntity: [
+              {
+                "@type": "Question",
+                name: "What is AEO?",
+                acceptedAnswer: {
+                  "@type": "Answer",
+                  text: "AEO is Answer Engine Optimization.",
+                },
+              },
+            ],
+          },
+        },
+        body: "# FAQ\n\nBody.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([FAQ_HERO, FAQ_FAQ]);
+
+      beforeEach(() => {
+        stubGetMdxSource.mockClear();
+        stubGetPageSections.mockClear();
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Frequently Asked Questions",
+        );
+      });
+
+      it("emits a JSON-LD script tag with @type FAQPage", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("FAQPage");
+      });
+
+      it("emits FAQPage JSON-LD with mainEntity populated from schema override", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as {
+          "@type": string;
+          mainEntity: Array<{ "@type": string; name: string }>;
+        };
+        expect(Array.isArray(parsed.mainEntity)).toBe(true);
+        const [firstItem] = parsed.mainEntity;
+        expect(firstItem?.["@type"]).toBe("Question");
+        expect(firstItem?.name).toBe("What is AEO?");
+      });
+
+      it("renders SectionRenderer with sections from frontmatter", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const renderer = screen.getByTestId("section-renderer");
+        expect(renderer.dataset.sectionCount).toBe("2");
+      });
+
+      it("does not render the MDX body directly", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.queryByTestId("mdx-body")).toBeNull();
+      });
+    });
+
+    describe("with FAQPage MDX present but no sections (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "FAQPage",
+          slug: "faq",
+          title: "Frequently Asked Questions",
+          description: "Answers to common questions.",
+        },
+        body: "# FAQ\n\nBody.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the page without crashing (200)", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Frequently Asked Questions",
+        );
+      });
+    });
+
+    describe("with no FAQPage MDX (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("renders the fallback sentinel without crashing", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+
+      it("emits a scaffold JSON-LD with @type FAQPage", async () => {
+        await renderAsync(FaqPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("FAQPage");
+      });
+    });
+  });
+
+  // ── /products ─────────────────────────────────────────────────────────────
+
+  describe("/products", () => {
+    describe("with ProductsList MDX present", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ProductsList",
+          slug: "products",
+          title: "Products",
+          description: "All products.",
+        },
+        body: "# Products\n\nBody.",
+      });
+
+      it("renders the products listing page without crashing", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+      });
+
+      it("emits a JSON-LD with @type CollectionPage (productsListJsonLd)", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("CollectionPage");
+      });
+    });
+
+    describe("with no ProductsList MDX (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+
+      it("renders the fallback sentinel without crashing", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── /products/[slug] ──────────────────────────────────────────────────────
+
+  describe("/products/[slug]", () => {
+    describe("with Product MDX present", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "Product",
+          slug: "launch-kit",
+          title: "AI Launch Kit",
+          description: "The AX-first OSS template.",
+        },
+        body: "# AI Launch Kit\n\nBody.",
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(
+          ProductSlugPage({ params: Promise.resolve({ locale: "en", slug: "launch-kit" }), getMdxSource: stubGetMdxSource }),
+        );
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "AI Launch Kit",
+        );
+      });
+
+      it("emits a JSON-LD script tag", async () => {
+        await renderAsync(
+          ProductSlugPage({ params: Promise.resolve({ locale: "en", slug: "launch-kit" }), getMdxSource: stubGetMdxSource }),
+        );
+        const script = screen.getByTestId("json-ld");
+        const outer = JSON.parse(script.innerHTML) as { "@type": string; "@graph": Array<{ "@type": string; mainEntity: { "@type": string } }> };
+        expect(outer["@type"]).toBeUndefined();
+        const primary = outer["@graph"][0]!;
+        expect(primary["@type"]).toBe("WebPage");
+        expect(primary.mainEntity["@type"]).toBe("SoftwareApplication");
+      });
+    });
+
+    describe("with no Product MDX (unknown slug)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+
+      it("calls notFound() for an unknown slug", async () => {
+        await expect(
+          ProductSlugPage({ params: Promise.resolve({ locale: "en", slug: "unknown" }), getMdxSource: stubGetMdxSource }),
+        ).rejects.toThrow("NEXT_NOT_FOUND");
+        expect(mockNotFound).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── /services ─────────────────────────────────────────────────────────────
+
+  describe("/services", () => {
+    describe("with ServicesList MDX present", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ServicesList",
+          slug: "services",
+          title: "Services",
+          description: "All services.",
+        },
+        body: "# Services\n\nBody.",
+      });
+
+      it("renders the services listing page without crashing", async () => {
+        await renderAsync(ServicesPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+      });
+
+      it("emits a JSON-LD with @type CollectionPage (servicesListJsonLd)", async () => {
+        await renderAsync(ServicesPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        const script = screen.getByTestId("json-ld");
+        const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+        expect(parsed["@type"]).toBe("CollectionPage");
+      });
+    });
+
+    describe("with no ServicesList MDX (empty state)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+
+      it("renders the fallback sentinel without crashing", async () => {
+        await renderAsync(ServicesPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── /services/[slug] ──────────────────────────────────────────────────────
+
+  describe("/services/[slug]", () => {
+    describe("with Service MDX present", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "Service",
+          slug: "consulting",
+          title: "Implementation consulting",
+          description: "Help adapting AI Launch Kit.",
+        },
+        body: "# Implementation consulting\n\nBody.",
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(
+          ServiceSlugPage({ params: Promise.resolve({ locale: "en", slug: "consulting" }), getMdxSource: stubGetMdxSource }),
+        );
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Implementation consulting",
+        );
+      });
+
+      it("emits a JSON-LD script tag", async () => {
+        await renderAsync(
+          ServiceSlugPage({ params: Promise.resolve({ locale: "en", slug: "consulting" }), getMdxSource: stubGetMdxSource }),
+        );
+        const script = screen.getByTestId("json-ld");
+        const outer = JSON.parse(script.innerHTML) as { "@type": string; "@graph": Array<{ "@type": string; mainEntity: { "@type": string } }> };
+        expect(outer["@type"]).toBeUndefined();
+        const primary = outer["@graph"][0]!;
+        expect(primary["@type"]).toBe("WebPage");
+        expect(primary.mainEntity["@type"]).toBe("Service");
+      });
+    });
+
+    describe("with no Service MDX (unknown slug)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+
+      it("calls notFound() for an unknown slug", async () => {
+        await expect(
+          ServiceSlugPage({ params: Promise.resolve({ locale: "en", slug: "unknown" }), getMdxSource: stubGetMdxSource }),
+        ).rejects.toThrow("NEXT_NOT_FOUND");
+        expect(mockNotFound).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── /projects ─────────────────────────────────────────────────────────────
+
+  describe("/projects", () => {
+    // ProjectsList is in SchemaOrgType; page reads from MDX.
+    // Smoke test: no MDX mock → falls back to the sentinel without crashing.
+    it("renders the fallback sentinel when no MDX is present", async () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+      await renderAsync(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+      expect(
+        screen.getByTestId("section-empty-state"),
+      ).toBeInTheDocument();
+    });
+
+    it("renders the h1 from MDX frontmatter when MDX is present", async () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ProjectsList",
+          slug: "projects",
+          title: "Projects",
+          description: "A selection of build engagements.",
+        },
+        body: "# Projects",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+      await renderAsync(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+        "Projects",
+      );
+    });
+
+    it("emits a JSON-LD script tag with @type CollectionPage when MDX present", async () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ProjectsList",
+          slug: "projects",
+          title: "Projects",
+          description: "A selection of build engagements.",
+        },
+        body: "# Projects",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+      await renderAsync(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+      const script = screen.getByTestId("json-ld");
+      const parsed = JSON.parse(script.innerHTML) as { "@type": string };
+      expect(parsed["@type"]).toBe("CollectionPage");
+    });
+  });
+
+  // ── /projects/[slug] ──────────────────────────────────────────────────────
+
+  describe("/projects/[slug]", () => {
+    // Project is in SchemaOrgType; page reads from MDX and calls notFound() on miss.
+    it("renders the project detail from MDX frontmatter", async () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "Project",
+          slug: "ailk-phase-2",
+          title: "AILK Phase 2 — Builder Port",
+          description: "Expanding the schema.org builder layer.",
+          publishedAt: "2026-05-07",
+        },
+        body: "# AILK Phase 2",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+      await renderAsync(
+        ProjectSlugPage({ params: Promise.resolve({ locale: "en", slug: "ailk-phase-2" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }),
+      );
+      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+        "AILK Phase 2 — Builder Port",
+      );
+    });
+
+    it("emits a JSON-LD script tag with @type CreativeWork", async () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "Project",
+          slug: "ailk-phase-2",
+          title: "AILK Phase 2 — Builder Port",
+          description: "Expanding the schema.org builder layer.",
+          publishedAt: "2026-05-07",
+        },
+        body: "# AILK Phase 2",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+      await renderAsync(
+        ProjectSlugPage({ params: Promise.resolve({ locale: "en", slug: "ailk-phase-2" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }),
+      );
+      const script = screen.getByTestId("json-ld");
+      const outer = JSON.parse(script.innerHTML) as { "@type": string; "@graph": Array<{ "@type": string; mainEntity: { "@type": string } }> };
+      expect(outer["@type"]).toBeUndefined();
+      const primary = outer["@graph"][0]!;
+      expect(primary["@type"]).toBe("WebPage");
+      expect(primary.mainEntity["@type"]).toBe("CreativeWork");
+    });
+  });
+});