@akinon/pz-theme 2.0.58-rc.0 → 2.0.59-beta.0

package/src/overlays/__tests__/modal-triggers.test.tsx

@@ -0,0 +1,272 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import {
+  __resetOverlayBusForTests,
+  getOpenModalIds,
+  isModalOpen,
+  openModal,
+  registerModalHost
+} from '../overlay-bus';
+import {
+  __resetModalDomBridgeForTests,
+  installModalDomBridge
+} from '../modal-dom-bridge';
+import {
+  canAutoOpen,
+  clearAutoOpenRecord,
+  markAutoOpened
+} from '../modal-frequency';
+import { resolveBlockAction, useBlockAction } from '../../hooks/use-block-action';
+
+const mkBlock = (properties: Record<string, unknown>) => ({ properties });
+
+describe('block actions', () => {
+  beforeEach(() => {
+    __resetOverlayBusForTests();
+    registerModalHost();
+  });
+
+  it('reads nothing from a block published before actions existed', () => {
+    // The whole backward-compatibility promise in one assertion.
+    expect(resolveBlockAction(mkBlock({ url: '/x' }))).toEqual({
+      type: 'none',
+      target: ''
+    });
+  });
+
+  it('refuses an action type it does not know', () => {
+    expect(
+      resolveBlockAction(mkBlock({ actionType: 'launch-missiles' })).type
+    ).toBe('none');
+  });
+
+  it('resolves per breakpoint like every other authored value', () => {
+    const block = mkBlock({
+      actionType: { desktop: 'open-modal', mobile: 'none' },
+      actionTarget: 'newsletter'
+    });
+
+    expect(resolveBlockAction(block, 'desktop').type).toBe('open-modal');
+    expect(resolveBlockAction(block, 'mobile').type).toBe('none');
+  });
+
+  const Trigger = ({
+    properties,
+    isDesigner = false
+  }: {
+    properties: Record<string, unknown>;
+    isDesigner?: boolean;
+  }) => {
+    const action = useBlockAction(mkBlock(properties), { isDesigner });
+
+    return (
+      <button type="button" onClick={action.onClick} {...action.ariaProps}>
+        trigger
+      </button>
+    );
+  };
+
+  it('opens the named modal and announces itself as a dialog trigger', () => {
+    render(
+      <Trigger
+        properties={{ actionType: 'open-modal', actionTarget: 'newsletter' }}
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'trigger' });
+    expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    act(() => {
+      button.click();
+    });
+
+    expect(isModalOpen('newsletter')).toBe(true);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(button).toHaveAttribute('aria-controls', 'theme-modal-newsletter');
+  });
+
+  it('claims aria-controls only while the modal is actually mounted', () => {
+    render(
+      <Trigger
+        properties={{ actionType: 'open-modal', actionTarget: 'newsletter' }}
+      />
+    );
+
+    // Pointing at an element that is not in the document is a broken
+    // reference, not a helpful one.
+    expect(screen.getByRole('button')).not.toHaveAttribute('aria-controls');
+  });
+
+  it('does nothing in the designer, where a click selects the block', () => {
+    render(
+      <Trigger
+        properties={{ actionType: 'open-modal', actionTarget: 'newsletter' }}
+        isDesigner
+      />
+    );
+
+    act(() => {
+      screen.getByRole('button').click();
+    });
+
+    expect(isModalOpen('newsletter')).toBe(false);
+  });
+
+  it('is inert when the action names no target', () => {
+    render(<Trigger properties={{ actionType: 'open-modal' }} />);
+
+    expect(screen.getByRole('button')).not.toHaveAttribute('aria-haspopup');
+  });
+
+  it('closes and toggles', () => {
+    openModal('a');
+
+    const { rerender } = render(
+      <Trigger properties={{ actionType: 'close-modal', actionTarget: 'a' }} />
+    );
+    act(() => {
+      screen.getByRole('button').click();
+    });
+    expect(isModalOpen('a')).toBe(false);
+
+    rerender(
+      <Trigger properties={{ actionType: 'toggle-modal', actionTarget: 'a' }} />
+    );
+    act(() => {
+      screen.getByRole('button').click();
+    });
+    expect(isModalOpen('a')).toBe(true);
+  });
+
+  it('closes the top modal without naming one', () => {
+    openModal('a');
+    openModal('b');
+
+    render(<Trigger properties={{ actionType: 'close-top-modal' }} />);
+    act(() => {
+      screen.getByRole('button').click();
+    });
+
+    expect(getOpenModalIds()).toEqual(['a']);
+  });
+});
+
+describe('DOM bridge', () => {
+  beforeEach(() => {
+    __resetOverlayBusForTests();
+    __resetModalDomBridgeForTests();
+    registerModalHost();
+    installModalDomBridge();
+  });
+
+  afterEach(() => __resetModalDomBridgeForTests());
+
+  it('opens from authored HTML that React does not own', () => {
+    // The embed block, a brand's own chrome, an agency snippet — none of them
+    // can call a hook.
+    render(
+      <div
+        dangerouslySetInnerHTML={{
+          __html: '<a href="/somewhere" data-pz-modal-open="newsletter">Sign up</a>'
+        }}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Sign up'));
+
+    expect(isModalOpen('newsletter')).toBe(true);
+  });
+
+  it('finds the attribute on an ancestor of what was actually clicked', () => {
+    render(
+      <div
+        dangerouslySetInnerHTML={{
+          __html:
+            '<button data-pz-modal-open="a"><span>inner</span></button>'
+        }}
+      />
+    );
+
+    fireEvent.click(screen.getByText('inner'));
+
+    expect(isModalOpen('a')).toBe(true);
+  });
+
+  it('exposes the same actions on window for brand code', () => {
+    act(() => {
+      window.pzTheme?.openModal('from-window');
+    });
+
+    expect(isModalOpen('from-window')).toBe(true);
+  });
+
+  it('ignores an ordinary click', () => {
+    render(<button type="button">plain</button>);
+
+    fireEvent.click(screen.getByText('plain'));
+
+    expect(getOpenModalIds()).toEqual([]);
+  });
+});
+
+describe('auto-open frequency', () => {
+  beforeEach(() => {
+    clearAutoOpenRecord('m');
+  });
+
+  it('always means always', () => {
+    markAutoOpened('m', 'always');
+    expect(canAutoOpen('m', 'always')).toBe(true);
+  });
+
+  it('once-per-session holds for the tab', () => {
+    expect(canAutoOpen('m', 'once-per-session')).toBe(true);
+    markAutoOpened('m', 'once-per-session');
+    expect(canAutoOpen('m', 'once-per-session')).toBe(false);
+  });
+
+  it('once-ever holds across sessions', () => {
+    markAutoOpened('m', 'once-ever');
+    expect(canAutoOpen('m', 'once-ever')).toBe(false);
+  });
+
+  it('once-per-day reopens after the day has passed', () => {
+    const now = Date.now();
+    const nowSpy = jest.spyOn(Date, 'now').mockReturnValue(now);
+
+    markAutoOpened('m', 'once-per-day');
+    expect(canAutoOpen('m', 'once-per-day')).toBe(false);
+
+    nowSpy.mockReturnValue(now + 25 * 60 * 60 * 1000);
+    expect(canAutoOpen('m', 'once-per-day')).toBe(true);
+
+    nowSpy.mockRestore();
+  });
+
+  it('fails open on a corrupted stamp rather than suppressing forever', () => {
+    window.localStorage.setItem('pz-theme:modal-seen:m', 'not-a-number');
+
+    expect(canAutoOpen('m', 'once-per-day')).toBe(true);
+  });
+
+  it('survives storage being unavailable, and still shows the modal', () => {
+    const getItem = jest
+      .spyOn(Storage.prototype, 'getItem')
+      .mockImplementation(() => {
+        throw new Error('denied');
+      });
+    const setItem = jest
+      .spyOn(Storage.prototype, 'setItem')
+      .mockImplementation(() => {
+        throw new Error('denied');
+      });
+
+    expect(canAutoOpen('m', 'once-ever')).toBe(true);
+    expect(() => markAutoOpened('m', 'once-ever')).not.toThrow();
+
+    getItem.mockRestore();
+    setItem.mockRestore();
+  });
+});

package/src/overlays/__tests__/overlay-bus.test.tsx

@@ -0,0 +1,197 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import {
+  __resetOverlayBusForTests,
+  closeAllModals,
+  closeModal,
+  closeTopModal,
+  getOpenModalIds,
+  isModalHostMounted,
+  isModalOpen,
+  openModal,
+  registerModalHost,
+  subscribeToModals,
+  toggleModal,
+  useModalOpen,
+  useOpenModalIds
+} from '../overlay-bus';
+import { resetDevWarnCacheForTests } from '../../utils/dev-warn';
+
+describe('overlay bus', () => {
+  beforeEach(() => {
+    __resetOverlayBusForTests();
+    resetDevWarnCacheForTests();
+    // Every case but the host ones assumes the brand mounted <ThemeModals />.
+    registerModalHost();
+  });
+
+  it('opens, closes and toggles by id', () => {
+    openModal('newsletter');
+    expect(isModalOpen('newsletter')).toBe(true);
+
+    closeModal('newsletter');
+    expect(isModalOpen('newsletter')).toBe(false);
+
+    toggleModal('newsletter');
+    expect(isModalOpen('newsletter')).toBe(true);
+
+    toggleModal('newsletter');
+    expect(isModalOpen('newsletter')).toBe(false);
+  });
+
+  it('keeps an id at most once, which is what stops a trigger looping on itself', () => {
+    openModal('newsletter');
+    openModal('newsletter');
+    openModal('newsletter');
+
+    expect(getOpenModalIds()).toEqual(['newsletter']);
+  });
+
+  it('refuses to stack more modals than a page could mean', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    for (let index = 0; index < 12; index++) openModal(`modal-${index}`);
+
+    expect(getOpenModalIds()).toHaveLength(8);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('opening them in a loop')
+    );
+
+    warn.mockRestore();
+  });
+
+  it('closes the most recently opened modal', () => {
+    openModal('a');
+    openModal('b');
+
+    closeTopModal();
+
+    expect(getOpenModalIds()).toEqual(['a']);
+  });
+
+  it('notifies subscribers only when the set actually changes', () => {
+    const listener = jest.fn();
+    const unsubscribe = subscribeToModals(listener);
+
+    openModal('a');
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    // Already open, already closed: neither is a change.
+    openModal('a');
+    closeModal('b');
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    closeModal('a');
+    expect(listener).toHaveBeenCalledTimes(2);
+
+    unsubscribe();
+    openModal('a');
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps a stable snapshot reference while nothing changes', () => {
+    openModal('a');
+    expect(getOpenModalIds()).toBe(getOpenModalIds());
+  });
+
+  describe('host beacon', () => {
+    it('names the missing host rather than failing silently', () => {
+      // A trigger the designer configured correctly, that does nothing when
+      // clicked, with no error anywhere, is the worst symptom this feature
+      // can produce. It is also the likeliest, since the host is one line
+      // each brand has to remember.
+      __resetOverlayBusForTests();
+      const warn = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => undefined);
+
+      expect(isModalHostMounted()).toBe(false);
+      openModal('newsletter');
+
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('<ThemeModals /> is not mounted')
+      );
+      // Queued anyway: the host may simply not have mounted yet this tick.
+      expect(isModalOpen('newsletter')).toBe(true);
+
+      warn.mockRestore();
+    });
+
+    it('stops warning once a host registers, and resumes when it leaves', () => {
+      const warn = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => undefined);
+
+      const unregister = registerModalHost();
+      openModal('a');
+      expect(warn).not.toHaveBeenCalled();
+
+      unregister();
+      unregister();
+      // The beforeEach registration is still counted, so one release of a
+      // second host must not take the page's only host away.
+      expect(isModalHostMounted()).toBe(true);
+
+      warn.mockRestore();
+    });
+  });
+
+  it('clears everything at once', () => {
+    openModal('a');
+    openModal('b');
+
+    closeAllModals();
+
+    expect(getOpenModalIds()).toEqual([]);
+  });
+
+  describe('across React roots', () => {
+    /**
+     * The reason this module exists. Header and body render as separate
+     * `ThemePlaceholderWrapper` trees, so a trigger in one has no provider,
+     * no context and no callback reaching a surface in the other.
+     */
+    const Trigger = () => (
+      <button type="button" onClick={() => openModal('newsletter')}>
+        open
+      </button>
+    );
+
+    const Surface = () => {
+      const open = useModalOpen('newsletter');
+
+      return <div>{open ? 'surface open' : 'surface closed'}</div>;
+    };
+
+    it('lets a trigger in one tree open a surface in another', () => {
+      render(<Trigger />);
+      render(<Surface />);
+
+      expect(screen.getByText('surface closed')).toBeInTheDocument();
+
+      act(() => {
+        screen.getByRole('button', { name: 'open' }).click();
+      });
+
+      expect(screen.getByText('surface open')).toBeInTheDocument();
+    });
+
+    it('re-renders a list subscriber without looping on a fresh array', () => {
+      const Ids = () => {
+        const ids = useOpenModalIds();
+
+        return <div>{ids.join(',') || 'none'}</div>;
+      };
+
+      render(<Ids />);
+      expect(screen.getByText('none')).toBeInTheDocument();
+
+      act(() => {
+        openModal('a');
+      });
+
+      expect(screen.getByText('a')).toBeInTheDocument();
+    });
+  });
+});

package/src/overlays/__tests__/theme-modal-mount.test.tsx

@@ -0,0 +1,234 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/product/1',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+import ThemeModalMount from '../theme-modal-mount';
+import {
+  __resetOverlayBusForTests,
+  closeModal,
+  isModalOpen,
+  openModal,
+  registerModalHost
+} from '../overlay-bus';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+import { clearAutoOpenRecord } from '../modal-frequency';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+
+const mkModal = (overrides: Record<string, unknown> = {}): ThemeModal =>
+  readThemeModals([{ id: 'newsletter', name: 'Newsletter', ...overrides }])[0];
+
+const renderMount = (modal: ThemeModal) =>
+  render(
+    <ThemeModalMount modal={modal}>
+      <p>composed content</p>
+    </ThemeModalMount>
+  );
+
+describe('ThemeModalMount', () => {
+  beforeEach(() => {
+    __resetOverlayBusForTests();
+    __resetModalPreviewForTests();
+    registerModalHost();
+    clearAutoOpenRecord('newsletter');
+    document.body.style.overflow = '';
+  });
+
+  it('renders nothing at all while closed', () => {
+    renderMount(mkModal());
+
+    // Not merely hidden: a closed modal must not be in the accessibility tree,
+    // the tab order, or the page as duplicate content.
+    expect(screen.queryByText('composed content')).not.toBeInTheDocument();
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+
+  it('mounts the composition when the bus opens it', () => {
+    renderMount(mkModal());
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    expect(screen.getByText('composed content')).toBeInTheDocument();
+    expect(screen.getByRole('dialog')).toHaveAttribute(
+      'aria-label',
+      'Newsletter'
+    );
+  });
+
+  it('claims the page and freezes it behind a centred modal', () => {
+    renderMount(mkModal());
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+    expect(document.body.style.overflow).toBe('hidden');
+
+    act(() => {
+      closeModal('newsletter');
+    });
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('closes from the close button', () => {
+    renderMount(mkModal());
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(isModalOpen('newsletter')).toBe(false);
+  });
+
+  it('closes from the backdrop, and does not when that is turned off', () => {
+    const { unmount } = renderMount(mkModal());
+
+    act(() => {
+      openModal('newsletter');
+    });
+    // The centred modal's root IS its backdrop — one node, as published.
+    fireEvent.click(screen.getByRole('dialog').parentElement as HTMLElement);
+    expect(isModalOpen('newsletter')).toBe(false);
+
+    unmount();
+    __resetOverlayBusForTests();
+    registerModalHost();
+
+    renderMount(mkModal({ chrome: { closeOnBackdrop: false } }));
+    act(() => {
+      openModal('newsletter');
+    });
+    fireEvent.click(screen.getByRole('dialog').parentElement as HTMLElement);
+    expect(isModalOpen('newsletter')).toBe(true);
+  });
+
+  it('draws a drawer without claiming the page when it has no backdrop', () => {
+    renderMount(
+      mkModal({
+        presentation: 'drawer',
+        chrome: { showBackdrop: false }
+      })
+    );
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    // With the page behind still usable, `aria-modal` would be a lie and the
+    // scroll lock would be a bug.
+    expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal');
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  describe('visibility rules', () => {
+    it('is absent on a page the rules exclude', () => {
+      renderMount(
+        mkModal({
+          visibilityRules: {
+            enabled: true,
+            pathnameMatchType: 'startsWith',
+            pathnameValue: '/basket'
+          }
+        })
+      );
+
+      act(() => {
+        openModal('newsletter');
+      });
+
+      expect(screen.queryByText('composed content')).not.toBeInTheDocument();
+    });
+
+    it('closes itself when it is opened somewhere it does not belong', () => {
+      // The bus is module state and survives client-side navigation, so
+      // nothing else would close a modal carried off its own page.
+      renderMount(
+        mkModal({
+          visibilityRules: {
+            enabled: true,
+            pathnameMatchType: 'equals',
+            pathnameValue: '/nowhere'
+          }
+        })
+      );
+
+      act(() => {
+        openModal('newsletter');
+      });
+
+      expect(isModalOpen('newsletter')).toBe(false);
+    });
+
+    it('renders where the rules allow it', () => {
+      renderMount(
+        mkModal({
+          visibilityRules: {
+            enabled: true,
+            pathnameMatchType: 'startsWith',
+            pathnameValue: '/product'
+          }
+        })
+      );
+
+      act(() => {
+        openModal('newsletter');
+      });
+
+      expect(screen.getByText('composed content')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessible name', () => {
+    it('falls back to the modal name when none was authored', () => {
+      renderMount(mkModal({ name: 'Size guide' }));
+
+      act(() => {
+        openModal('newsletter');
+      });
+
+      expect(screen.getByRole('dialog')).toHaveAttribute(
+        'aria-label',
+        'Size guide'
+      );
+    });
+  });
+
+  describe('sealed-in guard', () => {
+    it('keeps a close button when nothing else could dismiss the modal', () => {
+      renderMount(
+        mkModal({
+          chrome: {
+            showClose: false,
+            closeOnBackdrop: false,
+            closeOnEscape: false
+          }
+        })
+      );
+
+      act(() => {
+        openModal('newsletter');
+      });
+
+      expect(
+        screen.getByRole('button', { name: 'Close' })
+      ).toBeInTheDocument();
+    });
+  });
+});