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

package/src/blocks/__tests__/product-grid-composition.test.tsx

@@ -0,0 +1,570 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProductGridBlock, {
+  buildInsertionRules,
+  interleaveCells,
+  placeInsertions
+} from '../product-grid-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import type { Block } from '../../theme-block';
+
+/**
+ * The grid gained two authorable compositions: a merchandiser tile that takes
+ * a cell of the grid, and the no-results layout that replaces the grid.
+ *
+ * The first block of tests is the one that matters most — with nothing
+ * authored the DOM has to be what it was before any of this existed. The
+ * golden below was captured by rendering the previous renderer, so it is a
+ * record of the old output rather than a description of the new one.
+ */
+
+const CARD_A =
+  '<a href="/a" data-product-card="" data-part="card" style="display: flex; flex-direction: column; gap: 8px; text-decoration: none;">' +
+  '<img alt="A" loading="lazy" data-product-card-image="" data-part="image" style="width: 100%; height: auto; display: block; object-fit: cover;" src="/a.jpg">' +
+  '<span data-product-card-name="" data-part="name">A</span>' +
+  '<span data-product-card-price="" data-part="price" style="display: flex; align-items: center; gap: 8px;">' +
+  '<s data-product-card-retail-price="" data-part="list-price" style="opacity: 0.6; font-size: 0.9em;">$200.00</s>' +
+  '<span data-part="sale-price">$100.00</span></span></a>';
+
+const CARD_B =
+  '<a href="/b" data-product-card="" data-part="card" style="display: flex; flex-direction: column; gap: 8px; text-decoration: none;">' +
+  '<span data-product-card-image="" data-part="image" data-state="empty" style="display: block; width: 100%; background: rgb(241, 245, 249);"></span>' +
+  '<span data-product-card-name="" data-part="name">B</span>' +
+  '<span data-product-card-price="" data-part="price" style="display: flex; align-items: center; gap: 8px;">' +
+  '<span data-part="sale-price">$50.00</span></span></a>';
+
+const CARD_C =
+  '<a href="/c" data-product-card="" data-part="card" style="display: flex; flex-direction: column; gap: 8px; text-decoration: none;">' +
+  '<img alt="C" loading="lazy" data-product-card-image="" data-part="image" style="width: 100%; height: auto; display: block; object-fit: cover;" src="/c.jpg">' +
+  '<span data-product-card-name="" data-part="name">C</span>' +
+  '<span data-product-card-price="" data-part="price" style="display: flex; align-items: center; gap: 8px;">' +
+  '<span data-part="sale-price">$75.00</span></span></a>';
+
+const DEFAULT_HTML =
+  '<div data-product-grid="" data-product-grid-id="grid-1" data-part="list" style="display: grid; gap: var(--product-grid-gap, 16px);">' +
+  '<style>[data-product-grid-id="grid-1"]{grid-template-columns:repeat(4,minmax(0,1fr));}' +
+  '@media (max-width:1023px){[data-product-grid-id="grid-1"]{grid-template-columns:repeat(2,minmax(0,1fr));}}</style>' +
+  CARD_A +
+  CARD_B +
+  CARD_C +
+  '</div>';
+
+const DESIGNER_PLACEHOLDER_HTML =
+  '<div data-product-grid="" style="display: inline-block; padding: 8px 12px; ' +
+  'border: 1px dashed #cbd5e1; border-radius: 4px; color: rgb(100, 116, 139); font-size: 12px;">' +
+  'Product grid (no listing data)</div>';
+
+const product = (n: number, over: Record<string, unknown> = {}) => ({
+  pk: n,
+  name: `P${n}`,
+  url: `/p${n}`,
+  image: `/p${n}.jpg`,
+  price: 10 * n,
+  ...over
+});
+
+const listingContext = (
+  products: Record<string, unknown>[],
+  pagination: Record<string, unknown> = { current_page: 1, count: 99 }
+) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/shoes',
+    products,
+    facets: [{ key: 'colour' }],
+    sorters: [],
+    pagination
+  }
+});
+
+const THREE_PRODUCTS = listingContext([
+  { pk: 1, name: 'A', url: '/a', image: '/a.jpg', price: 100, retail_price: 200 },
+  { pk: 2, name: 'B', url: '/b', image: '', price: 50 },
+  { pk: 3, name: 'C', url: '/c', image: '/c.jpg', price: 75 }
+]);
+
+const child = (
+  role: string,
+  properties: Record<string, unknown> = {},
+  over: Partial<Block> = {}
+): Block =>
+  ({
+    id: 'tile-1',
+    type: 'group',
+    label: 'Campaign',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties: { role: { desktop: role }, ...properties },
+    styles: {},
+    blocks: [
+      {
+        id: 'tile-copy',
+        type: 'text',
+        label: 'Copy',
+        order: 0,
+        hidden: false,
+        value: 'Winter campaign',
+        properties: {},
+        styles: {},
+        blocks: []
+      }
+    ],
+    ...over
+  } as Block);
+
+const gridBlock = (
+  properties: Record<string, unknown> = {},
+  blocks: Block[] = []
+): Block =>
+  ({
+    id: 'grid-1',
+    type: 'product-grid',
+    label: 'Grid',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks
+  } as Block);
+
+const draw = (
+  block: Block,
+  context: unknown,
+  isDesigner = false,
+  currentBreakpoint = 'desktop'
+) =>
+  render(
+    <ThemePageContextProvider value={context as Record<string, unknown>}>
+      <ProductGridBlock
+        block={block}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={isDesigner}
+        currentBreakpoint={currentBreakpoint}
+      />
+    </ThemePageContextProvider>
+  ).container;
+
+/** The grid's cells in DOM order, with the stylesheet dropped. */
+const cellSequence = (container: HTMLElement): string[] =>
+  Array.from(
+    container.querySelector('[data-product-grid]')?.children ?? []
+  )
+    .filter((element) => element.tagName !== 'STYLE')
+    .map((element) =>
+      element.hasAttribute('data-product-grid-insert')
+        ? `tile:${element.getAttribute('data-product-grid-insert')}`
+        : element.getAttribute('href') || element.tagName.toLowerCase()
+    );
+
+const sheet = (container: HTMLElement): string =>
+  container.querySelector('style')?.textContent ?? '';
+
+/** Every cell-pinning rule the grid wrote, reduced to its bare selector. */
+const pinSelectors = (css: string): string[] =>
+  Array.from(css.matchAll(/([^{}@]+)\{grid-column:[^{}]*\}/g)).map((match) =>
+    match[1].trim()
+  );
+
+describe('nothing authored renders exactly what it rendered before', () => {
+  it('draws the grid byte for byte', () => {
+    expect(draw(gridBlock(), THREE_PRODUCTS).innerHTML).toBe(DEFAULT_HTML);
+  });
+
+  it('still renders nothing on a storefront listing that came back empty', () => {
+    expect(draw(gridBlock(), listingContext([])).innerHTML).toBe('');
+  });
+
+  it('still renders nothing on a page with no listing at all', () => {
+    expect(draw(gridBlock(), null).innerHTML).toBe('');
+  });
+
+  it('still shows only the designer notice when there is no data', () => {
+    expect(draw(gridBlock(), null, true).innerHTML).toBe(
+      DESIGNER_PLACEHOLDER_HTML
+    );
+  });
+
+  it('emits no tile or empty-state markup', () => {
+    const container = draw(gridBlock(), THREE_PRODUCTS);
+
+    expect(container.querySelector('[data-product-grid-insert]')).toBeNull();
+    expect(container.querySelector('[data-product-grid-empty]')).toBeNull();
+  });
+
+  it('leaves a child carrying no role unrendered, as it always was', () => {
+    const container = draw(
+      gridBlock({}, [child('')]),
+      THREE_PRODUCTS
+    );
+
+    expect(container.innerHTML).toBe(DEFAULT_HTML);
+  });
+});
+
+describe('a merchandiser tile in the grid', () => {
+  const eightProducts = listingContext(
+    Array.from({ length: 8 }, (_, index) => product(index + 1))
+  );
+
+  it('takes the authored cell and pushes the products along', () => {
+    const container = draw(
+      gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+      eightProducts
+    );
+
+    expect(cellSequence(container)).toEqual([
+      '/p1',
+      '/p2',
+      '/p3',
+      '/p4',
+      'tile:0',
+      '/p5',
+      '/p6',
+      '/p7',
+      '/p8'
+    ]);
+  });
+
+  it('pins the cell for each column count the block emits', () => {
+    const css = sheet(
+      draw(
+        gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+        eightProducts
+      )
+    );
+
+    // Cell 5 is the start of row 2 across four columns…
+    expect(css).toContain(
+      '[data-product-grid-id="grid-1"] ' +
+        '[data-product-grid-page="1"][data-product-grid-insert="0"]' +
+        '{grid-column:1/span 1;grid-row:2/span 1;}'
+    );
+    // …and of row 3 across the two the same block drops to on a phone.
+    expect(css).toContain(
+      '[data-product-grid-id="grid-1"] ' +
+        '[data-product-grid-page="1"][data-product-grid-insert="0"]' +
+        '{grid-column:1/span 1;grid-row:3/span 1;}'
+    );
+  });
+
+  it('keeps the mobile rule inside the mobile query', () => {
+    const css = sheet(
+      draw(
+        gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+        eightProducts
+      )
+    );
+    const query = css.slice(css.indexOf('@media'));
+
+    expect(query).toContain('grid-row:3/span 1;');
+    expect(query.endsWith('}')).toBe(true);
+  });
+
+  it('spans two columns and two rows when asked', () => {
+    const css = sheet(
+      draw(
+        gridBlock({}, [
+          child('grid-insertion', {
+            insertPosition: 5,
+            insertColumnSpan: 2,
+            insertRowSpan: 2
+          })
+        ]),
+        eightProducts
+      )
+    );
+
+    expect(css).toContain('{grid-column:1/span 2;grid-row:2/span 2;}');
+  });
+
+  it('narrows a wide tile to the column count it is actually in', () => {
+    // Two columns wide is the whole row on a one-column phone; asking for two
+    // tracks there would push the tile off the edge of the grid.
+    const css = sheet(
+      draw(
+        gridBlock({ columnsMobile: 1 }, [
+          child('grid-insertion', {
+            insertPosition: 5,
+            insertColumnSpan: 2
+          })
+        ]),
+        eightProducts
+      )
+    );
+    const query = css.slice(css.indexOf('@media'));
+
+    expect(css.slice(0, css.indexOf('@media'))).toContain(
+      '{grid-column:1/span 2;grid-row:2/span 1;}'
+    );
+    expect(query).toContain('{grid-column:1/span 1;grid-row:5/span 1;}');
+  });
+
+  it('pulls a tile back inside the last track rather than overhanging it', () => {
+    const css = sheet(
+      draw(
+        gridBlock({}, [
+          child('grid-insertion', {
+            insertPosition: 4,
+            insertColumnSpan: 2
+          })
+        ]),
+        eightProducts
+      )
+    );
+
+    // Cell 4 is the last column of four; a two-column tile starts one earlier.
+    expect(css.slice(0, css.indexOf('@media'))).toContain(
+      '{grid-column:3/span 2;grid-row:1/span 1;}'
+    );
+  });
+
+  it('lands at the end when the filters returned fewer products than that', () => {
+    // Three results and a tile authored for cell 5: pinning it to cell 5 would
+    // leave cell 4 unreachable and tear a hole through the row.
+    const container = draw(
+      gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+      THREE_PRODUCTS
+    );
+
+    expect(cellSequence(container)).toEqual(['/a', '/b', '/c', 'tile:0']);
+    expect(sheet(container).slice(0, sheet(container).indexOf('@media'))).toContain(
+      '{grid-column:4/span 1;grid-row:1/span 1;}'
+    );
+  });
+
+  it('is the only cell left when the listing came back empty', () => {
+    const container = draw(
+      gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+      listingContext([])
+    );
+
+    expect(cellSequence(container)).toEqual(['tile:0']);
+  });
+
+  it('stays off a page it was not authored for', () => {
+    const secondPage = listingContext(
+      Array.from({ length: 8 }, (_, index) => product(index + 1)),
+      { current_page: 2, count: 99 }
+    );
+
+    expect(
+      draw(
+        gridBlock({}, [child('grid-insertion', { insertPosition: 5 })]),
+        secondPage
+      ).querySelector('[data-product-grid-insert]')
+    ).toBeNull();
+
+    expect(
+      draw(
+        gridBlock({}, [
+          child('grid-insertion', { insertPosition: 5, insertPages: 'all' })
+        ]),
+        secondPage
+      ).querySelector('[data-product-grid-insert]')
+    ).not.toBeNull();
+  });
+
+  it('pins only the page it was rendered for', () => {
+    // "Cell 5" means the fifth cell of the page being read, so the rule that
+    // expresses it is only true of that page. Load More can put several pages
+    // in one grid; a rule that reaches past its own page pins two tiles into
+    // one cell and buries whatever the shopper was already looking at.
+    const everyPage = child('grid-insertion', {
+      insertPosition: 5,
+      insertPages: 'all'
+    });
+    const products = Array.from({ length: 8 }, (_, index) => product(index + 1));
+
+    const pageOne = draw(gridBlock({}, [everyPage]), listingContext(products));
+    const pageTwo = draw(
+      gridBlock({}, [everyPage]),
+      listingContext(products, { current_page: 2, count: 99 })
+    );
+
+    const selectors = pinSelectors(sheet(pageOne));
+    expect(selectors.length).toBeGreaterThan(0);
+    selectors.forEach((selector) => {
+      expect(pageOne.querySelectorAll(selector)).toHaveLength(1);
+      expect(pageTwo.querySelectorAll(selector)).toHaveLength(0);
+    });
+  });
+
+  it('is gone from the storefront when the designer hid it', () => {
+    const hidden = child('grid-insertion', { insertPosition: 2 }, {
+      hidden: true
+    } as Partial<Block>);
+
+    expect(
+      draw(gridBlock({}, [hidden]), THREE_PRODUCTS).querySelector(
+        '[data-product-grid-insert]'
+      )
+    ).toBeNull();
+    // Still on the canvas, so it can be brought back — the rule the group
+    // block already applies to its own children.
+    expect(
+      draw(gridBlock({}, [hidden]), THREE_PRODUCTS, true).querySelector(
+        '[data-product-grid-insert]'
+      )
+    ).not.toBeNull();
+  });
+
+  it('declares the part it emits so the tile can be selected and styled', () => {
+    const container = draw(
+      gridBlock({}, [child('grid-insertion', { insertPosition: 2 })]),
+      THREE_PRODUCTS
+    );
+
+    expect(
+      container
+        .querySelector('[data-product-grid-insert]')
+        ?.getAttribute('data-part')
+    ).toBe('insert');
+  });
+
+  it('writes nothing to storage while the designer arranges it', () => {
+    const setItem = jest.spyOn(window.sessionStorage.__proto__, 'setItem');
+
+    draw(
+      gridBlock({}, [child('grid-insertion', { insertPosition: 2 })]),
+      THREE_PRODUCTS,
+      true
+    );
+
+    expect(setItem).not.toHaveBeenCalled();
+    setItem.mockRestore();
+  });
+});
+
+describe('the no-results page', () => {
+  const emptyState = () =>
+    child('listing-empty', {}, { id: 'empty-1' } as Partial<Block>);
+
+  it('replaces the grid when the filters return nothing', () => {
+    const container = draw(
+      gridBlock({}, [emptyState()]),
+      listingContext([])
+    );
+
+    expect(container.querySelector('[data-product-grid]')).toBeNull();
+    expect(container.querySelector('[data-product-grid-empty]')).not.toBeNull();
+    expect(container.textContent).toContain('Winter campaign');
+  });
+
+  it('declares the part it emits', () => {
+    const container = draw(gridBlock({}, [emptyState()]), listingContext([]));
+
+    expect(
+      container
+        .querySelector('[data-product-grid-empty]')
+        ?.getAttribute('data-part')
+    ).toBe('empty');
+  });
+
+  it('stays out of the way while the listing has results', () => {
+    const container = draw(gridBlock({}, [emptyState()]), THREE_PRODUCTS);
+
+    expect(container.querySelector('[data-product-grid-empty]')).toBeNull();
+    expect(container.querySelector('[data-product-grid]')).not.toBeNull();
+  });
+
+  it('never speaks for a page that has no listing at all', () => {
+    // A grid dropped on a landing page has not "returned no results"; saying
+    // so would announce an empty search on a page that never ran one.
+    expect(draw(gridBlock({}, [emptyState()]), null).innerHTML).toBe('');
+  });
+
+  it('can be previewed on the canvas without touching the storefront', () => {
+    const block = gridBlock({ previewEmptyState: true }, [emptyState()]);
+
+    expect(
+      draw(block, THREE_PRODUCTS, true).querySelector('[data-product-grid-empty]')
+    ).not.toBeNull();
+    // The same composition on the live site, where the listing has products.
+    expect(draw(block, THREE_PRODUCTS, false).innerHTML).toBe(DEFAULT_HTML);
+  });
+
+  it('is gone from the storefront when the designer hid it', () => {
+    const hidden = child('listing-empty', {}, {
+      id: 'empty-1',
+      hidden: true
+    } as Partial<Block>);
+
+    expect(draw(gridBlock({}, [hidden]), listingContext([])).innerHTML).toBe('');
+  });
+});
+
+describe('placing tiles', () => {
+  const tile = (position: number) => ({
+    block: { id: `t${position}` } as Block,
+    position,
+    columnSpan: 1,
+    rowSpan: 1,
+    everyPage: false
+  });
+
+  it('honours an authored cell that the results can reach', () => {
+    expect(placeInsertions([tile(5)], 20).map((t) => t.cell)).toEqual([5]);
+  });
+
+  it('pulls a tile back to the first cell past the products', () => {
+    expect(placeInsertions([tile(9)], 3).map((t) => t.cell)).toEqual([4]);
+    expect(placeInsertions([tile(9)], 0).map((t) => t.cell)).toEqual([1]);
+  });
+
+  it('keeps two tiles authored onto one cell from stacking', () => {
+    expect(placeInsertions([tile(5), tile(5)], 20).map((t) => t.cell)).toEqual([
+      5, 6
+    ]);
+  });
+
+  it('sorts by cell whatever order the children are in', () => {
+    expect(placeInsertions([tile(9), tile(2)], 20).map((t) => t.cell)).toEqual([
+      2, 9
+    ]);
+  });
+
+  it('gives every tile a cell even when none of them fit', () => {
+    expect(
+      placeInsertions([tile(40), tile(40), tile(40)], 0).map((t) => t.cell)
+    ).toEqual([1, 2, 3]);
+  });
+});
+
+describe('the interleave and the rules it agrees with', () => {
+  const placed = (...cells: number[]) =>
+    cells.map((cell) => ({
+      block: {} as Block,
+      position: cell,
+      columnSpan: 1,
+      rowSpan: 1,
+      everyPage: false,
+      cell
+    }));
+
+  it('returns the cards untouched when there is nothing to insert', () => {
+    const cards = ['a', 'b', 'c'];
+
+    expect(interleaveCells(cards, [], [])).toEqual(cards);
+  });
+
+  it('puts each tile in the cell the stylesheet pins it to', () => {
+    expect(
+      interleaveCells(['a', 'b', 'c', 'd'], ['T1', 'T2'], placed(1, 4))
+    ).toEqual(['T1', 'a', 'b', 'T2', 'c', 'd']);
+  });
+
+  it('emits no rules for a grid with no tiles', () => {
+    expect(buildInsertionRules('grid-1', [], 4, 1)).toBe('');
+  });
+
+  it('writes a rule that only its own page can satisfy', () => {
+    expect(buildInsertionRules('grid-1', placed(3), 4, 2)).toBe(
+      '[data-product-grid-id="grid-1"] ' +
+        '[data-product-grid-page="2"][data-product-grid-insert="0"]' +
+        '{grid-column:3/span 1;grid-row:1/span 1;}'
+    );
+  });
+});