@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

package/src/__tests__/sort-select-page-cursor.test.tsx

@@ -0,0 +1,336 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const mockPush = jest.fn();
+let mockQuery = '';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+  usePathname: () => '/list',
+  useSearchParams: () => new URLSearchParams(mockQuery)
+}));
+
+import FacetFiltersBlock from '../blocks/facet-filters-block';
+import SortSelectBlock from '../blocks/sort-select-block';
+import { ThemePageContextProvider } from '../theme-page-context';
+
+type Choice = { label: string; value: string; selected?: boolean };
+
+const facet = (
+  key: string,
+  name: string,
+  choices: Choice[],
+  searchKey = `attributes_${key}`
+) => ({
+  key,
+  name,
+  search_key: searchKey,
+  widget_type: 'multiselect',
+  data: {
+    choices: choices.map((choice) => ({
+      label: choice.label,
+      value: choice.value,
+      quantity: 5,
+      is_selected: choice.selected ?? false
+    }))
+  }
+});
+
+const COLOR = facet('color', 'Renk', [
+  { label: 'Siyah', value: 'black' },
+  { label: 'Beyaz', value: 'white' }
+]);
+
+const SIZE = facet('size', 'Beden', [
+  { label: 'S', value: 's' },
+  { label: 'M', value: 'm' }
+]);
+
+const SORTERS = [
+  { label: 'Newest', value: 'newest', is_selected: false },
+  { label: 'Price low to high', value: 'price_asc', is_selected: true },
+  { label: 'Price high to low', value: 'price_desc', is_selected: false }
+];
+
+const pageContext = (facets: unknown[] = [COLOR, SIZE]) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/list',
+    query: '',
+    products: [],
+    facets,
+    sorters: SORTERS,
+    pagination: {},
+    breadcrumbs: []
+  }
+});
+
+const blockProps = (
+  type: string,
+  properties: Record<string, unknown>,
+  isDesigner = false
+) =>
+  ({
+    block: {
+      id: `${type}-1`,
+      type,
+      label: type,
+      order: 0,
+      hidden: false,
+      value: '',
+      properties,
+      styles: {},
+      blocks: []
+    },
+    placeholderId: 'ph',
+    sectionId: 'sec',
+    isDesigner
+  } as never);
+
+const renderSort = (
+  properties: Record<string, unknown> = {},
+  facets: unknown[] = [COLOR, SIZE]
+) =>
+  render(
+    <ThemePageContextProvider value={pageContext(facets)}>
+      <SortSelectBlock {...blockProps('sort-select', properties)} />
+    </ThemePageContextProvider>
+  );
+
+/** Changes the native `<select>`, which is the shipped control. */
+const chooseSort = (container: HTMLElement, value: string) =>
+  fireEvent.change(container.querySelector('select') as HTMLSelectElement, {
+    target: { value }
+  });
+
+beforeEach(() => {
+  mockPush.mockClear();
+  mockQuery = '';
+});
+
+describe('sort — the page cursor it drops', () => {
+  it('drops a real cursor when the sort changes', () => {
+    mockQuery = 'page=4';
+    const { container } = renderSort();
+
+    chooseSort(container, 'price_desc');
+
+    expect(mockPush).toHaveBeenCalledWith('/list?sorter=price_desc');
+  });
+
+  /**
+   * `pageQueryParam` is free text, so a merchant can type a key one of this
+   * listing's facets already owns. Honouring that turns every "drop the
+   * cursor" into "drop that filter": the shopper reorders the results and
+   * silently loses the colour they were filtering by.
+   */
+  describe('a page cursor a facet already owns', () => {
+    it('keeps the filter on the URL when the sort changes', () => {
+      mockQuery = 'attributes_color=black';
+      const { container } = renderSort({
+        pageQueryParam: 'attributes_color'
+      });
+
+      chooseSort(container, 'price_desc');
+
+      expect(mockPush).toHaveBeenCalledWith(
+        '/list?attributes_color=black&sorter=price_desc'
+      );
+    });
+
+    it('still drops the real cursor it fell back to', () => {
+      mockQuery = 'page=4&attributes_color=black';
+      const { container } = renderSort({
+        pageQueryParam: 'attributes_color'
+      });
+
+      chooseSort(container, 'price_desc');
+
+      expect(mockPush).toHaveBeenCalledWith(
+        '/list?attributes_color=black&sorter=price_desc'
+      );
+    });
+
+    it('drops nothing when a facet owns the fallback key too', () => {
+      // A listing whose own facet is called "page": there is no cursor left to
+      // fall back to, and leaving a stale cursor beats erasing a filter.
+      mockQuery = 'page=4&attributes_color=black';
+      const { container } = renderSort({ pageQueryParam: 'attributes_color' }, [
+        COLOR,
+        facet('page', 'Sayfa', [{ label: 'Dört', value: '4' }], 'page')
+      ]);
+
+      chooseSort(container, 'price_desc');
+
+      expect(mockPush).toHaveBeenCalledWith(
+        '/list?page=4&attributes_color=black&sorter=price_desc'
+      );
+    });
+
+    it('resolves the same key in the option panel', () => {
+      mockQuery = 'attributes_color=black';
+      renderSort({ variant: 'panel', pageQueryParam: 'attributes_color' });
+
+      fireEvent.click(screen.getByRole('button'));
+      fireEvent.click(screen.getByText('Newest'));
+
+      expect(mockPush).toHaveBeenCalledWith(
+        '/list?attributes_color=black&sorter=newest'
+      );
+    });
+  });
+
+  /**
+   * Two controls on one page must answer "which key is the page cursor" the
+   * same way — a filter that survives the sort but not the next facet click
+   * is the same bug wearing the other block's clothes.
+   */
+  it('agrees with the facet block about which key is the cursor', () => {
+    mockQuery = 'attributes_color=black';
+    const properties = { pageQueryParam: 'attributes_color' };
+
+    render(
+      <ThemePageContextProvider
+        value={pageContext([
+          facet('color', 'Renk', [
+            { label: 'Siyah', value: 'black', selected: true },
+            { label: 'Beyaz', value: 'white' }
+          ]),
+          SIZE
+        ])}
+      >
+        <SortSelectBlock {...blockProps('sort-select', properties)} />
+        <FacetFiltersBlock
+          {...blockProps('facet-filters', {
+            ...properties,
+            layout: 'sidebar'
+          })}
+        />
+      </ThemePageContextProvider>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /^M/ }));
+    expect(mockPush).toHaveBeenLastCalledWith(
+      '/list?attributes_color=black&attributes_size=m'
+    );
+
+    chooseSort(document.body as HTMLElement, 'price_desc');
+    expect(mockPush).toHaveBeenLastCalledWith(
+      '/list?attributes_color=black&sorter=price_desc'
+    );
+  });
+
+  it('keeps every value of a multi-valued filter it refused to drop', () => {
+    mockQuery = 'attributes_color=black&attributes_color=white&page=3';
+    const { container } = renderSort({ pageQueryParam: 'attributes_color' });
+
+    chooseSort(container, 'newest');
+
+    const params = new URLSearchParams(
+      String(mockPush.mock.calls[0][0]).split('?')[1]
+    );
+    expect(params.getAll('attributes_color')).toEqual(['black', 'white']);
+    expect(params.get('page')).toBeNull();
+  });
+
+  it('protects a facet that has no search_key of its own', () => {
+    // The listing normaliser falls back search_key -> key, so this facet's URL
+    // key is the bare "color" — the refusal has to see it under that name too.
+    mockQuery = 'color=black';
+    const { container } = renderSort({ pageQueryParam: 'color' }, [
+      {
+        key: 'color',
+        name: 'Renk',
+        widget_type: 'multiselect',
+        data: {
+          choices: [
+            { label: 'Siyah', value: 'black', quantity: 5, is_selected: true }
+          ]
+        }
+      }
+    ]);
+
+    chooseSort(container, 'price_desc');
+
+    expect(mockPush).toHaveBeenCalledWith('/list?color=black&sorter=price_desc');
+  });
+
+  it('resolves per breakpoint rather than once for the block', () => {
+    mockQuery = 'attributes_color=black&page=2';
+    const { container } = render(
+      <ThemePageContextProvider value={pageContext()}>
+        <SortSelectBlock
+          {...({
+            ...(blockProps('sort-select', {
+              pageQueryParam: { mobile: 'attributes_color', desktop: 'page' }
+            }) as object),
+            currentBreakpoint: 'mobile'
+          } as never)}
+        />
+      </ThemePageContextProvider>
+    );
+
+    chooseSort(container, 'price_desc');
+
+    // Mobile named a facet, so mobile falls back to "page" — the colour has to
+    // survive there even though the desktop value would have been honoured.
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list?attributes_color=black&sorter=price_desc'
+    );
+  });
+});
+
+/**
+ * `queryParam` is free text as well, and the sort is WRITTEN into it rather
+ * than deleted: a merchant who types a facet's own `search_key` here turns
+ * every sort change into `?attributes_color=price_desc` — the shopper's colour
+ * replaced by a sorter value commerce reads as a colour, so the grid empties.
+ */
+describe('sort — the key it writes into', () => {
+  it('writes into the shipped key when a facet owns the typed one', () => {
+    mockQuery = 'attributes_color=black&page=2';
+    const { container } = renderSort({ queryParam: 'attributes_color' });
+
+    chooseSort(container, 'price_desc');
+
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list?attributes_color=black&sorter=price_desc'
+    );
+  });
+
+  it('honours a custom sort key no facet owns', () => {
+    mockQuery = 'attributes_color=black';
+    const { container } = renderSort({ queryParam: 'order_by' });
+
+    chooseSort(container, 'newest');
+
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list?attributes_color=black&order_by=newest'
+    );
+  });
+
+  it('leaves the typed key alone on a listing that facets on "sorter"', () => {
+    // No "write nothing" option exists for the sort, so when the fallback is
+    // claimed too the merchant's key stands rather than being sent elsewhere.
+    mockQuery = '';
+    const { container } = renderSort({ queryParam: 'sorter' }, [
+      COLOR,
+      facet('sorter', 'Sıralama', [{ label: 'Newest', value: 'newest' }], 'sorter')
+    ]);
+
+    chooseSort(container, 'newest');
+
+    expect(mockPush).toHaveBeenCalledWith('/list?sorter=newest');
+  });
+
+  it('never pushes a nameless parameter when a breakpoint is cleared', () => {
+    // A bare '' falls back inside getResponsiveValue, but a per-breakpoint ''
+    // reaches the block verbatim — and `params.set('', …)` writes "?=newest".
+    mockQuery = '';
+    const { container } = renderSort({ queryParam: { desktop: '' } });
+
+    chooseSort(container, 'newest');
+
+    expect(mockPush).toHaveBeenCalledWith('/list?sorter=newest');
+  });
+});

package/src/__tests__/theme-block-html-id.test.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// A trivial renderer for every type, so the test observes the wrapper ThemeBlock
+// builds rather than any particular block's markup.
+jest.mock('../blocks/block-renderer-registry', () => ({
+  __esModule: true,
+  default: {
+    getRenderer: () => () => <p data-testid="rendered">R</p>,
+    hasRenderer: () => true
+  }
+}));
+
+import ThemeBlock, { sanitizeHtmlId } from '../theme-block';
+import { WithDesignerFeatures } from '../components/with-designer-features';
+
+const blockOf = (properties: Record<string, unknown> = {}) => ({
+  id: 'blk-1',
+  type: 'group',
+  label: 'Card',
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: blockOf(),
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('ThemeBlock — html id is absent by default', () => {
+  /**
+   * The proof that nothing rendering today changes: the control below is
+   * literally the render tree ThemeBlock had before the id existed — the
+   * designer wrapper with the block renderer as its only child.
+   */
+  it('renders byte-identically to the pre-change tree when no id is set', () => {
+    const { container } = render(<ThemeBlock {...props()} />);
+
+    const control = render(
+      <WithDesignerFeatures
+        block={blockOf()}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        isSelected={false}
+        currentBreakpoint="desktop"
+      >
+        <p data-testid="rendered">R</p>
+      </WithDesignerFeatures>
+    );
+
+    expect(container.innerHTML).toBe(control.container.innerHTML);
+    expect(container.innerHTML).toBe(
+      '<div data-block-id="blk-1" class="relative"><p data-testid="rendered">R</p></div>'
+    );
+  });
+
+  it('emits no anchor and no id attribute at all', () => {
+    const { container } = render(<ThemeBlock {...props()} />);
+
+    expect(container.querySelector('[data-theme-anchor]')).toBeNull();
+    expect(container.querySelector('[id]')).toBeNull();
+  });
+
+  it('emits nothing when the id sanitises down to nothing', () => {
+    const { container } = render(
+      <ThemeBlock {...props({ block: blockOf({ htmlId: '123' }) })} />
+    );
+
+    expect(container.querySelector('[data-theme-anchor]')).toBeNull();
+  });
+});
+
+describe('ThemeBlock — html id when authored', () => {
+  it('gives a jump link something to point at', () => {
+    const { container } = render(
+      <ThemeBlock {...props({ block: blockOf({ htmlId: 'reviews' }) })} />
+    );
+
+    const anchor = container.querySelector('#reviews') as HTMLElement;
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveAttribute('data-theme-anchor');
+    expect(anchor).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('keeps the anchor out of flow so the block does not move', () => {
+    const { container } = render(
+      <ThemeBlock {...props({ block: blockOf({ htmlId: 'reviews' }) })} />
+    );
+
+    const anchor = container.querySelector('#reviews') as HTMLElement;
+    expect(anchor.style.position).toBe('absolute');
+    expect(anchor.style.width).toBe('0px');
+    expect(anchor.style.height).toBe('0px');
+  });
+
+  it('leaves the block markup itself untouched', () => {
+    const withId = render(
+      <ThemeBlock {...props({ block: blockOf({ htmlId: 'reviews' }) })} />
+    );
+    const rendered = withId.container.querySelector('[data-testid="rendered"]');
+
+    expect(rendered).toBeInTheDocument();
+    expect(rendered?.outerHTML).toBe('<p data-testid="rendered">R</p>');
+    // The anchor is a sibling of the block, never a wrapper around it.
+    expect(rendered?.parentElement).toHaveAttribute('data-block-id', 'blk-1');
+  });
+
+  it('reads the id per breakpoint like every other property', () => {
+    const { container } = render(
+      <ThemeBlock
+        {...props({
+          block: blockOf({ htmlId: { desktop: 'reviews', mobile: 'r-m' } }),
+          currentBreakpoint: 'mobile'
+        })}
+      />
+    );
+
+    expect(container.querySelector('#r-m')).toBeInTheDocument();
+  });
+
+  it('renders the same anchor in the designer (preview parity)', () => {
+    const { container } = render(
+      <ThemeBlock
+        {...props({ block: blockOf({ htmlId: 'reviews' }), isDesigner: true })}
+      />
+    );
+
+    expect(container.querySelector('#reviews')).toBeInTheDocument();
+  });
+});
+
+describe('sanitizeHtmlId', () => {
+  it('passes a well-formed id through unchanged', () => {
+    expect(sanitizeHtmlId('size-guide_2')).toBe('size-guide_2');
+  });
+
+  it('turns spaces into hyphens rather than dropping the words together', () => {
+    expect(sanitizeHtmlId('  Size guide  ')).toBe('Size-guide');
+  });
+
+  it('strips characters that would break a selector or a fragment', () => {
+    expect(sanitizeHtmlId('re#vie.ws:1/2?x"y')).toBe('reviews12xy');
+  });
+
+  it('refuses a leading digit', () => {
+    expect(sanitizeHtmlId('3-reasons')).toBe('reasons');
+  });
+
+  it('returns nothing for a value with nothing usable left', () => {
+    expect(sanitizeHtmlId('###')).toBe('');
+    expect(sanitizeHtmlId('42')).toBe('');
+    expect(sanitizeHtmlId('')).toBe('');
+  });
+
+  it('ignores a non-string value', () => {
+    expect(sanitizeHtmlId(undefined)).toBe('');
+    expect(sanitizeHtmlId(7)).toBe('');
+    expect(sanitizeHtmlId({ desktop: 'x' })).toBe('');
+  });
+});

package/src/blocks/__tests__/__snapshots__/product-gallery-block.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductGalleryBlock — golden default render renders arrows, dots and the counter unchanged 1`] = `"<div data-product-gallery="" data-product-gallery-thumb-position="bottom" style="display: flex; flex-direction: column; gap: 8px; width: 100%;"><div data-product-gallery-main="" data-part="main" style="position: relative; width: 100%; overflow: hidden;"><img alt="front" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"><button type="button" data-product-gallery-arrow="prev" data-part="arrow" aria-label="Previous image" style="position: absolute; top: 50%; left: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0px; border-radius: 50%; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"></path></svg></button><button type="button" data-product-gallery-arrow="next" data-part="arrow" aria-label="Next image" style="position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0px; border-radius: 50%; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"></path></svg></button></div><div data-product-gallery-dots="" data-part="dot-list" style="display: flex; align-items: center; justify-content: center; gap: 6px;"><button type="button" data-product-gallery-dot="active" data-part="dot" data-state="selected" aria-label="Go to image 1" aria-current="true" style="width: 8px; height: 8px; padding: 0px; border-radius: 50%; cursor: pointer; background: currentColor;"></button><button type="button" data-product-gallery-dot="default" data-part="dot" aria-label="Go to image 2" aria-current="false" style="width: 8px; height: 8px; padding: 0px; border-radius: 50%; cursor: pointer;"></button><button type="button" data-product-gallery-dot="default" data-part="dot" aria-label="Go to image 3" aria-current="false" style="width: 8px; height: 8px; padding: 0px; border-radius: 50%; cursor: pointer;"></button></div><div data-product-gallery-counter="" data-part="counter" aria-live="polite" aria-atomic="true" style="text-align: center;">1 / 3</div><div data-product-gallery-thumbs="" data-part="thumb-list" style="display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: visible; flex-wrap: nowrap;"><button type="button" data-product-gallery-thumb="active" data-part="thumb" data-state="selected" aria-label="Wool Coat image 1" aria-current="true" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 2" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/b.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 3" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/c.jpg"></button></div></div>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the carousel exactly as it did before zoom existed 1`] = `"<div data-product-gallery="" data-product-gallery-thumb-position="bottom" style="display: flex; flex-direction: column; gap: 8px; width: 100%;"><div data-product-gallery-main="" data-part="main" style="width: 100%; overflow: hidden;"><img alt="front" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></div><div data-product-gallery-thumbs="" data-part="thumb-list" style="display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: visible; flex-wrap: nowrap;"><button type="button" data-product-gallery-thumb="active" data-part="thumb" data-state="selected" aria-label="Wool Coat image 1" aria-current="true" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 2" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/b.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 3" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/c.jpg"></button></div></div>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the designer carousel unchanged 1`] = `"<div data-product-gallery="" data-product-gallery-thumb-position="bottom" style="display: flex; flex-direction: column; gap: 8px; width: 100%;"><div data-product-gallery-main="" data-part="main" style="width: 100%; overflow: hidden;"><img alt="front" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></div><div data-product-gallery-thumbs="" data-part="thumb-list" style="display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: visible; flex-wrap: nowrap;"><button type="button" data-product-gallery-thumb="active" data-part="thumb" data-state="selected" aria-label="Wool Coat image 1" aria-current="true" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 2" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/b.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 3" aria-current="false" style="flex: 0 0 auto; width: 64px; height: 64px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/c.jpg"></button></div></div>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the designer placeholder when the product has no photos 1`] = `"<span data-theme-block-placeholder="" data-product-gallery="" style="display: inline-block; padding: 6px 10px; border: 1px dashed #d1d5db; border-radius: 4px; color: rgb(107, 114, 128); font-size: 12px; line-height: 1.4;">Product gallery (no product images)</span>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the grid layout unchanged 1`] = `"<div data-product-gallery="" data-product-gallery-layout="grid" data-product-gallery-id="gallery" style="width: 100%;"><style>[data-product-gallery-id="gallery"] [data-part="grid"]{grid-template-columns:repeat(2,minmax(0,1fr));}@media (max-width:1023px){[data-product-gallery-id="gallery"] [data-part="grid"]{grid-template-columns:repeat(1,minmax(0,1fr));}}</style><div data-part="grid" style="display: grid; gap: 8px; width: 100%;"><div data-product-gallery-cell="active" data-part="main" data-state="selected" style="overflow: hidden;"><img alt="front" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></div><div data-product-gallery-cell="default" data-part="main" style="overflow: hidden;"><img alt="back" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/b.jpg"></div><div data-product-gallery-cell="default" data-part="main" style="overflow: hidden;"><img alt="Wool Coat" data-part="image" loading="lazy" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/c.jpg"></div></div></div>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the side-thumbnail arrangement unchanged 1`] = `"<div data-product-gallery="" data-product-gallery-thumb-position="left" style="display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 8px; width: 100%;"><div data-product-gallery-main="" data-part="main" style="flex: 1 1 auto; min-width: 0; overflow: hidden;"><img alt="front" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></div><div data-product-gallery-thumbs="" data-part="thumb-list" style="display: flex; flex-direction: column; gap: 8px; overflow-x: visible; overflow-y: auto; flex-wrap: nowrap;"><button type="button" data-product-gallery-thumb="active" data-part="thumb" data-state="selected" aria-label="Wool Coat image 1" aria-current="true" style="flex: 0 0 auto; width: 80px; height: 80px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/a.jpg"></button><button type="button" data-product-gallery-thumb="default" data-part="thumb" aria-label="Wool Coat image 2" aria-current="false" style="flex: 0 0 auto; width: 80px; height: 80px; padding: 0px; cursor: pointer; overflow: hidden; background: transparent;"><img alt="" loading="lazy" data-part="thumb-image" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/b.jpg"></button></div></div>"`;
+
+exports[`ProductGalleryBlock — golden default render renders the single-image product unchanged 1`] = `"<div data-product-gallery="" data-product-gallery-thumb-position="bottom" style="display: flex; flex-direction: column; gap: 8px; width: 100%;"><div data-product-gallery-main="" data-part="main" style="width: 100%; overflow: hidden;"><img alt="Product" data-part="image" loading="eager" style="display: block; width: 100%; height: 100%; object-fit: cover;" src="https://cdn.example.com/only.jpg"></div></div>"`;