@akinon/pz-theme 2.0.38-rc.0 → 2.0.39-beta.0

package/src/blocks/__tests__/overlay-sweep.test.tsx

@@ -0,0 +1,592 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const push = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: (...args: unknown[]) => push(...args) }),
+  usePathname: () => '/list',
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useGetMenuQuery: () => ({
+    data: [
+      { pk: 1, label: 'Kadın', url: '/kadin', parent_pk: null },
+      { pk: 2, label: 'Ayakkabı', url: '/kadin/ayakkabi', parent_pk: 1 }
+    ],
+    isLoading: false,
+    isFetching: false,
+    isSuccess: true,
+    isError: false
+  })
+}));
+
+import FacetFiltersBlock from '../facet-filters-block';
+import SizeGuideBlock from '../size-guide-block';
+import HamburgerMenuBlock from '../hamburger-menu-block';
+import MegaMenuBlock from '../mega-menu-block';
+import SortSelectBlock from '../sort-select-block';
+import { useOverlay } from '../../hooks/use-overlay';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+/**
+ * The sweep, from the outside.
+ *
+ * Every one of these blocks used to own a piece of state the whole PAGE shares
+ * — the focus trap, the `aria-modal` claim, Escape, the scroll lock — and a
+ * listing page composes several of them at once. A shopper opening the filter
+ * drawer over a store panel, a size picker or a quick view is the ordinary
+ * case, not an edge one, so each pair below is a composition a brand ships.
+ *
+ * The overlay these blocks are tested AGAINST is a plain `useOverlay`
+ * consumer: it is the same primitive `store-locator`, `variant-selector`,
+ * `product-gallery` and `product-recommendations` were migrated onto, so a
+ * block that behaves next to it behaves next to all four.
+ */
+function MigratedPanel({
+  open,
+  modal = true
+}: {
+  open: boolean;
+  modal?: boolean;
+}) {
+  const overlay = useOverlay<HTMLDivElement>({ open, modal });
+
+  if (!open) return null;
+
+  return (
+    <div
+      {...overlay.overlayProps}
+      role="dialog"
+      tabIndex={-1}
+      data-testid="migrated-panel"
+    >
+      <button type="button" data-testid="migrated-first">
+        Kadıköy
+      </button>
+    </div>
+  );
+}
+
+const facet = (key: string, name: string, choices: unknown[]) => ({
+  key,
+  name,
+  search_key: `attributes_${key}`,
+  widget_type: 'multiselect',
+  data: { choices }
+});
+
+const listingContext = {
+  listing: {
+    title: 'Shoes',
+    path: '/list',
+    query: '',
+    products: [],
+    facets: [
+      facet('color', 'Renk', [
+        { label: 'Siyah', value: 'black', quantity: 12, is_selected: false },
+        { label: 'Beyaz', value: 'white', quantity: 7, is_selected: false }
+      ])
+    ],
+    sorters: [
+      { key: 'newest', label: 'Newest' },
+      { key: 'price_asc', label: 'Price low to high' }
+    ],
+    pagination: {},
+    breadcrumbs: []
+  }
+};
+
+const mkBlock = (
+  type: string,
+  properties: Record<string, unknown>,
+  blocks: unknown[] = []
+) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks
+  } as never);
+
+interface PageProps {
+  facetProperties?: Record<string, unknown>;
+  migratedOpen?: boolean;
+  isDesigner?: boolean;
+}
+
+const Page = ({
+  facetProperties = { layout: 'panel' },
+  migratedOpen = false,
+  isDesigner = false
+}: PageProps) => (
+  <ThemePageContextProvider value={listingContext}>
+    <button type="button" data-testid="outside">
+      outside
+    </button>
+    <FacetFiltersBlock
+      block={mkBlock('facet-filters', facetProperties)}
+      placeholderId="p"
+      sectionId="s"
+      isDesigner={isDesigner}
+      currentBreakpoint="desktop"
+    />
+    <MigratedPanel open={migratedOpen} />
+  </ThemePageContextProvider>
+);
+
+const openDrawer = () =>
+  fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+
+beforeEach(() => {
+  push.mockClear();
+  document.body.style.overflow = '';
+});
+
+describe('the filter drawer next to an overlay already on the primitive', () => {
+  /**
+   * The tab-killer itself. Two DOCUMENT-level `focusin` listeners, each
+   * pulling focus back into its own panel, read each other's panel as
+   * "outside" and hand focus back and forth until the call stack runs out —
+   * `RangeError: Maximum call stack size exceeded`, and a tab a shopper has to
+   * kill. One move of focus is all it takes.
+   */
+  it('does not trade focus with the overlay on top until the stack runs out', () => {
+    const { rerender } = render(<Page />);
+    openDrawer();
+    // The shopper opens a store panel over the drawer. Both are up.
+    rerender(<Page migratedOpen />);
+
+    const seen: string[] = [];
+    const recordMove = (event: Event) => {
+      // Bounded: the point is WHICH panels answer, and an unbounded log of a
+      // runaway loop is unreadable.
+      if (seen.length < 8) {
+        seen.push(
+          (event.target as HTMLElement).getAttribute('data-testid') ||
+            (event.target as HTMLElement).getAttribute('data-facet-choice') ||
+            (event.target as HTMLElement).tagName
+        );
+      }
+    };
+
+    document.addEventListener('focusin', recordMove);
+
+    let thrown: unknown = null;
+    try {
+      screen.getByTestId('outside').focus();
+    } catch (error) {
+      thrown = error;
+    } finally {
+      document.removeEventListener('focusin', recordMove);
+    }
+
+    expect(thrown).toBeNull();
+    // Focus landing outside, and one pull back into the overlay on top. That
+    // is the whole exchange a single stack allows. (Order is jsdom's: the
+    // nested dispatch finishes before the outer listener list does.)
+    expect(seen).toHaveLength(2);
+    expect(seen).toContain('outside');
+    expect(seen).toContain('migrated-first');
+
+    expect(
+      screen.getByTestId('migrated-panel').contains(document.activeElement)
+    ).toBe(true);
+    // The drawer beneath is inert, not gone: it stays mounted and intact and
+    // simply stops reaching for the page.
+    expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+  });
+
+  it('leaves the trap to the overlay on top, and takes it back when that one closes', () => {
+    const { rerender } = render(<Page />);
+    openDrawer();
+    rerender(<Page migratedOpen />);
+
+    expect(screen.getByTestId('migrated-panel')).toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+    // Two live dialogs both claiming modality makes neither claim true.
+    expect(screen.getByRole('dialog', { name: 'Filters' })).not.toHaveAttribute(
+      'aria-modal'
+    );
+
+    rerender(<Page migratedOpen={false} />);
+
+    const drawer = screen.getByRole('dialog', { name: 'Filters' });
+    expect(drawer).toHaveAttribute('aria-modal', 'true');
+
+    // And the drawer traps again now that it is the one hiding the page.
+    screen.getByTestId('outside').focus();
+    expect(drawer.contains(document.activeElement)).toBe(true);
+  });
+
+  it('leaves Escape to the overlay on top', () => {
+    const { rerender } = render(<Page />);
+    openDrawer();
+    rerender(<Page migratedOpen />);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    // The drawer is underneath: Escape backed out of the panel on top, not out
+    // of every panel on the page.
+    expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+  });
+
+  it('counts its scroll lock with every other overlay and gives the page its own overflow back', () => {
+    document.body.style.overflow = 'auto';
+
+    const { rerender } = render(<Page />);
+    openDrawer();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    rerender(<Page migratedOpen />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    // One holder left: the page must stay frozen behind the panel still up.
+    expect(document.body.style.overflow).toBe('hidden');
+
+    rerender(<Page migratedOpen={false} />);
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('still moves focus into the drawer on open and hands it back on close', () => {
+    render(<Page />);
+
+    const trigger = screen.getByRole('button', { name: /Filters/ });
+    trigger.focus();
+    fireEvent.click(trigger);
+
+    expect(
+      screen.getByRole('dialog', { name: 'Filters' }).contains(document.activeElement)
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('stays inert in the designer', () => {
+    document.body.style.overflow = 'auto';
+    render(<Page isDesigner />);
+    openDrawer();
+
+    const drawer = screen.getByRole('dialog', { name: 'Filters' });
+
+    // The canvas is the author's workspace: nothing may steal focus into it,
+    // freeze the page being styled, or claim the page is hidden.
+    expect(drawer.contains(document.activeElement)).toBe(false);
+    expect(document.body.style.overflow).toBe('auto');
+    expect(drawer).not.toHaveAttribute('aria-modal');
+
+    // And it must not close itself out from under an author who pressed
+    // Escape while typing in a property field. The block used to answer
+    // Escape on the canvas too; the primitive is inert there.
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+  });
+
+  it('leaves the page alone when the designer turned the lock off', () => {
+    document.body.style.overflow = 'auto';
+    render(<Page facetProperties={{ layout: 'panel', lockScroll: false }} />);
+    openDrawer();
+
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('makes no modal claim for a drawer with no backdrop behind it', () => {
+    render(<Page facetProperties={{ layout: 'panel', showBackdrop: false }} />);
+    openDrawer();
+
+    // The page underneath stays clickable, so the claim would be a lie.
+    expect(screen.getByRole('dialog', { name: 'Filters' })).not.toHaveAttribute(
+      'aria-modal'
+    );
+  });
+
+  it('still answers Escape when it is the panel on top', () => {
+    render(<Page />);
+    openDrawer();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('dialog', { name: 'Filters' })).toBeNull();
+  });
+
+  it('honours a composition that turned Escape off', () => {
+    render(
+      <Page facetProperties={{ layout: 'panel', closeOnEscape: false }} />
+    );
+    openDrawer();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+  });
+
+  /**
+   * Every pointer route out is a designer toggle, so a composition can legally
+   * turn all of them off. Escape is then re-armed no matter what the property
+   * says — an authored composition must never seal a shopper in.
+   */
+  it('re-arms Escape for a panel with no pointer route out', () => {
+    render(
+      <Page
+        facetProperties={{
+          layout: 'panel',
+          showPanelHeader: false,
+          showClose: false,
+          showBackdrop: false,
+          closeOnEscape: false
+        }}
+      />
+    );
+    openDrawer();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('dialog', { name: 'Filters' })).toBeNull();
+  });
+});
+
+describe('the size guide next to an overlay already on the primitive', () => {
+  const SizeGuidePage = ({ migratedOpen = false }: { migratedOpen?: boolean }) => (
+    <>
+      <SizeGuideBlock
+        block={mkBlock('size-guide', {}, [
+          {
+            id: 'row-1',
+            type: 'text',
+            label: 'Row',
+            order: 0,
+            hidden: false,
+            value: 'S / M / L',
+            properties: {},
+            styles: {},
+            blocks: []
+          }
+        ])}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+      <MigratedPanel open={migratedOpen} />
+    </>
+  );
+
+  const openGuide = () =>
+    fireEvent.click(screen.getByRole('button', { name: 'Size guide' }));
+
+  it('drops its modal claim while another dialog is on top', () => {
+    const { rerender } = render(<SizeGuidePage />);
+    openGuide();
+    rerender(<SizeGuidePage migratedOpen />);
+
+    // It used to hard-code `aria-modal="true"`, so a quick view over it left
+    // two dialogs each telling assistive tech the other was hidden.
+    expect(
+      screen.getByRole('dialog', { name: 'Size guide' })
+    ).not.toHaveAttribute('aria-modal');
+    expect(screen.getByTestId('migrated-panel')).toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+  });
+
+  it('leaves Escape to the overlay on top', () => {
+    const { rerender } = render(<SizeGuidePage />);
+    openGuide();
+    rerender(<SizeGuidePage migratedOpen />);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(
+      screen.getByRole('dialog', { name: 'Size guide' })
+    ).toBeInTheDocument();
+  });
+
+  it('still closes on Escape when it is the one on top', () => {
+    render(<SizeGuidePage />);
+    openGuide();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('dialog', { name: 'Size guide' })).toBeNull();
+  });
+
+  it('honours a composition that turned Escape off', () => {
+    render(
+      <SizeGuideBlock
+        block={mkBlock('size-guide', { closeOnEscape: false }, [
+          {
+            id: 'row-1',
+            type: 'text',
+            label: 'Row',
+            order: 0,
+            hidden: false,
+            value: 'S / M / L',
+            properties: {},
+            styles: {},
+            blocks: []
+          }
+        ])}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+    );
+    openGuide();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(
+      screen.getByRole('dialog', { name: 'Size guide' })
+    ).toBeInTheDocument();
+  });
+});
+
+describe('the hamburger drawer next to an overlay already on the primitive', () => {
+  const HamburgerPage = ({
+    migratedOpen = false,
+    properties = {}
+  }: {
+    migratedOpen?: boolean;
+    properties?: Record<string, unknown>;
+  }) => (
+    <>
+      <HamburgerMenuBlock
+        block={mkBlock('hamburger-menu', properties)}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+      <MigratedPanel open={migratedOpen} />
+    </>
+  );
+
+  const openDrawerMenu = () =>
+    fireEvent.click(
+      document.querySelector('[data-hamburger-menu]') as HTMLElement
+    );
+
+  /**
+   * The drawer captured `document.body.style.overflow` itself, with no counter
+   * at all. Opened over a panel that had already frozen the page it recorded
+   * `hidden` as "the page's own value", so the other panel closing thawed the
+   * page under a drawer still up — and the drawer closing wrote `hidden` back
+   * for good, leaving a storefront no one can scroll.
+   */
+  it('counts its scroll lock with every other overlay', () => {
+    document.body.style.overflow = 'auto';
+
+    const { rerender } = render(<HamburgerPage migratedOpen />);
+    openDrawerMenu();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    // The panel that froze the page first closes while the drawer is still up.
+    rerender(<HamburgerPage migratedOpen={false} />);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    fireEvent.click(
+      document.querySelector('[data-hamburger-close]') as HTMLElement
+    );
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('leaves the page alone when the designer turned the lock off', () => {
+    document.body.style.overflow = 'auto';
+    render(<HamburgerPage properties={{ lockScroll: false }} />);
+    openDrawerMenu();
+
+    expect(document.body.style.overflow).toBe('auto');
+  });
+});
+
+/**
+ * Neither of these is an overlay — no backdrop, nothing covered, no scroll
+ * lock, no focus trap — so they keep their own focus handling. What they do
+ * share with the page is Escape, and a document listener each meant a key
+ * aimed at the modal on top collapsed them underneath it at the same time.
+ */
+describe('the popups that share the page keyboard', () => {
+  const SortPage = ({ migratedOpen = false }: { migratedOpen?: boolean }) => (
+    <ThemePageContextProvider value={listingContext}>
+      <SortSelectBlock
+        block={mkBlock('sort-select', { variant: 'panel' })}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+      <MigratedPanel open={migratedOpen} />
+    </ThemePageContextProvider>
+  );
+
+  const MegaPage = ({ migratedOpen = false }: { migratedOpen?: boolean }) => (
+    <>
+      <MegaMenuBlock
+        block={mkBlock('mega-menu', { trigger: 'click' })}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+      <MigratedPanel open={migratedOpen} />
+    </>
+  );
+
+  it('leaves Escape to the overlay on top of the sort panel', () => {
+    const { rerender } = render(<SortPage />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Sort/ }));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    rerender(<SortPage migratedOpen />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('still closes the sort panel on Escape and hands focus back', () => {
+    render(<SortPage />);
+
+    const trigger = screen.getByRole('button', { name: /Sort/ });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('listbox')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('leaves Escape to the overlay on top of the mega menu panel', () => {
+    const { rerender } = render(<MegaPage />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Kadın' }));
+    expect(
+      document.querySelector('[data-mega-menu-panel]')
+    ).toBeInTheDocument();
+
+    rerender(<MegaPage migratedOpen />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(
+      document.querySelector('[data-mega-menu-panel]')
+    ).toBeInTheDocument();
+  });
+
+  it('still closes the mega menu on Escape when it is the one on top', () => {
+    render(<MegaPage />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Kadın' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(document.querySelector('[data-mega-menu-panel]')).toBeNull();
+  });
+});