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

package/src/__tests__/listing-controls.test.tsx

@@ -0,0 +1,961 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const push = jest.fn();
+const searchParams = new URLSearchParams('');
+
+jest.mock('next/navigation', () => ({
+  __esModule: true,
+  usePathname: () => '/shoes',
+  useSearchParams: () => searchParams,
+  useRouter: () => ({ push, replace: jest.fn(), refresh: jest.fn() })
+}));
+
+import ListingPaginationBlock from '../blocks/listing-pagination-block';
+import ProductGridBlock from '../blocks/product-grid-block';
+import SortSelectBlock from '../blocks/sort-select-block';
+import { ThemePageContextProvider } from '../theme-page-context';
+
+type Props = Record<string, unknown>;
+
+const listingContext = (over: Record<string, unknown> = {}) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/shoes',
+    products: [
+      { name: 'One', url: '/p/1', price: '10', pk: 1 },
+      { name: 'Two', url: '/p/2', price: '20', pk: 2 }
+    ],
+    resultCount: 6,
+    facets: [],
+    sorters: [],
+    pagination: { current_page: 1, num_pages: 3, page_size: 2, count: 6 },
+    breadcrumbs: [],
+    ...over
+  }
+});
+
+const blockProps = (properties: Props = {}, over: Props = {}) =>
+  ({
+    block: {
+      id: 'blk-1',
+      type: 'listing-pagination',
+      label: 'Pagination',
+      order: 0,
+      hidden: false,
+      value: '',
+      properties,
+      styles: {},
+      blocks: []
+    },
+    placeholderId: 'ph',
+    sectionId: 'sec',
+    isDesigner: false,
+    ...over
+  } as never);
+
+const renderPagination = (
+  properties: Props = {},
+  over: Props = {},
+  context = listingContext()
+) =>
+  render(
+    <ThemePageContextProvider value={context}>
+      <div>
+        <div data-product-grid="">
+          <a href="/p/1" data-product-card="">
+            One
+          </a>
+          <a href="/p/2" data-product-card="">
+            Two
+          </a>
+        </div>
+        <ListingPaginationBlock {...blockProps(properties, over)} />
+      </div>
+    </ThemePageContextProvider>
+  );
+
+/** The next page exactly as the server renders it — style element included. */
+const pageHtml = (ids: number[]) =>
+  `<!doctype html><html><body><main><div data-product-grid="" data-product-grid-id="g">` +
+  `<style>[data-product-grid-id="g"]{grid-template-columns:repeat(9,minmax(0,1fr));}</style>` +
+  ids
+    .map((id) => `<a href="/p/${id}" data-product-card="">Item ${id}</a>`)
+    .join('') +
+  `</div></main></body></html>`;
+
+const okResponse = (html: string) =>
+  Promise.resolve({ ok: true, status: 200, text: () => Promise.resolve(html) });
+
+/**
+ * Clicks a real anchor and reports whether the block intercepted it.
+ *
+ * The document listener runs after React's (React delegates at the root
+ * container, which is inside the body), so it reads the verdict and only then
+ * stops jsdom from acting on an href it cannot navigate to — the pending
+ * navigation timer it would otherwise leave behind outlives the test.
+ */
+const clickLink = (element: HTMLElement): boolean => {
+  let intercepted = false;
+
+  const inspect = (event: Event) => {
+    intercepted = event.defaultPrevented;
+    event.preventDefault();
+  };
+
+  document.addEventListener('click', inspect);
+  fireEvent.click(element);
+  document.removeEventListener('click', inspect);
+
+  return intercepted;
+};
+
+class MockObserver {
+  static instances: MockObserver[] = [];
+  callback: IntersectionObserverCallback;
+  options: IntersectionObserverInit | undefined;
+  elements: Element[] = [];
+  disconnected = false;
+
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit
+  ) {
+    this.callback = callback;
+    this.options = options;
+    MockObserver.instances.push(this);
+  }
+
+  observe(element: Element) {
+    this.elements.push(element);
+  }
+
+  unobserve() {}
+
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  takeRecords() {
+    return [];
+  }
+
+  fire() {
+    this.callback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      this as unknown as IntersectionObserver
+    );
+  }
+
+  static get live() {
+    return MockObserver.instances.filter((instance) => !instance.disconnected);
+  }
+}
+
+const originalObserver = window.IntersectionObserver;
+
+beforeEach(() => {
+  push.mockClear();
+  MockObserver.instances = [];
+  (window as unknown as Record<string, unknown>).IntersectionObserver =
+    MockObserver;
+  (global as unknown as Record<string, unknown>).fetch = jest.fn(() =>
+    okResponse(pageHtml([3, 4]))
+  );
+  window.history.replaceState(null, '', '/shoes');
+});
+
+afterEach(() => {
+  (window as unknown as Record<string, unknown>).IntersectionObserver =
+    originalObserver;
+});
+
+/**
+ * Byte-identity goldens.
+ *
+ * Append, infinite scroll and the count readout all arrive switched off, so a
+ * composition that never asks for them has to produce the exact same bytes it
+ * produced before they existed. These strings are that promise written down:
+ * any change to the default markup — an attribute, an element, an inline
+ * style, even the order of two declarations — fails here rather than on a
+ * brand's storefront.
+ *
+ * They are the SERVER render, not jsdom's `innerHTML`: jsdom re-serialises CSS
+ * (lowercasing `currentColor`, dropping declarations it cannot parse), which
+ * would hide exactly the kind of drift this is meant to catch. These are the
+ * bytes a crawler and a cold visit receive.
+ */
+const ssr = (element: React.ReactElement): string => {
+  // react-dom's browser server build reaches for MessageChannel and
+  // TextEncoder at import time; jsdom's global has neither, so Node's own are
+  // handed over. The require has to be lazy for them to land first.
+  const scope = globalThis as unknown as Record<string, unknown>;
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  if (typeof scope.MessageChannel === 'undefined') {
+    // Deliberately inert rather than Node's own: a real MessagePort refs the
+    // event loop and the whole run hangs at teardown. renderToStaticMarkup is
+    // synchronous and never posts through it.
+    scope.MessageChannel = class {
+      port1 = { onmessage: null, postMessage() {}, close() {} };
+      port2 = { onmessage: null, postMessage() {}, close() {} };
+    };
+  }
+  if (typeof scope.TextEncoder === 'undefined') {
+    scope.TextEncoder = require('util').TextEncoder;
+  }
+
+  const { renderToStaticMarkup } = require('react-dom/server');
+  /* eslint-enable @typescript-eslint/no-var-requires */
+  return renderToStaticMarkup(element) as string;
+};
+
+const GOLDEN_PAGES =
+  '<nav data-listing-pagination="" data-pagination-mode="pages" aria-label="Pagination" data-part="list" style="display:flex;align-items:center;gap:var(--listing-pagination-gap, 8px);flex-wrap:wrap"><a href="/shoes" data-pagination-page="1" aria-current="page" data-part="page" data-state="selected" style="display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 8px;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:inherit;opacity:1;font-weight:600">1</a><a href="/shoes?page=2" data-pagination-page="2" data-part="page" style="display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 8px;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:inherit;opacity:0.7;font-weight:400">2</a><a href="/shoes?page=3" data-pagination-page="3" data-part="page" style="display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 8px;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:inherit;opacity:0.7;font-weight:400">3</a><a href="/shoes?page=2" rel="next" data-pagination-next="" data-part="next" style="display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 8px;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:inherit;opacity:0.7;font-weight:400">Next</a></nav>';
+
+const GOLDEN_LOADMORE =
+  '<nav data-listing-pagination="" data-pagination-mode="loadmore" data-part="list"><a href="/shoes?page=2" rel="next" data-listing-load-more="" data-part="load-more" style="display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:4px 8px;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:inherit;opacity:0.7;font-weight:400">Load more</a></nav>';
+
+const ssrPagination = (properties: Props = {}) =>
+  ssr(
+    <ThemePageContextProvider value={listingContext()}>
+      <ListingPaginationBlock {...blockProps(properties)} />
+    </ThemePageContextProvider>
+  );
+
+describe('pagination — the default render is untouched', () => {
+  it('renders page links exactly as it always has', () => {
+    expect(ssrPagination()).toBe(GOLDEN_PAGES);
+  });
+
+  it('renders load more as a plain link to the next page', () => {
+    expect(ssrPagination({ mode: 'loadmore' })).toBe(GOLDEN_LOADMORE);
+  });
+
+  it('renders load more identically whether or not append exists', () => {
+    // The enhancement is invisible to the server: same bytes, so the crawl
+    // path and the no-javascript path are exactly what they were.
+    expect(ssrPagination({ mode: 'loadmore', append: false })).toBe(
+      GOLDEN_LOADMORE
+    );
+  });
+
+  it('lets that link navigate — no fetch, no intercepted click', () => {
+    renderPagination({ mode: 'loadmore' });
+
+    expect(clickLink(screen.getByText('Load more'))).toBe(false);
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it('arms no observer and touches no history until append is asked for', () => {
+    const replaceSpy = jest.spyOn(window.history, 'replaceState');
+    renderPagination({ mode: 'loadmore' });
+
+    expect(MockObserver.instances).toHaveLength(0);
+    expect(replaceSpy).not.toHaveBeenCalled();
+    replaceSpy.mockRestore();
+  });
+});
+
+describe('pagination — append', () => {
+  const appendProps = {
+    mode: 'loadmore',
+    append: true
+  };
+
+  it("grafts the next page's own server markup into the live list", async () => {
+    const { container } = renderPagination(appendProps);
+
+    fireEvent.click(screen.getByText('Load more'));
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      '/shoes?page=2',
+      expect.objectContaining({ credentials: 'same-origin' })
+    );
+    // The rows the server rendered, not rows re-derived here: identical
+    // markup, so a designer-authored card layout survives the append.
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+    expect(screen.getByText('Item 4')).toBeInTheDocument();
+  });
+
+  it('never copies the list stylesheet, which would outrank the live one', async () => {
+    const { container } = renderPagination(appendProps);
+
+    fireEvent.click(screen.getByText('Load more'));
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+    expect(container.querySelectorAll('style')).toHaveLength(0);
+  });
+
+  it('keeps the cursor honest with replaceState, never pushState', async () => {
+    const replaceSpy = jest.spyOn(window.history, 'replaceState');
+    const pushSpy = jest.spyOn(window.history, 'pushState');
+
+    renderPagination(appendProps);
+    fireEvent.click(screen.getByText('Load more'));
+
+    await waitFor(() =>
+      expect(replaceSpy).toHaveBeenCalledWith(null, '', '/shoes?page=2')
+    );
+    // One entry per append would turn the back button into a walk through
+    // every batch instead of a way off the listing.
+    expect(pushSpy).not.toHaveBeenCalled();
+
+    replaceSpy.mockRestore();
+    pushSpy.mockRestore();
+  });
+
+  it('records which page a row came from and restores it on click', async () => {
+    const { container } = renderPagination(appendProps);
+
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+
+    const replaceSpy = jest.spyOn(window.history, 'replaceState');
+
+    clickLink(screen.getByText('Item 3'));
+    expect(replaceSpy).toHaveBeenCalledWith(null, '', '/shoes?page=2');
+
+    // A row from the server-rendered first page takes the shopper back there,
+    // not to the deepest page that happens to be loaded.
+    clickLink(screen.getByText('One'));
+    expect(replaceSpy).toHaveBeenLastCalledWith(null, '', '/shoes');
+
+    replaceSpy.mockRestore();
+  });
+
+  it('walks to the last page and then stops asking', async () => {
+    const { container } = renderPagination(appendProps);
+
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      okResponse(pageHtml([5, 6]))
+    );
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(6)
+    );
+
+    // Page 3 of 3: the affordance is gone, so there is nothing left to press.
+    expect(screen.queryByText('Load more')).not.toBeInTheDocument();
+  });
+
+  it('offers the shopper a way out of a failed page', async () => {
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      Promise.resolve({ ok: false, status: 500, text: () => Promise.resolve('') })
+    );
+
+    const { container } = renderPagination({
+      ...appendProps,
+      errorLabel: 'Nope',
+      retryLabel: 'Retry'
+    });
+
+    fireEvent.click(screen.getByText('Load more'));
+    await screen.findByText('Nope');
+
+    fireEvent.click(screen.getByText('Retry'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+    expect(screen.queryByText('Nope')).not.toBeInTheDocument();
+  });
+
+  it('is completely inert in the designer', async () => {
+    renderPagination(
+      { ...appendProps, appendTrigger: 'scroll' },
+      { isDesigner: true }
+    );
+
+    // No sentinel is watched, and the link is inert rather than appending.
+    expect(MockObserver.instances).toHaveLength(0);
+
+    expect(clickLink(screen.getByText('Load more'))).toBe(true);
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+});
+
+describe('pagination — the infinite scroll sentinel', () => {
+  const scrollProps = {
+    mode: 'loadmore',
+    append: true,
+    appendTrigger: 'scroll',
+    prefetchOffset: 400
+  };
+
+  it('watches a sentinel with the designer-chosen lead', () => {
+    renderPagination(scrollProps);
+
+    expect(MockObserver.live).toHaveLength(1);
+    expect(MockObserver.live[0].options).toEqual({ rootMargin: '400px 0px' });
+    expect(MockObserver.live[0].elements[0]).toHaveAttribute(
+      'data-listing-load-sentinel'
+    );
+  });
+
+  it('loads one page per crossing and never two at once', async () => {
+    const { container } = renderPagination(scrollProps);
+
+    await act(async () => {
+      MockObserver.live[0].fire();
+      // A second crossing while the first request is still open must not
+      // queue a duplicate page.
+      MockObserver.instances[0].fire();
+    });
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('stands down at the end of the list rather than firing forever', async () => {
+    const { container } = renderPagination(scrollProps);
+
+    await act(async () => {
+      MockObserver.live[0].fire();
+    });
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      okResponse(pageHtml([5, 6]))
+    );
+    await act(async () => {
+      MockObserver.live[0].fire();
+    });
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(6)
+    );
+
+    expect(MockObserver.live).toHaveLength(0);
+  });
+
+  it('stands down after a failure until the shopper retries', async () => {
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      Promise.reject(new Error('offline'))
+    );
+
+    renderPagination({ ...scrollProps, retryLabel: 'Retry' });
+
+    await act(async () => {
+      MockObserver.live[0].fire();
+    });
+
+    await screen.findByText('Retry');
+    expect(MockObserver.live).toHaveLength(0);
+  });
+});
+
+describe('pagination — the count readout', () => {
+  it('publishes the numbers as well as the sentence', () => {
+    renderPagination({ showStatus: true });
+
+    const status = document.querySelector('[data-part="status"]') as HTMLElement;
+    expect(status).toHaveTextContent('Showing 2 of 6');
+    expect(status).toHaveAttribute('data-listing-shown', '2');
+    expect(status).toHaveAttribute('data-listing-total', '6');
+    expect(status).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('counts what is on screen after an append', async () => {
+    const { container } = renderPagination({
+      mode: 'loadmore',
+      append: true,
+      showStatus: true
+    });
+
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+
+    expect(document.querySelector('[data-part="status"]')).toHaveTextContent(
+      'Showing 4 of 6'
+    );
+  });
+
+  it('states a range from the page the shopper actually landed on', () => {
+    renderPagination(
+      { showStatus: true, statusTemplate: '{from}–{to} of {total}' },
+      {},
+      listingContext({
+        pagination: { current_page: 2, num_pages: 3, page_size: 2, count: 6 }
+      })
+    );
+
+    expect(document.querySelector('[data-part="status"]')).toHaveTextContent(
+      '3–4 of 6'
+    );
+  });
+});
+
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Append against the REAL grid rather than a hand-written list.
+ *
+ * Both switches the grid and the pagination own are first-class options, and
+ * the failures below only exist where they meet: a grid that pins a
+ * merchandising tile by index, and a pagination block that grafts another
+ * page's cells into it. A fixture list cannot reproduce either, because the
+ * fixture has no tile and writes no rules.
+ */
+
+/** A campaign tile the merchandiser asked to repeat on every page. */
+const everyPageTile = {
+  id: 'tile-1',
+  type: 'group',
+  label: 'Campaign',
+  order: 0,
+  hidden: false,
+  value: '',
+  properties: {
+    role: { desktop: 'grid-insertion' },
+    insertPosition: { desktop: 2 },
+    insertPages: { desktop: 'all' }
+  },
+  styles: {},
+  blocks: []
+};
+
+const gridProps = (blocks: unknown[] = [everyPageTile]) =>
+  ({
+    block: {
+      id: 'grid-1',
+      type: 'product-grid',
+      label: 'Grid',
+      order: 0,
+      hidden: false,
+      value: '',
+      properties: {},
+      styles: {},
+      blocks
+    },
+    placeholderId: 'ph',
+    sectionId: 'sec',
+    isDesigner: false
+  } as never);
+
+const gridListing = (page: number, ids: number[]) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/shoes',
+    products: ids.map((id) => ({
+      name: `Item ${id}`,
+      url: `/p/${id}`,
+      price: String(id * 10),
+      pk: id
+    })),
+    facets: [],
+    sorters: [],
+    pagination: { current_page: page, num_pages: 3, page_size: 2, count: 6 }
+  }
+});
+
+/** Page N exactly as the server renders it — the real grid, tile and all. */
+const gridPageHtml = (page: number, ids: number[]) =>
+  '<!doctype html><html><body><main>' +
+  ssr(
+    <ThemePageContextProvider value={gridListing(page, ids)}>
+      <ProductGridBlock {...gridProps()} />
+    </ThemePageContextProvider>
+  ) +
+  '</main></body></html>';
+
+const renderGrid = (properties: Props) => {
+  const context = gridListing(1, [1, 2]);
+
+  return render(
+    <ThemePageContextProvider value={context}>
+      <div>
+        <ProductGridBlock {...gridProps()} />
+        <ListingPaginationBlock {...blockProps(properties)} />
+      </div>
+    </ThemePageContextProvider>
+  );
+};
+
+/** The grid's own stylesheet, which is the only one on the page. */
+const gridSheet = (container: HTMLElement): string =>
+  container.querySelector('[data-product-grid] > style')?.textContent ?? '';
+
+/** Every cell-pinning rule the grid wrote, reduced to its bare selector. */
+const pinSelectors = (css: string): string[] =>
+  Array.from(css.matchAll(/([^{}@]+)\{grid-column:[^{}]*\}/g)).map((match) =>
+    match[1].trim()
+  );
+
+describe('pagination — appending into the real product grid', () => {
+  const appendProps = { mode: 'loadmore', append: true };
+
+  const appendPage = async (
+    container: HTMLElement,
+    page: number,
+    ids: number[],
+    expectedCards: number
+  ) => {
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      okResponse(gridPageHtml(page, ids))
+    );
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(
+        expectedCards
+      )
+    );
+  };
+
+  it('never lets one pinning rule place two cells', async () => {
+    const { container } = renderGrid(appendProps);
+    await appendPage(container, 2, [3, 4], 4);
+
+    // Page two's tile is a cell of the same grid now. A rule page one wrote
+    // for "the tile at index 0" that also reaches page two's puts both in one
+    // cell, stacked on each other and over whatever was there.
+    const selectors = pinSelectors(gridSheet(container));
+    expect(selectors.length).toBeGreaterThan(0);
+    selectors.forEach((selector) => {
+      expect(container.querySelectorAll(selector)).toHaveLength(1);
+    });
+  });
+
+  it('leaves every cell the shopper already saw exactly where it was', async () => {
+    const { container } = renderGrid(appendProps);
+    const before = Array.from(
+      container.querySelector('[data-product-grid]')?.children ?? []
+    );
+
+    await appendPage(container, 2, [3, 4], 4);
+
+    const after = Array.from(
+      container.querySelector('[data-product-grid]')?.children ?? []
+    );
+    // Same nodes, same order, nothing inserted among them: an appended page
+    // is additive or it is a regression.
+    expect(after.slice(0, before.length)).toEqual(before);
+    expect(after.length).toBeGreaterThan(before.length);
+  });
+
+  it('counts the products it appended, not the cells', async () => {
+    const { container } = renderGrid({ ...appendProps, showStatus: true });
+    await appendPage(container, 2, [3, 4], 4);
+
+    // Four cards on screen; the tile that came with them is merchandising,
+    // not a product the listing is counting down.
+    expect(document.querySelector('[data-part="status"]')).toHaveTextContent(
+      'Showing 4 of 6'
+    );
+  });
+
+  it('never states a range that runs past the end of the listing', async () => {
+    const { container } = renderGrid({
+      ...appendProps,
+      showStatus: true,
+      statusTemplate: '{from}-{to} of {total}'
+    });
+
+    await appendPage(container, 2, [3, 4], 4);
+    await appendPage(container, 3, [5, 6], 6);
+
+    expect(document.querySelector('[data-part="status"]')).toHaveTextContent(
+      '1-6 of 6'
+    );
+  });
+});
+
+describe('pagination — the fetched page is untrusted', () => {
+  const appendProps = { mode: 'loadmore', append: true };
+
+  /**
+   * A card with a nested block inside it: a lottie, an announcement bar and a
+   * recommendation strip all emit their own <style>, and any of them can sit
+   * inside a card. The script is what a compromised or mistaken response would
+   * carry — cloned out of a DOMParser document it has never started, so it
+   * runs the moment it is inserted.
+   */
+  const hostileHtml = () =>
+    '<!doctype html><html><body><main>' +
+    '<div data-product-grid="" data-product-grid-id="g">' +
+    '<style>[data-product-grid-id="g"]{grid-template-columns:repeat(9,minmax(0,1fr));}</style>' +
+    '<a href="/p/3" data-product-card="">Item 3' +
+    '<span data-lottie="">' +
+    '<style>[data-lottie=""]{display:none;}</style>' +
+    '<script>window.__graftEscaped = true;</script>' +
+    '<img src="/x.jpg" onerror="window.__graftEscaped = true">' +
+    '</span></a>' +
+    '<a href="javascript:window.__graftEscaped = true" data-product-card="">' +
+    'Item 4</a>' +
+    '</div></main></body></html>';
+
+  beforeEach(() => {
+    delete (window as unknown as Record<string, unknown>).__graftEscaped;
+    (global.fetch as jest.Mock).mockImplementation(() =>
+      okResponse(hostileHtml())
+    );
+  });
+
+  const append = async (container: HTMLElement) => {
+    fireEvent.click(screen.getByText('Load more'));
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-product-card]')).toHaveLength(4)
+    );
+  };
+
+  it('lets no script cross into the live document', async () => {
+    const { container } = renderPagination(appendProps);
+    await append(container);
+
+    // The element's presence IS the defect: a script cloned out of a
+    // DOMParser document has never started, so a browser runs it on insertion.
+    // jsdom does not, which is why this asserts the DOM and not a side effect.
+    expect(container.querySelectorAll('script')).toHaveLength(0);
+    expect(
+      (window as unknown as Record<string, unknown>).__graftEscaped
+    ).toBeUndefined();
+  });
+
+  it('copies no stylesheet at any depth, not just the top one', async () => {
+    const { container } = renderPagination(appendProps);
+    await append(container);
+
+    // A nested <style> outranks the live one exactly as a top-level one does;
+    // depth was never what made it safe.
+    expect(container.querySelectorAll('style')).toHaveLength(0);
+  });
+
+  it('strips the handlers and the script urls off what it does copy', async () => {
+    const { container } = renderPagination(appendProps);
+    await append(container);
+
+    const image = container.querySelector('img[src="/x.jpg"]');
+    expect(image).not.toBeNull();
+    expect(image?.hasAttribute('onerror')).toBe(false);
+    expect(
+      container.querySelector('a[href^="javascript:"]')
+    ).toBeNull();
+  });
+
+  it('keeps text a shopper reads, even when it reads like a scheme', async () => {
+    // "JavaScript: The Good Parts" is a product a bookshop really sells, and
+    // it normalises to a script scheme. An attribute the browser never
+    // resolves cannot execute one, so scrubbing it costs the card its only
+    // description — and costs it on the appended page only, so the same
+    // product reads differently above and below the fold.
+    (global.fetch as jest.Mock).mockImplementation(() =>
+      okResponse(
+        '<!doctype html><html><body><main>' +
+          '<div data-product-grid="" data-product-grid-id="g">' +
+          '<a href="/p/3" data-product-card="" ' +
+          'title="JavaScript: The Good Parts">' +
+          '<img src="/b.jpg" alt="JavaScript: The Good Parts">Item 3</a>' +
+          '<a href="/p/4" data-product-card="">Item 4</a>' +
+          '</div></main></body></html>'
+      )
+    );
+
+    const { container } = renderPagination(appendProps);
+    await append(container);
+
+    expect(
+      container.querySelector('img[src="/b.jpg"]')?.getAttribute('alt')
+    ).toBe('JavaScript: The Good Parts');
+    expect(
+      container.querySelector('a[href="/p/3"]')?.getAttribute('title')
+    ).toBe('JavaScript: The Good Parts');
+  });
+
+  it('still grafts the products themselves', async () => {
+    const { container } = renderPagination(appendProps);
+    await append(container);
+
+    expect(screen.getByText(/Item 3/)).toBeInTheDocument();
+    expect(screen.getByText(/Item 4/)).toBeInTheDocument();
+    // The card's own content survives the scrub — only the executable parts
+    // are dropped, not the markup around them.
+    expect(container.querySelector('[data-lottie]')).not.toBeNull();
+  });
+});
+
+/* -------------------------------------------------------------------------- */
+
+const sortBlockProps = (properties: Props = {}, over: Props = {}) =>
+  ({
+    block: {
+      id: 'sort-1',
+      type: 'sort-select',
+      label: 'Sort',
+      order: 0,
+      hidden: false,
+      value: '',
+      properties,
+      styles: {},
+      blocks: []
+    },
+    placeholderId: 'ph',
+    sectionId: 'sec',
+    isDesigner: false,
+    ...over
+  } as never);
+
+const sorters = [
+  { label: 'Newest', value: 'newest', is_selected: false },
+  { label: 'Price low to high', value: 'price_asc', is_selected: true },
+  { label: 'Price high to low', value: 'price_desc', is_selected: false }
+];
+
+const renderSort = (properties: Props = {}, over: Props = {}) =>
+  render(
+    <ThemePageContextProvider value={listingContext({ sorters })}>
+      <SortSelectBlock {...sortBlockProps(properties, over)} />
+    </ThemePageContextProvider>
+  );
+
+const GOLDEN_SORT_NATIVE =
+  '<label data-sort-select="" data-part="group" style="display:inline-flex;align-items:center;gap:8px;color:inherit"><span data-sort-select-label="" data-part="label">Sort by</span><select data-sort-select-input="" data-part="dropdown" aria-label="Sort by" style="border:1px solid currentColor;border-radius:inherit;background:transparent;color:inherit;font:inherit;padding:6px 8px;cursor:pointer"><option value="newest" data-part="option">Newest</option><option value="price_asc" data-part="option" data-state="selected" selected="">Price low to high</option><option value="price_desc" data-part="option">Price high to low</option></select></label>';
+
+describe('sort — the native select is untouched', () => {
+  it('renders exactly as it always has', () => {
+    expect(
+      ssr(
+        <ThemePageContextProvider value={listingContext({ sorters })}>
+          <SortSelectBlock {...sortBlockProps()} />
+        </ThemePageContextProvider>
+      )
+    ).toBe(GOLDEN_SORT_NATIVE);
+  });
+
+  it('drops the page cursor when the sort changes', () => {
+    const { container } = renderSort();
+
+    fireEvent.change(container.querySelector('select') as HTMLSelectElement, {
+      target: { value: 'price_desc' }
+    });
+
+    expect(push).toHaveBeenCalledWith('/shoes?sorter=price_desc');
+  });
+});
+
+describe('sort — the option panel', () => {
+  const panelProps = { variant: 'panel' };
+
+  it('names the applied sort on the trigger', () => {
+    renderSort(panelProps);
+
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveTextContent('Price low to high');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+  });
+
+  it('composes the trigger text a designer asked for', () => {
+    renderSort({ ...panelProps, triggerTemplate: 'Sort: {value}' });
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'Sort: Price low to high'
+    );
+  });
+
+  it('opens onto the applied option and marks it', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+
+    const options = screen.getAllByRole('option');
+    expect(options).toHaveLength(3);
+    expect(options[1]).toHaveAttribute('aria-selected', 'true');
+    expect(options[0]).toHaveAttribute('aria-selected', 'false');
+    // Roving tab focus: exactly one row is reachable with Tab, and it is the
+    // one the arrow keys are on.
+    expect(options[1]).toHaveAttribute('tabindex', '0');
+    expect(options[0]).toHaveAttribute('tabindex', '-1');
+    expect(options[1]).toHaveFocus();
+  });
+
+  it('moves through the options with the arrow keys, Home and End', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+
+    const panel = screen.getByRole('listbox');
+    fireEvent.keyDown(panel, { key: 'ArrowDown' });
+    expect(screen.getAllByRole('option')[2]).toHaveFocus();
+
+    // Clamped, not wrapped — the same as a native select.
+    fireEvent.keyDown(panel, { key: 'ArrowDown' });
+    expect(screen.getAllByRole('option')[2]).toHaveFocus();
+
+    fireEvent.keyDown(panel, { key: 'Home' });
+    expect(screen.getAllByRole('option')[0]).toHaveFocus();
+
+    fireEvent.keyDown(panel, { key: 'End' });
+    expect(screen.getAllByRole('option')[2]).toHaveFocus();
+
+    fireEvent.keyDown(panel, { key: 'ArrowUp' });
+    expect(screen.getAllByRole('option')[1]).toHaveFocus();
+  });
+
+  it('applies a sort with Enter and invalidates the page cursor', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+
+    fireEvent.keyDown(screen.getByRole('listbox'), { key: 'ArrowDown' });
+    fireEvent.keyDown(screen.getByRole('listbox'), { key: 'Enter' });
+
+    expect(push).toHaveBeenCalledWith('/shoes?sorter=price_desc');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('applies a sort with a pointer', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByText('Newest'));
+
+    expect(push).toHaveBeenCalledWith('/shoes?sorter=newest');
+  });
+
+  it('closes on Escape and hands focus back to the trigger', () => {
+    renderSort(panelProps);
+    const trigger = screen.getByRole('button');
+
+    fireEvent.click(trigger);
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('closes on an outside pointer', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+
+    fireEvent.mouseDown(document.body);
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('stays open when the pointer lands inside it', () => {
+    renderSort(panelProps);
+    fireEvent.click(screen.getByRole('button'));
+
+    fireEvent.mouseDown(screen.getByRole('listbox'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('navigates nowhere in the designer', () => {
+    renderSort(panelProps, { isDesigner: true });
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByText('Newest'));
+
+    expect(push).not.toHaveBeenCalled();
+  });
+});