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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } 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 CounterBlock from '../counter-block';
+
+const child = (id: string, hidden = false, order = 0) => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order,
+  hidden
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'c',
+      type: 'counter',
+      label: 'c',
+      value: '',
+      properties: {}, // no endAt -> no timers in this test
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: [child('c1', false), child('c2', true)]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markerCount = (container: HTMLElement) =>
+  container.querySelectorAll('[data-testid="tb"]').length;
+
+describe('CounterBlock — hidden children (BUG-1 fix)', () => {
+  it('drops hidden children in production', () => {
+    const { container } = render(<CounterBlock {...props({ isDesigner: false })} />);
+    expect(markerCount(container)).toBe(1);
+  });
+
+  it('keeps hidden children in the designer so they remain selectable', () => {
+    const { container } = render(<CounterBlock {...props({ isDesigner: true })} />);
+    expect(markerCount(container)).toBe(2);
+  });
+});

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmbedBlock from '../embed-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'e',
+      type: 'embed',
+      label: 'e',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false,
+      ...((over as any).block || {})
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('EmbedBlock', () => {
+  it('renders the placeholder when value is undefined/empty', () => {
+    const { container } = render(<EmbedBlock {...props({ block: { value: undefined } })} />);
+    expect(screen.getByText('Enter an embed URL or paste iframe code')).toBeInTheDocument();
+    expect(
+      screen.getByText(/Supported: Twitter, Spotify, CodePen/)
+    ).toBeInTheDocument();
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+
+  it('resolves a localized value object (en preferred) into an iframe', () => {
+    const { container } = render(
+      <EmbedBlock
+        {...props({
+          block: {
+            value: {
+              en: 'https://open.spotify.com/track/abc123',
+              tr: 'https://open.spotify.com/track/turkish'
+            }
+          }
+        })}
+      />
+    );
+    const iframe = container.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    // 'en' key wins over 'tr'
+    expect(iframe!.getAttribute('src')).toBe('https://open.spotify.com/embed/track/abc123');
+  });
+
+  it('converts a known platform URL (Twitter) into the platform embed iframe', () => {
+    const { container } = render(
+      <EmbedBlock
+        {...props({ block: { value: 'https://twitter.com/user/status/12345' } })}
+      />
+    );
+    const iframe = container.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    expect(iframe!.getAttribute('src')).toBe(
+      'https://platform.twitter.com/embed/Tweet.html?id=12345'
+    );
+  });
+
+  it('shows the invalid message for an unparseable embed value', () => {
+    const { container } = render(
+      <EmbedBlock {...props({ block: { value: 'not a url at all' } })} />
+    );
+    expect(screen.getByText(/Invalid embed URL or code/)).toBeInTheDocument();
+    expect(
+      screen.getByText('Please check the URL format or paste a valid iframe code')
+    ).toBeInTheDocument();
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+
+  it('emits the sandbox attribute on the rendered iframe', () => {
+    const { container } = render(
+      <EmbedBlock {...props({ block: { value: 'https://example.com/widget' } })} />
+    );
+    const iframe = container.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    expect(iframe!.getAttribute('sandbox')).toBe(
+      'allow-scripts allow-same-origin allow-popups allow-forms'
+    );
+    // generic https URL passes through unchanged
+    expect(iframe!.getAttribute('src')).toBe('https://example.com/widget');
+  });
+});

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import { render } 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 GroupBlock from '../group-block';
+
+const child = (id: string, hidden = false, order = 0) => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order,
+  hidden
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'g',
+      type: 'group',
+      label: 'g',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: [child('c1', false, 0), child('c2', true, 0)]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="tb"]'));
+
+describe('GroupBlock — children visibility', () => {
+  it('drops hidden children in production', () => {
+    const { container } = render(<GroupBlock {...props({ isDesigner: false })} />);
+    expect(markers(container)).toHaveLength(1);
+    expect(markers(container)[0]).toHaveAttribute('data-id', 'c1');
+  });
+
+  it('keeps hidden children in the designer so they remain selectable', () => {
+    const { container } = render(<GroupBlock {...props({ isDesigner: true })} />);
+    expect(markers(container)).toHaveLength(2);
+  });
+});
+
+describe('GroupBlock — ordering', () => {
+  it('sorts children by ascending order before rendering ThemeBlock', () => {
+    const block = {
+      ...props().block,
+      blocks: [
+        child('a', false, 2),
+        child('b', false, 0),
+        child('c', false, 1)
+      ]
+    };
+    const { container } = render(<GroupBlock {...props({ block, isDesigner: true })} />);
+    const ids = markers(container).map((m) => m.getAttribute('data-id'));
+    expect(ids).toEqual(['b', 'c', 'a']);
+  });
+
+  it('treats missing order as 0', () => {
+    const block = {
+      ...props().block,
+      blocks: [
+        child('withOrder', false, 1),
+        { ...child('noOrder', false), order: undefined }
+      ]
+    };
+    const { container } = render(<GroupBlock {...props({ block, isDesigner: true })} />);
+    const ids = markers(container).map((m) => m.getAttribute('data-id'));
+    expect(ids).toEqual(['noOrder', 'withOrder']);
+  });
+});
+
+describe('GroupBlock — empty states', () => {
+  it('renders the "Empty group block" placeholder when there are no children', () => {
+    const block = { ...props().block, blocks: [] };
+    const { container } = render(<GroupBlock {...props({ block })} />);
+    expect(container.textContent).toContain('Empty group block');
+    expect(markers(container)).toHaveLength(0);
+  });
+
+  it('renders an empty tag (no placeholder text) for visual-utility groups', () => {
+    const block = {
+      ...props().block,
+      blocks: [],
+      properties: { shippingRole: 'progress-fill' }
+    };
+    const { container } = render(<GroupBlock {...props({ block })} />);
+    expect(container.textContent).not.toContain('Empty group block');
+    expect(container.querySelector('.contents')).toBeInTheDocument();
+  });
+});
+
+describe('GroupBlock — dynamic Tag', () => {
+  it('defaults to <div> when no tag property is set', () => {
+    const { container } = render(<GroupBlock {...props()} />);
+    const wrapper = container.querySelector('.contents');
+    expect(wrapper?.tagName).toBe('DIV');
+  });
+
+  it('renders an <a> with href when tag is "a"', () => {
+    const block = {
+      ...props().block,
+      properties: { tag: 'a', href: '/foo' }
+    };
+    const { container } = render(<GroupBlock {...props({ block })} />);
+    const wrapper = container.querySelector('.contents') as HTMLAnchorElement;
+    expect(wrapper.tagName).toBe('A');
+    expect(wrapper).toHaveAttribute('href', '/foo');
+  });
+
+  it('renders a <form> when tag is "form" and submits via the inner submit button', () => {
+    const block = {
+      ...props().block,
+      properties: { tag: 'form' }
+    };
+    const { container } = render(<GroupBlock {...props({ block })} />);
+    const form = container.querySelector('form') as HTMLFormElement;
+    expect(form).toBeInTheDocument();
+
+    // The onSubmit handler prevents default and clicks the inner submit button.
+    const button = document.createElement('button');
+    button.type = 'submit';
+    const clickSpy = jest.fn();
+    button.addEventListener('click', clickSpy);
+    form.appendChild(button);
+
+    const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
+    form.dispatchEvent(submitEvent);
+
+    expect(submitEvent.defaultPrevented).toBe(true);
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('GroupBlock — responsive tag honors the active breakpoint (BUG-5 fix)', () => {
+  it('uses the mobile tag value on the mobile breakpoint', () => {
+    const block = {
+      ...props().block,
+      properties: { tag: { desktop: 'div', mobile: 'a' }, href: '/m' }
+    };
+    const { container } = render(
+      <GroupBlock {...props({ block, currentBreakpoint: 'mobile' })} />
+    );
+    const wrapper = container.querySelector('.contents') as HTMLAnchorElement;
+    expect(wrapper.tagName).toBe('A');
+    expect(wrapper).toHaveAttribute('href', '/m');
+  });
+
+  it('uses the desktop tag value on the desktop breakpoint', () => {
+    const block = {
+      ...props().block,
+      properties: { tag: { desktop: 'div', mobile: 'a' }, href: '/m' }
+    };
+    const { container } = render(
+      <GroupBlock {...props({ block, currentBreakpoint: 'desktop' })} />
+    );
+    expect(container.querySelector('.contents')?.tagName).toBe('DIV');
+  });
+});

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

@@ -0,0 +1,93 @@
+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 HotspotBlock from '../hotspot-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'h',
+      type: 'hotspot',
+      label: 'h',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('HotspotBlock', () => {
+  it('defaults top/left to 50%/50% when no positioning styles are set', () => {
+    const { container } = render(<HotspotBlock {...props()} />);
+    const root = container.querySelector('.absolute.group') as HTMLElement;
+    expect(root).toBeInTheDocument();
+    expect(root.style.top).toBe('50%');
+    expect(root.style.left).toBe('50%');
+  });
+
+  it('opens the popup with title and description on button click', () => {
+    render(
+      <HotspotBlock
+        {...props({
+          block: {
+            id: 'h',
+            type: 'hotspot',
+            properties: { title: 'Hot Title', description: 'Hot Desc' },
+            styles: {}
+          }
+        })}
+      />
+    );
+
+    // Popup content is not present before the click.
+    expect(screen.queryByText('Hot Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Hot Desc')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hot Title' }));
+
+    expect(screen.getByText('Hot Title')).toBeInTheDocument();
+    expect(screen.getByText('Hot Desc')).toBeInTheDocument();
+  });
+
+  it('recurses into nested child blocks via ThemeBlock once the popup is open', () => {
+    const { container } = render(
+      <HotspotBlock
+        {...props({
+          block: {
+            id: 'h',
+            type: 'hotspot',
+            properties: { title: 'T' },
+            styles: {},
+            blocks: [
+              { id: 'c1', type: 'text' },
+              { id: 'c2', type: 'text' }
+            ]
+          }
+        })}
+      />
+    );
+
+    // Children are not rendered while the popup is closed.
+    expect(container.querySelectorAll('[data-testid="tb"]').length).toBe(0);
+
+    fireEvent.click(screen.getByRole('button', { name: 'T' }));
+
+    const markers = container.querySelectorAll('[data-testid="tb"]');
+    expect(markers.length).toBe(2);
+    expect(markers[0].getAttribute('data-id')).toBe('c1');
+    expect(markers[1].getAttribute('data-id')).toBe('c2');
+  });
+});

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import IconBlock from '../icon-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'i',
+      type: 'icon',
+      label: 'i',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('IconBlock — breakpoint resolution (BUG-2 fix)', () => {
+  it('uses the mobile value and size on the mobile breakpoint', () => {
+    const { container } = render(
+      <IconBlock
+        {...props({
+          block: {
+            id: 'i',
+            type: 'icon',
+            value: { desktop: '/d.svg', mobile: '/m.svg' },
+            styles: { size: { desktop: '24', mobile: '48' } },
+            properties: {},
+            order: 0,
+            hidden: false
+          },
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+    const img = container.querySelector('img');
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute('src')).toBe('/m.svg');
+    expect(img!.getAttribute('width')).toBe('48');
+  });
+
+  it('falls back to the desktop value when there is no mobile override', () => {
+    const { container } = render(
+      <IconBlock
+        {...props({
+          block: {
+            id: 'i',
+            type: 'icon',
+            value: { desktop: '/d.svg' },
+            styles: { size: { desktop: '24' } },
+            properties: {},
+            order: 0,
+            hidden: false
+          },
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+    expect(container.querySelector('img')!.getAttribute('src')).toBe('/d.svg');
+  });
+});
+
+describe('IconBlock — inline SVG is NOT sanitized (pinned; sanitization is Tier 5)', () => {
+  it('injects raw inline SVG via dangerouslySetInnerHTML (documents current behavior)', () => {
+    const { container } = render(
+      <IconBlock
+        {...props({
+          block: {
+            id: 'i',
+            type: 'icon',
+            value: '<svg onload="globalThis.__x=1"><rect /></svg>',
+            styles: {},
+            properties: {},
+            order: 0,
+            hidden: false
+          }
+        })}
+      />
+    );
+    expect(container.querySelector('svg')).not.toBeNull();
+    expect(container.innerHTML).toContain('onload');
+  });
+});

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ImageBlock from '../image-block';
+import type { BlockRendererProps } from '../block-renderer-registry';
+
+// ImageBlock renders a native <img> / <div> directly (no child ThemeBlock /
+// ThemeSection), so no extra component mock is required.
+// Note: the rendered <img> has alt="" by default, which gives it an ARIA
+// "presentation" role, so it is queried via the DOM instead of getByRole.
+
+const renderBlock = (
+  block: Record<string, unknown>,
+  currentBreakpoint?: string
+) =>
+  render(
+    <ImageBlock
+      {...({ block } as unknown as BlockRendererProps)}
+      {...(currentBreakpoint ? { currentBreakpoint } : {})}
+    />
+  );
+
+const getImg = (container: HTMLElement) =>
+  container.querySelector('img') as HTMLImageElement | null;
+
+describe('ImageBlock - pickImageSource', () => {
+  it('renders an <img> with src from a plain string value', () => {
+    const { container } = renderBlock({
+      id: 'b1',
+      value: 'https://example.com/a.jpg'
+    });
+
+    const img = getImg(container);
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('src')).toBe('https://example.com/a.jpg');
+  });
+
+  it('renders an <img> with src from an object { url } value', () => {
+    const { container } = renderBlock({
+      id: 'b2',
+      value: { url: 'https://example.com/b.jpg' }
+    });
+
+    expect(getImg(container)?.getAttribute('src')).toBe(
+      'https://example.com/b.jpg'
+    );
+  });
+
+  it('resolves a responsive { desktop, mobile } value by breakpoint', () => {
+    const value = {
+      desktop: 'https://example.com/desktop.jpg',
+      mobile: 'https://example.com/mobile.jpg'
+    };
+
+    // default breakpoint is "desktop"
+    const desktopRender = renderBlock({ id: 'b3', value });
+    expect(getImg(desktopRender.container)?.getAttribute('src')).toBe(
+      'https://example.com/desktop.jpg'
+    );
+    desktopRender.unmount();
+
+    const mobileRender = renderBlock({ id: 'b3b', value }, 'mobile');
+    expect(getImg(mobileRender.container)?.getAttribute('src')).toBe(
+      'https://example.com/mobile.jpg'
+    );
+  });
+
+  it('falls back to the first string value when the breakpoint match is non-string', () => {
+    // To reach the first-string fallback, getResponsiveValue must return a
+    // NON-string (here the "desktop" key is a number), otherwise it returns
+    // its '' string fallback and short-circuits. See "surprises".
+    const { container } = renderBlock({
+      id: 'b4',
+      value: { desktop: 123, foo: 'https://example.com/first.jpg' }
+    });
+
+    expect(getImg(container)?.getAttribute('src')).toBe(
+      'https://example.com/first.jpg'
+    );
+  });
+
+  it('SURPRISE: a plain { foo: url } object never reaches the first-string scan', () => {
+    // getResponsiveValue returns its '' string fallback (no desktop/breakpoint
+    // key), pickImageSource returns '' before scanning values -> placeholder.
+    const { container } = renderBlock({
+      id: 'b5',
+      value: { foo: 'https://example.com/first.jpg' }
+    });
+
+    expect(getImg(container)).toBeNull();
+    expect(screen.getByText('No image uploaded')).toBeInTheDocument();
+  });
+});
+
+describe('ImageBlock - empty / invalid sources', () => {
+  it('shows "No image uploaded" placeholder for an empty string value', () => {
+    const { container } = renderBlock({ id: 'e1', value: '' });
+
+    expect(getImg(container)).toBeNull();
+    expect(screen.getByText('No image uploaded')).toBeInTheDocument();
+  });
+
+  it('shows "No image uploaded" placeholder for a missing value', () => {
+    const { container } = renderBlock({ id: 'e2' });
+
+    expect(getImg(container)).toBeNull();
+    expect(screen.getByText('No image uploaded')).toBeInTheDocument();
+  });
+
+  it('shows "No image uploaded" when a relative source cannot be normalized', () => {
+    // Without NEXT_PUBLIC_IMAGE_CLOUD_NAME a bare relative path normalizes to ''
+    delete process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME;
+    const { container } = renderBlock({ id: 'e3', value: 'foo.jpg' });
+
+    expect(getImg(container)).toBeNull();
+    expect(screen.getByText('No image uploaded')).toBeInTheDocument();
+  });
+});
+
+describe('ImageBlock - loading strategy', () => {
+  it('defaults loading to "lazy" when no strategy is provided', () => {
+    const { container } = renderBlock({
+      id: 'l1',
+      value: 'https://example.com/a.jpg'
+    });
+
+    expect(getImg(container)?.getAttribute('loading')).toBe('lazy');
+  });
+
+  it('uses the provided loadingStrategy when valid', () => {
+    const { container } = renderBlock({
+      id: 'l2',
+      value: 'https://example.com/a.jpg',
+      properties: { loadingStrategy: 'eager' }
+    });
+
+    expect(getImg(container)?.getAttribute('loading')).toBe('eager');
+  });
+});