create-ailk 0.1.0

package/templates/apps/web/__tests__/products-services-phase1.test.tsx

@@ -0,0 +1,321 @@
+/**
+ * Phase 1 tests: Products + Services list + detail routes.
+ * Covers MDX rendering, JSON-LD dispatch, notFound() on unknown slug,
+ * and generateStaticParams enumeration.
+ *
+ * getMdxSource is injected via optional props on each page component.
+ * getMdxSlugs is mocked (it is called by generateStaticParams, a non-component
+ * function that cannot accept DI props per Next.js conventions; this mock is
+ * the narrowest possible scope for that function).
+ */
+
+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");
+  }),
+}));
+
+// getMdxSlugs mock is required because generateStaticParams is a non-component
+// function with a fixed Next.js signature — DI props are not available there.
+// Routes migrated to @working-theory/page-renderer in Phase 1.5 — mock at the package level.
+ 
+jest.mock("@working-theory/page-renderer", () => ({
+  ...jest.requireActual<typeof import("@working-theory/page-renderer")>("@working-theory/page-renderer"),
+  getMdxSlugs: jest.fn(),
+}));
+
+import * as React from "react";
+
+import { getMdxSlugs } from "@working-theory/page-renderer";
+import { notFound } from "next/navigation";
+
+import ProductsPage from "../app/[locale]/products/page";
+import ProductSlugPage, {
+  generateStaticParams as productStaticParams,
+} from "../app/[locale]/products/[slug]/page";
+import ServicesPage from "../app/[locale]/services/page";
+import ServiceSlugPage, {
+  generateStaticParams as serviceStaticParams,
+} from "../app/[locale]/services/[slug]/page";
+
+import type { getMdxSource } from "@working-theory/page-renderer";
+
+type GetMdxSource = typeof getMdxSource;
+
+const mockGetMdxSlugs = getMdxSlugs as jest.MockedFunction<typeof getMdxSlugs>;
+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);
+}
+
+describe("apps/web — Phase 1: Products + Services routes", () => {
+  beforeEach(() => {
+    mockGetMdxSlugs.mockReset();
+    mockNotFound.mockClear();
+  });
+
+  // ── /products (list) ───────────────────────────────────────────────────────
+
+  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.",
+      });
+
+      beforeEach(() => stubGetMdxSource.mockClear());
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Products",
+        );
+      });
+
+      it("emits a JSON-LD script tag with @type CollectionPage (productsListJsonLd)", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        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("calls getMdxSource with ProductsList type and locale", async () => {
+        await renderAsync(ProductsPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(stubGetMdxSource).toHaveBeenCalledWith(
+          "ProductsList",
+          "products",
+          "en",
+        );
+      });
+    });
+
+    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] (detail) ─────────────────────────────────────────────
+
+  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.",
+      });
+
+      beforeEach(() => stubGetMdxSource.mockClear());
+
+      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 with @type WebPage and mainEntity SoftwareApplication", 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-slug" }),
+            getMdxSource: stubGetMdxSource,
+          }),
+        ).rejects.toThrow("NEXT_NOT_FOUND");
+        expect(mockNotFound).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── /services (list) ──────────────────────────────────────────────────────
+
+  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.",
+      });
+
+      beforeEach(() => stubGetMdxSource.mockClear());
+
+      it("renders the h1 from MDX frontmatter", async () => {
+        await renderAsync(ServicesPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Services",
+        );
+      });
+
+      it("emits a JSON-LD script tag 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");
+      });
+
+      it("calls getMdxSource with ServicesList type and locale", async () => {
+        await renderAsync(ServicesPage({ params: Promise.resolve({ locale: "en" }), getMdxSource: stubGetMdxSource }));
+        expect(stubGetMdxSource).toHaveBeenCalledWith(
+          "ServicesList",
+          "services",
+          "en",
+        );
+      });
+    });
+
+    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] (detail) ─────────────────────────────────────────────
+
+  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.",
+      });
+
+      beforeEach(() => stubGetMdxSource.mockClear());
+
+      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 with @type WebPage and mainEntity Service", 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-slug" }),
+            getMdxSource: stubGetMdxSource,
+          }),
+        ).rejects.toThrow("NEXT_NOT_FOUND");
+        expect(mockNotFound).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── generateStaticParams ───────────────────────────────────────────────────
+  //
+  // generateStaticParams has a fixed Next.js function signature and cannot
+  // accept DI props. getMdxSlugs is mocked at the module level (see top of
+  // file) to cover this code path — the narrowest possible scope.
+
+  describe("generateStaticParams", () => {
+    describe("productStaticParams", () => {
+      it("returns a slug for each seeded product", async () => {
+        mockGetMdxSlugs.mockResolvedValue(["launch-kit", "api-launch-kit"]);
+        const params = await productStaticParams({ params: { locale: "en" } });
+        expect(params).toEqual([
+          { slug: "launch-kit" },
+          { slug: "api-launch-kit" },
+        ]);
+        expect(mockGetMdxSlugs).toHaveBeenCalledWith("Product", "en");
+      });
+
+      it("returns an empty array when no products are seeded", async () => {
+        mockGetMdxSlugs.mockResolvedValue([]);
+        const params = await productStaticParams({ params: { locale: "en" } });
+        expect(params).toEqual([]);
+      });
+    });
+
+    describe("serviceStaticParams", () => {
+      it("returns a slug for each seeded service", async () => {
+        mockGetMdxSlugs.mockResolvedValue(["consulting", "implementation"]);
+        const params = await serviceStaticParams({ params: { locale: "en" } });
+        expect(params).toEqual([
+          { slug: "consulting" },
+          { slug: "implementation" },
+        ]);
+        expect(mockGetMdxSlugs).toHaveBeenCalledWith("Service", "en");
+      });
+
+      it("returns an empty array when no services are seeded", async () => {
+        mockGetMdxSlugs.mockResolvedValue([]);
+        const params = await serviceStaticParams({ params: { locale: "en" } });
+        expect(params).toEqual([]);
+      });
+    });
+  });
+});