@akinon/pz-theme 2.0.71-rc.0 → 2.0.71

package/src/custom/__tests__/theme-editable.test.tsx

@@ -0,0 +1,486 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CustomBlockContext } from '../block-context';
+import type { CustomBlockContextValue } from '../block-context';
+import { ThemeEditable } from '../theme-editable';
+import { resetDevWarnCacheForTests } from '../../utils/dev-warn';
+
+const contextValue = (
+  over: Partial<CustomBlockContextValue> = {}
+): CustomBlockContextValue => ({
+  block: {
+    id: 'b1',
+    type: 'custom:acme:promo-strip',
+    label: 'Promo strip',
+    properties: {},
+    styles: {},
+    order: 0,
+    hidden: false
+  },
+  placeholderId: 'header',
+  sectionId: 's1',
+  isDesigner: false,
+  currentBreakpoint: 'desktop',
+  ...over
+});
+
+/** Renders inside a custom block whose properties are the merchant's values. */
+const renderInBlock = (
+  ui: React.ReactNode,
+  over: Partial<CustomBlockContextValue> & {
+    properties?: Record<string, unknown>;
+  } = {}
+) => {
+  const { properties, ...rest } = over;
+  const value = contextValue(rest);
+
+  if (properties) value.block = { ...value.block, properties };
+
+  return render(
+    <CustomBlockContext.Provider value={value}>
+      {ui}
+    </CustomBlockContext.Provider>
+  );
+};
+
+/**
+ * The refusal branch reads `process.env.NODE_ENV` at call time, so flipping it
+ * around a render is enough to exercise the production half — no module reset.
+ */
+const inProduction = (assertions: () => void) => {
+  const env = process.env as Record<string, string | undefined>;
+  const previous = env.NODE_ENV;
+  env.NODE_ENV = 'production';
+
+  try {
+    assertions();
+  } finally {
+    env.NODE_ENV = previous;
+  }
+};
+
+const Promo = () => <h2>from a component</h2>;
+
+describe('ThemeEditable', () => {
+  let warnSpy: jest.SpyInstance;
+  let errorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    // React logs every render-phase throw before rethrowing it; the refusal
+    // tests expect the throw, so the log is noise.
+    errorSpy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    errorSpy.mockRestore();
+  });
+
+  describe('type inference from the wrapped tag', () => {
+    const textTags = [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'p',
+      'span',
+      'strong',
+      'em',
+      'small',
+      'label',
+      'li',
+      'blockquote'
+    ];
+
+    it.each(textTags)('<%s> resolves the merchant text', (tag) => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          {React.createElement(tag, null, 'authored')}
+        </ThemeEditable>,
+        { properties: { headline: { desktop: 'merchant copy' } } }
+      );
+
+      const element = container.querySelector(tag) as HTMLElement;
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toBe('merchant copy');
+    });
+
+    it('<img> resolves the merchant value onto src', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="art">
+          <img src="/default.jpg" alt="promo" />
+        </ThemeEditable>,
+        { properties: { art: { desktop: '/merchant.jpg' } } }
+      );
+
+      const img = container.querySelector('img') as HTMLImageElement;
+      expect(img).toHaveAttribute('src', '/merchant.jpg');
+      // Untouched props survive the clone.
+      expect(img).toHaveAttribute('alt', 'promo');
+    });
+
+    it.each(['video', 'source'])(
+      '<%s> resolves the merchant value onto src',
+      (tag) => {
+        const { container } = renderInBlock(
+          <ThemeEditable name="clip">
+            {React.createElement(tag, { src: '/default.mp4' })}
+          </ThemeEditable>,
+          { properties: { clip: { desktop: '/merchant.mp4' } } }
+        );
+
+        expect(container.querySelector(tag)).toHaveAttribute(
+          'src',
+          '/merchant.mp4'
+        );
+      }
+    );
+
+    it('unwraps the image picker’s { url } shape at either level', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="art">
+          <img src="/default.jpg" />
+        </ThemeEditable>,
+        { properties: { art: { url: '/picked.jpg' } } }
+      );
+
+      expect(container.querySelector('img')).toHaveAttribute(
+        'src',
+        '/picked.jpg'
+      );
+
+      const nested = renderInBlock(
+        <ThemeEditable name="art">
+          <img src="/default.jpg" />
+        </ThemeEditable>,
+        { properties: { art: { desktop: { url: '/nested.jpg' } } } }
+      );
+
+      expect(nested.container.querySelector('img')).toHaveAttribute(
+        'src',
+        '/nested.jpg'
+      );
+    });
+
+    it('honours an explicit type on a tag that has no inference', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="banner" type="text">
+          <div>authored</div>
+        </ThemeEditable>,
+        { properties: { banner: { desktop: 'merchant copy' } } }
+      );
+
+      expect(container.querySelector('div')?.textContent).toBe('merchant copy');
+    });
+  });
+
+  describe('links carry two settings', () => {
+    it('applies the label and the href from separate keys', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        {
+          properties: {
+            cta: { desktop: 'Shop the drop' },
+            ctaHref: { desktop: '/new-season' }
+          }
+        }
+      );
+
+      const link = container.querySelector('a') as HTMLAnchorElement;
+      expect(link.textContent).toBe('Shop the drop');
+      expect(link).toHaveAttribute('href', '/new-season');
+    });
+
+    it('reports both settings, the second keyed <name>Href with a url control', () => {
+      const collect = { setting: jest.fn(), slot: jest.fn() };
+
+      renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        { collect }
+      );
+
+      const reported = collect.setting.mock.calls.map((call) => call[0]);
+      expect(reported.map((setting) => setting.key)).toEqual([
+        'cta',
+        'ctaHref'
+      ]);
+      expect(reported[0]).toMatchObject({
+        type: 'text',
+        editable: true,
+        defaultValue: { desktop: 'Shop now' }
+      });
+      expect(reported[1]).toMatchObject({
+        type: 'url',
+        defaultValue: { desktop: '/sale' }
+      });
+      // NOT editable, and that is the whole point: `editable` is what
+      // `collect.ts` turns into a `field-<key>` part. One ThemeEditable clones
+      // one element, the `<a>` already carries `field-cta`, so nothing on the
+      // page could ever answer to `field-ctaHref`.
+      expect(reported[1]).not.toHaveProperty('editable');
+    });
+
+    it('falls back to each authored half independently', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        { properties: { ctaHref: { desktop: '/new-season' } } }
+      );
+
+      const link = container.querySelector('a') as HTMLAnchorElement;
+      expect(link.textContent).toBe('Shop now');
+      expect(link).toHaveAttribute('href', '/new-season');
+    });
+  });
+
+  describe('the authored JSX is the default', () => {
+    it('renders the authored content when the block has no properties', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('New season');
+    });
+
+    it('a merchant value overrides it', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        { properties: { headline: { desktop: 'Mid season' } } }
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('Mid season');
+    });
+
+    it('reports the authored default per breakpoint through the collect sink', () => {
+      const collect = { setting: jest.fn(), slot: jest.fn() };
+
+      renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        { collect }
+      );
+
+      expect(collect.setting).toHaveBeenCalledWith({
+        key: 'headline',
+        type: 'text',
+        label: 'Headline',
+        defaultValue: { desktop: 'New season' },
+        editable: true
+      });
+    });
+
+    it('omits an unserializable default but still renders it', () => {
+      const collect = { setting: jest.fn(), slot: jest.fn() };
+
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>
+            New <strong>season</strong>
+          </h2>
+        </ThemeEditable>,
+        { collect }
+      );
+
+      expect(collect.setting).toHaveBeenCalledWith(
+        expect.objectContaining({ key: 'headline', defaultValue: undefined })
+      );
+      expect(container.querySelector('h2')?.textContent).toBe('New season');
+    });
+  });
+
+  describe('per-breakpoint resolution', () => {
+    it('uses the value authored for the active breakpoint', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        {
+          properties: {
+            headline: { desktop: 'Wide copy', mobile: 'Short copy' }
+          },
+          currentBreakpoint: 'mobile'
+        }
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('Short copy');
+    });
+
+    it('inherits down the breakpoint chain the way the emitted CSS does', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        {
+          properties: { headline: { mobile: 'Short copy' } },
+          currentBreakpoint: 'tablet'
+        }
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('Short copy');
+    });
+
+    it('falls back to the authored JSX for a bare empty value', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        { properties: { headline: '' } }
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('New season');
+    });
+
+    it('lets a merchant blank the field for one breakpoint', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        { properties: { headline: { desktop: '' } } }
+      );
+
+      expect(container.querySelector('h2')?.textContent).toBe('');
+    });
+  });
+
+  describe('editor targeting', () => {
+    it('emits data-part="field-<name>"', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>
+      );
+
+      expect(container.querySelector('h2')).toHaveAttribute(
+        'data-part',
+        'field-headline'
+      );
+    });
+
+    it('never clobbers a data-part the developer chose', () => {
+      const { container } = renderInBlock(
+        <ThemeEditable name="headline">
+          <h2 data-part="title">New season</h2>
+        </ThemeEditable>
+      );
+
+      expect(container.querySelector('h2')).toHaveAttribute(
+        'data-part',
+        'title'
+      );
+    });
+  });
+
+  describe('refusals', () => {
+    const cases: Array<[string, React.ReactElement, string]> = [
+      [
+        'a component child',
+        <ThemeEditable name="headline" key="component">
+          <Promo />
+        </ThemeEditable>,
+        'from a component'
+      ],
+      [
+        'no element child',
+        <ThemeEditable name="headline" key="bare">
+          just a string
+        </ThemeEditable>,
+        'just a string'
+      ],
+      [
+        'more than one child',
+        <ThemeEditable name="headline" key="many">
+          <h2>one</h2>
+          <h3>two</h3>
+        </ThemeEditable>,
+        'onetwo'
+      ],
+      [
+        'a container tag with no explicit type',
+        <ThemeEditable name="headline" key="container">
+          <div>authored</div>
+        </ThemeEditable>,
+        'authored'
+      ],
+      [
+        'a name that is not a usable key',
+        <ThemeEditable name="Head Line" key="badname">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        'New season'
+      ],
+      [
+        'a name the property panel reserves',
+        <ThemeEditable name="items" key="reserved">
+          <h2>New season</h2>
+        </ThemeEditable>,
+        'New season'
+      ]
+    ];
+
+    it.each(cases)('throws in development for %s', (_label, ui) => {
+      expect(() => renderInBlock(ui)).toThrow(/\[pz-theme\] <ThemeEditable/);
+    });
+
+    it.each(cases)(
+      'renders the child untouched in production for %s',
+      (_label, ui, expectedText) => {
+        inProduction(() => {
+          const { container } = renderInBlock(ui);
+          expect(container.textContent).toBe(expectedText);
+          // No field wiring happened, so nothing claims a part.
+          expect(container.querySelector('[data-part]')).toBeNull();
+        });
+      }
+    );
+
+    it('refuses a link whose derived href key would overflow the key pattern', () => {
+      const name = 'a'.repeat(30);
+
+      expect(() =>
+        renderInBlock(
+          <ThemeEditable name={name}>
+            <a href="/sale">Shop now</a>
+          </ThemeEditable>
+        )
+      ).toThrow(/companion key/);
+    });
+  });
+
+  describe('outside a custom block', () => {
+    it('renders the child untouched and warns once', () => {
+      const { container } = render(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>
+      );
+
+      const heading = container.querySelector('h2') as HTMLElement;
+      expect(heading.textContent).toBe('New season');
+      expect(heading).not.toHaveAttribute('data-part');
+
+      render(
+        <ThemeEditable name="headline">
+          <h2>New season</h2>
+        </ThemeEditable>
+      );
+
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0][0]).toContain('is outside a custom block');
+    });
+  });
+});