@akinon/pz-theme 2.0.162-rc.0 → 2.0.163-beta.0

package/src/region/__tests__/region-placeholder-readers.test.ts

@@ -0,0 +1,431 @@
+/**
+ * ZERO-5391 — every placeholder surface reads a region's own copy through the
+ * same two choke points: the slot's composed/uncomposed decision
+ * (getSlugCompositionState), the section loader (loadPlaceholderSections), the
+ * draft-mode blob read (getPlaceholderPreviewSnapshot) and the error-page
+ * prefetch (loadErrorComposition). These run them together against one fake
+ * backend, with composition-source.test.ts's mocks plus a resettable request
+ * cache, a mutable request locale and draft mode.
+ */
+jest.mock('server-only', () => ({}), { virtual: true });
+
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  // RSC `cache` semantics (same args, same settled promise), with stores a
+  // test clears to start a new request. Factory-local: a top-level const would
+  // be in its TDZ when the hoisted factory runs.
+  const stores: Map<string, unknown>[] = [];
+  const cache = <A extends unknown[], R>(fn: (...args: A) => R) => {
+    const store = new Map<string, R>();
+    stores.push(store as Map<string, unknown>);
+    return (...args: A): R => {
+      const key = JSON.stringify(args);
+      if (!store.has(key)) store.set(key, fn(...args));
+      return store.get(key) as R;
+    };
+  };
+  return {
+    ...actual,
+    cache,
+    __clearCaches: () => stores.forEach((store) => store.clear())
+  };
+});
+
+const getWidgetData = jest.fn();
+const getWidgetSchemaData = jest.fn();
+const getCollectionWidgetData = jest.fn();
+const getPreviewSnapshot = jest.fn();
+const appFetch = jest.fn();
+const draftMode = jest.fn();
+
+jest.mock('@akinon/next/data/server', () => ({
+  getWidgetData: (...args: unknown[]) => getWidgetData(...args),
+  getWidgetSchemaData: (...args: unknown[]) => getWidgetSchemaData(...args),
+  getCollectionWidgetData: (...args: unknown[]) =>
+    getCollectionWidgetData(...args),
+  getPreviewSnapshot: (...args: unknown[]) => getPreviewSnapshot(...args)
+}));
+
+jest.mock(
+  '@akinon/next/utils/app-fetch',
+  () => ({
+    __esModule: true,
+    default: (...args: unknown[]) => appFetch(...args)
+  }),
+  { virtual: true }
+);
+
+jest.mock(
+  '@akinon/next/utils/server-variables',
+  () => ({
+    ServerVariables: { locale: 'en-ae', currency: 'usd', previewId: '' }
+  }),
+  { virtual: true }
+);
+
+jest.mock('next/headers', () => ({
+  draftMode: (...args: unknown[]) => draftMode(...args)
+}));
+
+import { getSlugCompositionState } from '../../chrome/composition-source';
+import { loadErrorComposition } from '../../chrome/error-composition-source';
+import { getPlaceholderPreviewSnapshot } from '../../chrome/preview-snapshot-source';
+import { getThemeConfig } from '../../chrome/theme-config-source';
+import { loadPlaceholderSections } from '../../load-placeholder-sections';
+import { __resetRegionSourceForTests } from '../region-source';
+
+const { ServerVariables } = jest.requireMock(
+  '@akinon/next/utils/server-variables'
+) as {
+  ServerVariables: { locale: string; currency: string; previewId?: unknown };
+};
+
+const newRequest = (): void =>
+  (jest.requireMock('react') as { __clearCaches: () => void }).__clearCaches();
+
+const placeholder = (
+  slug: string,
+  sectionSlugs: string[],
+  extra: Record<string, unknown> = {}
+) => ({
+  slug,
+  attributes: {
+    theme_editor_placeholder: {
+      value: JSON.stringify(
+        sectionSlugs.map((section_slug, order) => ({ section_slug, order }))
+      ),
+      kwargs: {}
+    },
+    ...extra
+  }
+});
+
+const registry = (regions: Record<string, string[]>) => ({
+  slug: 'theme-regions',
+  attributes: {
+    theme_regions: {
+      value: JSON.stringify({
+        version: 1,
+        regions: Object.fromEntries(
+          Object.entries(regions).map(([code, slugs]) => [
+            code,
+            { placeholders: Object.fromEntries(slugs.map((s) => [s, {}])) }
+          ])
+        )
+      }),
+      kwargs: {}
+    }
+  }
+});
+
+const DEFAULT_SOURCES = [{ id: 'ds-1', name: 'Default picks' }];
+
+/** What the fake commerce answers per slug; tests override entries. */
+let widgets: Record<string, unknown>;
+/** Section metadata per section slug (the widget schema). */
+let schemas: Record<string, Record<string, unknown>>;
+
+const baseWidgets = (): Record<string, unknown> => ({
+  'theme-config': {
+    attributes: {
+      theme_dataSources: { value: JSON.stringify(DEFAULT_SOURCES), kwargs: {} }
+    }
+  },
+  header: placeholder('header', ['sec-default']),
+  'header-region-ae': placeholder('header-region-ae', ['sec-ae-1', 'sec-ae-2']),
+  footer: placeholder('footer', ['sec-footer']),
+  'footer-region-ae': placeholder('footer-region-ae', ['sec-footer-ae']),
+  'server-error-body': placeholder('server-error-body', ['sec-error']),
+  'server-error-body-region-ae': placeholder('server-error-body-region-ae', [
+    'sec-error-ae'
+  ]),
+  'theme-regions': registry({ ae: ['header', 'server-error-body'] })
+});
+
+const readSlugs = (): string[] =>
+  getWidgetData.mock.calls.map(([args]) => (args as { slug: string }).slug);
+
+const readsOf = (slug: string): number =>
+  readSlugs().filter((read) => read === slug).length;
+
+const sectionIds = (loaded: { sections: { id: string }[] } | null) =>
+  loaded?.sections.map((section) => section.id);
+
+beforeEach(() => {
+  widgets = baseWidgets();
+  schemas = {};
+  getWidgetData
+    .mockReset()
+    .mockImplementation(async ({ slug }: { slug: string }) =>
+      slug in widgets ? widgets[slug] : null
+    );
+  getWidgetSchemaData
+    .mockReset()
+    .mockImplementation(async ({ widgetSlug }: { widgetSlug: string }) => ({
+      schema: {
+        [widgetSlug]: { metadata: { blocks: [], ...schemas[widgetSlug] } }
+      }
+    }));
+  getCollectionWidgetData.mockReset().mockResolvedValue(null);
+  getPreviewSnapshot.mockReset().mockResolvedValue(null);
+  appFetch.mockReset();
+  draftMode.mockReset().mockResolvedValue({ isEnabled: false });
+  ServerVariables.locale = 'en-ae';
+  ServerVariables.currency = 'usd';
+  ServerVariables.previewId = '';
+  __resetRegionSourceForTests();
+  newRequest();
+});
+
+/** One request rendering a slot: the composed decision, then the sections. */
+const renderSlot = async (slug: string) => {
+  const state = await getSlugCompositionState(slug);
+  const loaded = await loadPlaceholderSections(slug);
+  return { state, loaded };
+};
+
+describe('a region without its own copies', () => {
+  const languageOnlyRun = async () => {
+    ServerVariables.locale = 'tr';
+    const result = await renderSlot('header');
+    const reads = readSlugs();
+    getWidgetData.mockClear();
+    __resetRegionSourceForTests();
+    newRequest();
+    ServerVariables.locale = 'en-ae';
+    return { result, reads };
+  };
+
+  it.each([
+    ['an absent registry', null],
+    ['an empty registry', registry({})],
+    ['a registry listing other regions only', registry({ sa: ['header'] })]
+  ])(
+    'renders exactly the default with %s, for one registry read',
+    async (_label, answer) => {
+      widgets['theme-regions'] = answer;
+      const languageOnly = await languageOnlyRun();
+
+      const region = await renderSlot('header');
+
+      expect(readSlugs().filter((slug) => slug !== 'theme-regions')).toEqual(
+        languageOnly.reads
+      );
+      expect(readsOf('theme-regions')).toBe(1);
+      expect(languageOnly.reads).not.toContain('theme-regions');
+      expect(region).toEqual(languageOnly.result);
+    }
+  );
+});
+
+describe('a placeholder the region customised', () => {
+  it('composes and loads from the copy, read once, never the default', async () => {
+    const { state, loaded } = await renderSlot('header');
+
+    expect(state).toEqual({ kind: 'composed', sectionCount: 2 });
+    expect(sectionIds(loaded)).toEqual(['sec-ae-1', 'sec-ae-2']);
+    expect(loaded?.placeholderId).toBe('header');
+    expect(readsOf('header-region-ae')).toBe(1);
+    expect(readsOf('header')).toBe(0);
+    expect(readsOf('theme-regions')).toBe(1);
+  });
+
+  it('serves every language of the region the same copy', async () => {
+    ServerVariables.locale = 'ar-ae';
+
+    const { loaded } = await renderSlot('header');
+
+    expect(sectionIds(loaded)).toEqual(['sec-ae-1', 'sec-ae-2']);
+    expect(readsOf('header-region-ae')).toBe(1);
+  });
+
+  it('never probes the copy of an unlisted placeholder', async () => {
+    const { loaded } = await renderSlot('footer');
+
+    expect(sectionIds(loaded)).toEqual(['sec-footer']);
+    expect(readsOf('footer')).toBe(1);
+    expect(readsOf('footer-region-ae')).toBe(0);
+  });
+
+  it('falls back to the default when the copy answers nothing', async () => {
+    delete widgets['header-region-ae'];
+
+    const { state, loaded } = await renderSlot('header');
+
+    expect(state).toEqual({ kind: 'composed', sectionCount: 1 });
+    expect(sectionIds(loaded)).toEqual(['sec-default']);
+    expect(loaded?.placeholderId).toBe('header');
+    expect(readsOf('header-region-ae')).toBe(3);
+    expect(readsOf('header')).toBe(1);
+  });
+
+  it('falls back to the default when the copy has no layout', async () => {
+    widgets['header-region-ae'] = { slug: 'header-region-ae', attributes: {} };
+
+    const { loaded } = await renderSlot('header');
+
+    expect(sectionIds(loaded)).toEqual(['sec-default']);
+  });
+
+  it('keeps an area the region emptied empty', async () => {
+    widgets['header-region-ae'] = placeholder('header-region-ae', []);
+
+    const { state, loaded } = await renderSlot('header');
+
+    expect(state).toEqual({ kind: 'empty' });
+    expect(loaded?.sections).toEqual([]);
+    expect(readsOf('header')).toBe(0);
+  });
+});
+
+describe("a region copy's own data-source records", () => {
+  const AE_SOURCE = { id: 'ds-ae-9', name: 'AE picks', region: 'ae' };
+
+  beforeEach(() => {
+    schemas['sec-ae-1'] = { dataSourceId: 'ds-ae-9' };
+  });
+
+  it('resolve a record theme-config does not have yet', async () => {
+    widgets['header-region-ae'] = placeholder(
+      'header-region-ae',
+      ['sec-ae-1', 'sec-ae-2'],
+      {
+        theme_region_dataSources: {
+          value: JSON.stringify([AE_SOURCE]),
+          kwargs: {}
+        }
+      }
+    );
+
+    const { loaded } = await renderSlot('header');
+
+    expect(loaded?.sections[0].dataSourceId).toBe('ds-ae-9');
+    expect(loaded?.sections[0].dataSource).toEqual(AE_SOURCE);
+    expect(loaded?.dataSources).toEqual([...DEFAULT_SOURCES, AE_SOURCE]);
+  });
+
+  it('yield to a theme-config record with the same id', async () => {
+    const republished = { ...AE_SOURCE, name: 'AE picks (republished)' };
+    widgets['theme-config'] = {
+      attributes: {
+        theme_dataSources: JSON.stringify([republished])
+      }
+    };
+    widgets['header-region-ae'] = placeholder(
+      'header-region-ae',
+      ['sec-ae-1'],
+      { theme_region_dataSources: JSON.stringify([AE_SOURCE]) }
+    );
+
+    const { loaded } = await renderSlot('header');
+
+    expect(loaded?.sections[0].dataSource).toEqual(republished);
+    expect(loaded?.dataSources).toBe((await getThemeConfig()).dataSources);
+  });
+
+  it('leave a copy without records on the theme-config list', async () => {
+    const { loaded } = await renderSlot('header');
+
+    expect(loaded?.sections[0].dataSource).toBeUndefined();
+    expect(loaded?.dataSources).toBe((await getThemeConfig()).dataSources);
+  });
+
+  it('leave a default placeholder on the theme-config list', async () => {
+    ServerVariables.locale = 'tr';
+    schemas['sec-default'] = { dataSourceId: 'ds-1' };
+
+    const { loaded } = await renderSlot('header');
+
+    expect(loaded?.sections[0].dataSource).toEqual(DEFAULT_SOURCES[0]);
+    expect(loaded?.dataSources).toBe((await getThemeConfig()).dataSources);
+  });
+});
+
+describe('a named preview of a region', () => {
+  // As the editor writes it (v2): the blob carries its own breakpoints, so
+  // the render needs no theme-config read either.
+  const blob = {
+    version: 2,
+    themeSettings: { mainMenuSticky: true },
+    dataSources: [],
+    breakpoints: [],
+    sections: [
+      { id: 'sec-ae-draft', type: 'custom', properties: {}, blocks: [] }
+    ]
+  };
+
+  beforeEach(() => {
+    ServerVariables.previewId = 'draft';
+    draftMode.mockResolvedValue({ isEnabled: true });
+    appFetch.mockImplementation(async ({ url }: { url: string }) =>
+      url === '/widgets/theme-regions/' ? widgets['theme-regions'] : undefined
+    );
+  });
+
+  it("renders the region's blob for a customised placeholder", async () => {
+    getPreviewSnapshot.mockImplementation(async ({ slug }: { slug: string }) =>
+      slug === 'header-region-ae' ? blob : null
+    );
+
+    const { state, loaded } = await renderSlot('header');
+
+    expect(getPreviewSnapshot).toHaveBeenCalledTimes(1);
+    expect(getPreviewSnapshot).toHaveBeenCalledWith({
+      slug: 'header-region-ae'
+    });
+    expect(state).toEqual({ kind: 'composed', sectionCount: 1 });
+    expect(sectionIds(loaded)).toEqual(['sec-ae-draft']);
+    expect(loaded?.placeholderId).toBe('header');
+    expect(loaded?.themeSettings).toEqual({ mainMenuSticky: true });
+    // The blob owns the render, and the registry came uncached.
+    expect(getWidgetData).not.toHaveBeenCalled();
+    expect(appFetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("falls through to the region's live copy without a blob", async () => {
+    const { loaded } = await renderSlot('header');
+
+    expect(getPreviewSnapshot).toHaveBeenCalledWith({
+      slug: 'header-region-ae'
+    });
+    expect(sectionIds(loaded)).toEqual(['sec-ae-1', 'sec-ae-2']);
+    expect(readsOf('header-region-ae')).toBe(1);
+    expect(readsOf('header')).toBe(0);
+  });
+
+  it("keeps today's chain for a placeholder the region did not customise", async () => {
+    const { loaded } = await renderSlot('footer');
+
+    expect(getPreviewSnapshot).toHaveBeenCalledWith({ slug: 'footer' });
+    expect(sectionIds(loaded)).toEqual(['sec-footer']);
+    expect(readsOf('footer-region-ae')).toBe(0);
+  });
+
+  it('shares one blob read between the slot and the loader', async () => {
+    await getPlaceholderPreviewSnapshot('header');
+    await renderSlot('header');
+
+    expect(getPreviewSnapshot).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('the canonical placeholder id', () => {
+  it('stays the canonical slug when the widget answers under another one', async () => {
+    ServerVariables.locale = 'tr';
+    widgets.header = placeholder('header-preview-x', ['sec-default']);
+
+    const { loaded } = await renderSlot('header');
+
+    expect(loaded?.placeholderId).toBe('header');
+    expect(sectionIds(loaded)).toEqual(['sec-default']);
+  });
+
+  it('is the canonical slug for the error composition of a region', async () => {
+    const composition = await loadErrorComposition();
+
+    expect(composition?.slug).toBe('server-error-body');
+    expect(composition?.placeholderId).toBe('server-error-body');
+    expect(sectionIds(composition ?? null)).toEqual(['sec-error-ae']);
+    expect(readsOf('server-error-body')).toBe(0);
+  });
+});