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

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Mock nested ThemeBlock (default export) so designer-mode rendering is isolated.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: any) => <div data-testid="tb" data-id={block.id} />
+}));
+
+import ImageGalleryBlock from '../image-gallery-block';
+
+const makeImage = (id: string, value: string, extra: any = {}) => ({
+  id,
+  type: 'image',
+  value,
+  ...extra
+});
+
+const baseProps = {
+  placeholderId: 'ph-1',
+  sectionId: 'sec-1',
+  isDesigner: false,
+  selectedBlockId: null,
+  currentBreakpoint: 'desktop'
+} as any;
+
+describe('ImageGalleryBlock', () => {
+  it('renders a thumbnail button per image child, ordered and filtered by type', () => {
+    const block = {
+      id: 'gallery-1',
+      blocks: [
+        makeImage('img-b', 'https://cdn/b.jpg', { order: 2 }),
+        makeImage('img-a', 'https://cdn/a.jpg', { order: 1 }),
+        { id: 'text-1', type: 'text', value: 'ignored', order: 0 }
+      ]
+    };
+
+    const { container } = render(
+      <ImageGalleryBlock {...baseProps} block={block} />
+    );
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+
+    // Sorted by order: a (order 1) before b (order 2).
+    // alt is empty -> imgs carry the "presentation" role, so query the DOM directly.
+    const imgs = Array.from(container.querySelectorAll('img'));
+    expect(imgs).toHaveLength(2);
+    expect(imgs[0]).toHaveAttribute('src', 'https://cdn/a.jpg');
+    expect(imgs[1]).toHaveAttribute('src', 'https://cdn/b.jpg');
+
+    // Default aria-label when alt missing.
+    expect(
+      screen.getByRole('button', { name: 'Open image 1' })
+    ).toBeInTheDocument();
+  });
+
+  it('clicking a thumbnail opens the (mocked) Modal showing the active image', () => {
+    const block = {
+      id: 'gallery-1',
+      blocks: [
+        makeImage('img-a', 'https://cdn/a.jpg', {
+          order: 1,
+          properties: { alt: 'Alpha' }
+        }),
+        makeImage('img-b', 'https://cdn/b.jpg', {
+          order: 2,
+          properties: { alt: 'Bravo' }
+        })
+      ]
+    };
+
+    render(<ImageGalleryBlock {...baseProps} block={block} />);
+
+    // Modal closed -> Prev/Next controls not present, only the thumbnail img for Bravo.
+    expect(screen.queryByRole('button', { name: 'Next' })).toBeNull();
+    expect(screen.getAllByAltText('Bravo')).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Bravo' }));
+
+    // Modal mock renders children when open -> nav buttons appear.
+    expect(
+      screen.getByRole('button', { name: 'Previous' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+
+    // Active image (Bravo) is now also rendered inside the modal -> two matches.
+    expect(screen.getAllByAltText('Bravo')).toHaveLength(2);
+  });
+
+  it('renders empty-state message when there are no image children', () => {
+    const block = { id: 'gallery-empty', blocks: [] };
+    render(<ImageGalleryBlock {...baseProps} block={block} />);
+    expect(screen.getByText('No images uploaded')).toBeInTheDocument();
+    expect(screen.queryAllByRole('button')).toHaveLength(0);
+  });
+
+  it('in designer mode renders nested ThemeBlock for each child instead of thumbnails', () => {
+    const block = {
+      id: 'gallery-1',
+      blocks: [
+        makeImage('img-a', 'https://cdn/a.jpg', { order: 1 }),
+        makeImage('img-b', 'https://cdn/b.jpg', { order: 2 })
+      ]
+    };
+
+    render(
+      <ImageGalleryBlock {...baseProps} block={block} isDesigner={true} />
+    );
+
+    const tbs = screen.getAllByTestId('tb');
+    expect(tbs).toHaveLength(2);
+    expect(tbs[0]).toHaveAttribute('data-id', 'img-a');
+    // No interactive thumbnail buttons in designer mode.
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});

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

@@ -0,0 +1,184 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+// Recursive child renderer — stub the default export so we can observe which
+// child blocks LinkBlock forwards, in what order.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+// Override the hooks mock locally so per-test localization values can drive the
+// locale-prefix branches in formattedHref. urlSchemes / urlLocaleMatcherRegex /
+// LocaleUrlStrategy keep coming from the global moduleNameMapper mocks.
+const DEFAULT_LOCALIZATION = {
+  t: (p: string) => p,
+  setLocale: () => {},
+  setCurrency: () => {},
+  locale: 'en-us',
+  currency: 'USD',
+  locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
+  currencies: ['USD'],
+  defaultLocaleValue: 'en-us',
+  defaultCurrencyCode: 'USD',
+  localeUrlStrategy: 'hide-default-locale'
+};
+let localizationValue: Record<string, unknown> = { ...DEFAULT_LOCALIZATION };
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => localizationValue
+}));
+
+import LinkBlock from '../link-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: { id: 'lnk', type: 'link', label: 'lnk' },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...over
+  } as any);
+
+const child = (over: Record<string, unknown> = {}) => ({
+  id: 'c',
+  type: 'text',
+  label: 'c',
+  ...over
+});
+
+beforeEach(() => {
+  localizationValue = { ...DEFAULT_LOCALIZATION };
+});
+
+const anchor = (container: HTMLElement) =>
+  container.querySelector('a') as HTMLAnchorElement;
+
+describe('LinkBlock', () => {
+  it('renders an anchor (next/link -> <a>)', () => {
+    const { container } = render(<LinkBlock {...props()} />);
+    expect(anchor(container)).toBeInTheDocument();
+  });
+
+  it('renders the empty-block placeholder and defaults href to "#" when no blocks/href', () => {
+    const { container } = render(<LinkBlock {...props()} />);
+    expect(screen.getByText('Empty link block')).toBeInTheDocument();
+    expect(anchor(container)).toHaveAttribute('href', '#');
+  });
+
+  it('keeps absolute http(s) urls untouched (urlSchemes match)', () => {
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: 'https://example.com/x' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', 'https://example.com/x');
+  });
+
+  it('keeps mailto: scheme as-is', () => {
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: 'mailto:a@b.com' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', 'mailto:a@b.com');
+  });
+
+  it('falls back to "#" when an http-scheme href is not a valid URL', () => {
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: 'http://' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '#');
+  });
+
+  it('leaves a default-locale relative href unprefixed (HideDefaultLocale, locale === default)', () => {
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: '/foo' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '/foo');
+  });
+
+  it('prefixes the active locale for relative hrefs under ShowAllLocales', () => {
+    localizationValue.localeUrlStrategy = 'show-all-locales';
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: '/foo' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '/en-us/foo');
+  });
+
+  it('strips an existing locale prefix via urlLocaleMatcherRegex before re-prefixing', () => {
+    localizationValue.localeUrlStrategy = 'show-all-locales';
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: '/tr-tr/foo' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '/en-us/foo');
+  });
+
+  it('prefixes a non-default locale under HideDefaultLocale', () => {
+    localizationValue.locale = 'tr-tr';
+    const { container } = render(
+      <LinkBlock {...props({ block: { id: 'l', properties: { href: '/foo' } } })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '/tr-tr/foo');
+  });
+
+  it('sets target/rel for _blank targets', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          block: {
+            id: 'l',
+            properties: { href: 'https://x.com', target: '_blank' }
+          }
+        })}
+      />
+    );
+    const a = anchor(container);
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('filters hidden children and renders the rest in order via ThemeBlock', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          block: {
+            id: 'l',
+            properties: { href: '#' },
+            blocks: [
+              child({ id: 'b', order: 2 }),
+              child({ id: 'hid', order: 1, hidden: true }),
+              child({ id: 'a', order: 0 })
+            ]
+          }
+        })}
+      />
+    );
+    const ids = Array.from(container.querySelectorAll('[data-testid="tb"]')).map(
+      (el) => el.getAttribute('data-id')
+    );
+    expect(ids).toEqual(['a', 'b']);
+  });
+
+  it('keeps hidden children and neutralizes href to "#" in designer mode', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          isDesigner: true,
+          block: {
+            id: 'l',
+            properties: { href: '/foo' },
+            blocks: [
+              child({ id: 'a', order: 0 }),
+              child({ id: 'hid', order: 1, hidden: true })
+            ]
+          }
+        })}
+      />
+    );
+    const ids = Array.from(container.querySelectorAll('[data-testid="tb"]')).map(
+      (el) => el.getAttribute('data-id')
+    );
+    expect(ids).toEqual(['a', 'hid']);
+    expect(anchor(container)).toHaveAttribute('href', '#');
+  });
+});

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MapBlock from '../map-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'm',
+      type: 'map',
+      label: 'map',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('MapBlock', () => {
+  it('renders the placeholder prompt when value is undefined', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: { id: 'm', type: 'map', value: undefined, properties: {} }
+        })}
+      />
+    );
+
+    expect(
+      screen.getByText('Enter an address to display the map')
+    ).toBeInTheDocument();
+    // No iframe rendered in the placeholder state.
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+
+  it('renders the placeholder prompt when value is an empty string', () => {
+    render(
+      <MapBlock {...props({ block: { id: 'm', type: 'map', value: '', properties: {} } })} />
+    );
+
+    expect(
+      screen.getByText('Enter an address to display the map')
+    ).toBeInTheDocument();
+  });
+
+  it('resolves the localized value, preferring en over tr', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: {
+            id: 'm',
+            type: 'map',
+            value: { tr: 'Istanbul', en: 'London' },
+            properties: {}
+          }
+        })}
+      />
+    );
+
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    expect(iframe).not.toBeNull();
+    // en wins over tr.
+    expect(iframe.getAttribute('src')).toContain('q=London');
+    expect(iframe.getAttribute('src')).not.toContain('Istanbul');
+  });
+
+  it('falls back to the tr value when en is absent', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: {
+            id: 'm',
+            type: 'map',
+            value: { tr: 'Ankara' },
+            properties: {}
+          }
+        })}
+      />
+    );
+
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    expect(iframe.getAttribute('src')).toContain('q=Ankara');
+  });
+
+  it('renders an iframe with a default zoom of 14 and roadmap map type (t=m) for a valid address', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: {
+            id: 'm',
+            type: 'map',
+            value: 'Eiffel Tower, Paris',
+            properties: {}
+          }
+        })}
+      />
+    );
+
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    expect(iframe).not.toBeNull();
+    expect(iframe).toHaveAttribute('title', 'Google Maps');
+    expect(iframe).toHaveAttribute('loading', 'lazy');
+
+    const src = iframe.getAttribute('src') || '';
+    expect(src).toContain('https://maps.google.com/maps?');
+    expect(src).toContain('q=Eiffel%20Tower%2C%20Paris');
+    // Default zoom resolved by getResponsiveValue fallback.
+    expect(src).toContain('z=14');
+    // roadmap (default) maps to t=m in getMapEmbedUrl.
+    expect(src).toContain('t=m');
+    expect(src).toContain('output=embed');
+  });
+
+  it('maps the satellite map type to t=k and honors a custom zoom', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: {
+            id: 'm',
+            type: 'map',
+            value: 'Tokyo',
+            properties: { zoom: 8, mapType: 'satellite' }
+          }
+        })}
+      />
+    );
+
+    const src =
+      (container.querySelector('iframe') as HTMLIFrameElement).getAttribute(
+        'src'
+      ) || '';
+    expect(src).toContain('z=8');
+    expect(src).toContain('t=k');
+  });
+
+  it('resolves zoom and mapType from the current breakpoint', () => {
+    const { container } = render(
+      <MapBlock
+        {...props({
+          block: {
+            id: 'm',
+            type: 'map',
+            value: 'Berlin',
+            properties: {
+              zoom: { desktop: 10, mobile: 18 },
+              mapType: { desktop: 'roadmap', mobile: 'satellite' }
+            }
+          },
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+
+    const src =
+      (container.querySelector('iframe') as HTMLIFrameElement).getAttribute(
+        'src'
+      ) || '';
+    expect(src).toContain('z=18');
+    expect(src).toContain('t=k');
+  });
+});

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// react-multi-carousel is an ESM/DOM-heavy dependency. Replace its default
+// export with a passthrough that simply renders its children so we can assert
+// on the slides the SliderBlock produces.
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="carousel">{children}</div>
+  )
+}));
+
+// Stub the recursive ThemeBlock (default export) with a countable marker so we
+// can verify which child blocks become slides (and in what order).
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import SliderBlock from '../slider-block';
+
+const child = (
+  id: string,
+  over: Record<string, unknown> = {}
+): any => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'slider',
+      type: 'slider',
+      label: 'slider',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: []
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="tb"]')).map((el) =>
+    el.getAttribute('data-id')
+  );
+
+describe('SliderBlock — child filtering, ordering and empty state', () => {
+  it('renders "No items available" when there are no slide children', () => {
+    const { container, getByText } = render(<SliderBlock {...props()} />);
+    expect(getByText('No items available')).toBeInTheDocument();
+    expect(container.querySelector('[data-testid="carousel"]')).toBeNull();
+  });
+
+  it('treats an all-icon block list as empty (icons are not slides)', () => {
+    const { getByText } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [
+              child('left', { type: 'icon', label: 'Left Arrow Icon' }),
+              child('right', { type: 'icon', label: 'Right Arrow Icon' })
+            ]
+          }
+        })}
+      />
+    );
+    expect(getByText('No items available')).toBeInTheDocument();
+  });
+
+  it('excludes type==="icon" children from the rendered slides', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [
+              child('left', { type: 'icon', label: 'Left Arrow Icon' }),
+              child('s1'),
+              child('right', { type: 'icon', label: 'Right Arrow Icon' }),
+              child('s2')
+            ]
+          }
+        })}
+      />
+    );
+    expect(markers(container)).toEqual(['s1', 's2']);
+  });
+
+  it('drops hidden children in production but keeps them in the designer', () => {
+    const blocks = [child('v1'), child('h1', { hidden: true })];
+
+    const prod = render(
+      <SliderBlock
+        {...props({
+          isDesigner: false,
+          block: { ...props().block, blocks }
+        })}
+      />
+    );
+    expect(markers(prod.container)).toEqual(['v1']);
+
+    const designer = render(
+      <SliderBlock
+        {...props({
+          isDesigner: true,
+          block: { ...props().block, blocks }
+        })}
+      />
+    );
+    expect(markers(designer.container)).toEqual(['v1', 'h1']);
+  });
+
+  it('orders slides by the numeric `order` field', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [
+              child('b', { order: 2 }),
+              child('a', { order: 1 }),
+              child('c', { order: 3 })
+            ]
+          }
+        })}
+      />
+    );
+    expect(markers(container)).toEqual(['a', 'b', 'c']);
+  });
+});

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TextBlock from '../text-block';
+
+// The mocked useLocalization (jest/__mocks__/akinon-next-hooks.js) returns
+// locale: 'en-us'. process.env.NEXT_PUBLIC_DEFAULT_LOCALE is unset in the
+// jest env, so the component's defaultLocale falls back to 'en'.
+
+const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
+  const block: any = { id: 'b1', type: 'text', value, styles };
+  return render(<TextBlock block={block} />);
+};
+
+describe('TextBlock value-shape resolution', () => {
+  it('parses a JSON-string value and renders the locale entry', () => {
+    const { container } = renderBlock(
+      '{"en-us":"<b>Hi</b>","tr-tr":"Merhaba"}'
+    );
+    const div = container.querySelector('div') as HTMLDivElement;
+    expect(div.innerHTML).toBe('<b>Hi</b>');
+  });
+
+  it('reads the active locale from a localized object value', () => {
+    const { container } = renderBlock({ 'en-us': 'A', 'tr-tr': 'B' });
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      'A'
+    );
+  });
+
+  it('falls back to defaultLocale ("en") when active locale is absent', () => {
+    const { container } = renderBlock({ en: 'EN', fr: 'FR' });
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      'EN'
+    );
+  });
+
+  it('falls back to the first object value when neither locale matches', () => {
+    const { container } = renderBlock({ de: 'DE', fr: 'FR' });
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      'DE'
+    );
+  });
+
+  it('renders a plain (non-JSON) string value verbatim', () => {
+    const { container } = renderBlock('<p>plain</p>');
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      '<p>plain</p>'
+    );
+  });
+
+  it('renders empty when value is undefined', () => {
+    const { container } = renderBlock(undefined);
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      ''
+    );
+  });
+
+  it('returns a malformed JSON-like string as-is (parse failure path)', () => {
+    // Starts with "{" so JSON.parse is attempted, throws, and the catch
+    // returns the original string unchanged -> rendered as raw HTML text.
+    const { container } = renderBlock('{not valid json');
+    expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
+      '{not valid json'
+    );
+  });
+});
+
+describe('TextBlock rendering', () => {
+  it('injects content via dangerouslySetInnerHTML WITHOUT sanitization', () => {
+    // Pin current behavior: arbitrary markup is written directly into the DOM.
+    const { container } = renderBlock(
+      '<span data-testid="raw"><img src="x" onerror="alert(1)"></span>'
+    );
+    const raw = container.querySelector('[data-testid="raw"]');
+    expect(raw).not.toBeNull();
+    const img = container.querySelector('img');
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('onerror')).toBe('alert(1)');
+  });
+
+  it('renders a single wrapping div with no styles by default', () => {
+    const { container } = renderBlock('hello');
+    const div = container.querySelector('div') as HTMLDivElement;
+    expect(div).not.toBeNull();
+    expect(div.getAttribute('style')).toBeNull();
+  });
+});