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

package/src/sections/__tests__/tablet-raw-bucket-readers.test.tsx

@@ -0,0 +1,186 @@
+/**
+ * The readers that go at a per-breakpoint bucket by hand.
+ *
+ * `getResponsiveValue` knows where a breakpoint looks when it has nothing of
+ * its own. A handful of renderers never asked it — they index the bucket
+ * themselves and fall straight to `desktop`. That was harmless while `mobile`
+ * was the only other key there was, and it is a live regression the moment a
+ * viewport starts reporting `tablet`: at 900px these readers stop seeing the
+ * mobile value they saw the day before and hand back the desktop one.
+ *
+ * Every case below is a composition that authored desktop and mobile and
+ * nothing else. The assertion is always the same shape — what 900px renders
+ * must be what 767px renders, because that is what it rendered before this
+ * breakpoint existed.
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id?: string } }) => (
+    <div data-testid="tb" data-id={block?.id} />
+  )
+}));
+
+import TabsSection from '../tabs-section';
+import ContactFormSection from '../contact-form-section';
+import OrderTrackingLookupSection from '../order-tracking-lookup-section';
+import ImageGalleryBlock from '../../blocks/image-gallery-block';
+import type { Section } from '../../theme-section';
+
+const makeSection = (overrides: Record<string, unknown>): Section =>
+  ({
+    id: 'section-1',
+    name: 'S',
+    label: 'S',
+    properties: {},
+    styles: {},
+    blocks: [],
+    order: 0,
+    hidden: false,
+    ...overrides
+  } as unknown as Section);
+
+describe('tabs-section reads the max-width bucket', () => {
+  // `max-width: full` on a phone, `narrow` on a desktop: the container is
+  // edge-to-edge below 1024 and centred above it.
+  const section = makeSection({
+    type: 'tabs',
+    styles: { 'max-width': { desktop: 'narrow', mobile: 'full' } },
+    blocks: [
+      {
+        id: 't1',
+        type: 'tab',
+        label: 'One',
+        blocks: [
+          { id: 't1-header', label: 'Tab Header', blocks: [] },
+          { id: 't1-content', label: 'Tab Content', blocks: [] }
+        ]
+      }
+    ]
+  });
+
+  const containerClassAt = (breakpoint: string): string => {
+    const { container, unmount } = render(
+      <TabsSection section={section} currentBreakpoint={breakpoint} />
+    );
+    const className = (container.firstChild as HTMLElement).className;
+    unmount();
+    return className;
+  };
+
+  it('keeps the mobile width across the whole band below 1024', () => {
+    expect(containerClassAt('tablet')).toBe(containerClassAt('mobile'));
+  });
+
+  it('does not centre a container the composition asked to run full-width', () => {
+    const className = containerClassAt('tablet');
+    expect(className).toContain('w-full');
+    expect(className).not.toContain('mx-auto');
+    expect(className).not.toContain('max-w-4xl');
+  });
+
+  it('still reads the desktop value on a desktop', () => {
+    expect(containerClassAt('desktop')).toContain('max-w-4xl');
+  });
+});
+
+describe('image-gallery-block reads the alt bucket', () => {
+  const block = {
+    id: 'gallery-1',
+    blocks: [
+      {
+        id: 'img-1',
+        type: 'image',
+        value: 'https://cdn/a.jpg',
+        properties: { alt: { desktop: 'Full product shot', mobile: 'Product' } }
+      }
+    ]
+  };
+
+  const altAt = (breakpoint: string): string => {
+    const { unmount } = render(
+      <ImageGalleryBlock
+        {...({
+          block,
+          placeholderId: 'ph',
+          sectionId: 'sec',
+          isDesigner: false,
+          selectedBlockId: null,
+          currentBreakpoint: breakpoint
+        } as never)}
+      />
+    );
+    const alt = (screen.getByRole('img') as HTMLImageElement).alt;
+    unmount();
+    return alt;
+  };
+
+  it('keeps the mobile alt text across the whole band below 1024', () => {
+    expect(altAt('tablet')).toBe(altAt('mobile'));
+    expect(altAt('tablet')).toBe('Product');
+  });
+
+  it('still reads the desktop alt text on a desktop', () => {
+    expect(altAt('desktop')).toBe('Full product shot');
+  });
+});
+
+describe('contact-form-section reads a property bucket', () => {
+  const section = makeSection({
+    type: 'contact-form',
+    properties: {
+      'button-text': { desktop: 'Send us a message', mobile: 'Send' }
+    }
+  });
+
+  const buttonTextAt = (breakpoint: string): string => {
+    const { unmount } = render(
+      <ContactFormSection section={section} currentBreakpoint={breakpoint} />
+    );
+    const text = screen.getByRole('button', { name: /send/i }).textContent ?? '';
+    unmount();
+    return text;
+  };
+
+  it('keeps the mobile label across the whole band below 1024', () => {
+    expect(buttonTextAt('tablet')).toBe(buttonTextAt('mobile'));
+    expect(buttonTextAt('tablet')).toBe('Send');
+  });
+
+  it('still reads the desktop label on a desktop', () => {
+    expect(buttonTextAt('desktop')).toBe('Send us a message');
+  });
+});
+
+describe('order-tracking-lookup-section reads a property bucket', () => {
+  const section = makeSection({
+    type: 'order-tracking-lookup',
+    properties: {
+      'button-text': { desktop: 'Track my order', mobile: 'Track' }
+    }
+  });
+
+  const buttonTextAt = (breakpoint: string): string => {
+    const { unmount } = render(
+      <OrderTrackingLookupSection
+        section={section}
+        currentBreakpoint={breakpoint}
+      />
+    );
+    const text =
+      screen.getByRole('button', { name: /track/i }).textContent ?? '';
+    unmount();
+    return text;
+  };
+
+  it('keeps the mobile label across the whole band below 1024', () => {
+    expect(buttonTextAt('tablet')).toBe(buttonTextAt('mobile'));
+    expect(buttonTextAt('tablet')).toBe('Track');
+  });
+
+  it('still reads the desktop label on a desktop', () => {
+    expect(buttonTextAt('desktop')).toBe('Track my order');
+  });
+});

package/src/utils/__tests__/part-ownership-guard.test.tsx

@@ -62,6 +62,21 @@ const accordion = (
   ]
 });
 
+const faq = (id: string) => ({
+  id,
+  type: 'faq-accordion',
+  label: 'FAQ',
+  value: '',
+  properties: { searchable: true },
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [
+    group(`${id}-q1`, 'First question', [text(`${id}-a1`)]),
+    group(`${id}-q2`, 'Second question', [text(`${id}-a2`)])
+  ]
+});
+
 const sectionOf = (root: unknown): Section[] =>
   [
     {
@@ -194,10 +209,20 @@ describe('the guard reaches every level, not just the first', () => {
 });
 
 describe('the guard never costs a block a part it owns', () => {
-  // The breadth case — one tree built from many part-stamped renderers — lands
-  // with the renderer vocabulary itself. Only a handful of renderers name their
-  // internals at this point, so asserting a wide sweep here would either be
-  // vacuous or force the whole block catalogue into this change.
+  it('across nested containers built from shipped renderers', () => {
+    const { container } = renderRoot(
+      accordion('outer', {}, [
+        faq('faq-1'),
+        accordion('nested', {}, [faq('faq-2')])
+      ])
+    );
+
+    // Premise: the sweep below is meaningless if nothing rendered a part.
+    expect(
+      container.querySelectorAll('[data-part]').length
+    ).toBeGreaterThanOrEqual(20);
+    expect(partsTheirOwnBlockCannotReach(container)).toEqual([]);
+  });
 
   it('across repeated rows, which share one style identity', () => {
     const expanded = buildIteratorBlock({