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

package/src/overlays/__tests__/modal-preview-host.test.tsx

@@ -0,0 +1,316 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+/**
+ * Stood in for so the assertions can be about WHICH region the canvas opens
+ * for the modal. The real wrapper fetches, registers and listens; none of that
+ * is what this file is pinning.
+ */
+jest.mock('../../theme-placeholder-wrapper', () => ({
+  __esModule: true,
+  default: ({ slug }: { slug: string }) => (
+    <div data-testid="composition-region" data-slug={slug} />
+  )
+}));
+
+import ModalPreviewHost from '../modal-preview-host';
+import ThemeModalMount from '../theme-modal-mount';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+import { __resetEditorModalsForTests } from '../use-editor-modals';
+import {
+  __resetOverlayBusForTests,
+  openModal,
+  registerModalHost
+} from '../overlay-bus';
+import { __resetEditorBridgeForTests } from '../../editor-bridge';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const mkModal = (overrides: Record<string, unknown> = {}): ThemeModal =>
+  readThemeModals([{ id: 'newsletter', name: 'Newsletter', ...overrides }])[0];
+
+const hold = (modal: ThemeModal) =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: {
+          type: 'PREVIEW_OPEN_MODAL',
+          data: { modalId: modal.id, modal }
+        }
+      })
+    );
+  });
+
+const release = () =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: { type: 'PREVIEW_CLOSE_MODAL' }
+      })
+    );
+  });
+
+beforeEach(() => {
+  __resetModalPreviewForTests();
+  __resetEditorModalsForTests();
+  __resetOverlayBusForTests();
+  __resetEditorBridgeForTests();
+});
+
+/**
+ * A designer creates a modal and has to be able to SEE it. Nothing on the page
+ * opens it — its trigger may be on another route, or be a timer — and it
+ * usually does not exist on the server yet, because it was made seconds ago
+ * and nothing has been saved.
+ *
+ * So the canvas draws it from what the editor pushes. These pin that the
+ * pushing works, that it keeps working while the modal's chrome is edited, and
+ * that the canvas surface never behaves like a real one.
+ */
+describe('the modal a designer is composing', () => {
+  it('shows nothing until the editor asks for one', () => {
+    render(<ModalPreviewHost />);
+
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+
+  it('draws a modal the server has never heard of', () => {
+    // The whole first-modal case: no theme-config entry exists anywhere.
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+
+    expect(screen.getByRole('dialog')).toHaveAttribute(
+      'aria-label',
+      'Newsletter'
+    );
+    // Its interior is an ordinary editable region, addressed by the modal's
+    // own slug — that is what lets sections be dropped into it.
+    expect(screen.getByTestId('composition-region')).toHaveAttribute(
+      'data-slug',
+      'modal-newsletter'
+    );
+  });
+
+  it('follows a width edit without a save or a reload', () => {
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+    expect(screen.getByRole('dialog').style.maxWidth).toBe('640px');
+
+    // The designer drags the width field.
+    hold(mkModal({ chrome: { width: 420 } }));
+
+    expect(screen.getByRole('dialog').style.maxWidth).toBe('420px');
+  });
+
+  it('follows a presentation edit without a save or a reload', () => {
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+    // Centred: sized by max-width, pinned to no side.
+    expect(screen.getByRole('dialog').style.right).toBe('');
+
+    // The designer switches "Arrives As" to a drawer.
+    hold(mkModal({ presentation: 'drawer' }));
+
+    expect(screen.getByRole('dialog').style.right).toBe('0px');
+  });
+
+  it('lets go when the editor goes back to a page', () => {
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+    release();
+
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+
+  it('never takes the canvas over', () => {
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+
+    const panel = screen.getByRole('dialog');
+    // The canvas is a workspace: claiming aria-modal would hide the page the
+    // designer is working on from the accessibility tree.
+    expect(panel).not.toHaveAttribute('aria-modal');
+    expect(document.body.style.overflow).not.toBe('hidden');
+  });
+
+  it('survives the backdrop and close button it is meant to be styling', () => {
+    render(<ModalPreviewHost />);
+
+    hold(mkModal());
+
+    fireEvent.click(screen.getByLabelText('Close'));
+    fireEvent.click(
+      document.querySelector('[data-part="overlay"]') as Element
+    );
+
+    // Still there: a designer colouring the backdrop must not lose the surface
+    // by clicking it.
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+});
+
+/**
+ * Both renderers can draw the same modal, so exactly one of them must.
+ */
+describe('the saved mount and the canvas host together', () => {
+  const renderBoth = (modal: ThemeModal) =>
+    render(
+      <>
+        <ThemeModalMount modal={modal}>
+          <div data-testid="composition-region" data-slug={modal.slug} />
+        </ThemeModalMount>
+        <ModalPreviewHost />
+      </>
+    );
+
+  it('opens the modal exactly once while the editor holds it', () => {
+    registerModalHost();
+    const modal = mkModal();
+    renderBoth(modal);
+
+    hold(modal);
+
+    /**
+     * Two surfaces would mean two `ThemePlaceholderWrapper`s claiming one
+     * slug, so the region registers twice and the editor shows the modal's
+     * contents doubled. The saved mount stands down; the host draws.
+     */
+    expect(screen.getAllByTestId('composition-region')).toHaveLength(1);
+    expect(
+      document.querySelectorAll('[data-theme-modal="newsletter"]')
+    ).toHaveLength(1);
+    expect(
+      document.querySelector('[data-theme-modal-state="preview"]')
+    ).not.toBeNull();
+  });
+
+  it('hands the modal back to the saved mount when the editor lets go', () => {
+    registerModalHost();
+    const modal = mkModal();
+    renderBoth(modal);
+
+    hold(modal);
+    release();
+
+    // Closed for a shopper, and no longer held: nothing on screen at all.
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+});
+
+/**
+ * The loop that actually matters: create a modal, point a trigger at it, press
+ * the trigger. The saved mounts can only offer modals the backend has stored,
+ * so before the editor's registry was read this did nothing at all for a modal
+ * made minutes ago — and nothing told the difference between a modal that does
+ * not exist yet and a trigger that is broken.
+ */
+describe('triggering a modal that was never saved', () => {
+  const pushEditorTheme = (modals: unknown[]) =>
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: EDITOR_ORIGIN,
+          data: { type: 'UPDATE_THEME', data: { theme: { modals } } }
+        })
+      );
+    });
+
+  it('opens from the bus once the editor has pushed it', () => {
+    registerModalHost();
+    render(<ModalPreviewHost />);
+
+    // Nothing saved: the server rendered no mount for this id.
+    pushEditorTheme([{ id: 'newsletter', name: 'Newsletter' }]);
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    expect(screen.getByRole('dialog')).toHaveAttribute(
+      'aria-label',
+      'Newsletter'
+    );
+    expect(screen.getByTestId('composition-region')).toHaveAttribute(
+      'data-slug',
+      'modal-newsletter'
+    );
+  });
+
+  it('behaves like a real modal, not the inert editing surface', () => {
+    registerModalHost();
+    render(<ModalPreviewHost />);
+    pushEditorTheme([{ id: 'newsletter', name: 'Newsletter' }]);
+
+    act(() => {
+      openModal('newsletter');
+    });
+
+    // A shopper pressing close must actually close it — the inertness is for
+    // the surface being composed, not for one a trigger opened.
+    fireEvent.click(screen.getByLabelText('Close'));
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('stays shut until something opens it', () => {
+    registerModalHost();
+    render(<ModalPreviewHost />);
+    pushEditorTheme([{ id: 'newsletter', name: 'Newsletter' }]);
+
+    expect(document.querySelector('[data-theme-modal]')).toBeNull();
+  });
+
+  it('hands the modal back to the saved mount when the editor detaches', () => {
+    registerModalHost();
+    const modal = mkModal();
+    render(
+      <>
+        <ThemeModalMount modal={modal}>
+          <div data-testid="composition-region" data-slug={modal.slug} />
+        </ThemeModalMount>
+        <ModalPreviewHost />
+      </>
+    );
+
+    pushEditorTheme([{ id: 'newsletter', name: 'Newsletter' }]);
+    act(() => {
+      openModal('newsletter');
+    });
+
+    // One surface, not two: the saved mount stands down for a modal the editor
+    // knows, or the region would register twice.
+    expect(screen.getAllByTestId('composition-region')).toHaveLength(1);
+
+    // Editor drops the modal from its registry; the saved copy takes over.
+    pushEditorTheme([]);
+
+    expect(screen.getAllByTestId('composition-region')).toHaveLength(1);
+    expect(
+      document.querySelectorAll('[data-theme-modal="newsletter"]')
+    ).toHaveLength(1);
+  });
+});

package/src/overlays/__tests__/modal-registry.test.ts

@@ -0,0 +1,205 @@
+import { readThemeModals } from '../modal-registry';
+import {
+  isModalSlug,
+  modalIdFromSlug,
+  modalSlug
+} from '../../chrome/placeholder-slugs';
+import { resetDevWarnCacheForTests } from '../../utils/dev-warn';
+
+describe('modal slug family', () => {
+  it('derives a slug from an addressable id', () => {
+    expect(modalSlug('newsletter')).toBe('modal-newsletter');
+    expect(modalSlug('size-guide-2')).toBe('modal-size-guide-2');
+  });
+
+  it('refuses an id it cannot address rather than cleaning it', () => {
+    // Cleaning would map several ids onto one slug, and for a published
+    // content key that is a silent overwrite, not a tidy-up.
+    expect(modalSlug('News Letter')).toBeNull();
+    expect(modalSlug('news_letter')).toBeNull();
+    expect(modalSlug('-leading-hyphen')).toBeNull();
+    expect(modalSlug('')).toBeNull();
+    expect(modalSlug('ÜstBilgi')).toBeNull();
+  });
+
+  it('round-trips a slug back to its id', () => {
+    expect(modalIdFromSlug('modal-newsletter')).toBe('newsletter');
+    expect(modalIdFromSlug('page-about')).toBeNull();
+    expect(modalIdFromSlug('modal-')).toBeNull();
+    expect(isModalSlug('modal-newsletter')).toBe(true);
+    expect(isModalSlug('header')).toBe(false);
+  });
+});
+
+describe('readThemeModals', () => {
+  beforeEach(() => resetDevWarnCacheForTests());
+
+  it('reads the JSON string the editor writes', () => {
+    expect(
+      readThemeModals(
+        JSON.stringify([{ id: 'newsletter', name: 'Newsletter popup' }])
+      )
+    ).toEqual([
+      {
+        id: 'newsletter',
+        name: 'Newsletter popup',
+        slug: 'modal-newsletter',
+        presentation: 'modal',
+        chrome: {
+          ariaLabel: 'Newsletter popup',
+          showClose: true,
+          closeLabel: 'Close',
+          showBackdrop: true,
+          closeOnBackdrop: true,
+          closeOnEscape: true,
+          width: 640,
+          panelSide: 'right',
+          sheetHeight: 60,
+          lockScroll: true
+        },
+        autoTrigger: undefined,
+        visibilityRules: undefined
+      }
+    ]);
+  });
+
+  describe('chrome', () => {
+    const chromeOf = (chrome: unknown) =>
+      readThemeModals([{ id: 'a', name: 'A', chrome }])[0].chrome;
+
+    it('names the dialog after the modal when no label was given', () => {
+      // A dialog with no accessible name is announced as just "dialog", which
+      // tells a screen reader user nothing about what took over their page.
+      expect(chromeOf(undefined).ariaLabel).toBe('A');
+      expect(chromeOf({ ariaLabel: 'Sign up' }).ariaLabel).toBe('Sign up');
+    });
+
+    it('forces the close button back on when nothing else could dismiss', () => {
+      expect(
+        chromeOf({
+          showClose: false,
+          closeOnBackdrop: false,
+          closeOnEscape: false
+        }).showClose
+      ).toBe(true);
+    });
+
+    it('honours the close button being off while another way out remains', () => {
+      expect(
+        chromeOf({ showClose: false, closeOnBackdrop: true }).showClose
+      ).toBe(false);
+      expect(
+        chromeOf({
+          showClose: false,
+          closeOnBackdrop: false,
+          closeOnEscape: true
+        }).showClose
+      ).toBe(false);
+    });
+
+    it('clamps geometry into a usable range', () => {
+      expect(chromeOf({ width: 10 }).width).toBe(240);
+      expect(chromeOf({ width: 99999 }).width).toBe(1600);
+      expect(chromeOf({ width: 'wide' }).width).toBe(640);
+      expect(chromeOf({ sheetHeight: 5 }).sheetHeight).toBe(20);
+      expect(chromeOf({ sheetHeight: 300 }).sheetHeight).toBe(100);
+    });
+
+    it('refuses an unknown panel side', () => {
+      expect(chromeOf({ panelSide: 'top' }).panelSide).toBe('right');
+      expect(chromeOf({ panelSide: 'left' }).panelSide).toBe('left');
+    });
+  });
+
+  it('reads an already-parsed array', () => {
+    expect(readThemeModals([{ id: 'a', name: 'A' }])).toHaveLength(1);
+  });
+
+  it('answers empty for anything unusable', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    expect(readThemeModals(undefined)).toEqual([]);
+    expect(readThemeModals('')).toEqual([]);
+    expect(readThemeModals('{not json')).toEqual([]);
+    expect(readThemeModals({ id: 'a' })).toEqual([]);
+
+    warn.mockRestore();
+  });
+
+  it('drops only the malformed entries, keeping the rest', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    const modals = readThemeModals([
+      { id: 'good', name: 'Good' },
+      { id: 'Not Addressable', name: 'Bad' },
+      null,
+      'nonsense',
+      { id: 'also-good', name: 'Also good' }
+    ]);
+
+    expect(modals.map((modal) => modal.id)).toEqual(['good', 'also-good']);
+
+    warn.mockRestore();
+  });
+
+  it('collapses duplicate ids to the first, since both claim one slug', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    const modals = readThemeModals([
+      { id: 'dupe', name: 'First' },
+      { id: 'dupe', name: 'Second' }
+    ]);
+
+    expect(modals).toHaveLength(1);
+    expect(modals[0].name).toBe('First');
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('Duplicate modal id')
+    );
+
+    warn.mockRestore();
+  });
+
+  it('falls back to the id when a modal was never named', () => {
+    expect(readThemeModals([{ id: 'unnamed' }])[0].name).toBe('unnamed');
+  });
+
+  it('refuses an unknown presentation instead of passing it through', () => {
+    expect(
+      readThemeModals([{ id: 'a', presentation: 'lightbox' }])[0].presentation
+    ).toBe('modal');
+  });
+
+  describe('auto-trigger', () => {
+    it('is absent when the event is none or missing', () => {
+      expect(readThemeModals([{ id: 'a' }])[0].autoTrigger).toBeUndefined();
+      expect(
+        readThemeModals([{ id: 'a', autoTrigger: { event: 'none' } }])[0]
+          .autoTrigger
+      ).toBeUndefined();
+    });
+
+    it('defaults an unspecified frequency to once per session', () => {
+      // Never "always": a welcome popup on every navigation is how this
+      // feature gets switched off a week after launch.
+      expect(
+        readThemeModals([
+          { id: 'a', autoTrigger: { event: 'delay', delayMs: 3000 } }
+        ])[0].autoTrigger
+      ).toEqual({
+        event: 'delay',
+        delayMs: 3000,
+        scrollPercent: undefined,
+        anchorId: undefined,
+        frequency: 'once-per-session'
+      });
+    });
+
+    it('drops a negative or non-numeric delay', () => {
+      const trigger = readThemeModals([
+        { id: 'a', autoTrigger: { event: 'delay', delayMs: -1 } }
+      ])[0].autoTrigger;
+
+      expect(trigger?.delayMs).toBeUndefined();
+    });
+  });
+});