@akinon/pz-theme 2.0.30-rc.0 → 2.0.31-beta.0

package/src/sections/__tests__/coupon-banner-section.test.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Mock the child block renderer so we can observe which blocks land in which
+// role-slot and inspect the (possibly transformed) value handed to it.
+// The default-export shape is what CouponBannerSection imports.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string; value?: unknown } }) => (
+    <div data-testid="tb" data-id={block.id}>
+      {typeof block.value === 'string' ? block.value : ''}
+    </div>
+  )
+}));
+
+import CouponBannerSection from '../coupon-banner-section';
+
+type AnyBlock = Record<string, unknown>;
+
+const makeBlock = (overrides: AnyBlock): AnyBlock => ({
+  id: 'block',
+  type: 'text',
+  label: 'Block',
+  order: 0,
+  hidden: false,
+  properties: {},
+  styles: {},
+  ...overrides
+});
+
+const makeSection = (overrides: AnyBlock = {}): AnyBlock => ({
+  id: 'sec',
+  type: 'coupon-banner',
+  blocks: [],
+  properties: {},
+  styles: {},
+  ...overrides
+});
+
+const renderSection = (section: AnyBlock, props: AnyBlock = {}) =>
+  render(
+    <CouponBannerSection
+      section={section as never}
+      currentBreakpoint="desktop"
+      {...(props as never)}
+    />
+  );
+
+describe('CouponBannerSection — role resolution', () => {
+  it('routes a couponBannerRole=coupon-label block to the label slot and drops the default fallback', () => {
+    const section = makeSection({
+      blocks: [
+        makeBlock({ id: 'content-1', type: 'text', order: 1 }),
+        makeBlock({
+          id: 'label-1',
+          type: 'text',
+          order: 2,
+          properties: { couponBannerRole: 'coupon-label' }
+        })
+      ]
+    });
+
+    renderSection(section);
+
+    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    // label block rendered through ThemeBlock (role slot) ...
+    expect(ids).toContain('label-1');
+    // ... and the plain content block kept in the content column.
+    expect(ids).toContain('content-1');
+    // The hard-coded "Coupon code" fallback is suppressed when a label block exists.
+    expect(screen.queryByText('Coupon code')).not.toBeInTheDocument();
+  });
+
+  it('renders the default "Coupon code" fallback when no coupon-label role block is present', () => {
+    const section = makeSection({
+      blocks: [makeBlock({ id: 'content-1', type: 'text', order: 1 })]
+    });
+
+    renderSection(section);
+
+    expect(screen.getByText('Coupon code')).toBeInTheDocument();
+  });
+
+  it('resolves role from a responsive (per-breakpoint) couponBannerRole value', () => {
+    const section = makeSection({
+      blocks: [
+        makeBlock({
+          id: 'note-1',
+          type: 'text',
+          order: 1,
+          // responsive object resolved via getResponsiveValue
+          properties: { couponBannerRole: { desktop: 'coupon-note-text' } },
+          value: 'plain note'
+        })
+      ]
+    });
+
+    renderSection(section);
+
+    // A note-role block is rendered through ThemeBlock with an escaped HTML value,
+    // so its data-id must be present (it is NOT treated as a generic content block).
+    const note = screen
+      .getAllByTestId('tb')
+      .find((el) => el.getAttribute('data-id') === 'note-1');
+    expect(note).toBeTruthy();
+  });
+});
+
+describe('CouponBannerSection — border-radius is respected (BUG-6 fix)', () => {
+  const getBanner = () =>
+    document.querySelector('.coupon-banner') as HTMLElement;
+
+  it('keeps a 12px border-radius (previously collapsed to 0px)', () => {
+    renderSection(makeSection({ styles: { 'border-radius': '12px' } }));
+    expect(getBanner().style.borderRadius).toBe('12px');
+  });
+
+  it('keeps a non-12 border-radius untouched (8px control case)', () => {
+    renderSection(makeSection({ styles: { 'border-radius': '8px' } }));
+    expect(getBanner().style.borderRadius).toBe('8px');
+  });
+
+  it('keeps a 12rem border-radius (previously collapsed to 0px)', () => {
+    renderSection(makeSection({ styles: { 'border-radius': '12rem' } }));
+    expect(getBanner().style.borderRadius).toBe('12rem');
+  });
+});
+
+describe('CouponBannerSection — escapeHtml on injected coupon text', () => {
+  it('escapes HTML in the coupon code before handing it to the code-text block (no raw tags)', () => {
+    const section = makeSection({
+      properties: {
+        'coupon-code': '<img src=x onerror="alert(1)">'
+      },
+      blocks: [
+        makeBlock({
+          id: 'codetext',
+          type: 'text',
+          order: 1,
+          properties: { couponBannerRole: 'coupon-code-text' }
+        })
+      ]
+    });
+
+    const { container } = renderSection(section);
+
+    const codeText = screen
+      .getAllByTestId('tb')
+      .find((el) => el.getAttribute('data-id') === 'codetext') as HTMLElement;
+
+    // No raw element was injected anywhere (escaped, not parsed as HTML).
+    expect(container.querySelector('img')).toBeNull();
+    // The dangerous markup survives only in escaped form, wrapped in <p>.
+    expect(codeText.textContent).toContain('&lt;img');
+    expect(codeText.textContent).toContain('&gt;');
+    expect(codeText.textContent).toContain('&quot;');
+    // The literal opening tag must NOT appear unescaped.
+    expect(codeText.textContent).not.toContain('<img');
+  });
+});
+
+describe('CouponBannerSection — copy button', () => {
+  const originalClipboard = navigator.clipboard;
+
+  afterEach(() => {
+    Object.defineProperty(navigator, 'clipboard', {
+      value: originalClipboard,
+      configurable: true
+    });
+  });
+
+  it('copies the coupon code to the clipboard and swaps the button label', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true
+    });
+
+    renderSection(makeSection());
+
+    const button = screen.getByRole('button', { name: 'Copy Code' });
+    fireEvent.click(button);
+
+    // default coupon code is SAVE20
+    await screen.findByText('Copied');
+    expect(writeText).toHaveBeenCalledWith('SAVE20');
+  });
+});

package/src/sections/__tests__/divider-section.test.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DividerSection from '../divider-section';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+
+// DividerSection renders a <div> container with a single <span /> divider.
+// It uses the REAL ../utils (getResponsiveValue / resolveThemeCssVariables).
+// No ThemeBlock / ThemeSection child rendering happens, so nothing to mock there.
+
+const renderDivider = (section: any, props: any = {}, themeSettings: any = null) =>
+  render(
+    <ThemeSettingsProvider value={themeSettings}>
+      <DividerSection section={section} {...props} />
+    </ThemeSettingsProvider>
+  );
+
+const getSpan = (container: HTMLElement) =>
+  container.querySelector('span') as HTMLSpanElement;
+
+describe('DividerSection', () => {
+  describe('default styles', () => {
+    it('renders a div containing a single block span', () => {
+      const { container } = renderDivider({ id: 's1', styles: {} });
+      const div = container.querySelector('div') as HTMLDivElement;
+      const span = getSpan(container);
+      expect(div).toBeInTheDocument();
+      expect(span).toBeInTheDocument();
+      expect(span.style.display).toBe('block');
+      expect(div.style.position).toBe('relative');
+    });
+
+    it('defaults height to 1px when not provided', () => {
+      const { container } = renderDivider({ id: 's2', styles: {} });
+      expect(getSpan(container).style.height).toBe('1px');
+    });
+
+    it('defaults backgroundColor to #e0e0e0 when not provided', () => {
+      const { container } = renderDivider({ id: 's3', styles: {} });
+      expect(getSpan(container).style.backgroundColor).toBe('rgb(224, 224, 224)');
+    });
+
+    it('defaults width to 100% when not provided', () => {
+      const { container } = renderDivider({ id: 's4', styles: {} });
+      expect(getSpan(container).style.width).toBe('100%');
+    });
+
+    it('uses defaults when section.styles is missing entirely', () => {
+      const { container } = renderDivider({ id: 's5' });
+      const span = getSpan(container);
+      expect(span.style.height).toBe('1px');
+      expect(span.style.backgroundColor).toBe('rgb(224, 224, 224)');
+      expect(span.style.width).toBe('100%');
+    });
+  });
+
+  describe('explicit (non-responsive) styles', () => {
+    it('applies plain scalar height / background-color / width values', () => {
+      const { container } = renderDivider({
+        id: 's6',
+        styles: {
+          height: '4px',
+          'background-color': '#ff0000',
+          width: '50%'
+        }
+      });
+      const span = getSpan(container);
+      expect(span.style.height).toBe('4px');
+      expect(span.style.backgroundColor).toBe('rgb(255, 0, 0)');
+      expect(span.style.width).toBe('50%');
+    });
+
+    it('applies container padding from section styles', () => {
+      const { container } = renderDivider({
+        id: 's7',
+        styles: {
+          'padding-top': '10px',
+          'padding-right': '20px',
+          'padding-bottom': '30px',
+          'padding-left': '40px'
+        }
+      });
+      const div = container.querySelector('div') as HTMLDivElement;
+      expect(div.style.paddingTop).toBe('10px');
+      expect(div.style.paddingRight).toBe('20px');
+      expect(div.style.paddingBottom).toBe('30px');
+      expect(div.style.paddingLeft).toBe('40px');
+    });
+  });
+
+  describe('resolveThemeCssVariables', () => {
+    it('resolves a theme CSS variable to the mapped theme setting color', () => {
+      const { container } = renderDivider(
+        { id: 's8', styles: { 'background-color': 'var(--theme-primary)' } },
+        {},
+        { primaryColor: '#123456' }
+      );
+      expect(getSpan(container).style.backgroundColor).toBe('rgb(18, 52, 86)');
+    });
+
+    it('falls back to the var() fallback value when no theme setting matches', () => {
+      const { container } = renderDivider(
+        { id: 's9', styles: { 'background-color': 'var(--unknown-var, #00ff00)' } },
+        {},
+        {}
+      );
+      expect(getSpan(container).style.backgroundColor).toBe('rgb(0, 255, 0)');
+    });
+
+    it('leaves a non-variable color untouched', () => {
+      const { container } = renderDivider(
+        { id: 's10', styles: { 'background-color': '#abcdef' } },
+        {},
+        { primaryColor: '#123456' }
+      );
+      expect(getSpan(container).style.backgroundColor).toBe('rgb(171, 205, 239)');
+    });
+  });
+
+  describe('responsive height', () => {
+    it('picks the breakpoint-specific height when currentBreakpoint is mobile', () => {
+      const { container } = renderDivider(
+        {
+          id: 's11',
+          styles: { height: { desktop: '8px', mobile: '2px' } }
+        },
+        { currentBreakpoint: 'mobile' }
+      );
+      expect(getSpan(container).style.height).toBe('2px');
+    });
+
+    it('uses the desktop value when no entry exists for the breakpoint', () => {
+      const { container } = renderDivider(
+        {
+          id: 's12',
+          styles: { height: { desktop: '8px' } }
+        },
+        { currentBreakpoint: 'tablet' }
+      );
+      expect(getSpan(container).style.height).toBe('8px');
+    });
+
+    it('defaults to desktop breakpoint height when currentBreakpoint prop omitted', () => {
+      const { container } = renderDivider({
+        id: 's13',
+        styles: { height: { desktop: '6px', mobile: '2px' } }
+      });
+      expect(getSpan(container).style.height).toBe('6px');
+    });
+
+    it('falls back to 1px when responsive object has no matching or desktop key', () => {
+      const { container } = renderDivider(
+        {
+          id: 's14',
+          styles: { height: { mobile: '2px' } }
+        },
+        { currentBreakpoint: 'tablet' }
+      );
+      expect(getSpan(container).style.height).toBe('1px');
+    });
+  });
+});

package/src/sections/__tests__/hover-showcase-section.test.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock (default export) with a countable marker.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import HoverShowcaseSection from '../hover-showcase-section';
+
+const item = (
+  id: string,
+  title: string,
+  over: Record<string, unknown> = {}
+) => ({
+  id,
+  type: 'hover-showcase-item',
+  label: title,
+  value: '',
+  properties: { title },
+  styles: {},
+  order: 0,
+  hidden: false,
+  ...over
+});
+
+const section = (over: Record<string, unknown> = {}) =>
+  ({
+    id: 'sec',
+    type: 'hover-showcase',
+    label: 'sec',
+    styles: {},
+    blocks: [],
+    ...over
+  } as any);
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    section: section(),
+    currentBreakpoint: 'desktop',
+    placeholderId: 'ph',
+    isDesigner: false,
+    selectedBlockId: null,
+    ...over
+  } as any);
+
+const markers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="tb"]'));
+
+describe('HoverShowcaseSection — type filter', () => {
+  it('only renders blocks of type "hover-showcase-item" (ignores others)', () => {
+    const sec = section({
+      blocks: [
+        item('a', 'Alpha'),
+        { id: 'x', type: 'text', label: 'Gamma', properties: { title: 'Gamma' }, styles: {} },
+        item('b', 'Beta')
+      ]
+    });
+    render(<HoverShowcaseSection {...props({ section: sec, isDesigner: true })} />);
+
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+    expect(screen.queryByText('Gamma')).not.toBeInTheDocument();
+  });
+});
+
+describe('HoverShowcaseSection — empty state', () => {
+  it('shows the designer hint when there are no item blocks and isDesigner', () => {
+    const { container } = render(
+      <HoverShowcaseSection {...props({ isDesigner: true })} />
+    );
+    expect(container.textContent).toContain(
+      'Add Hover Showcase Item blocks to see them here.'
+    );
+  });
+
+  it('renders nothing (null) for non-designer when empty', () => {
+    const { container } = render(
+      <HoverShowcaseSection {...props({ isDesigner: false })} />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('ignores blocks that are not items (empty -> hint) in designer', () => {
+    const sec = section({
+      blocks: [{ id: 'x', type: 'text', label: 'X', properties: {}, styles: {} }]
+    });
+    const { container } = render(
+      <HoverShowcaseSection {...props({ section: sec, isDesigner: true })} />
+    );
+    expect(container.textContent).toContain(
+      'Add Hover Showcase Item blocks to see them here.'
+    );
+  });
+});
+
+describe('HoverShowcaseSection — active item (desktop mouseEnter)', () => {
+  it('first item is active by default; mouseEnter switches the active item', () => {
+    const sec = section({ blocks: [item('a', 'Alpha'), item('b', 'Beta')] });
+    render(
+      <HoverShowcaseSection
+        {...props({ section: sec, isDesigner: true, currentBreakpoint: 'desktop' })}
+      />
+    );
+
+    const alpha = screen.getByText('Alpha') as HTMLElement;
+    const beta = screen.getByText('Beta') as HTMLElement;
+
+    // Index 0 (Alpha) is active by default.
+    const activeColor = alpha.style.color;
+    expect(beta.style.color).not.toBe(activeColor);
+
+    // The onMouseEnter handler sits on the h3's parent wrapper div.
+    fireEvent.mouseEnter(beta.parentElement as HTMLElement);
+
+    expect(beta.style.color).toBe(activeColor);
+    expect(alpha.style.color).not.toBe(activeColor);
+  });
+});
+
+describe('HoverShowcaseSection — active item (mobile click)', () => {
+  it('click on an item activates it (accordion opens)', () => {
+    const sec = section({
+      styles: { 'mobile-layout': 'accordion' },
+      blocks: [
+        item('a', 'Alpha', { blocks: [{ id: 'ca', type: 'text' }] }),
+        item('b', 'Beta', { blocks: [{ id: 'cb', type: 'text' }] })
+      ]
+    });
+    const { container } = render(
+      <HoverShowcaseSection
+        {...props({ section: sec, isDesigner: true, currentBreakpoint: 'mobile' })}
+      />
+    );
+
+    const accordionOf = (childId: string) =>
+      container
+        .querySelector(`[data-id="${childId}"]`)!
+        .closest('.overflow-hidden') as HTMLElement;
+
+    // Index 0 (Alpha) active by default -> open; Beta closed.
+    expect(accordionOf('ca').className).toContain('max-h-[600px]');
+    expect(accordionOf('cb').className).toContain('max-h-0');
+
+    // Click Beta's title wrapper (onClick handler).
+    fireEvent.click(screen.getByText('Beta').parentElement as HTMLElement);
+
+    expect(accordionOf('cb').className).toContain('max-h-[600px]');
+    expect(accordionOf('ca').className).toContain('max-h-0');
+  });
+});
+
+describe('HoverShowcaseSection — max-width class', () => {
+  const outer = (container: HTMLElement) => container.firstChild as HTMLElement;
+
+  it('uses max-w-4xl for narrow max-width', () => {
+    const sec = section({
+      styles: { 'max-width': 'narrow' },
+      blocks: [item('a', 'Alpha')]
+    });
+    const { container } = render(
+      <HoverShowcaseSection {...props({ section: sec, isDesigner: true })} />
+    );
+    expect(outer(container).className).toContain('max-w-4xl');
+  });
+
+  it('uses max-w-7xl for normal max-width (default)', () => {
+    const sec = section({
+      styles: { 'max-width': 'normal' },
+      blocks: [item('a', 'Alpha')]
+    });
+    const { container } = render(
+      <HoverShowcaseSection {...props({ section: sec, isDesigner: true })} />
+    );
+    expect(outer(container).className).toContain('max-w-7xl');
+  });
+
+  it('applies no max-width class for "full"', () => {
+    const sec = section({
+      styles: { 'max-width': 'full' },
+      blocks: [item('a', 'Alpha')]
+    });
+    const { container } = render(
+      <HoverShowcaseSection {...props({ section: sec, isDesigner: true })} />
+    );
+    const cls = outer(container).className;
+    expect(cls).not.toContain('max-w-4xl');
+    expect(cls).not.toContain('max-w-7xl');
+  });
+});

package/src/sections/__tests__/image-hotspot-section.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+// Mock ThemeBlock (default export) so we only assert this section's own logic.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string; type: string } }) => (
+    <div data-testid="tb" data-id={block.id} data-type={block.type} />
+  )
+}));
+
+import ImageHotspotSection from '../image-hotspot-section';
+import type { Section } from '../../theme-section';
+
+const makeSection = (overrides: Partial<Section> = {}): Section =>
+  ({
+    id: 'sec-1',
+    type: 'image-hotspot',
+    blocks: [],
+    styles: {},
+    properties: {},
+    ...overrides
+  } as unknown as Section);
+
+describe('ImageHotspotSection', () => {
+  it('renders the first image block and all hotspot blocks via ThemeBlock', () => {
+    const section = makeSection({
+      blocks: [
+        { id: 'img-1', type: 'image' },
+        { id: 'img-2', type: 'image' },
+        { id: 'hs-1', type: 'hotspot' },
+        { id: 'hs-2', type: 'hotspot' }
+      ] as unknown as Section['blocks']
+    });
+
+    render(<ImageHotspotSection section={section} />);
+
+    const blocks = screen.getAllByTestId('tb');
+    // first image block + 2 hotspot blocks = 3 (img-2 ignored, only find first image)
+    expect(blocks).toHaveLength(3);
+
+    const ids = blocks.map(b => b.getAttribute('data-id'));
+    expect(ids).toEqual(['img-1', 'hs-1', 'hs-2']);
+
+    expect(screen.queryByText('No Image Selected')).not.toBeInTheDocument();
+  });
+
+  it('shows "No Image Selected" placeholder when there is no image block', () => {
+    const section = makeSection({
+      blocks: [{ id: 'hs-1', type: 'hotspot' }] as unknown as Section['blocks']
+    });
+
+    render(<ImageHotspotSection section={section} />);
+
+    expect(screen.getByText('No Image Selected')).toBeInTheDocument();
+    // only the hotspot ThemeBlock should render
+    const blocks = screen.getAllByTestId('tb');
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0].getAttribute('data-id')).toBe('hs-1');
+  });
+
+  describe('max-width matrix', () => {
+    it('full -> w-full class, no inline maxWidth', () => {
+      const section = makeSection({
+        styles: { 'max-width': 'full' } as unknown as Section['styles']
+      });
+      const { container } = render(<ImageHotspotSection section={section} />);
+      const root = container.firstChild as HTMLElement;
+
+      expect(root).toHaveClass('w-full');
+      expect(root.style.maxWidth).toBe('');
+      // hasMaxWidth is false for full
+      expect(root).not.toHaveClass('max-w-4xl');
+      expect(root).not.toHaveClass('max-w-7xl');
+    });
+
+    it('none -> inline maxWidth "none", no max-width class', () => {
+      const section = makeSection({
+        styles: { 'max-width': 'none' } as unknown as Section['styles']
+      });
+      const { container } = render(<ImageHotspotSection section={section} />);
+      const root = container.firstChild as HTMLElement;
+
+      expect(root.style.maxWidth).toBe('none');
+      expect(root).not.toHaveClass('w-full');
+      expect(root).not.toHaveClass('max-w-4xl');
+      expect(root).not.toHaveClass('max-w-7xl');
+    });
+
+    it('narrow -> max-w-4xl', () => {
+      const section = makeSection({
+        styles: { 'max-width': 'narrow' } as unknown as Section['styles']
+      });
+      const { container } = render(<ImageHotspotSection section={section} />);
+      const root = container.firstChild as HTMLElement;
+
+      expect(root).toHaveClass('max-w-4xl');
+      expect(root.style.maxWidth).toBe('');
+    });
+
+    it('default (no max-width) -> normal -> max-w-7xl', () => {
+      const section = makeSection();
+      const { container } = render(<ImageHotspotSection section={section} />);
+      const root = container.firstChild as HTMLElement;
+
+      expect(root).toHaveClass('max-w-7xl');
+      expect(root.style.maxWidth).toBe('');
+    });
+  });
+});