@decocms/blocks 7.0.0

package/src/cms/sectionLoaders.test.ts

@@ -0,0 +1,409 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { configureTracer, type Span } from "../sdk/observability";
+import type { ResolvedSection } from "./resolve";
+import {
+  isLayoutSection,
+  registerCacheableSections,
+  registerLayoutSections,
+  registerSectionLoader,
+  registerSectionLoaders,
+  runSectionLoaders,
+  runSingleSectionLoader,
+  unregisterLayoutSections,
+} from "./sectionLoaders";
+import { compose, withDevice, withMobile, withSearchParam } from "./sectionMixins";
+
+const G = globalThis as any;
+
+beforeEach(() => {
+  G.__deco.sectionLoaderRegistry.clear();
+  G.__deco.layoutSections.clear();
+  G.__deco.cacheableSections.clear();
+});
+
+const makeSection = (component: string, props: Record<string, unknown> = {}): ResolvedSection => ({
+  component,
+  props,
+  key: component,
+  index: 0,
+});
+
+describe("runSingleSectionLoader — page context injection", () => {
+  it("injects __pageUrl and __pagePath into loader props", async () => {
+    // Two-arg signature so loader.mock.calls[0] types as [props, req].
+    const loader = vi.fn(async (props: Record<string, unknown>, _req: Request) => props);
+    registerSectionLoader("site/sections/SearchBanner.tsx", loader);
+
+    const section = makeSection("site/sections/SearchBanner.tsx", { foo: "bar" });
+    const request = new Request("https://store.com/lingerie?q=preto");
+
+    await runSingleSectionLoader(section, request);
+
+    expect(loader).toHaveBeenCalledTimes(1);
+    const [calledProps, calledReq] = loader.mock.calls[0];
+    expect(calledProps).toMatchObject({
+      foo: "bar",
+      __pageUrl: "https://store.com/lingerie?q=preto",
+      __pagePath: "/lingerie",
+    });
+    expect(calledReq).toBe(request);
+  });
+
+  it("preserves existing __pageUrl / __pagePath from props (site workaround compat)", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Custom.tsx", loader);
+
+    const section = makeSection("site/sections/Custom.tsx", {
+      __pageUrl: "https://override.example/page",
+      __pagePath: "/override",
+    });
+    const request = new Request("https://store.com/real-path");
+
+    await runSingleSectionLoader(section, request);
+
+    const [calledProps] = loader.mock.calls[0];
+    expect(calledProps.__pageUrl).toBe("https://override.example/page");
+    expect(calledProps.__pagePath).toBe("/override");
+  });
+
+  it("does not throw when request.url is invalid", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/X.tsx", loader);
+
+    const section = makeSection("site/sections/X.tsx", { foo: 1 });
+    const badReq = { url: "not a url" } as unknown as Request;
+
+    await expect(runSingleSectionLoader(section, badReq)).resolves.toBeDefined();
+    expect(loader).toHaveBeenCalled();
+  });
+
+  it("returns section unchanged when no loader is registered", async () => {
+    const section = makeSection("site/sections/NoLoader.tsx", { foo: 1 });
+    const result = await runSingleSectionLoader(section, new Request("https://store.com/"));
+    expect(result).toBe(section);
+  });
+});
+
+describe("runSingleSectionLoader — cache keying", () => {
+  it("cacheable sections share a cache entry across different page URLs", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => ({
+      ...props,
+      enriched: true,
+    }));
+    registerSectionLoader("site/sections/Shelf.tsx", loader);
+    registerCacheableSections({ "site/sections/Shelf.tsx": { maxAge: 60_000 } });
+
+    const section = makeSection("site/sections/Shelf.tsx", { title: "Best" });
+
+    await runSingleSectionLoader(section, new Request("https://store.com/page-a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/page-b"));
+    await runSingleSectionLoader(section, new Request("https://store.com/page-c"));
+
+    // Without URL-agnostic cache keys, this would be 3.
+    expect(loader).toHaveBeenCalledTimes(1);
+  });
+
+  it("layout sections cache by component name and reuse across pages", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Header.tsx", loader);
+    registerLayoutSections(["site/sections/Header.tsx"]);
+
+    const section = makeSection("site/sections/Header.tsx", { variant: "default" });
+
+    await runSingleSectionLoader(section, new Request("https://store.com/a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/b"));
+
+    expect(loader).toHaveBeenCalledTimes(1);
+  });
+
+  it("regular (non-cached) sections re-run on every request", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Reg.tsx", loader);
+
+    const section = makeSection("site/sections/Reg.tsx", {});
+    await runSingleSectionLoader(section, new Request("https://store.com/a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/b"));
+
+    expect(loader).toHaveBeenCalledTimes(2);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Layout cache opt-out (#206)
+// ---------------------------------------------------------------------------
+
+describe("unregisterLayoutSections", () => {
+  it("drops a key from the layout set so the loader re-runs per request", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Header.tsx", loader);
+    registerLayoutSections(["site/sections/Header.tsx"]);
+    expect(isLayoutSection("site/sections/Header.tsx")).toBe(true);
+
+    unregisterLayoutSections(["site/sections/Header.tsx"]);
+    expect(isLayoutSection("site/sections/Header.tsx")).toBe(false);
+
+    const section = makeSection("site/sections/Header.tsx", {});
+    await runSingleSectionLoader(section, new Request("https://store.com/a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/b"));
+
+    // No layout caching after unregister — loader runs per request.
+    expect(loader).toHaveBeenCalledTimes(2);
+  });
+
+  it("is a no-op for keys that were never registered", () => {
+    expect(() =>
+      unregisterLayoutSections(["site/sections/Never.tsx"]),
+    ).not.toThrow();
+    expect(isLayoutSection("site/sections/Never.tsx")).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Dev warning: layout + request-dependent loader → cache contamination (#206)
+// ---------------------------------------------------------------------------
+
+describe("registerSectionLoaders — request-dependent + layout warning (#206)", () => {
+  const originalNodeEnv = process.env.NODE_ENV;
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    process.env.NODE_ENV = "development";
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv;
+    warnSpy.mockRestore();
+  });
+
+  it("warns when a request-dependent loader is registered for a layout section", () => {
+    registerLayoutSections(["site/sections/Header.tsx"]);
+    registerSectionLoaders({
+      "site/sections/Header.tsx": withDevice(),
+    });
+    const calls = warnSpy.mock.calls.map((c) => String(c[0]));
+    expect(calls.some((m) => m.includes("Header.tsx"))).toBe(true);
+    expect(calls.some((m) => m.includes("layout section"))).toBe(true);
+    expect(calls.some((m) => m.includes("unregisterLayoutSections"))).toBe(true);
+  });
+
+  it("warns when a composed loader contains any request-dependent mixin", () => {
+    registerLayoutSections(["site/sections/Footer.tsx"]);
+    registerSectionLoaders({
+      "site/sections/Footer.tsx": compose(
+        withSearchParam(),
+        async (props) => props,
+      ),
+    });
+    expect(warnSpy).toHaveBeenCalled();
+  });
+
+  it("does NOT warn for a layout section whose loader is request-independent", () => {
+    registerLayoutSections(["site/sections/Theme.tsx"]);
+    registerSectionLoaders({
+      "site/sections/Theme.tsx": async (props) => props,
+    });
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it("does NOT warn after unregisterLayoutSections drops the key", () => {
+    registerLayoutSections(["site/sections/Header.tsx"]);
+    unregisterLayoutSections(["site/sections/Header.tsx"]);
+    registerSectionLoaders({
+      "site/sections/Header.tsx": withDevice(),
+    });
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it("does NOT warn in production", () => {
+    process.env.NODE_ENV = "production";
+    registerLayoutSections(["site/sections/Header.tsx"]);
+    registerSectionLoaders({
+      "site/sections/Header.tsx": withMobile(),
+    });
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe("runSingleSectionLoader — error handling", () => {
+  it("falls back to original section when loader throws", async () => {
+    const loader = vi.fn(async () => {
+      throw new Error("boom");
+    });
+    registerSectionLoader("site/sections/Boom.tsx", loader);
+
+    const section = makeSection("site/sections/Boom.tsx", { x: 1 });
+    const result = await runSingleSectionLoader(section, new Request("https://store.com/"));
+    expect(result).toEqual(section);
+  });
+});
+
+describe("runSingleSectionLoader — nested section recursion", () => {
+  it("runs the loader of a nested section in props", async () => {
+    const childLoader = vi.fn(async (props: Record<string, unknown>) => ({
+      ...props,
+      enriched: true,
+    }));
+    registerSectionLoader("site/sections/CategoryBanner.tsx", childLoader);
+
+    // Parent has no own loader, only a nested section in props
+    const parent = makeSection("site/sections/BackgroundWrapper.tsx", {
+      child: {
+        Component: "site/sections/CategoryBanner.tsx",
+        props: { matcher: "/foo" },
+      },
+    });
+
+    const result = await runSingleSectionLoader(parent, new Request("https://store.com/foo"));
+
+    expect(childLoader).toHaveBeenCalledTimes(1);
+    expect(result.props).toEqual({
+      child: {
+        Component: "site/sections/CategoryBanner.tsx",
+        props: {
+          matcher: "/foo",
+          enriched: true,
+          // page context is injected for nested sections too
+          __pageUrl: "https://store.com/foo",
+          __pagePath: "/foo",
+        },
+      },
+    });
+  });
+
+  it("runs nested loaders in arrays (e.g. sections: Section[])", async () => {
+    const banner = vi.fn(async (props: any) => ({ ...props, ranBanner: true }));
+    const shelf = vi.fn(async (props: any) => ({ ...props, ranShelf: true }));
+    registerSectionLoader("site/sections/Banner.tsx", banner);
+    registerSectionLoader("site/sections/Shelf.tsx", shelf);
+
+    const parent = makeSection("site/sections/Wrapper.tsx", {
+      sections: [
+        { Component: "site/sections/Banner.tsx", props: { id: 1 } },
+        { Component: "site/sections/Shelf.tsx", props: { id: 2 } },
+      ],
+    });
+
+    const result = await runSingleSectionLoader(parent, new Request("https://store.com/"));
+
+    expect(banner).toHaveBeenCalledTimes(1);
+    expect(shelf).toHaveBeenCalledTimes(1);
+    const sections = (result.props as any).sections;
+    expect(sections[0].props).toMatchObject({ id: 1, ranBanner: true });
+    expect(sections[1].props).toMatchObject({ id: 2, ranShelf: true });
+  });
+
+  it("returns same props reference when no nested sections (zero-alloc leaf path)", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Leaf.tsx", loader);
+
+    const props = { foo: "bar" };
+    const section = makeSection("site/sections/Leaf.tsx", props);
+
+    const result = await runSingleSectionLoader(section, new Request("https://store.com/"));
+
+    // Loader returned the SAME props ref → enrichNestedSections must also
+    // return the same ref → no { ...result, props } wrapping happens
+    expect(result.props).toMatchObject({
+      foo: "bar",
+      __pageUrl: "https://store.com/",
+      __pagePath: "/",
+    });
+  });
+
+  it("recurses into deeply nested sections (wrapper inside wrapper)", async () => {
+    const inner = vi.fn(async (props: any) => ({ ...props, deep: true }));
+    registerSectionLoader("site/sections/Inner.tsx", inner);
+
+    const parent = makeSection("site/sections/Outer.tsx", {
+      child: {
+        Component: "site/sections/MidWrapper.tsx",
+        props: {
+          grandchild: {
+            Component: "site/sections/Inner.tsx",
+            props: { tag: "deep" },
+          },
+        },
+      },
+    });
+
+    const result = await runSingleSectionLoader(parent, new Request("https://store.com/"));
+
+    expect(inner).toHaveBeenCalledTimes(1);
+    const grandchild = (result.props as any).child.props.grandchild;
+    expect(grandchild.props).toMatchObject({ tag: "deep", deep: true });
+  });
+
+  it("ignores nested objects that do not look like sections", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Leaf.tsx", loader);
+
+    const section = makeSection("site/sections/Leaf.tsx", {
+      // Plain config object, not a section. Has `Component: string` but
+      // missing the `props` field — must NOT be treated as a nested section.
+      config: { Component: "ButtonStyle", color: "red" },
+    });
+
+    const result = await runSingleSectionLoader(section, new Request("https://store.com/"));
+
+    expect(loader).toHaveBeenCalledTimes(1);
+    expect((result.props as any).config).toEqual({
+      Component: "ButtonStyle",
+      color: "red",
+    });
+  });
+
+  it("runs nested loaders even when parent has no own loader", async () => {
+    const childLoader = vi.fn(async (props: any) => ({ ...props, ran: true }));
+    registerSectionLoader("site/sections/Child.tsx", childLoader);
+
+    // Parent has no entry in registry — but it has a nested section in props
+    // (typical of a pure layout container that just renders children).
+    const parent = makeSection("site/sections/UnregisteredLayout.tsx", {
+      child: {
+        Component: "site/sections/Child.tsx",
+        props: { foo: "bar" },
+      },
+    });
+
+    const result = await runSingleSectionLoader(parent, new Request("https://store.com/"));
+
+    expect(childLoader).toHaveBeenCalledTimes(1);
+    expect((result.props as any).child.props).toMatchObject({
+      foo: "bar",
+      ran: true,
+    });
+  });
+});
+
+describe("runSectionLoaders — batch span", () => {
+  afterEach(() => {
+    configureTracer({ startSpan: () => ({ end: () => {} }) });
+  });
+
+  it("emits one deco.section.loaders.batch parent with section.count", async () => {
+    const spans: Array<{ name: string; attrs?: Record<string, unknown> }> = [];
+    configureTracer({
+      startSpan: (name, attrs) => {
+        spans.push({ name, attrs });
+        const s: Span = { end: () => {} };
+        return s;
+      },
+    });
+
+    registerSectionLoader("a", async (p) => p);
+    registerSectionLoader("b", async (p) => p);
+
+    await runSectionLoaders(
+      [makeSection("a"), makeSection("b"), makeSection("c-no-loader")],
+      new Request("https://site/"),
+    );
+
+    const batch = spans.find((s) => s.name === "deco.section.loaders.batch");
+    expect(batch).toBeDefined();
+    expect(batch?.attrs).toMatchObject({ "section.count": 3 });
+
+    const perSection = spans.filter((s) => s.name === "deco.section.loader");
+    expect(perSection).toHaveLength(3);
+  });
+});