@akinon/pz-theme 2.0.71-rc.0 → 2.0.72-beta.0

package/src/custom/__tests__/slot-node-wire.test.tsx

@@ -0,0 +1,309 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+// The recursive renderer, stubbed with a countable marker so a slot's children
+// are assertable without dragging every block renderer into the assertion. The
+// same stand-in `public-api.test.tsx` uses, for the same reason.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="slot-child" data-id={block.id} />
+  )
+}));
+
+import blockRendererRegistry from '../../blocks/block-renderer-registry';
+import type { BlockRendererProps } from '../../blocks/block-renderer-registry';
+import type { Block } from '../../theme-block';
+import { resetCustomCatalog } from '../catalog';
+import { resetCustomCollection } from '../collect';
+import { defineCustomBlock } from '../define';
+import { registerCustomBlocks } from '../register';
+import { ThemeSlot } from '../theme-slot';
+import { isCustomThemeType } from '../types';
+
+/**
+ * THE OTHER HALF OF THE CROSS-REPO SEAM.
+ *
+ * The catalog travels one way — this repo describes the block and the editor
+ * reads it, and `custom-catalog-wire.test.ts` over there pins that direction
+ * with a literal capture of what `getCustomCatalog()` posts. Slot nodes travel
+ * the OTHER way: the editor writes them into the composition and this repo
+ * reads them back. Nothing in this package's own tests could notice if the two
+ * sides disagreed about the node, because every other slot test here builds
+ * its composition from this repo's own constants.
+ *
+ * `EDITOR_COMPOSITION` below is therefore not hand-written either. It is the
+ * literal output of the editor's `ensureCustomSlotNodes()` — the function its
+ * two insert reducers call — captured from pz-dynamic-widget and pasted here
+ * unedited, for a block declaring the same three slots the catalog capture
+ * over there declares.
+ *
+ * TO REGENERATE, in `pz-dynamic-widget`: ingest a catalog through
+ * `parseCustomCatalogPayload` + `setCustomCatalog`, call
+ * `ensureCustomSlotNodes()` on a freshly dropped block of that type, and log
+ * the block. The ids are the only values that differ per run.
+ *
+ * Read as DATA, not through this repo's constants. `CUSTOM_SLOT_BLOCK_TYPE`
+ * and `SLOT_NAME_PROPERTY` are exported precisely so the editor can mirror
+ * them, and a test that spelled the fixture through those exports would follow
+ * a rename here and stay green while the editor went on writing the old
+ * spelling — which is the one failure this file exists to catch.
+ */
+const EDITOR_COMPOSITION = {
+  id: 'block-menu',
+  type: 'custom:acme:mega-menu',
+  label: 'Mega menu',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [
+    {
+      id: 'block-l6rl9',
+      type: 'custom-slot',
+      label: 'Promo',
+      properties: { slotName: 'promo' },
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: [
+        {
+          id: 'promo-child',
+          type: 'image',
+          label: 'Image',
+          properties: {},
+          styles: {},
+          order: 0,
+          hidden: false
+        }
+      ]
+    },
+    {
+      id: 'block-ud5p6',
+      type: 'custom-slot',
+      label: 'Links',
+      properties: { slotName: 'links' },
+      styles: {},
+      order: 1,
+      hidden: false,
+      blocks: [
+        {
+          id: 'links-child',
+          type: 'text',
+          label: 'Text',
+          properties: {},
+          styles: {},
+          order: 0,
+          hidden: false
+        }
+      ]
+    },
+    {
+      id: 'block-g4b81',
+      type: 'custom-slot',
+      label: 'Footnote',
+      properties: { slotName: '' },
+      styles: {},
+      order: 2,
+      hidden: false,
+      blocks: [
+        {
+          id: 'footnote-child',
+          type: 'text',
+          label: 'Text',
+          properties: {},
+          styles: {},
+          order: 0,
+          hidden: false
+        }
+      ]
+    }
+  ]
+} as unknown as Block;
+
+const TYPE = 'custom:acme:mega-menu';
+
+const rendererMap = (): Map<string, unknown> =>
+  (blockRendererRegistry as unknown as { renderers: Map<string, unknown> })
+    .renderers;
+
+const clearCustomRenderers = (): void => {
+  const map = rendererMap();
+  Array.from(map.keys())
+    .filter(isCustomThemeType)
+    .forEach((type) => map.delete(type));
+};
+
+/** Declares its three slots exactly as the captured catalog frame does. */
+function MegaMenu() {
+  return (
+    <nav>
+      <section data-testid="promo-region">
+        <ThemeSlot name="promo" />
+      </section>
+      <section data-testid="links-region">
+        <ThemeSlot name="links" />
+      </section>
+      <section data-testid="footnote-region">
+        {/* The unnamed slot, spelled the way every pre-named-slots block does. */}
+        <ThemeSlot />
+      </section>
+    </nav>
+  );
+}
+
+const registerMenu = () =>
+  registerCustomBlocks('acme', {
+    'mega-menu': defineCustomBlock(MegaMenu, {
+      label: 'Mega menu',
+      slots: [
+        { name: 'promo', label: 'Promo', accepts: ['image', 'text'], max: 2 },
+        { name: 'links', label: 'Links' },
+        { label: 'Footnote' }
+      ]
+    })
+  });
+
+const renderComposition = (block: Block, isDesigner = false) => {
+  const Renderer = blockRendererRegistry.getRenderer(TYPE);
+  if (!Renderer) throw new Error(`No renderer registered for ${TYPE}`);
+
+  const props: BlockRendererProps = {
+    block,
+    placeholderId: 'header',
+    sectionId: 's1',
+    isDesigner
+  };
+
+  return render(<Renderer {...props} />);
+};
+
+const childIdsIn = (regionTestId: string): string[] =>
+  Array.from(
+    screen
+      .getByTestId(regionTestId)
+      .querySelectorAll('[data-testid="slot-child"]')
+  ).map((element) => element.getAttribute('data-id') ?? '');
+
+describe('the slot nodes the editor actually writes', () => {
+  beforeEach(() => {
+    resetCustomCatalog();
+    resetCustomCollection();
+    clearCustomRenderers();
+  });
+
+  it('each render into the ThemeSlot that names them, and no other', () => {
+    registerMenu();
+    renderComposition(EDITOR_COMPOSITION);
+
+    // The whole of gap 1 in one assertion: three regions filled
+    // independently, from three nodes, in one block. Before slot nodes every
+    // `ThemeSlot` read the same `block.blocks` array, so the second was
+    // refused outright.
+    expect(childIdsIn('promo-region')).toEqual(['promo-child']);
+    expect(childIdsIn('links-region')).toEqual(['links-child']);
+    expect(childIdsIn('footnote-region')).toEqual(['footnote-child']);
+  });
+
+  it('are matched on the property the editor writes, not on the label', () => {
+    registerMenu();
+
+    // The merchant renames a slot row from the layer tree (`RENAME_BLOCK`),
+    // which is the one field of a node they can change. If the name rode on
+    // the label, this rename would silently detach the region from its
+    // `<ThemeSlot name="promo" />` and nothing would say why it went empty.
+    const renamed = JSON.parse(
+      JSON.stringify(EDITOR_COMPOSITION)
+    ) as typeof EDITOR_COMPOSITION;
+    (renamed.blocks as Array<{ label: string }>)[0].label = 'Seasonal banner';
+
+    renderComposition(renamed as unknown as Block);
+
+    expect(childIdsIn('promo-region')).toEqual(['promo-child']);
+  });
+
+  it('leave a region the editor has never opened empty rather than wrong', () => {
+    registerMenu();
+
+    // The editor materializes nodes at insert, so a composition can hold some
+    // and not others — a block saved against an older build of the brand's
+    // component, or a slot added to the component after the merchant placed
+    // it. The missing region must draw nothing, and must NOT fall back to
+    // another slot's content.
+    const partial = JSON.parse(
+      JSON.stringify(EDITOR_COMPOSITION)
+    ) as typeof EDITOR_COMPOSITION;
+    partial.blocks = [partial.blocks[0]];
+
+    renderComposition(partial as unknown as Block);
+
+    expect(childIdsIn('promo-region')).toEqual(['promo-child']);
+    expect(childIdsIn('links-region')).toEqual([]);
+    expect(childIdsIn('footnote-region')).toEqual([]);
+  });
+
+  it('do not leak into the unnamed slot of a half-migrated composition', () => {
+    registerMenu();
+
+    // Every composition saved before slots were nodes put the merchant's
+    // blocks straight into `block.blocks`, and the unnamed slot falls back to
+    // them — that fallback is what keeps published content rendering. It has
+    // to skip slot NODES, or a block carrying both shapes would show the named
+    // regions' content in the unnamed one as well.
+    const mixed = JSON.parse(
+      JSON.stringify(EDITOR_COMPOSITION)
+    ) as typeof EDITOR_COMPOSITION;
+    mixed.blocks = [
+      mixed.blocks[0],
+      mixed.blocks[1],
+      {
+        id: 'legacy-child',
+        type: 'text',
+        label: 'Text',
+        properties: {},
+        styles: {},
+        order: 2,
+        hidden: false
+      } as unknown as typeof mixed.blocks[number]
+    ];
+
+    renderComposition(mixed as unknown as Block);
+
+    expect(childIdsIn('promo-region')).toEqual(['promo-child']);
+    expect(childIdsIn('footnote-region')).toEqual(['legacy-child']);
+  });
+
+  it('stop reading stray children the moment the unnamed NODE exists beside them', () => {
+    registerMenu();
+
+    // THE REASON THE EDITOR HAS TO MOVE THEM, pinned from the renderer's side.
+    //
+    // The legacy fallback above is a fallback: the node wins the lookup, so a
+    // block carrying BOTH shapes draws the node's children and nothing else.
+    // That is the right rule — two answers to one `<ThemeSlot/>` would render
+    // the region twice — but it means appending an unnamed node beside authored
+    // children silently takes them off the page while leaving them saved and
+    // listed in the layer tree. The editor's `ensureCustomSlotNodes` therefore
+    // adopts them into the node rather than appending beside them, and this is
+    // what says why.
+    const beside = JSON.parse(
+      JSON.stringify(EDITOR_COMPOSITION)
+    ) as typeof EDITOR_COMPOSITION;
+    beside.blocks = [
+      {
+        id: 'legacy-child',
+        type: 'text',
+        label: 'Text',
+        properties: {},
+        styles: {},
+        order: 0,
+        hidden: false
+      } as unknown as typeof beside.blocks[number],
+      beside.blocks[2]
+    ];
+
+    renderComposition(beside as unknown as Block);
+
+    expect(childIdsIn('footnote-region')).toEqual(['footnote-child']);
+  });
+});

package/src/custom/__tests__/slot-nodes.test.ts

@@ -0,0 +1,144 @@
+import type { Block } from '../../theme-block';
+import {
+  isSlotNode,
+  resolveSlotChildren,
+  resolveUnnamedSlot,
+  slotNameError,
+  slotNodeName
+} from '../slot-nodes';
+import { CUSTOM_SLOT_BLOCK_TYPE, SLOT_NAME_PROPERTY } from '../types';
+
+const block = (over: Partial<Block> = {}): Block => ({
+  id: 'b1',
+  type: 'text',
+  label: 'b1',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  ...over
+});
+
+const slotNode = (properties: Record<string, unknown>, blocks: Block[] = []) =>
+  block({
+    id: 'slot',
+    type: CUSTOM_SLOT_BLOCK_TYPE,
+    properties,
+    blocks
+  });
+
+describe('slotNodeName', () => {
+  it('reads the bare string the editor stamps', () => {
+    expect(slotNodeName(slotNode({ [SLOT_NAME_PROPERTY]: 'promo' }))).toBe(
+      'promo'
+    );
+  });
+
+  it('reads a per-breakpoint bucket as well', () => {
+    // Every other value in `block.properties` is per-breakpoint, and the panel
+    // re-buckets whatever it is given. A bare-string-only reader would detach
+    // every named slot in every published composition the day anything routed
+    // this key through a control.
+    expect(
+      slotNodeName(slotNode({ [SLOT_NAME_PROPERTY]: { desktop: 'promo' } }))
+    ).toBe('promo');
+  });
+
+  it('treats a node with no name as the unnamed slot', () => {
+    expect(slotNodeName(slotNode({}))).toBe('');
+  });
+});
+
+describe('resolveSlotChildren', () => {
+  const inPromo = block({ id: 'in-promo' });
+  const inAside = block({ id: 'in-aside' });
+
+  it('returns the children of the node with that name', () => {
+    const host = block({
+      blocks: [
+        slotNode({ [SLOT_NAME_PROPERTY]: 'promo' }, [inPromo]),
+        slotNode({ [SLOT_NAME_PROPERTY]: 'aside' }, [inAside])
+      ]
+    });
+
+    expect(resolveSlotChildren(host, 'promo')).toEqual([inPromo]);
+    expect(resolveSlotChildren(host, 'aside')).toEqual([inAside]);
+  });
+
+  it('separates an emptied slot from one that was never opened', () => {
+    const host = block({
+      blocks: [slotNode({ [SLOT_NAME_PROPERTY]: 'promo' }, [])]
+    });
+
+    // Both render nothing, so the distinction costs shoppers nothing — it
+    // exists so the designer can say which is which.
+    expect(resolveSlotChildren(host, 'promo')).toEqual([]);
+    expect(resolveSlotChildren(host, 'footer')).toBeNull();
+  });
+
+  it('gives the unnamed slot the children of a composition with no nodes', () => {
+    const legacy = block({ blocks: [inPromo, inAside] });
+
+    expect(resolveSlotChildren(legacy, '')).toEqual([inPromo, inAside]);
+  });
+
+  it('keeps another slot node out of the unnamed slot', () => {
+    const halfMigrated = block({
+      blocks: [slotNode({ [SLOT_NAME_PROPERTY]: 'promo' }, [inPromo]), inAside]
+    });
+
+    expect(resolveSlotChildren(halfMigrated, '')).toEqual([inAside]);
+  });
+
+  it('never falls back for a named slot', () => {
+    // A named slot cannot have legacy content to find: naming one was refused
+    // at define time before slots were nodes.
+    expect(resolveSlotChildren(block({ blocks: [inPromo] }), 'promo')).toBeNull();
+  });
+});
+
+describe('resolveUnnamedSlot', () => {
+  it('is the unnamed slot when the block declares nothing', () => {
+    expect(resolveUnnamedSlot([])).toEqual({ name: '' });
+  });
+
+  it('is the single declared slot whatever it is called', () => {
+    expect(resolveUnnamedSlot(['promo'])).toEqual({ name: 'promo' });
+  });
+
+  it('is the unnamed slot when one is declared beside named ones', () => {
+    expect(resolveUnnamedSlot(['', 'promo'])).toEqual({ name: '' });
+  });
+
+  it('refuses several named slots and names them all', () => {
+    const resolved = resolveUnnamedSlot(['promo', 'aside']) as {
+      error: string;
+    };
+
+    expect(resolved.error).toContain('<ThemeSlot name="promo" />');
+    expect(resolved.error).toContain('<ThemeSlot name="aside" />');
+  });
+});
+
+describe('slotNameError', () => {
+  it('accepts the empty name and a hyphenated one', () => {
+    expect(slotNameError('')).toBeNull();
+    expect(slotNameError('promo-content')).toBeNull();
+  });
+
+  it('refuses anything that would not match a node literally', () => {
+    expect(slotNameError('Promo Content')).toContain('is not valid');
+    expect(slotNameError('1promo')).toContain('is not valid');
+    expect(slotNameError(undefined)).toContain('is not valid');
+  });
+});
+
+describe('isSlotNode', () => {
+  it('recognises the reserved type and nothing else', () => {
+    expect(isSlotNode(slotNode({}))).toBe(true);
+    expect(isSlotNode(block({ type: 'group' }))).toBe(false);
+    // The slot type deliberately sits outside the `custom:<vendor>:<name>`
+    // grammar: nothing renders it, so it is not a brand block type.
+    expect(isSlotNode(block({ type: 'custom:acme:promo-strip' }))).toBe(false);
+  });
+});