@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/src/__tests__/item-template.test.tsx

@@ -0,0 +1,184 @@
+import { buildIteratorBlock } from '../utils/iterator-utils';
+import {
+  findItemTemplate,
+  hasItemTemplate,
+  publishesProductItems,
+  resolveItemProduct
+} from '../blocks/item-template-utils';
+import { sliceIteratorItems } from '../utils/iterator-utils';
+import type { Block } from '../theme-block';
+
+const templateChild = (overrides: Partial<Block> = {}): Block =>
+  ({
+    id: 'tpl',
+    type: 'group',
+    label: 'Card',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties: { role: { desktop: 'item-template' } },
+    styles: {},
+    blocks: [
+      {
+        id: 'tpl-name',
+        type: 'text',
+        label: 'Name',
+        order: 0,
+        hidden: false,
+        value: '',
+        properties: { dataBinding: 'item.name' },
+        styles: {},
+        blocks: []
+      }
+    ],
+    ...overrides
+  } as Block);
+
+const listBlock = (children: Block[]): Block =>
+  ({
+    id: 'grid',
+    type: 'product-grid',
+    label: 'Product grid',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties: {},
+    styles: {},
+    blocks: children
+  } as Block);
+
+describe('finding the item template', () => {
+  it('picks the child marked as the row layout', () => {
+    const block = listBlock([templateChild()]);
+
+    expect(hasItemTemplate(block)).toBe(true);
+    expect(findItemTemplate(block)?.id).toBe('tpl');
+  });
+
+  it('ignores children that are ordinary content', () => {
+    // Announcement messages and FAQ entries are children too; only a marked
+    // child means "repeat me per row".
+    const block = listBlock([
+      {
+        ...templateChild(),
+        id: 'plain',
+        properties: {}
+      } as Block
+    ]);
+
+    expect(hasItemTemplate(block)).toBe(false);
+    expect(findItemTemplate(block)).toBeNull();
+  });
+
+  it('reads the marker per breakpoint', () => {
+    const block = listBlock([
+      {
+        ...templateChild(),
+        properties: { role: { desktop: '', mobile: 'item-template' } }
+      } as Block
+    ]);
+
+    expect(hasItemTemplate(block, 'desktop')).toBe(false);
+    expect(hasItemTemplate(block, 'mobile')).toBe(true);
+  });
+});
+
+describe('repeating the template over caller-supplied rows', () => {
+  // The iterator repeats blocks[0], so the row layout is wrapped exactly the
+  // way ItemTemplateList wraps it — passing the card directly would repeat
+  // only its first element.
+  const expand = (items: Record<string, unknown>[]) =>
+    buildIteratorBlock({
+      iteratorBlock: {
+        ...listBlock([templateChild()]),
+        isIterator: true,
+        blocks: [templateChild()]
+      } as Block,
+      items,
+      isDesigner: false
+    });
+
+  it('produces one clone per row', () => {
+    const result = expand([{ name: 'A' }, { name: 'B' }, { name: 'C' }]);
+
+    expect(result.blocks).toHaveLength(3);
+  });
+
+  it('resolves item bindings inside each clone', () => {
+    const result = expand([{ name: 'Sneaker' }, { name: 'Boot' }]);
+    // The card is the repeated unit; the binding sits on the element inside it.
+    const values = (result.blocks || []).map(
+      (clone) => (clone.blocks || [])[0]?.value
+    );
+
+    expect(values).toEqual(['Sneaker', 'Boot']);
+  });
+
+  it('keeps the template style identity on every clone', () => {
+    // The generated stylesheet only knows the template id; the DOM writes
+    // styleSourceId || id. Losing it drops every style authored on the row.
+    const result = expand([{ name: 'A' }, { name: 'B' }]);
+
+    (result.blocks || []).forEach((clone) => {
+      expect(clone.styleSourceId).toBe('tpl');
+      expect(clone.id).not.toBe('tpl');
+    });
+  });
+
+  it('does not repeat when the block is not an iterator', () => {
+    const plain = templateChild();
+    const result = buildIteratorBlock({
+      iteratorBlock: plain,
+      items: [{ name: 'A' }, { name: 'B' }]
+    });
+
+    expect(result).toBe(plain);
+  });
+});
+
+describe('the product row scope', () => {
+  it('opens only for lists whose rows are products', () => {
+    expect(publishesProductItems('product-grid')).toBe(true);
+    expect(publishesProductItems('favourites-grid')).toBe(true);
+    // An address row carries `pk` and a `name` too — scoping it would point a
+    // wishlist toggle at an address id.
+    expect(publishesProductItems('address-list')).toBe(false);
+    expect(publishesProductItems('product-attributes')).toBe(false);
+    expect(publishesProductItems(undefined)).toBe(false);
+  });
+
+  it('falls through rather than shadowing the page product with nothing', () => {
+    // A row with no id cannot be acted on, so it must NOT claim the scope:
+    // claiming it would silence blocks that read the page product today — the
+    // recommendation strip on a PDP before its data arrives.
+    expect(resolveItemProduct('product-grid', {})).toBeNull();
+    expect(resolveItemProduct('product-grid', { name: 'No id' })).toBeNull();
+    expect(resolveItemProduct('product-grid', { pk: 'product-3' })).toBeNull();
+    expect(resolveItemProduct('product-grid', undefined)).toBeNull();
+  });
+
+  it('addresses the product, not the wishlist entry', () => {
+    // A favourites row carries both: `pk` is the entry, `productPk` the
+    // product behind it.
+    const scope = resolveItemProduct('favourites-grid', {
+      pk: 900,
+      productPk: 42,
+      name: 'Sneaker'
+    });
+
+    expect(scope?.pk).toBe(42);
+    expect(scope?.name).toBe('Sneaker');
+  });
+
+  it('hands each clone the row that clone was built from', () => {
+    // With the count properties set, clone N is not items[N]. The scope reads
+    // the rows through the same slice, so the two cannot drift apart.
+    const rows = [{ n: 0 }, { n: 1 }, { n: 2 }, { n: 3 }];
+    const block = {
+      ...templateChild(),
+      properties: { useIteratorCount: true, iteratorCount: 2, iteratorOffset: 1 }
+    } as Block;
+
+    expect(sliceIteratorItems(block, rows).items).toEqual([{ n: 1 }, { n: 2 }]);
+  });
+});