create-ailk 0.1.0

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

@@ -0,0 +1,392 @@
+// Projects route tests — list + detail.
+//
+// Coverage:
+//   - /projects renders from ProjectsList MDX, emits CollectionPage JSON-LD
+//   - /projects/[slug] renders from Project MDX, emits CreativeWork JSON-LD
+//   - /projects/[slug] with unknown slug returns notFound()
+//   - generateStaticParams enumerates Project slugs
+//   - SectionRenderer receives sections from frontmatter
+//   - Empty-state fallbacks render without crashing
+//
+// getMdxSource and getPageSections are injected via optional page props.
+// getContentAdapter is mocked at the module level because generateStaticParams
+// has a fixed Next.js function signature and cannot accept DI props.
+
+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");
+  }),
+}));
+
+// getContentAdapter mock is required because generateStaticParams is a
+// non-component function with a fixed Next.js signature — DI props are
+// not available there. This is the narrowest possible mock for this file.
+// getContentAdapter is now exported from @working-theory/page-renderer after Phase 1.5 migration.
+jest.mock("@working-theory/page-renderer", () => ({
+  ...jest.requireActual<typeof import("@working-theory/page-renderer")>("@working-theory/page-renderer"),
+  getContentAdapter: jest.fn(),
+}));
+
+// 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 { getContentAdapter } from "@working-theory/page-renderer";
+
+import ProjectsPage from "../app/[locale]/projects/page";
+import ProjectSlugPage, {
+  generateStaticParams,
+} from "../app/[locale]/projects/[slug]/page";
+
+import type { getMdxSource, getPageSections } from "@working-theory/page-renderer";
+
+type GetMdxSource = typeof getMdxSource;
+type GetPageSections = typeof getPageSections;
+
+const mockGetContentAdapter = getContentAdapter as jest.MockedFunction<
+  typeof getContentAdapter
+>;
+
+async function renderAsync(
+  element: Promise<React.ReactElement> | React.ReactElement,
+): Promise<void> {
+  const resolved = await element;
+  render(resolved);
+}
+
+const PROJECTS_LIST_HERO = {
+  id: "hero-1",
+  type: "hero" as const,
+  data: {
+    headline: "Projects",
+    subheadline: "What we shipped and what we learned.",
+  },
+};
+
+const PROJECTS_LIST_ITEMS = {
+  id: "items-1",
+  type: "items" as const,
+  data: {
+    headline: "Selected engagements",
+    items: [
+      {
+        title: "AILK Phase 2",
+        description: "Builder port — 6 to 45 schema.org types.",
+      },
+    ],
+  },
+};
+
+const PROJECT_HERO = {
+  id: "hero-1",
+  type: "hero" as const,
+  data: { headline: "AILK Phase 2 — Builder Port" },
+};
+
+const PROJECT_CONTENT_BLOCK = {
+  id: "cb-1",
+  type: "content-block" as const,
+  data: { body: "Expanded @working-theory/schema from 6 builders to 45." },
+};
+
+const STUB_PROJECT_LIST = [
+  {
+    type: "Project",
+    slug: "ailk-phase-2",
+    title: "AILK Phase 2 — Builder Port",
+    description: "Expanding the schema.org builder layer.",
+    publishedAt: "2026-05-07",
+  },
+];
+
+describe("apps/web — projects routes", () => {
+  beforeEach(() => {
+    mockGetContentAdapter.mockReturnValue({
+      getPageBySlug: jest.fn(),
+      listPages: jest.fn(),
+      getDetailBySlug: jest.fn(),
+      listDetail: jest.fn().mockResolvedValue(STUB_PROJECT_LIST),
+      searchPages: jest.fn(),
+      extractStructuredData: jest.fn(),
+      createPage: jest.fn(),
+      updatePage: jest.fn(),
+      deletePage: jest.fn(),
+      getPageVersion: jest.fn(),
+    } as ReturnType<typeof getContentAdapter>);
+  });
+
+  afterEach(() => {
+    // clearAllMocks resets call history without removing mock implementations.
+    // describe-scoped stubs define their mockResolvedValue once at describe-eval
+    // time; resetAllMocks would clear those implementations and break tests
+    // that run after the first afterEach fires. getContentAdapter is
+    // re-configured in the outer beforeEach before each test, so clearing
+    // its call history here is sufficient.
+    jest.clearAllMocks();
+  });
+
+  // ── /projects ─────────────────────────────────────────────────────────────
+
+  describe("/projects", () => {
+    describe("with ProjectsList MDX present and sections", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue({
+        frontmatter: {
+          type: "ProjectsList",
+          slug: "projects",
+          title: "Projects",
+          description:
+            "A selection of build engagements — what we shipped, with whom, and what we learned.",
+        },
+        body: "# Projects\n\nBody.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([
+        PROJECTS_LIST_HERO,
+        PROJECTS_LIST_ITEMS,
+      ]);
+
+      beforeEach(() => {
+        stubGetMdxSource.mockClear();
+        stubGetPageSections.mockClear();
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        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", async () => {
+        await renderAsync(ProjectsPage({ 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("CollectionPage");
+      });
+
+      it("renders SectionRenderer with sections from frontmatter", async () => {
+        await renderAsync(ProjectsPage({ 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(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.queryByTestId("mdx-body")).toBeNull();
+      });
+    });
+
+    describe("with ProjectsList MDX present but no sections (empty state)", () => {
+      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([]);
+
+      it("renders the page without crashing (200)", async () => {
+        await renderAsync(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Projects",
+        );
+      });
+
+      it("renders SectionRenderer with zero sections", async () => {
+        await renderAsync(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        const renderer = screen.getByTestId("section-renderer");
+        expect(renderer.dataset.sectionCount).toBe("0");
+      });
+    });
+
+    describe("with no ProjectsList MDX (fallback)", () => {
+      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(ProjectsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource, getPageSections: stubGetPageSections }));
+        expect(screen.getByTestId("section-empty-state")).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── /projects/[slug] ──────────────────────────────────────────────────────
+
+  describe("/projects/[slug]", () => {
+    describe("with Project MDX present and sections", () => {
+      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 from 6 to 45 types.",
+          publishedAt: "2026-05-07",
+        },
+        body: "# AILK Phase 2\n\nBody copy.",
+      });
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([
+        PROJECT_HERO,
+        PROJECT_CONTENT_BLOCK,
+      ]);
+
+      beforeEach(() => {
+        stubGetMdxSource.mockClear();
+        stubGetPageSections.mockClear();
+      });
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        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 WebPage and mainEntity CreativeWork", async () => {
+        await renderAsync(
+          ProjectSlugPage({
+            params: Promise.resolve({ locale: "en", slug: "ailk-phase-2" }),
+            getMdxSource: stubGetMdxSource,
+            getPageSections: stubGetPageSections,
+          }),
+        );
+        const script = screen.getByTestId("json-ld");
+        expect(script.getAttribute("type")).toBe("application/ld+json");
+        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");
+      });
+
+      it("renders SectionRenderer with sections from frontmatter", async () => {
+        await renderAsync(
+          ProjectSlugPage({
+            params: Promise.resolve({ locale: "en", slug: "ailk-phase-2" }),
+            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(
+          ProjectSlugPage({
+            params: Promise.resolve({ locale: "en", slug: "ailk-phase-2" }),
+            getMdxSource: stubGetMdxSource,
+            getPageSections: stubGetPageSections,
+          }),
+        );
+        expect(screen.queryByTestId("mdx-body")).toBeNull();
+      });
+    });
+
+    describe("with Project MDX present but no sections", () => {
+      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([]);
+
+      it("renders the page without crashing (200)", async () => {
+        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",
+        );
+      });
+    });
+
+    describe("with unknown slug (no MDX)", () => {
+      const stubGetMdxSource = jest.fn<ReturnType<GetMdxSource>, Parameters<GetMdxSource>>().mockResolvedValue(null);
+      const stubGetPageSections = jest.fn<ReturnType<GetPageSections>, Parameters<GetPageSections>>().mockResolvedValue([]);
+
+      it("calls notFound() for an unknown slug", async () => {
+        await expect(
+          renderAsync(
+            ProjectSlugPage({
+              params: Promise.resolve({ locale: "en", slug: "does-not-exist" }),
+              getMdxSource: stubGetMdxSource,
+              getPageSections: stubGetPageSections,
+            }),
+          ),
+        ).rejects.toThrow("NEXT_NOT_FOUND");
+      });
+    });
+  });
+
+  // ── generateStaticParams ──────────────────────────────────────────────────
+  //
+  // generateStaticParams calls getContentAdapter() directly and has a fixed
+  // Next.js function signature — DI props are not available. getContentAdapter
+  // is mocked at the module level above (see top of file).
+
+  describe("generateStaticParams", () => {
+    it("returns a slug entry for each seeded Project", async () => {
+      const params = await generateStaticParams({ params: { locale: "en" } });
+      expect(params).toEqual([{ slug: "ailk-phase-2" }]);
+    });
+  });
+});