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

package/src/blocks/__tests__/hover-showcase-item-block.test.tsx

@@ -0,0 +1,315 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+// The recursive ThemeBlock is stubbed with a countable marker, the way
+// group-block.test.tsx does it. `hover-showcase-section` renders its children
+// through the same module, so one mock serves both halves of the parity test.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="child" data-id={block.id} />
+  )
+}));
+
+import HoverShowcaseItemBlock from '../hover-showcase-item-block';
+import HoverShowcaseSection from '../../sections/hover-showcase-section';
+
+/** The image the descriptor's `getDefaultValue` drops inside every new item. */
+const showcaseImage = {
+  id: 'img-1',
+  type: 'image',
+  label: 'Showcase Image',
+  value: {
+    desktop: 'https://placehold.co/800x600',
+    mobile: 'https://placehold.co/800x600'
+  },
+  properties: { alt: { desktop: 'Showcase Image' } },
+  styles: { width: { desktop: '100%' } },
+  order: 0,
+  hidden: false
+};
+
+/**
+ * A stored item exactly as `getDefaultHoverShowcaseItemBlockValue()` seeds it:
+ * localetext keys held as BREAKPOINT buckets, an empty `link`, one image child.
+ */
+const storedItem = (over: Record<string, unknown> = {}) => ({
+  id: 'item-1',
+  type: 'hover-showcase-item',
+  label: 'Hover Showcase Item',
+  value: '',
+  properties: {
+    title: { desktop: 'Autumn Knitwear', mobile: 'Autumn Knitwear' },
+    subtitle: {
+      desktop: 'Merino and lambswool, new in',
+      mobile: 'Merino and lambswool, new in'
+    },
+    link: ''
+  },
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [showcaseImage],
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: storedItem(),
+    placeholderId: 'header',
+    sectionId: 'sec-1',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...over
+  } as never);
+
+const title = (container: HTMLElement) =>
+  container.querySelector('[data-hover-showcase-title]');
+const subtitle = (container: HTMLElement) =>
+  container.querySelector('[data-hover-showcase-subtitle]');
+const link = (container: HTMLElement) =>
+  container.querySelector('[data-hover-showcase-link]');
+
+describe('hover showcase item — a realistic stored block', () => {
+  it('draws the title, the subtitle and the media inside it', () => {
+    const { container } = render(<HoverShowcaseItemBlock {...props()} />);
+
+    expect(title(container)!.tagName).toBe('H3');
+    expect(title(container)!.textContent).toBe('Autumn Knitwear');
+    expect(subtitle(container)!.textContent).toBe(
+      'Merino and lambswool, new in'
+    );
+    expect(container.querySelector('[data-testid="child"]')).not.toBeNull();
+  });
+
+  it('stamps the parts a follow-up styles through', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({ block: storedItem({ styles: { link: '/knitwear' } }) })}
+      />
+    );
+
+    expect(title(container)!.getAttribute('data-part')).toBe('title');
+    expect(subtitle(container)!.getAttribute('data-part')).toBe('subtitle');
+    expect(link(container)!.getAttribute('data-part')).toBe('link');
+  });
+
+  it('adds no box of its own, so the authored layout has more than one child', () => {
+    const { container } = render(<HoverShowcaseItemBlock {...props()} />);
+
+    // title, subtitle, image — siblings. A wrapper here would make the
+    // merchant's display/gap on the item lay out exactly one flex item.
+    expect(Array.from(container.children).map((el) => el.tagName)).toEqual([
+      'H3',
+      'P',
+      'DIV'
+    ]);
+  });
+
+  it('resolves a localetext value stored as a locale map', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({
+            properties: {
+              title: { 'en-us': 'Autumn Knitwear', 'tr-tr': 'Sonbahar Triko' },
+              subtitle: '',
+              link: ''
+            }
+          })
+        })}
+      />
+    );
+
+    expect(title(container)!.textContent).toBe('Autumn Knitwear');
+  });
+});
+
+describe('hover showcase item — the two places one value is stored', () => {
+  /**
+   * The descriptor declares title/subtitle/link without `target: 'property'`,
+   * so the panel writes them into `styles` while `getDefaultValue` seeds them
+   * into `properties`. The seeded `link` is an EMPTY STRING, which is why the
+   * fallback cannot be a `??` chain: '' is not nullish and would shadow the URL
+   * the merchant actually typed.
+   */
+  it('reads the URL the panel wrote into styles past the empty seeded property', () => {
+    const block = storedItem({ styles: { link: '/collections/knitwear' } });
+    expect(block.properties.link).toBe('');
+
+    const { container } = render(<HoverShowcaseItemBlock {...props({ block })} />);
+
+    expect(link(container)!.getAttribute('href')).toBe('/collections/knitwear');
+    // Only the title is linked, matching the section.
+    expect(link(container)!.querySelector('h3')).not.toBeNull();
+    expect(subtitle(container)!.closest('a')).toBeNull();
+  });
+
+  it('lets a non-empty property win over a stale styles value', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({ styles: { title: 'Typed before the fix' } })
+        })}
+      />
+    );
+
+    expect(title(container)!.textContent).toBe('Autumn Knitwear');
+  });
+
+  it('does not follow the link in the designer', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({ styles: { link: '/collections/knitwear' } }),
+          isDesigner: true
+        })}
+      />
+    );
+
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true });
+    fireEvent(link(container)!, event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+});
+
+describe('hover showcase item — the two font sizes that are not CSS', () => {
+  it('inlines an authored title/subtitle font size, which no stylesheet can', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({
+            styles: {
+              'title-font-size': { desktop: '48px', mobile: '28px' },
+              'subtitle-font-size': '18px'
+            }
+          })
+        })}
+      />
+    );
+
+    expect((title(container) as HTMLElement).style.fontSize).toBe('48px');
+    expect((subtitle(container) as HTMLElement).style.fontSize).toBe('18px');
+  });
+
+  it('resolves them per breakpoint', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({
+            styles: { 'title-font-size': { desktop: '48px', mobile: '28px' } }
+          }),
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+
+    expect((title(container) as HTMLElement).style.fontSize).toBe('28px');
+  });
+
+  it('inlines no size when neither was authored, so a real font-size still wins', () => {
+    const { container } = render(<HoverShowcaseItemBlock {...props()} />);
+
+    expect((title(container) as HTMLElement).style.fontSize).toBe('');
+    expect((subtitle(container) as HTMLElement).style.fontSize).toBe('');
+    // The only thing inlined on the heading is the user-agent margin reset.
+    expect((title(container) as HTMLElement).getAttribute('style')).toBe(
+      'margin: 0px;'
+    );
+  });
+
+  it('reads nothing else off styles — padding stays with the wrapper stylesheet', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({
+            styles: { 'padding-top': 40, 'padding-bottom': 40, color: '#111' }
+          })
+        })}
+      />
+    );
+
+    const heading = title(container) as HTMLElement;
+    expect(heading.style.paddingTop).toBe('');
+    expect(heading.style.color).toBe('');
+  });
+});
+
+describe('hover showcase item — nothing to draw', () => {
+  const emptyBlock = storedItem({
+    properties: { title: '', subtitle: '', link: '' },
+    blocks: []
+  });
+
+  it('draws the labelled designer band instead of inventing a title', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({ block: emptyBlock, isDesigner: true })}
+      />
+    );
+
+    expect(container.textContent).toContain('Hover showcase item');
+    // The section's `Item ${index + 1}` needs a loop index a lone block has not
+    // got, and the layer-tree label must never ship as a shopper-facing heading.
+    expect(container.textContent).not.toContain('Item 1');
+    expect(container.textContent).not.toContain('Hover Showcase Item');
+    expect(
+      container.querySelector('[data-hover-showcase-item]')
+    ).not.toBeNull();
+  });
+
+  it('draws nothing at all on the storefront', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock {...props({ block: emptyBlock })} />
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('still draws when only the media is authored', () => {
+    const { container } = render(
+      <HoverShowcaseItemBlock
+        {...props({
+          block: storedItem({ properties: { title: '', subtitle: '', link: '' } })
+        })}
+      />
+    );
+
+    expect(title(container)).toBeNull();
+    expect(container.querySelector('[data-testid="child"]')).not.toBeNull();
+  });
+});
+
+describe('hover showcase item — parity with the section that draws it by hand', () => {
+  /**
+   * `hover-showcase-section.tsx` filters its children by type (:122) and draws
+   * them itself, never through ThemeBlock. The same stored block therefore has
+   * two renderers, and this pins that they read the same text out of it.
+   */
+  const section = {
+    id: 'sec-1',
+    type: 'hover-showcase',
+    name: 'Hover Showcase',
+    label: 'Hover Showcase',
+    properties: {},
+    styles: {},
+    blocks: [storedItem()],
+    order: 0,
+    hidden: false
+  };
+
+  it('reads the same title and subtitle the section reads', () => {
+    const { container: standalone } = render(
+      <HoverShowcaseItemBlock {...props()} />
+    );
+    const { container: inSection } = render(
+      <HoverShowcaseSection section={section as never} />
+    );
+
+    const headings = Array.from(inSection.querySelectorAll('h3')).map(
+      (el) => el.textContent
+    );
+    expect(headings).toContain(title(standalone)!.textContent);
+    expect(inSection.textContent).toContain(subtitle(standalone)!.textContent);
+  });
+});

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

@@ -0,0 +1,231 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import IconButtonBlock from '../icon-button-block';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+
+/**
+ * A block as the editor actually stores it: the descriptor's `getDefaultValue`
+ * seeds every property AND every style as a per-breakpoint bucket, and the
+ * shared action properties are appended to the same `properties` object.
+ */
+const storedBlock = (over: Record<string, unknown> = {}) => ({
+  id: 'ib-1',
+  type: 'icon-button',
+  label: 'Icon Button',
+  properties: {
+    icon: { desktop: 'basket' },
+    iconSize: { desktop: '28' },
+    htmlId: '',
+    actionType: 'none',
+    ...((over.properties as Record<string, unknown>) ?? {})
+  },
+  styles: {
+    color: { desktop: 'currentColor' },
+    'background-color': { desktop: 'transparent' },
+    'margin-top': { desktop: '0px' },
+    'margin-right': { desktop: '0px' },
+    'margin-bottom': { desktop: '0px' },
+    'margin-left': { desktop: '0px' }
+  },
+  order: 0,
+  hidden: false,
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: storedBlock(),
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('IconButtonBlock — drawing', () => {
+  it('draws the catalogue glyph at the authored size from a stored block', () => {
+    const { container } = render(<IconButtonBlock {...props()} />);
+
+    const svg = container.querySelector('svg[data-icon-button]');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('width')).toBe('28');
+    expect(svg!.querySelector('path')).not.toBeNull();
+  });
+
+  it('reads icon and size from the breakpoint bucket the panel writes', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({
+            properties: {
+              icon: { desktop: 'basket', mobile: 'search' },
+              iconSize: { desktop: '28', mobile: '16' }
+            }
+          }),
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+
+    const svg = container.querySelector('svg[data-icon-button]');
+    expect(svg!.getAttribute('width')).toBe('16');
+    // `search` is the only catalogue glyph drawn from a circle plus a line.
+    expect(svg!.querySelector('circle')).not.toBeNull();
+    expect(svg!.getAttribute('aria-label')).toBe('Search');
+  });
+
+  it('draws an uploaded brand mark from theme settings instead of the glyph', () => {
+    const { container } = render(
+      <ThemeSettingsProvider
+        value={{ icons: { basket: '<svg data-brand="1"><rect /></svg>' } }}
+      >
+        <IconButtonBlock {...props()} />
+      </ThemeSettingsProvider>
+    );
+
+    expect(container.querySelector('svg[data-brand="1"]')).not.toBeNull();
+  });
+
+  it('sizes uploaded SVG markup through a rule scoped to this block', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({
+            properties: {
+              icon: { desktop: '<svg viewBox="0 0 24 24"><rect /></svg>' },
+              iconSize: { desktop: '32' }
+            }
+          })
+        })}
+      />
+    );
+
+    expect(container.querySelector('svg rect')).not.toBeNull();
+    const css = container.querySelector('style')!.textContent!;
+    expect(css).toBe(
+      '[data-icon-button-id="ib-1"] svg{width:32px;height:32px;}'
+    );
+  });
+
+  it('draws a stored media path through the image component', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({
+            label: 'Open basket',
+            properties: {
+              icon: { desktop: '/icons/basket.svg' },
+              iconSize: { desktop: '24' }
+            }
+          })
+        })}
+      />
+    );
+
+    const img = container.querySelector('img[data-icon-button]');
+    expect(img!.getAttribute('src')).toBe('/icons/basket.svg');
+    expect(img!.getAttribute('alt')).toBe('Open basket');
+  });
+});
+
+describe('IconButtonBlock — accessible name', () => {
+  it('uses the layer-tree name once the designer has renamed the block', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({ block: storedBlock({ label: 'Open basket' }) })}
+      />
+    );
+
+    const svg = container.querySelector('svg[data-icon-button]')!;
+    expect(svg.getAttribute('role')).toBe('img');
+    expect(svg.getAttribute('aria-label')).toBe('Open basket');
+    expect(svg.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('falls back to the picked icon key while the label is the descriptor default', () => {
+    const { container } = render(<IconButtonBlock {...props()} />);
+
+    expect(
+      container
+        .querySelector('svg[data-icon-button]')!
+        .getAttribute('aria-label')
+    ).toBe('Basket');
+  });
+
+  it('hides an unnamed icon from the accessibility tree rather than announcing nothing', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({
+            label: 'Icon Button',
+            properties: { icon: { desktop: '<svg><rect /></svg>' } }
+          })
+        })}
+      />
+    );
+
+    const host = container.querySelector('[data-icon-button]')!;
+    expect(host.getAttribute('aria-hidden')).toBe('true');
+    expect(host.getAttribute('aria-label')).toBeNull();
+  });
+});
+
+describe('IconButtonBlock — empty state', () => {
+  it('shows a labelled band in the designer when no icon is picked', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({ properties: { icon: { desktop: '' } } }),
+          isDesigner: true
+        })}
+      />
+    );
+
+    expect(container.textContent).toContain('Icon button (no icon)');
+    expect(
+      container.querySelector('[data-theme-block-placeholder]')
+    ).not.toBeNull();
+  });
+
+  it('renders nothing for a shopper when no icon is picked', () => {
+    const { container } = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({ properties: { icon: { desktop: '' } } }),
+          isDesigner: false
+        })}
+      />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe('IconButtonBlock — the five centrally read properties', () => {
+  it('draws the same markup with an action authored: the wrapper owns the click', () => {
+    const plain = render(<IconButtonBlock {...props()} />).container.innerHTML;
+
+    const withAction = render(
+      <IconButtonBlock
+        {...props({
+          block: storedBlock({
+            properties: {
+              icon: { desktop: 'basket' },
+              iconSize: { desktop: '28' },
+              htmlId: 'basket-trigger',
+              actionType: 'open-modal',
+              actionTarget: 'mini-basket',
+              actionAudience: 'all'
+            }
+          })
+        })}
+      />
+    ).container.innerHTML;
+
+    expect(withAction).toBe(plain);
+    // No anchor and no button of its own, which is what keeps the type out of
+    // NATIVELY_INTERACTIVE_BLOCK_TYPES.
+    expect(withAction).not.toContain('<a ');
+    expect(withAction).not.toContain('<button');
+  });
+});