@akinon/pz-theme 2.0.96-rc.0 → 2.0.97-beta.0

package/src/blocks/__tests__/icon-group-block.test.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock so a child is a countable marker.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <span data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import IconGroupBlock from '../icon-group-block';
+import IconGroupColoredBlock from '../icon-group-colored-block';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+
+const child = (id: string, hidden = false, order = 0) => ({
+  id,
+  type: 'icon',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order,
+  hidden
+});
+
+const storedBlock = (over: Record<string, unknown> = {}) => ({
+  id: 'ig-1',
+  type: 'icon-group',
+  label: 'Icon Group',
+  value: '',
+  // The descriptor declares `properties: []`; only the shared ones are stored.
+  properties: { htmlId: '', actionType: 'none' },
+  styles: { size: { desktop: '24' } },
+  order: 0,
+  hidden: false,
+  blocks: [child('c1'), child('c2')],
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: storedBlock(),
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="tb"]'));
+
+describe('IconGroupBlock — children', () => {
+  it('renders its children through the shared composed-children path', () => {
+    const { container } = render(<IconGroupBlock {...props()} />);
+
+    expect(markers(container).map((m) => m.getAttribute('data-id'))).toEqual([
+      'c1',
+      'c2'
+    ]);
+  });
+
+  it('drops a hidden child for the shopper and keeps it in the designer', () => {
+    const block = storedBlock({ blocks: [child('c1'), child('c2', true)] });
+
+    expect(
+      markers(render(<IconGroupBlock {...props({ block })} />).container)
+    ).toHaveLength(1);
+    expect(
+      markers(
+        render(<IconGroupBlock {...props({ block, isDesigner: true })} />)
+          .container
+      )
+    ).toHaveLength(2);
+  });
+
+  it('stays transparent to layout so the wrapper gap reaches the icons', () => {
+    const { container } = render(<IconGroupBlock {...props()} />);
+    const host = container.querySelector('[data-icon-group]') as HTMLElement;
+
+    expect(host.getAttribute('style')).toContain('display: contents');
+  });
+});
+
+describe('IconGroupBlock — the size control', () => {
+  it('sizes the icons underneath it, scoped to this block alone', () => {
+    const { container } = render(<IconGroupBlock {...props()} />);
+    const css = container.querySelector('style')!.textContent!;
+
+    expect(css).toContain('[data-icon-group-id="ig-1"] svg');
+    expect(css).toContain('[data-icon-group-id="ig-1"] img');
+    expect(css).toContain('width:24px');
+    expect(css).toContain('height:24px');
+  });
+
+  it('falls back to the descriptor default when the control is untouched', () => {
+    const { container } = render(
+      <IconGroupBlock {...props({ block: storedBlock({ styles: {} }) })} />
+    );
+
+    expect(container.querySelector('style')!.textContent).toContain(
+      'width:18px'
+    );
+  });
+
+  it('reads the size bucket of the current breakpoint', () => {
+    const { container } = render(
+      <IconGroupBlock
+        {...props({
+          block: storedBlock({
+            styles: { size: { desktop: '24', mobile: '16' } }
+          }),
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+
+    expect(container.querySelector('style')!.textContent).toContain(
+      'width:16px'
+    );
+  });
+});
+
+describe('IconGroupBlock — empty state', () => {
+  it('shows a labelled band in the designer when the group holds nothing', () => {
+    const { container } = render(
+      <IconGroupBlock
+        {...props({ block: storedBlock({ blocks: [] }), isDesigner: true })}
+      />
+    );
+
+    expect(container.textContent).toContain('Icon group (no icons)');
+  });
+
+  it('renders nothing for a shopper when the group holds nothing', () => {
+    const { container } = render(
+      <IconGroupBlock {...props({ block: storedBlock({ blocks: [] }) })} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe('IconGroupColoredBlock — the tint', () => {
+  const coloredBlock = (color: unknown) =>
+    storedBlock({
+      id: 'ig-1',
+      type: 'icon-group-colored',
+      styles: { size: { desktop: '24' }, color }
+    });
+
+  it('turns a theme token into a real colour the icons can inherit', () => {
+    const { container } = render(
+      <ThemeSettingsProvider value={{ primaryColor: '#0a7a5a' }}>
+        <IconGroupColoredBlock
+          {...props({
+            block: coloredBlock({ desktop: 'var(--theme-primary)' })
+          })}
+        />
+      </ThemeSettingsProvider>
+    );
+
+    const host = container.querySelector('[data-icon-group]') as HTMLElement;
+    expect(host.style.color).toBe('rgb(10, 122, 90)');
+  });
+
+  it('leaves a literal colour to the generated rule on the wrapper', () => {
+    const { container } = render(
+      <IconGroupColoredBlock
+        {...props({ block: coloredBlock({ desktop: '#ff0000' }) })}
+      />
+    );
+
+    const host = container.querySelector('[data-icon-group]') as HTMLElement;
+    expect(host.style.color).toBe('');
+  });
+
+  it('is the plain group plus a tint — same markup when there is no colour', () => {
+    const plain = render(<IconGroupBlock {...props()} />).container.innerHTML;
+    const colored = render(
+      <IconGroupColoredBlock {...props({ block: coloredBlock(undefined) })} />
+    ).container.innerHTML;
+
+    expect(colored).toBe(plain);
+  });
+});

package/src/blocks/__tests__/icon-source.test.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  ICON_GLYPHS,
+  IconGlyph,
+  isInlineSvgMarkup,
+  resolveIconSource
+} from '../icon-source';
+import IconBlock from '../icon-block';
+
+/**
+ * The keys the editor's picker offers with no upload behind them, copied from
+ * pz-dynamic-widget `src/pages/settings/constants.ts` (`DEFAULT_ICON_CATEGORIES`).
+ * The repos cannot import from each other, so this list is the seam: when the
+ * editor gains a category entry, this test is what says the storefront has
+ * nothing to draw for it.
+ */
+const EDITOR_DEFAULT_ICON_KEYS = [
+  // navigation
+  'home',
+  'back-arrow',
+  'right-arrow',
+  'down-arrow',
+  'up-arrow',
+  // actions
+  'add',
+  'remove',
+  'close',
+  'check',
+  'circle-check',
+  'filter-icon',
+  'sort-icon',
+  'picker-icon',
+  'spinner',
+  // interface
+  'search',
+  'basket',
+  'favourite-empty',
+  'favourite-full',
+  'gift',
+  'share',
+  'barcode',
+  'image',
+  // visibility
+  'eye',
+  'eye-blocked',
+  'user',
+  // miscellaneous
+  'hamburger',
+  'category',
+  'trash',
+  'globe'
+];
+
+const CLOUD = 'cdn.akinoncloud.com';
+
+describe('inline icon catalogue', () => {
+  it('covers every default key the editor picker offers', () => {
+    const missing = EDITOR_DEFAULT_ICON_KEYS.filter((key) => !ICON_GLYPHS[key]);
+    expect(missing).toEqual([]);
+  });
+
+  it('draws every glyph to the same recipe', () => {
+    EDITOR_DEFAULT_ICON_KEYS.forEach((key) => {
+      const { container, unmount } = render(<IconGlyph name={key} />);
+      const svg = container.querySelector('svg');
+
+      expect(svg).not.toBeNull();
+      expect(svg!.getAttribute('viewBox')).toBe('0 0 24 24');
+      expect(svg!.getAttribute('fill')).toBe('none');
+      expect(svg!.getAttribute('stroke')).toBe('currentColor');
+      expect(svg!.getAttribute('stroke-width')).toBe('1.5');
+      expect(svg!.getAttribute('aria-hidden')).toBe('true');
+      // A key present in the table but drawing nothing is the failure this set
+      // is most likely to ship: it looks fine until it is on a live header.
+      expect(svg!.children.length).toBeGreaterThan(0);
+
+      unmount();
+    });
+  });
+
+  it('leaves fill to the one glyph whose meaning depends on it', () => {
+    const filled = EDITOR_DEFAULT_ICON_KEYS.filter((key) => {
+      const { container, unmount } = render(<IconGlyph name={key} />);
+      const hasFill = !!container.querySelector('svg > [fill], svg > * [fill]');
+      unmount();
+      return hasFill;
+    });
+
+    expect(filled).toEqual(['favourite-full']);
+  });
+
+  it('accepts a size and renders nothing for an unknown name', () => {
+    const { container } = render(<IconGlyph name="basket" size={18} />);
+    expect(container.querySelector('svg')!.getAttribute('width')).toBe('18');
+
+    const unknown = render(<IconGlyph name="not-an-icon" />);
+    expect(unknown.container.querySelector('svg')).toBeNull();
+  });
+});
+
+describe('resolveIconSource', () => {
+  const originalCloud = process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME;
+
+  beforeEach(() => {
+    process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME = CLOUD;
+  });
+
+  afterAll(() => {
+    process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME = originalCloud;
+  });
+
+  it('answers with inline markup first', () => {
+    expect(resolveIconSource('<svg><rect /></svg>')).toEqual({
+      kind: 'svg',
+      markup: '<svg><rect /></svg>'
+    });
+    expect(isInlineSvgMarkup('<?xml version="1.0"?><svg />')).toBe(true);
+  });
+
+  it('passes through values that already address something', () => {
+    expect(resolveIconSource('data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=')).toEqual(
+      { kind: 'url', url: 'data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=' }
+    );
+    expect(resolveIconSource('https://example.com/gift.svg')).toEqual({
+      kind: 'url',
+      url: 'https://example.com/gift.svg'
+    });
+    // A root-relative path is served by the app itself and must not be sent
+    // to the image CDN.
+    expect(resolveIconSource('/icons/basket.svg')).toEqual({
+      kind: 'url',
+      url: '/icons/basket.svg'
+    });
+  });
+
+  it("prefers the brand's uploaded icon over the built-in glyph", () => {
+    const themeSettings = {
+      icons: { basket: '<svg id="brand-basket"></svg>' }
+    };
+
+    expect(resolveIconSource('basket', themeSettings)).toEqual({
+      kind: 'svg',
+      markup: '<svg id="brand-basket"></svg>'
+    });
+  });
+
+  it('falls through to the catalogue when the upload is missing or unusable', () => {
+    const glyph = resolveIconSource('basket', { icons: { search: null } });
+    expect(glyph.kind).toBe('glyph');
+    expect(glyph).toMatchObject({ key: 'basket' });
+
+    // A theme-settings entry that is itself a bare key resolves nothing, so
+    // the catalogue still gets its turn.
+    const recursiveKey = resolveIconSource('gift', { icons: { gift: 'gift' } });
+    expect(recursiveKey.kind).toBe('glyph');
+  });
+
+  it('never turns a catalogue key into a CDN request', () => {
+    EDITOR_DEFAULT_ICON_KEYS.forEach((key) => {
+      const source = resolveIconSource(key);
+      expect(source.kind).toBe('glyph');
+    });
+  });
+
+  it('still sends a genuine media path to the image CDN', () => {
+    expect(resolveIconSource('media/icons/free-shipping.svg')).toEqual({
+      kind: 'url',
+      url: `https://${CLOUD}/media/icons/free-shipping.svg`
+    });
+    // A bare file name is a path too — it has an extension.
+    expect(resolveIconSource('free-shipping.png')).toEqual({
+      kind: 'url',
+      url: `https://${CLOUD}/free-shipping.png`
+    });
+  });
+
+  it('answers nothing when there is nothing to draw', () => {
+    expect(resolveIconSource('')).toEqual({ kind: 'none' });
+    expect(resolveIconSource(null)).toEqual({ kind: 'none' });
+    expect(resolveIconSource(undefined)).toEqual({ kind: 'none' });
+    expect(resolveIconSource({})).toEqual({ kind: 'none' });
+    // Not a key, not a path: prefixing the CDN host would only produce a
+    // broken image.
+    expect(resolveIconSource('some-removed-key')).toEqual({ kind: 'none' });
+
+    delete process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME;
+    expect(resolveIconSource('media/icons/gift.svg')).toEqual({ kind: 'none' });
+  });
+
+  it('unwraps the object shapes published JSON has carried', () => {
+    expect(resolveIconSource({ url: 'https://example.com/a.svg' })).toEqual({
+      kind: 'url',
+      url: 'https://example.com/a.svg'
+    });
+    expect(resolveIconSource({ tr: 'basket' }).kind).toBe('glyph');
+  });
+});
+
+const iconProps = (value: unknown) =>
+  ({
+    block: {
+      id: 'i',
+      type: 'icon',
+      label: 'i',
+      value,
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop'
+  } as never);
+
+describe('IconBlock reading through the resolver', () => {
+  it('draws a picked catalogue key inline instead of a broken image', () => {
+    process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME = CLOUD;
+    const { container } = render(<IconBlock {...iconProps('basket')} />);
+
+    expect(container.querySelector('svg')).not.toBeNull();
+    expect(container.querySelector('img')).toBeNull();
+  });
+});

package/src/blocks/__tests__/responsive-array.test.ts

@@ -0,0 +1,77 @@
+import {
+  EMPTY_RESPONSIVE_ARRAY,
+  hasResponsiveArray,
+  readResponsiveArray
+} from '../responsive-array';
+
+describe('readResponsiveArray', () => {
+  it('passes a flat array through by identity', () => {
+    const stored = [{ label: 'Free shipping' }, { label: 'Store pickup' }];
+    expect(readResponsiveArray(stored)).toBe(stored);
+    expect(readResponsiveArray(stored, 'mobile')).toBe(stored);
+  });
+
+  it('reads the bucket for the current breakpoint', () => {
+    const stored = {
+      desktop: [{ label: 'Complete the look' }],
+      mobile: [{ label: 'In store' }, { label: 'Instalments' }]
+    };
+
+    expect(readResponsiveArray(stored, 'desktop')).toHaveLength(1);
+    expect(readResponsiveArray(stored, 'mobile')).toHaveLength(2);
+  });
+
+  it('lets tablet inherit mobile before desktop, like the emitted cascade', () => {
+    const withMobile = {
+      desktop: [{ label: 'desktop' }],
+      mobile: [{ label: 'mobile' }]
+    };
+    expect(readResponsiveArray<{ label: string }>(withMobile, 'tablet')[0]).toEqual(
+      { label: 'mobile' }
+    );
+
+    const desktopOnly = { desktop: [{ label: 'desktop' }] };
+    expect(
+      readResponsiveArray<{ label: string }>(desktopOnly, 'tablet')[0]
+    ).toEqual({ label: 'desktop' });
+  });
+
+  it('falls back to desktop when the breakpoint has nothing authored', () => {
+    const stored = { desktop: [{ label: 'Instalment table' }] };
+    expect(readResponsiveArray(stored, 'mobile')).toHaveLength(1);
+  });
+
+  it('returns the same empty array every time nothing is stored', () => {
+    const first = readResponsiveArray(undefined);
+    const second = readResponsiveArray(null);
+
+    expect(first).toBe(second);
+    expect(first).toBe(EMPTY_RESPONSIVE_ARRAY);
+    expect(first).toHaveLength(0);
+  });
+
+  it('returns the shared empty for values that are not lists', () => {
+    expect(readResponsiveArray('two items')).toBe(EMPTY_RESPONSIVE_ARRAY);
+    expect(readResponsiveArray(3)).toBe(EMPTY_RESPONSIVE_ARRAY);
+    expect(readResponsiveArray(true)).toBe(EMPTY_RESPONSIVE_ARRAY);
+    // A per-breakpoint object whose bucket is not a list is still "no list".
+    expect(readResponsiveArray({ desktop: 'nope' })).toBe(
+      EMPTY_RESPONSIVE_ARRAY
+    );
+    expect(readResponsiveArray({ somethingElse: [1] })).toBe(
+      EMPTY_RESPONSIVE_ARRAY
+    );
+  });
+
+  it('is frozen, so a caller cannot poison the next reader', () => {
+    expect(() => readResponsiveArray<number>(undefined).push(1)).toThrow();
+  });
+
+  it('answers hasResponsiveArray per breakpoint', () => {
+    const stored = { desktop: [{ label: 'Gift wrap' }], mobile: [] };
+
+    expect(hasResponsiveArray(stored, 'desktop')).toBe(true);
+    expect(hasResponsiveArray(stored, 'mobile')).toBe(false);
+    expect(hasResponsiveArray(undefined)).toBe(false);
+  });
+});

package/src/blocks/__tests__/social-glyphs.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  PLATFORM_LABELS,
+  SOCIAL_GLYPHS,
+  platformLabel
+} from '../social-glyphs';
+import SocialLinksBlock from '../social-links-block';
+
+/**
+ * The table moved out of `social-links-block` so more than one renderer can
+ * draw a platform mark. These pin the move: the same 19 keys, the same labels,
+ * and the block still drawing the glyph it drew before.
+ */
+const EXPECTED_PLATFORMS = [
+  'facebook',
+  'instagram',
+  'twitter',
+  'youtube',
+  'linkedin',
+  'tiktok',
+  'pinterest',
+  'whatsapp',
+  'telegram',
+  'discord',
+  'snapchat',
+  'reddit',
+  'twitch',
+  'spotify',
+  'apple',
+  'google',
+  'email',
+  'phone',
+  'globe'
+];
+
+describe('social glyph table', () => {
+  it('carries every platform the picker stores, and nothing else', () => {
+    expect(Object.keys(SOCIAL_GLYPHS).sort()).toEqual(
+      [...EXPECTED_PLATFORMS].sort()
+    );
+  });
+
+  it('keeps the hand-written labels and title-cases the rest', () => {
+    expect(PLATFORM_LABELS.twitter).toBe('Twitter / X');
+    expect(platformLabel('twitter')).toBe('Twitter / X');
+    expect(platformLabel('globe')).toBe('Website');
+    expect(platformLabel('facebook')).toBe('Facebook');
+    expect(platformLabel('')).toBe('Link');
+  });
+});
+
+const socialProps = (items: unknown[]) =>
+  ({
+    block: {
+      id: 'b',
+      type: 'social-links',
+      label: 'Social',
+      value: '',
+      properties: { items },
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop'
+  } as never);
+
+describe('social links block after the table moved', () => {
+  it('still draws the glyph for a stored entry', () => {
+    const { container } = render(
+      <SocialLinksBlock
+        {...socialProps([
+          { icon: 'facebook', link: 'https://facebook.com/lulu' }
+        ])}
+      />
+    );
+
+    const link = container.querySelector('[data-social-link="facebook"]');
+    expect(link).not.toBeNull();
+    expect(link!.getAttribute('aria-label')).toBe('Facebook');
+    expect(link!.querySelector('svg path')).not.toBeNull();
+  });
+
+  it('falls back to the globe glyph for an unknown platform', () => {
+    const { container } = render(
+      <SocialLinksBlock
+        {...socialProps([{ icon: 'myspace', link: 'https://example.com' }])}
+      />
+    );
+
+    const link = container.querySelector('[data-social-link="myspace"]');
+    expect(link).not.toBeNull();
+    // The globe is three shapes; an unknown key that resolved to nothing would
+    // have drawn an empty <svg>.
+    expect(link!.querySelectorAll('svg > *').length).toBe(3);
+  });
+
+  it('draws the designer placeholder when there are no entries', () => {
+    const { container } = render(
+      <SocialLinksBlock {...socialProps([])} isDesigner />
+    );
+    expect(container.querySelector('[data-social-links]')).not.toBeNull();
+    expect(container.textContent).toContain('Social links');
+  });
+});