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

package/src/blocks/__tests__/trivial-blocks.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DividerBlock from '../divider-block';
+import TabBlock from '../tab-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'd',
+      type: 'divider',
+      label: 'd',
+      styles: {},
+      properties: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('DividerBlock', () => {
+  it('renders a span with the dangerous defaults when no styles are set', () => {
+    const { container } = render(<DividerBlock {...props()} />);
+    const span = container.querySelector('span');
+    expect(span).not.toBeNull();
+    expect(span!.style.display).toBe('block');
+    expect(span!.style.height).toBe('1px');
+    expect(span!.style.width).toBe('100%');
+    expect(span!.getAttribute('style')).toMatch(/e0e0e0|224, 224, 224/i);
+  });
+
+  it('resolves a responsive height for the active breakpoint', () => {
+    const { container } = render(
+      <DividerBlock
+        {...props({
+          block: {
+            id: 'd',
+            type: 'divider',
+            styles: { height: { desktop: '4px', mobile: '2px' } },
+            properties: {},
+            order: 0,
+            hidden: false
+          },
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+    expect(container.querySelector('span')!.style.height).toBe('2px');
+  });
+});
+
+describe('TabBlock', () => {
+  it('renders nothing (panes are rendered by TabsSection)', () => {
+    const { container } = render(<TabBlock {...props()} />);
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/blocks/__tests__/video-block.test.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import VideoBlock from '../video-block';
+
+const renderBlock = (value: any, properties?: any) =>
+  render(<VideoBlock block={{ value, properties } as any} />);
+
+describe('VideoBlock', () => {
+  describe('YouTube URLs -> iframe', () => {
+    it('renders an iframe for a youtube.com watch URL', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123'
+      );
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toBeInTheDocument();
+      expect(iframe).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/abc123'
+      );
+    });
+
+    it('renders an iframe for a youtu.be short URL', () => {
+      const { container } = renderBlock('https://youtu.be/xyz789?t=10');
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/xyz789'
+      );
+    });
+
+    it('renders an iframe for an embed URL', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/embed/embedId?foo=bar'
+      );
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/embedId'
+      );
+    });
+
+    it('falls back to placeholder when youtube videoId cannot be parsed', () => {
+      // matches "youtube.com" but no watch?v=/youtu.be/embed pattern -> videoId '' -> null
+      renderBlock('https://www.youtube.com/');
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+  });
+
+  describe('Vimeo URLs -> iframe', () => {
+    it('renders an iframe for a vimeo URL', () => {
+      const { container } = renderBlock('https://vimeo.com/123456789?h=abc');
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toHaveAttribute(
+        'src',
+        'https://player.vimeo.com/video/123456789'
+      );
+    });
+  });
+
+  describe('Direct video file -> <video>', () => {
+    it('renders a <video> for an .mp4 URL', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4');
+      const video = container.querySelector('video');
+      expect(video).toBeInTheDocument();
+      expect(video).toHaveAttribute('src', 'https://cdn.example.com/clip.mp4');
+    });
+
+    it('renders a <video> for a .webm URL', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.webm');
+      expect(container.querySelector('video')).toBeInTheDocument();
+    });
+
+    it('renders a <video> for an .ogg URL (case-insensitive .OGG)', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.OGG');
+      expect(container.querySelector('video')).toBeInTheDocument();
+    });
+  });
+
+  describe('Invalid / empty -> placeholder', () => {
+    it('shows "No video URL provided" for empty string', () => {
+      const { container } = renderBlock('');
+      expect(screen.getByText('No video URL provided')).toBeInTheDocument();
+      expect(container.querySelector('iframe')).toBeNull();
+      expect(container.querySelector('video')).toBeNull();
+    });
+
+    it('shows "Invalid video URL" for an unrecognized URL', () => {
+      renderBlock('https://example.com/not-a-video');
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+  });
+
+  describe('YouTube property flags', () => {
+    it('appends autoplay=1', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        { autoplay: true }
+      );
+      const iframe = container.querySelector('iframe');
+      expect(iframe?.getAttribute('src')).toContain('autoplay=1');
+    });
+
+    it('appends loop=1 and playlist=<videoId>', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        { loop: true }
+      );
+      const src = container.querySelector('iframe')?.getAttribute('src') || '';
+      expect(src).toContain('loop=1');
+      expect(src).toContain('playlist=abc123');
+    });
+
+    it('appends mute=1 when muted', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        { muted: true }
+      );
+      expect(
+        container.querySelector('iframe')?.getAttribute('src')
+      ).toContain('mute=1');
+    });
+
+    it('appends controls=0 only when controls === false', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        { controls: false }
+      );
+      expect(
+        container.querySelector('iframe')?.getAttribute('src')
+      ).toContain('controls=0');
+    });
+
+    it('does not append controls when controls is true', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        { controls: true }
+      );
+      expect(
+        container.querySelector('iframe')?.getAttribute('src')
+      ).not.toContain('controls');
+    });
+  });
+
+  describe('Vimeo property flags', () => {
+    it('appends autoplay=1, loop=1, muted=1, controls=0', () => {
+      const { container } = renderBlock('https://vimeo.com/123456789', {
+        autoplay: true,
+        loop: true,
+        muted: true,
+        controls: false
+      });
+      const src = container.querySelector('iframe')?.getAttribute('src') || '';
+      expect(src).toContain('autoplay=1');
+      expect(src).toContain('loop=1');
+      expect(src).toContain('muted=1');
+      expect(src).toContain('controls=0');
+    });
+  });
+
+  describe('<video> flags', () => {
+    it('defaults controls to true (controls !== false)', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4');
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video.controls).toBe(true);
+    });
+
+    it('disables controls when controls === false', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        controls: false
+      });
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video.controls).toBe(false);
+    });
+
+    it('reflects autoplay / loop / muted flags', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        autoplay: true,
+        loop: true,
+        muted: true
+      });
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video.autoplay).toBe(true);
+      expect(video.loop).toBe(true);
+      // muted is set via the `muted` prop; React reflects it on the DOM property
+      expect(video).toHaveAttribute('loop');
+      expect(video).toHaveAttribute('autoplay');
+    });
+  });
+
+  describe('non-string value (BUG-4 fix)', () => {
+    it('renders the invalid placeholder instead of crashing on a non-string value', () => {
+      renderBlock(123 as any);
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+  });
+});

package/src/blocks/counter-block.tsx

@@ -281,7 +281,7 @@ const CounterBlock = ({
 
   const renderedBlocks = cloneAndInjectCounterValues(
     block.blocks
-      .filter((b) => !b.hidden)
+      .filter((b) => (isDesigner ? true : !b.hidden))
       .sort((a, b) => (a.order || 0) - (b.order || 0)),
     values
   );

package/src/blocks/group-block.tsx

@@ -11,7 +11,7 @@ const GroupBlock = ({
   selectedBlockId,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
-  const tag = getResponsiveValue(block.properties?.tag, 'desktop', 'div');
+  const tag = getResponsiveValue(block.properties?.tag, currentBreakpoint, 'div');
   const Tag = tag as keyof React.JSX.IntrinsicElements;
   const href = tag === 'a' ? block.properties?.href : undefined;
 

package/src/blocks/icon-block.tsx

@@ -15,14 +15,19 @@ const isValidUrlValue = (value: string): boolean => {
   }
 };
 
-const IconBlock = ({ block }: BlockRendererProps) => {
-  const iconValue = getResponsiveValue(block.value, 'desktop', '');
-  const iconSize = getResponsiveValue(block.styles?.size, 'desktop', '24') as
-    | string
-    | number;
+const IconBlock = ({
+  block,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const iconValue = getResponsiveValue(block.value, currentBreakpoint, '');
+  const iconSize = getResponsiveValue(
+    block.styles?.size,
+    currentBreakpoint,
+    '24'
+  ) as string | number;
   const iconColor = getResponsiveValue(
     block.styles?.color,
-    'desktop',
+    currentBreakpoint,
     'currentColor'
   ) as string;
 

package/src/blocks/video-block.tsx

@@ -10,7 +10,7 @@ const getVideoEmbedUrl = (
     controls?: boolean;
   }
 ) => {
-  if (!url) return null;
+  if (!url || typeof url !== 'string') return null;
 
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     let videoId = '';

package/src/sections/__tests__/before-after-section.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// ThemeBlock is a DEFAULT export rendered for the matched before/after blocks.
+// Mock it so we can assert which block (by id) gets rendered.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import BeforeAfterSection from '../before-after-section';
+
+const makeSection = (over: Record<string, unknown> = {}) =>
+  ({
+    id: 'sec-1',
+    blocks: [],
+    styles: {},
+    properties: {},
+    ...over
+  } as any);
+
+const beforeImageBlock = { id: 'before-1', label: 'Before Image', type: 'image' };
+const afterImageBlock = { id: 'after-1', label: 'After Image', type: 'image' };
+
+describe('BeforeAfterSection — image by label', () => {
+  it('renders the before/after ThemeBlocks matched by label', () => {
+    const { getAllByTestId, queryByText } = render(
+      <BeforeAfterSection
+        section={makeSection({ blocks: [beforeImageBlock, afterImageBlock] })}
+      />
+    );
+
+    const ids = getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(expect.arrayContaining(['before-1', 'after-1']));
+    expect(ids).toHaveLength(2);
+
+    // No placeholders when both blocks are present.
+    expect(queryByText('No Before Image')).toBeNull();
+    expect(queryByText('No After Image')).toBeNull();
+  });
+
+  it('only matches blocks with the exact "Before Image" / "After Image" labels', () => {
+    const { queryAllByTestId, getByText } = render(
+      <BeforeAfterSection
+        section={makeSection({
+          blocks: [{ id: 'wrong-1', label: 'Some Other Image', type: 'image' }]
+        })}
+      />
+    );
+
+    // Non-matching label -> no ThemeBlock, both placeholders shown.
+    expect(queryAllByTestId('tb')).toHaveLength(0);
+    expect(getByText('No Before Image')).toBeInTheDocument();
+    expect(getByText('No After Image')).toBeInTheDocument();
+  });
+});
+
+describe('BeforeAfterSection — placeholder fallback', () => {
+  it('shows "No After Image" when after block is missing', () => {
+    const { getByText, queryByText } = render(
+      <BeforeAfterSection section={makeSection({ blocks: [beforeImageBlock] })} />
+    );
+    expect(getByText('No After Image')).toBeInTheDocument();
+    expect(queryByText('No Before Image')).toBeNull();
+  });
+
+  it('shows "No Before Image" when before block is missing', () => {
+    const { getByText, queryByText } = render(
+      <BeforeAfterSection section={makeSection({ blocks: [afterImageBlock] })} />
+    );
+    expect(getByText('No Before Image')).toBeInTheDocument();
+    expect(queryByText('No After Image')).toBeNull();
+  });
+
+  it('shows both placeholders with no blocks at all', () => {
+    const { getByText } = render(
+      <BeforeAfterSection section={makeSection({ blocks: [] })} />
+    );
+    expect(getByText('No Before Image')).toBeInTheDocument();
+    expect(getByText('No After Image')).toBeInTheDocument();
+  });
+});
+
+describe('BeforeAfterSection — slider default position', () => {
+  it('defaults the slider/clip to 50%', () => {
+    const { container } = render(
+      <BeforeAfterSection section={makeSection()} />
+    );
+
+    // The clip layer width and the divider handle left both derive from
+    // the default sliderPosition state (50).
+    const clip = container.querySelector('.border-r') as HTMLElement;
+    expect(clip).not.toBeNull();
+    expect(clip.style.width).toBe('50%');
+
+    const handle = container.querySelector('.cursor-ew-resize') as HTMLElement;
+    expect(handle).not.toBeNull();
+    expect(handle.style.left).toBe('50%');
+  });
+});
+
+describe('BeforeAfterSection — max-width handling', () => {
+  it('uses w-full and no inline maxWidth for max-width "full"', () => {
+    const { container } = render(
+      <BeforeAfterSection
+        section={makeSection({ styles: { 'max-width': 'full' } })}
+      />
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root.className).toContain('w-full');
+    expect(root.className).not.toContain('max-w-7xl');
+    expect(root.className).not.toContain('max-w-4xl');
+    // hasMaxWidth is false for "full" -> no inline maxWidth.
+    expect(root.style.maxWidth).toBe('');
+  });
+
+  it('sets inline maxWidth "none" for max-width "none"', () => {
+    const { container } = render(
+      <BeforeAfterSection
+        section={makeSection({ styles: { 'max-width': 'none' } })}
+      />
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root.style.maxWidth).toBe('none');
+    expect(root.className).not.toContain('max-w-7xl');
+    expect(root.className).not.toContain('w-full');
+  });
+
+  it('defaults to the "normal" max-width class (max-w-7xl)', () => {
+    const { container } = render(
+      <BeforeAfterSection section={makeSection()} />
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root.className).toContain('max-w-7xl');
+    expect(root.style.maxWidth).toBe('');
+  });
+});

package/src/sections/__tests__/countdown-campaign-banner-section.test.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+
+// Mock ThemeBlock so we exercise only this section's logic.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import CountdownCampaignBannerSection from '../countdown-campaign-banner-section';
+
+// Minimal section factory matching the Section shape used by the component.
+const makeSection = (overrides: Partial<any> = {}) => ({
+  id: 'sec-1',
+  type: 'countdown-campaign-banner',
+  properties: {},
+  styles: {},
+  blocks: [],
+  ...overrides
+});
+
+const renderSection = (props: any = {}) => {
+  let utils: ReturnType<typeof render>;
+  act(() => {
+    utils = render(
+      <CountdownCampaignBannerSection section={makeSection(props.section)} {...props} />
+    );
+  });
+  // @ts-expect-error assigned inside act
+  return utils;
+};
+
+// Fixed "now" so countdown math is deterministic.
+const NOW = new Date('2026-06-26T00:00:00.000Z').getTime();
+// now + 1d 2h 3m 4s
+const DELTA_MS = ((((1 * 24 + 2) * 60) + 3) * 60 + 4) * 1000;
+const END_MS = NOW + DELTA_MS;
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(NOW);
+});
+
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+describe('CountdownCampaignBannerSection - parseEndDate', () => {
+  it('parses a millisecond epoch number into the correct remaining time', () => {
+    renderSection({ section: { properties: { 'end-date': END_MS } } });
+
+    expect(screen.queryByText('Campaign ended')).not.toBeInTheDocument();
+    expect(screen.getByText('01')).toBeInTheDocument(); // days
+    expect(screen.getByText('02')).toBeInTheDocument(); // hours
+    expect(screen.getByText('03')).toBeInTheDocument(); // minutes
+    expect(screen.getByText('04')).toBeInTheDocument(); // seconds
+  });
+
+  it('parses a second epoch number (< 10_000_000_000) the same as the ms form', () => {
+    const endSeconds = Math.floor(END_MS / 1000);
+    expect(endSeconds).toBeLessThan(10_000_000_000);
+
+    renderSection({ section: { properties: { 'end-date': endSeconds } } });
+
+    expect(screen.getByText('01')).toBeInTheDocument();
+    expect(screen.getByText('02')).toBeInTheDocument();
+    expect(screen.getByText('03')).toBeInTheDocument();
+    expect(screen.getByText('04')).toBeInTheDocument();
+  });
+
+  it('parses an ISO date string', () => {
+    const iso = new Date(END_MS).toISOString();
+    renderSection({ section: { properties: { 'end-date': iso } } });
+
+    expect(screen.getByText('01')).toBeInTheDocument();
+    expect(screen.getByText('02')).toBeInTheDocument();
+    expect(screen.getByText('03')).toBeInTheDocument();
+    expect(screen.getByText('04')).toBeInTheDocument();
+  });
+
+  it('parses a numeric string as a second epoch', () => {
+    const endSeconds = String(Math.floor(END_MS / 1000));
+    renderSection({ section: { properties: { 'end-date': endSeconds } } });
+
+    expect(screen.getByText('01')).toBeInTheDocument();
+    expect(screen.getByText('04')).toBeInTheDocument();
+  });
+});
+
+describe('CountdownCampaignBannerSection - expired', () => {
+  it('renders the default expired message for a past date', () => {
+    renderSection({ section: { properties: { 'end-date': '2000-01-01T00:00:00.000Z' } } });
+
+    expect(screen.getByText('Campaign ended')).toBeInTheDocument();
+    // No timer cells when expired.
+    expect(screen.queryByText('Days')).not.toBeInTheDocument();
+  });
+
+  it('renders a custom expired message when provided', () => {
+    renderSection({
+      section: {
+        properties: {
+          'end-date': '2000-01-01T00:00:00.000Z',
+          'expired-message': 'Bitti'
+        }
+      }
+    });
+
+    expect(screen.getByText('Bitti')).toBeInTheDocument();
+    expect(screen.queryByText('Campaign ended')).not.toBeInTheDocument();
+  });
+
+  it('an empty / missing end-date is NOT treated as expired (renders the zeroed timer)', () => {
+    renderSection({ section: { properties: {} } });
+
+    expect(screen.queryByText('Campaign ended')).not.toBeInTheDocument();
+    expect(screen.getByText('Days')).toBeInTheDocument();
+    // All units zeroed.
+    expect(screen.getAllByText('00').length).toBe(4);
+  });
+});
+
+describe('CountdownCampaignBannerSection - showSeconds toggle', () => {
+  it('shows four units (incl. Seconds) by default', () => {
+    renderSection({ section: { properties: { 'end-date': END_MS } } });
+
+    expect(screen.getByText('Days')).toBeInTheDocument();
+    expect(screen.getByText('Hours')).toBeInTheDocument();
+    expect(screen.getByText('Minutes')).toBeInTheDocument();
+    expect(screen.getByText('Seconds')).toBeInTheDocument();
+  });
+
+  it('hides the Seconds unit when show-seconds is false', () => {
+    renderSection({
+      section: { properties: { 'end-date': END_MS, 'show-seconds': false } }
+    });
+
+    expect(screen.getByText('Days')).toBeInTheDocument();
+    expect(screen.getByText('Hours')).toBeInTheDocument();
+    expect(screen.getByText('Minutes')).toBeInTheDocument();
+    expect(screen.queryByText('Seconds')).not.toBeInTheDocument();
+  });
+
+  it('accepts the string "false" for show-seconds', () => {
+    renderSection({
+      section: { properties: { 'end-date': END_MS, 'show-seconds': 'false' } }
+    });
+
+    expect(screen.queryByText('Seconds')).not.toBeInTheDocument();
+  });
+});
+
+describe('CountdownCampaignBannerSection - timer ticks', () => {
+  it('decrements the seconds cell after one interval tick', () => {
+    renderSection({ section: { properties: { 'end-date': END_MS } } });
+
+    expect(screen.getByText('04')).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    // seconds 04 -> 03 (minutes cell is also 03 at this point, so expect two)
+    expect(screen.queryByText('04')).not.toBeInTheDocument();
+    expect(screen.getAllByText('03').length).toBe(2);
+  });
+});
+
+describe('CountdownCampaignBannerSection - block layout', () => {
+  it('renders non-image foreground blocks via ThemeBlock', () => {
+    renderSection({
+      section: {
+        properties: { 'end-date': END_MS },
+        blocks: [
+          { id: 'b1', type: 'text', order: 1 },
+          { id: 'b2', type: 'button', order: 2 }
+        ]
+      }
+    });
+
+    const blocks = screen.getAllByTestId('tb');
+    const ids = blocks.map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(expect.arrayContaining(['b1', 'b2']));
+  });
+});