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

package/src/utils/__tests__/card-views.test.tsx

@@ -0,0 +1,332 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { act, render } from '@testing-library/react';
+
+// The registry first, as the app loads it (see card-media.test.tsx).
+import '../../blocks/block-renderer-registry';
+import GroupBlock from '../../blocks/group-block';
+import {
+  __resetCardViewForTests,
+  buildCardViewCss,
+  CardListViews
+} from '../../components/card-list-views';
+import type { Block } from '../../theme-block';
+import ThemeBlock from '../../theme-block';
+import type { Section } from '../../theme-section';
+import {
+  type CardViewSettings,
+  cardViewFromHash,
+  DEFAULT_CARD_VIEW_TOGGLES
+} from '../card-media';
+import { applyPropertySwitchesToSections } from '../property-switches';
+
+/**
+ * ZERO-5173 — a card list that is not sliding is drawn in one of the GANT
+ * listing's grid views: catalogue (3 across, 1 below 1024px), classic (the
+ * list's own grid, the default) or archive (8 across, 4 below, pictures
+ * only). The designer picks it from a select; the listing's toggles, when
+ * offered, let the shopper switch, kept in the URL hash as on the listing,
+ * and are typed from the list's settings.
+ */
+const node = (
+  id: string,
+  type: string,
+  properties: Record<string, unknown> = {},
+  blocks: Block[] = [],
+  extra: Partial<Block> = {}
+): Block => ({
+  id,
+  type,
+  label: id,
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks,
+  ...extra
+});
+
+const repeat = () =>
+  node(
+    'repeat',
+    'group',
+    { tag: 'div' },
+    [node('card', 'group', { tag: 'div', blockTemplate: 'product-card' })],
+    { isIterator: true, iteratorDataPath: 'products' }
+  );
+
+const resolve = (properties: Record<string, unknown>) => {
+  const section: Section = {
+    id: 's1',
+    type: 'custom',
+    name: 's1',
+    label: 'S1',
+    order: 0,
+    hidden: false,
+    properties,
+    styles: {},
+    blocks: [repeat()]
+  };
+  return applyPropertySwitchesToSections([section])[0].blocks[0].cardsViews;
+};
+
+const setHash = (hash: string) => {
+  window.history.replaceState(null, '', `/erkek-polo/${hash}`);
+};
+
+const offered = (
+  view: CardViewSettings['view'] = 'classic'
+): CardViewSettings => ({
+  view,
+  toggles: { ...DEFAULT_CARD_VIEW_TOGGLES }
+});
+
+const pressed = (container: HTMLElement) =>
+  container
+    .querySelector('[aria-pressed="true"]')
+    ?.getAttribute('data-card-view-option');
+
+describe('the listing’s grid views on a card list', () => {
+  beforeEach(() => {
+    setHash('');
+    __resetCardViewForTests();
+  });
+
+  it('draw the list in the view its designer picked, with the toggles only when offered', () => {
+    // Nothing set: the list as authored, and nothing written on it.
+    expect(resolve({})).toBeUndefined();
+    expect(resolve({ cardsView: 'classic' })).toBeUndefined();
+    // A view picked from the select, per breakpoint as the editor stores it.
+    expect(resolve({ cardsView: { desktop: 'archive' } })).toEqual({
+      view: 'archive'
+    });
+    // The toggles, with the toolbar's look unless the designer typed it.
+    expect(resolve({ cardsViewModes: { desktop: true } })).toEqual({
+      view: 'classic',
+      toggles: DEFAULT_CARD_VIEW_TOGGLES
+    });
+    expect(
+      resolve({
+        cardsViewModes: true,
+        cardsView: 'catalogue',
+        cardsViewTogglesAlign: 'left',
+        cardsViewTogglesColor: '#781526',
+        cardsViewTogglesSize: 20,
+        cardsViewTogglesGap: 12,
+        cardsViewTogglesPadding: '0 24'
+      })
+    ).toEqual({
+      view: 'catalogue',
+      toggles: {
+        align: 'left',
+        color: '#781526',
+        size: 20,
+        gap: 12,
+        padding: '0px 24px'
+      }
+    });
+    // Nothing that could leave the declaration it lands in.
+    expect(
+      resolve({
+        cardsViewModes: true,
+        cardsViewTogglesColor: 'red;}body{display:none',
+        cardsViewTogglesPadding: '1px;}x{'
+      })?.toggles
+    ).toEqual(
+      expect.objectContaining({
+        color: DEFAULT_CARD_VIEW_TOGGLES.color,
+        padding: DEFAULT_CARD_VIEW_TOGGLES.padding
+      })
+    );
+    // A slider lays its own row out: no grid views there.
+    expect(
+      resolve({ cardsView: 'archive', cardsViewModes: true, cardsSlider: true })
+    ).toBeUndefined();
+  });
+
+  it('read a shopper’s view off the hash as the listing does, none otherwise', () => {
+    expect(cardViewFromHash('#archive')).toBe('archive');
+    expect(cardViewFromHash('#CATALOGUE')).toBe('catalogue');
+    expect(cardViewFromHash('#reviews')).toBeNull();
+    expect(cardViewFromHash('')).toBeNull();
+  });
+
+  it('lay the list out per view, and leave the classic grid as authored', () => {
+    expect(buildCardViewCss('repeat', 'classic', false)).toBe('');
+
+    const catalogue = buildCardViewCss('repeat', 'catalogue', false);
+    expect(catalogue).toContain(
+      '[data-block-id="repeat"][data-block-id="repeat"]{grid-template-columns:repeat(3,minmax(0,1fr))}'
+    );
+    expect(catalogue).toContain(
+      '@media (max-width:1023px){[data-block-id="repeat"][data-block-id="repeat"]{grid-template-columns:repeat(1,minmax(0,1fr))}}'
+    );
+
+    const archive = buildCardViewCss('repeat', 'archive', false);
+    expect(archive).toContain('repeat(8,minmax(0,1fr))');
+    expect(archive).toContain('repeat(4,minmax(0,1fr))');
+    // Pictures only: what a card marks for the archive goes, box and all.
+    expect(archive).toContain(
+      '[data-block-id="repeat"][data-block-id="repeat"] [data-hide-in-card-view~="archive"]{display:none}'
+    );
+
+    // The phone canvas takes the phone layout outright.
+    const phone = buildCardViewCss('repeat', 'archive', true);
+    expect(phone).toContain('repeat(4,minmax(0,1fr))');
+    expect(phone).not.toContain('repeat(8,');
+
+    // The toggles: the glyph's size plus 8 from 1024px up, 44px squares below.
+    const toggles = buildCardViewCss('repeat', 'classic', false, {
+      ...DEFAULT_CARD_VIEW_TOGGLES,
+      size: 20,
+      gap: 12
+    });
+    expect(toggles).toContain(
+      '[data-card-view-switcher="repeat"]{gap:12px}[data-card-view-switcher="repeat"]>button{width:28px;height:28px}'
+    );
+    expect(toggles).toContain(
+      '[data-card-view-switcher="repeat"]>button{width:44px;height:44px}'
+    );
+
+    // An id that is not a plain token never reaches a selector.
+    expect(buildCardViewCss('x"]{display:none}', 'archive', false)).toBe('');
+  });
+
+  it('draw no toggles unless offered, and the picked view whatever the hash says', () => {
+    setHash('#classic');
+    const { container } = render(
+      <CardListViews scopeId="repeat" settings={{ view: 'archive' }} />
+    );
+    expect(container.querySelector('[data-card-view-switcher]')).toBeNull();
+    expect(container.querySelector('style')?.textContent).toContain(
+      'repeat(8,minmax(0,1fr))'
+    );
+  });
+
+  it('switch with the toggles, typed as set, and keep the view in the hash', () => {
+    const { container } = render(
+      <CardListViews
+        scopeId="repeat"
+        settings={{
+          view: 'classic',
+          toggles: {
+            ...DEFAULT_CARD_VIEW_TOGGLES,
+            align: 'center',
+            color: '#781526',
+            padding: '0px 24px'
+          }
+        }}
+      />
+    );
+    const row = container.querySelector(
+      '[data-card-view-switcher="repeat"]'
+    ) as HTMLElement;
+    expect(row.style.justifyContent).toBe('center');
+    expect(row.style.color).toBe('rgb(120, 21, 38)');
+    expect(row.style.padding).toBe('0px 24px');
+    expect(
+      Array.from(container.querySelectorAll('[data-card-view-option]')).map(
+        (entry) => entry.getAttribute('data-card-view-option')
+      )
+    ).toEqual(['catalogue', 'classic', 'archive']);
+    expect(pressed(container)).toBe('classic');
+
+    act(() => {
+      (
+        container.querySelector(
+          '[data-card-view-option="archive"]'
+        ) as HTMLButtonElement
+      ).click();
+    });
+    expect(window.location.hash).toBe('#archive');
+    expect(pressed(container)).toBe('archive');
+  });
+
+  it('open on the hash they were linked with, and follow the hash after', () => {
+    setHash('#catalogue');
+    const { container } = render(
+      <CardListViews scopeId="repeat" settings={offered('archive')} />
+    );
+    expect(pressed(container)).toBe('catalogue');
+
+    act(() => {
+      setHash('#archive');
+      window.dispatchEvent(new HashChangeEvent('hashchange'));
+    });
+    expect(pressed(container)).toBe('archive');
+  });
+
+  it('leave the canvas URL alone and select the list that holds them', () => {
+    const select = jest.fn();
+    const { container } = render(
+      <CardListViews
+        scopeId="repeat"
+        settings={offered()}
+        isDesigner
+        onSelect={select}
+      />
+    );
+    act(() => {
+      (
+        container.querySelector(
+          '[data-card-view-option="catalogue"]'
+        ) as HTMLButtonElement
+      ).click();
+    });
+    expect(window.location.hash).toBe('');
+    expect(pressed(container)).toBe('catalogue');
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('render the picked view on the server, whatever the hash', () => {
+    setHash('#archive');
+    const markup = renderToString(
+      <CardListViews scopeId="repeat" settings={offered('catalogue')} />
+    );
+    expect(markup).toContain(
+      'data-card-view-option="catalogue" aria-pressed="true"'
+    );
+    expect(markup).toContain('repeat(3,minmax(0,1fr))');
+    expect(markup).not.toContain('repeat(8,');
+  });
+
+  it('head the repeat’s grid with the toggles, and mark what the archive hides', () => {
+    const list: Block = {
+      ...node('repeat-1', 'group', { tag: 'div' }, [
+        node('c1', 'text', {}, [], { value: 'Kart 1' })
+      ]),
+      cardsViews: offered()
+    };
+    const { container } = render(
+      <GroupBlock
+        block={list}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+      />
+    );
+    const switcher = container.querySelector(
+      '[data-card-view-switcher="repeat-1"]'
+    ) as HTMLElement;
+    // A grid item across the repeat's columns, before its cards.
+    expect(switcher.style.gridColumn).toBe('1 / -1');
+
+    const caption = render(
+      <ThemeBlock
+        block={node(
+          'caption',
+          'group',
+          { tag: 'div', hideInCardView: 'archive' },
+          [node('t', 'text', {}, [], { value: 'Ad' })]
+        )}
+        placeholderId="p"
+        sectionId="s"
+      />
+    );
+    expect(
+      caption.container
+        .querySelector('[data-block-id="caption"]')
+        ?.getAttribute('data-hide-in-card-view')
+    ).toBe('archive');
+  });
+});

package/src/utils/__tests__/swatch-colors.test.ts

@@ -0,0 +1,145 @@
+import { normalizeListingProduct } from '../../blocks/listing-row';
+import {
+  __resetSwatchColorsForTests,
+  registerSwatchColors,
+  resolveSwatchColor
+} from '../swatch-colors';
+
+/**
+ * ZERO-5173 — a product card's colour chips paint with the brand's own colour
+ * resolution when the list authored no mapping for them: GANT's listing turns
+ * a colour code into a tone and the tone into a hex, and a theme card over the
+ * same products has to show the same chips.
+ */
+const product = (codes: string[], own = codes[0]) => ({
+  pk: 1,
+  name: 'GANT Erkek Yeşil Düz Şort',
+  price: '5999.00',
+  absolute_url: '/p-1/',
+  attributes: { integration_renk: own, integration_renk_tonu: 'YEŞİL' },
+  extra_data: {
+    variants: [
+      {
+        attribute_key: 'integration_renk',
+        // GANT's payload: the code is the option's label, no value at all.
+        options: codes.map((code, index) => ({
+          label: code,
+          is_selectable: true,
+          product: {
+            pk: index + 1,
+            absolute_url: `/p-${index + 1}/`,
+            attributes: { integration_renk: code }
+          }
+        }))
+      }
+    ]
+  }
+});
+
+const chips = (row: ReturnType<typeof normalizeListingProduct>) =>
+  (row?.colors ?? []).map((color) => color.color);
+
+describe('swatch colours a brand registers', () => {
+  afterEach(() => __resetSwatchColorsForTests());
+
+  it('leaves a chip uncoloured when no brand registered and nothing is mapped', () => {
+    const row = normalizeListingProduct(product(['10', '433']), 0, {});
+
+    expect(chips(row)).toEqual([undefined, undefined]);
+    expect(
+      resolveSwatchColor({
+        key: '10',
+        label: '10',
+        product: {},
+        variant: {},
+        rows: []
+      })
+    ).toBeUndefined();
+  });
+
+  it('paints every chip the list did not map, from the code and both products', () => {
+    const seen: unknown[] = [];
+    registerSwatchColors(({ key, product: row, variant }) => {
+      seen.push([
+        key,
+        (row.attributes as Record<string, unknown>).integration_renk,
+        variant.pk
+      ]);
+      return ({ '10': '#2f5d3a', '433': '#1c2541' } as Record<string, string>)[
+        key
+      ];
+    });
+
+    const row = normalizeListingProduct(product(['10', '433', '999']), 0, {});
+
+    expect(chips(row)).toEqual(['#2f5d3a', '#1c2541', undefined]);
+    expect(seen[0]).toEqual(['10', '10', 1]);
+  });
+
+  it('hands the resolver the list the row is in, or the row alone', () => {
+    const lists: number[] = [];
+    registerSwatchColors(({ rows }) => {
+      lists.push(rows.length);
+      return '#000000';
+    });
+    const neighbour = product(['676'], '676');
+
+    normalizeListingProduct(product(['10']), 0, {});
+    normalizeListingProduct(product(['10']), 0, {
+      rows: [product(['10']), neighbour, null, 'not a row']
+    });
+
+    // Alone: itself. In a list: every row that is a product, itself included.
+    expect(lists).toEqual([1, 2]);
+  });
+
+  it('lets an authored mapping win over the brand', () => {
+    registerSwatchColors(() => '#2f5d3a');
+
+    const row = normalizeListingProduct(product(['10', '433']), 0, {
+      lookups: { swatch: { '433': '#ff0000' } }
+    });
+
+    expect(chips(row)).toEqual(['#2f5d3a', '#ff0000']);
+  });
+
+  it('never writes anything but one plain colour into a chip', () => {
+    const answers: Record<string, unknown> = {
+      a: 'red; background: url(//x)',
+      b: 'rgb(28, 37, 65)',
+      c: 42,
+      d: '  #ABC  '
+    };
+    registerSwatchColors(({ key }) => answers[key] as string);
+    const ask = (key: string) =>
+      resolveSwatchColor({
+        key,
+        label: key,
+        product: {},
+        variant: {},
+        rows: []
+      });
+
+    expect(ask('a')).toBeUndefined();
+    expect(ask('b')).toBe('rgb(28, 37, 65)');
+    expect(ask('c')).toBeUndefined();
+    expect(ask('d')).toBe('#ABC');
+  });
+
+  it('survives a resolver that throws, and can be unregistered', () => {
+    const detach = registerSwatchColors(() => {
+      throw new Error('brand bug');
+    });
+    expect(chips(normalizeListingProduct(product(['10']), 0, {}))).toEqual([
+      undefined
+    ]);
+
+    detach();
+    registerSwatchColors(() => '#000000');
+    detach();
+    // An older unregister never removes a newer resolver.
+    expect(chips(normalizeListingProduct(product(['10']), 0, {}))).toEqual([
+      '#000000'
+    ]);
+  });
+});