@akinon/pz-theme 2.0.100-rc.0 → 2.0.101-beta.0

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

@@ -257,3 +257,176 @@ describe('ImageBlock leaves its box to the sheet', () => {
     expect(screen.getByText('No image uploaded').style.minHeight).toBe('');
   });
 });
+
+/**
+ * Per-breakpoint art direction.
+ *
+ * Two invariants carry this feature and both are easy to lose in a refactor:
+ *
+ * 1. A block with no override must emit BYTE-IDENTICAL markup to the old
+ *    renderer — no `<picture>`, no extra element. 198 image blocks exist in
+ *    this repo's fixtures alone and none of them has an override.
+ * 2. `<picture>` resolves by FIRST MATCH, not by cascade. The phone band is
+ *    therefore exclusive when a tablet image exists and widened to 1023 when it
+ *    does not, which is what reproduces the stylesheet's "mobile covers tablet
+ *    unless tablet overrides" rule the merchant already knows.
+ */
+describe('ImageBlock — per-breakpoint sources', () => {
+  const withSources = (
+    overrides: Record<string, unknown>,
+    extra: Record<string, unknown> = {}
+  ) => ({
+    id: 'b-art',
+    value: 'https://example.com/desktop.jpg',
+    properties: { alt: 'Kampanya', ...overrides },
+    ...extra
+  });
+
+  const sources = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('source')).map((el) => ({
+      media: el.getAttribute('media'),
+      srcSet: el.getAttribute('srcset')
+    }));
+
+  it('emits no <picture> when only the desktop image is authored', () => {
+    const { container } = renderBlock(withSources({}));
+
+    expect(container.querySelector('picture')).toBeNull();
+    expect(getImg(container)?.getAttribute('src')).toBe(
+      'https://example.com/desktop.jpg'
+    );
+  });
+
+  it('widens the phone band to the tablet edge when no tablet image is authored', () => {
+    const { container } = renderBlock(
+      withSources({ imageMobile: 'https://example.com/phone.jpg' })
+    );
+
+    expect(container.querySelector('picture')).not.toBeNull();
+    expect(sources(container)).toEqual([
+      { media: '(max-width: 1023px)', srcSet: 'https://example.com/phone.jpg' }
+    ]);
+  });
+
+  it('narrows the phone band and orders phone before tablet when both exist', () => {
+    const { container } = renderBlock(
+      withSources({
+        imageMobile: 'https://example.com/phone.jpg',
+        imageTablet: 'https://example.com/tablet.jpg'
+      })
+    );
+
+    expect(sources(container)).toEqual([
+      { media: '(max-width: 767px)', srcSet: 'https://example.com/phone.jpg' },
+      {
+        media: '(min-width: 768px) and (max-width: 1023px)',
+        srcSet: 'https://example.com/tablet.jpg'
+      }
+    ]);
+  });
+
+  it('emits only the tablet band when the phone image is left empty', () => {
+    const { container } = renderBlock(
+      withSources({ imageTablet: 'https://example.com/tablet.jpg' })
+    );
+
+    expect(sources(container)).toEqual([
+      {
+        media: '(min-width: 768px) and (max-width: 1023px)',
+        srcSet: 'https://example.com/tablet.jpg'
+      }
+    ]);
+  });
+
+  it('drops an override that is the same file as the desktop image', () => {
+    const { container } = renderBlock(
+      withSources({ imageMobile: 'https://example.com/desktop.jpg' })
+    );
+
+    expect(container.querySelector('picture')).toBeNull();
+  });
+
+  it('keeps the <img> as the desktop candidate and the only carrier of alt', () => {
+    const { container } = renderBlock(
+      withSources({ imageMobile: 'https://example.com/phone.jpg' })
+    );
+
+    const img = getImg(container);
+    expect(img?.getAttribute('src')).toBe('https://example.com/desktop.jpg');
+    expect(img?.getAttribute('alt')).toBe('Kampanya');
+    // alt is illegal on <source>; the browser reads it from the <img> whichever
+    // candidate it picks.
+    expect(container.querySelector('source')?.hasAttribute('alt')).toBe(false);
+  });
+
+  /**
+   * Without `display: contents` the <picture> becomes the flex item the parent
+   * lays out and the percentage parent the <img> resolves against, and an
+   * authored `height: 100%` collapses against an auto-height box.
+   */
+  it('keeps the <picture> out of layout', () => {
+    const { container } = renderBlock(
+      withSources({ imageMobile: 'https://example.com/phone.jpg' })
+    );
+
+    expect(
+      (container.querySelector('picture') as HTMLElement).style.display
+    ).toBe('contents');
+  });
+
+  describe('the canvas resolves in JS instead, because <source media> answers the real viewport', () => {
+    const designer = (breakpoint: string, overrides: Record<string, unknown>) =>
+      render(
+        <ImageBlock
+          {...({
+            block: withSources(overrides),
+            isDesigner: true,
+            currentBreakpoint: breakpoint
+          } as unknown as BlockRendererProps)}
+        />
+      );
+
+    it('shows the phone image at the phone preview', () => {
+      const { container } = designer('mobile', {
+        imageMobile: 'https://example.com/phone.jpg'
+      });
+
+      expect(container.querySelector('picture')).toBeNull();
+      expect(getImg(container)?.getAttribute('src')).toBe(
+        'https://example.com/phone.jpg'
+      );
+    });
+
+    it('falls through to the phone image at the tablet preview when no tablet image exists', () => {
+      const { container } = designer('tablet', {
+        imageMobile: 'https://example.com/phone.jpg'
+      });
+
+      expect(getImg(container)?.getAttribute('src')).toBe(
+        'https://example.com/phone.jpg'
+      );
+    });
+
+    it('shows the desktop image at the desktop preview', () => {
+      const { container } = designer('desktop', {
+        imageMobile: 'https://example.com/phone.jpg',
+        imageTablet: 'https://example.com/tablet.jpg'
+      });
+
+      expect(getImg(container)?.getAttribute('src')).toBe(
+        'https://example.com/desktop.jpg'
+      );
+    });
+  });
+
+  it('leaves the empty-state placeholder alone', () => {
+    const { container } = renderBlock({
+      id: 'b-empty',
+      value: '',
+      properties: { imageMobile: 'https://example.com/phone.jpg' }
+    });
+
+    expect(container.querySelector('picture')).toBeNull();
+    expect(screen.getByText('No image uploaded')).toBeInTheDocument();
+  });
+});

package/src/blocks/block-renderer-registry.tsx

@@ -91,6 +91,7 @@ import StoreLocatorBlock from './store-locator-block';
 import FaqAccordionBlock from './faq-accordion-block';
 import ShareBlock from './share-block';
 import ContainerBlock from './container-block';
+import CollapsibleBlock from './collapsible-block';
 import CarouselItemBlock from './carousel-item-block';
 import HoverShowcaseItemBlock from './hover-showcase-item-block';
 import IconGroupBlock from './icon-group-block';
@@ -143,6 +144,7 @@ blockRendererRegistry.register('button', ButtonBlock);
 blockRendererRegistry.register('icon', IconBlock);
 blockRendererRegistry.register('video', VideoBlock);
 blockRendererRegistry.register('accordion', AccordionBlock);
+blockRendererRegistry.register('collapsible', CollapsibleBlock);
 blockRendererRegistry.register('tab', TabBlock);
 blockRendererRegistry.register('counter', CounterBlock);
 blockRendererRegistry.register('image-gallery', ImageGalleryBlock);