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

package/src/blocks/__tests__/variant-selector-block.test.tsx

@@ -0,0 +1,817 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import VariantSelectorBlock from '../variant-selector-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import GOLDEN from './variant-selector-golden.json';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/p/blue',
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+let sessionStatus: 'authenticated' | 'unauthenticated' = 'unauthenticated';
+let sessionEmail = '';
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({
+    status: sessionStatus,
+    data:
+      sessionStatus === 'authenticated'
+        ? { user: { email: sessionEmail } }
+        : null
+  })
+}));
+
+const addStockAlert = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+jest.mock('@akinon/next/data/client/wishlist', () => ({
+  __esModule: true,
+  useAddStockAlertMutation: () => [addStockAlert, { isLoading: false }]
+}));
+
+/**
+ * `L` is the sold-out size the whole feature is about. `XL` is sold out with no
+ * url — still alertable, because commerce sent a product id for it. `NOPK` is
+ * sold out with nothing to register against, and `NOURL` is IN STOCK but
+ * unpickable: neither may ever be offered an alert.
+ */
+const PRODUCT = {
+  pk: 10,
+  title: 'Oxford Shirt',
+  variants: [
+    {
+      attribute_key: 'color',
+      attribute_name: 'Color',
+      options: [
+        {
+          label: 'Blue',
+          value: 'blue',
+          is_selected: true,
+          is_selectable: true,
+          product: { pk: 11, absolute_url: '/p/blue', stock: 9 },
+          attributes: { color: '#0000ff' }
+        },
+        {
+          label: 'Red',
+          value: 'red',
+          is_selectable: true,
+          product: { pk: 12, absolute_url: '/p/red', stock: 2 }
+        }
+      ]
+    },
+    {
+      attribute_key: 'size',
+      attribute_name: 'Size',
+      options: [
+        {
+          label: 'M',
+          value: 'm',
+          is_selected: true,
+          is_selectable: true,
+          product: { pk: 22, absolute_url: '/p/m', stock: 1 }
+        },
+        {
+          label: 'L',
+          value: 'l',
+          is_selectable: false,
+          in_stock: false,
+          product: { pk: 23, absolute_url: '/p/l', stock: 0 }
+        },
+        {
+          label: 'XL',
+          value: 'xl',
+          is_selectable: false,
+          in_stock: false,
+          product: { pk: 24, stock: 0 }
+        },
+        {
+          label: 'NOPK',
+          value: 'nopk',
+          is_selectable: false,
+          in_stock: false,
+          product: { absolute_url: '/p/nopk', stock: 0 }
+        },
+        {
+          // In stock, but commerce sent no url — disabled, never sold out.
+          label: 'NOURL',
+          value: 'nourl',
+          is_selectable: true,
+          in_stock: true,
+          product: { pk: 26, stock: 7 }
+        }
+      ]
+    }
+  ]
+};
+
+const renderBlock = (
+  properties: Record<string, unknown>,
+  isDesigner = false
+) =>
+  render(
+    <ThemePageContextProvider value={{ product: PRODUCT } as never}>
+      <VariantSelectorBlock
+        {...({
+          block: {
+            id: 'vs',
+            type: 'variant-selector',
+            styles: {},
+            properties,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's',
+          isDesigner,
+          currentBreakpoint: 'desktop'
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const ON = { stockAlert: true };
+
+/** The trigger for one sold-out label. */
+const trigger = (container: HTMLElement, label: string) =>
+  Array.from(container.querySelectorAll('button[data-variant-option]')).find(
+    (node) => node.textContent === label
+  ) as HTMLButtonElement | undefined;
+
+beforeEach(() => {
+  addStockAlert.mockClear();
+  sessionStatus = 'unauthenticated';
+  sessionEmail = '';
+  document.body.style.overflow = '';
+});
+
+/* ------------------------------------------------------------------ */
+/* The default render, locked to a golden captured from HEAD.          */
+/* ------------------------------------------------------------------ */
+
+describe('default render is untouched', () => {
+  /**
+   * The golden was captured by rendering the block AT HEAD, before the stock
+   * alert existed. Every case must still come back byte for byte, which is the
+   * only real proof that a composition nobody edited did not move.
+   */
+  const GOLDEN_PRODUCT = {
+    pk: 10,
+    variants: [
+      {
+        attribute_key: 'color',
+        attribute_name: 'Color',
+        options: [
+          {
+            label: 'Blue',
+            value: 'blue',
+            is_selected: true,
+            is_selectable: true,
+            product: { pk: 11, absolute_url: '/p/blue', stock: 9 },
+            attributes: { color: '#0000ff' }
+          },
+          {
+            label: 'Red',
+            value: 'red',
+            is_selectable: true,
+            product: { pk: 12, absolute_url: '/p/red', stock: 2 }
+          }
+        ]
+      },
+      {
+        attribute_key: 'size',
+        attribute_name: 'Size',
+        options: [
+          {
+            label: 'S',
+            value: 's',
+            is_selectable: true,
+            product: { pk: 21, absolute_url: '/p/s', stock: 5 }
+          },
+          {
+            label: 'M',
+            value: 'm',
+            is_selected: true,
+            is_selectable: true,
+            product: { pk: 22, absolute_url: '/p/m', stock: 1 }
+          },
+          {
+            label: 'L',
+            value: 'l',
+            is_selectable: false,
+            in_stock: false,
+            product: { pk: 23, absolute_url: '/p/l', stock: 0 }
+          },
+          {
+            label: 'XL',
+            value: 'xl',
+            is_selectable: false,
+            in_stock: false,
+            product: { pk: 24, stock: 0 }
+          }
+        ]
+      }
+    ]
+  };
+
+  const renderGolden = (
+    properties: Record<string, unknown>,
+    isDesigner = false
+  ) =>
+    render(
+      <ThemePageContextProvider value={{ product: GOLDEN_PRODUCT } as never}>
+        <VariantSelectorBlock
+          {...({
+            block: {
+              id: 'vs',
+              type: 'variant-selector',
+              styles: {},
+              properties,
+              order: 0,
+              hidden: false
+            },
+            placeholderId: 'p',
+            sectionId: 's',
+            isDesigner,
+            currentBreakpoint: 'desktop'
+          } as never)}
+        />
+      </ThemePageContextProvider>
+    );
+
+  const CASES: Array<[string, Record<string, unknown>, boolean]> = [
+    ['defaults', {}, false],
+    ['defaults-designer', {}, true],
+    ['dropdown', { layout: 'dropdown' }, false],
+    ['diagonal', { disabledStyle: 'diagonal' }, false],
+    ['diagonal-w3', { disabledStyle: 'diagonal', strikeWidth: 3 }, false],
+    ['nomark', { disabledStyle: 'none' }, false],
+    ['lowstock', { lowStockThreshold: 3 }, false],
+    [
+      'lowstock-label',
+      { lowStockThreshold: 3, lowStockLabel: 'Few left' },
+      false
+    ],
+    ['chip', { groupLayouts: 'color:chip' }, false],
+    [
+      'chip-image',
+      { groupLayouts: 'color:chip', swatchContent: 'image' },
+      false
+    ],
+    ['text-layout', { groupLayouts: 'size:text' }, false],
+    ['group-dropdown', { groupLayouts: 'size:dropdown' }, false],
+    ['selected-value', { showSelectedValue: true }, false],
+    [
+      'selected-sep',
+      { showSelectedValue: true, selectedValueSeparator: ' - ' },
+      false
+    ],
+    ['no-label', { showGroupLabel: false }, false],
+    ['gaps', { gap: 4, optionGap: 20 }, false],
+    ['swatchsize', { groupLayouts: 'color:chip', swatchSize: 48 }, false],
+    [
+      'combo',
+      {
+        layout: 'dropdown',
+        groupLayouts: 'size:box',
+        lowStockThreshold: 2,
+        disabledStyle: 'diagonal'
+      },
+      false
+    ]
+  ];
+
+  it.each(CASES)('%s matches the HEAD golden', (name, props, designer) => {
+    const { container } = renderGolden(
+      props as Record<string, unknown>,
+      designer as boolean
+    );
+    expect(container.innerHTML).toBe(
+      (GOLDEN as Record<string, string>)[name as string]
+    );
+  });
+
+  it('covers every captured case', () => {
+    expect(CASES.map(([n]) => n).sort()).toEqual(Object.keys(GOLDEN).sort());
+  });
+
+  it('renders no alert markup at all while the switch is off', () => {
+    const { container } = renderBlock({});
+    expect(container.querySelector('[data-variant-alert]')).toBeNull();
+    expect(container.querySelectorAll('button[data-variant-option]')).toHaveLength(
+      0
+    );
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Which options become actionable.                                    */
+/* ------------------------------------------------------------------ */
+
+describe('only a sold-out option with an id becomes actionable', () => {
+  it('turns the sold-out sizes into real controls', () => {
+    const { container } = renderBlock(ON);
+
+    expect(trigger(container, 'L')).toBeTruthy();
+    // Sold out with no url still has a product id, so it can still be watched.
+    expect(trigger(container, 'XL')).toBeTruthy();
+  });
+
+  it('leaves a sold-out option commerce sent no id for inert', () => {
+    const { container } = renderBlock(ON);
+
+    expect(trigger(container, 'NOPK')).toBeUndefined();
+    const inert = Array.from(
+      container.querySelectorAll('span[data-variant-option="disabled"]')
+    ).find((node) => node.textContent === 'NOPK');
+    expect(inert).toBeTruthy();
+    expect(inert?.getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('never offers an alert on an in-stock option that is merely unpickable', () => {
+    const { container } = renderBlock(ON);
+
+    expect(trigger(container, 'NOURL')).toBeUndefined();
+  });
+
+  it('keeps the disabled part state so existing swatch styling still lands', () => {
+    const { container } = renderBlock(ON);
+    const button = trigger(container, 'L');
+
+    expect(button?.getAttribute('data-part')).toBe('option');
+    expect(button?.getAttribute('data-state')).toBe('disabled');
+    expect(button?.getAttribute('data-variant-option')).toBe('disabled');
+    // A control that does something must not announce itself as disabled.
+    expect(button?.hasAttribute('aria-disabled')).toBe(false);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* The form is bound to the option, not the product.                   */
+/* ------------------------------------------------------------------ */
+
+describe('the form belongs to the option that was clicked', () => {
+  it('names that option in the description and sends that option id', async () => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertDescription: 'Tell me when {attribute} {option} of {product} returns'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    expect(
+      container.querySelector('[data-variant-alert-description]')?.textContent
+    ).toBe('Tell me when Size L of Oxford Shirt returns');
+
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    // 23 is L's own product id — not 10, the product's.
+    expect(addStockAlert).toHaveBeenCalledWith({
+      productPk: 23,
+      email: 'shopper@example.com'
+    });
+  });
+
+  it('opens against the second sold-out option independently', () => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertDescription: '{option}'
+    });
+
+    fireEvent.click(trigger(container, 'XL') as HTMLButtonElement);
+    expect(
+      container.querySelector('[data-variant-alert-description]')?.textContent
+    ).toBe('XL');
+    expect(container.querySelectorAll('[data-variant-alert]')).toHaveLength(1);
+  });
+
+  it('clears a previous answer when another option is opened', async () => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+
+    const { container } = renderBlock(ON);
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+    expect(container.querySelector('[data-variant-alert-success]')).toBeTruthy();
+
+    fireEvent.click(trigger(container, 'XL') as HTMLButtonElement);
+    // A success from L must never read as XL's answer.
+    expect(container.querySelector('[data-variant-alert-success]')).toBeNull();
+    expect(container.querySelector('[data-variant-alert-form]')).toBeTruthy();
+  });
+
+  it('closes when the same option is clicked again', () => {
+    sessionStatus = 'authenticated';
+    const { container } = renderBlock(ON);
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    expect(container.querySelector('[data-variant-alert]')).toBeTruthy();
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    expect(container.querySelector('[data-variant-alert]')).toBeNull();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Honesty: a guest is told the truth, never given a fake waiting list.*/
+/* ------------------------------------------------------------------ */
+
+describe('a signed-out shopper is not pretended at', () => {
+  it('shows the authorable explanation and link instead of a form', () => {
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertSignedOutText: 'Sign in first',
+      stockAlertSignInLabel: 'Go to sign in',
+      stockAlertSignInUrl: '/users/login'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    expect(container.querySelector('[data-variant-alert-form]')).toBeNull();
+    expect(
+      container.querySelector('[data-variant-alert-signed-out]')?.textContent
+    ).toBe('Sign in first');
+
+    const link = container.querySelector('[data-variant-alert-signin]');
+    expect(link?.getAttribute('href')).toBe('/users/login');
+    expect(link?.textContent).toBe('Go to sign in');
+  });
+
+  it('never reaches the alert endpoint', () => {
+    const { container } = renderBlock(ON);
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    expect(addStockAlert).not.toHaveBeenCalled();
+  });
+
+  it('drops a script url rather than rendering it', () => {
+    const { container } = renderBlock({
+      ...ON,
+      // eslint-disable-next-line no-script-url
+      stockAlertSignInUrl: 'java\tscript:alert(1)'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    expect(container.querySelector('[data-variant-alert-signin]')).toBeNull();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* It validates before it submits, and says what happened either way.  */
+/* ------------------------------------------------------------------ */
+
+describe('validation and outcome', () => {
+  beforeEach(() => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+  });
+
+  it('refuses an invalid address without calling commerce', async () => {
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertInvalidEmailLabel: 'Bad address'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    fireEvent.change(
+      container.querySelector('[data-variant-alert-input]') as HTMLInputElement,
+      { target: { value: 'not-an-email' } }
+    );
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    expect(addStockAlert).not.toHaveBeenCalled();
+    const error = container.querySelector('[data-variant-alert-error]');
+    expect(error?.textContent).toBe('Bad address');
+    expect(error?.getAttribute('role')).toBe('alert');
+  });
+
+  it('refuses to submit until required consent is given', async () => {
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertConsentText: 'I agree to be emailed',
+      stockAlertConsentRequired: true,
+      stockAlertConsentErrorLabel: 'Consent needed'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    expect(addStockAlert).not.toHaveBeenCalled();
+    expect(
+      container.querySelector('[data-variant-alert-error]')?.textContent
+    ).toBe('Consent needed');
+
+    fireEvent.click(
+      container.querySelector(
+        '[data-variant-alert-consent] input[type="checkbox"]'
+      ) as HTMLInputElement
+    );
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+    expect(addStockAlert).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows consent copy without a checkbox when it is not required', () => {
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertConsentText: 'We only email you once.'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    const consent = container.querySelector('[data-variant-alert-consent]');
+    expect(consent?.textContent).toBe('We only email you once.');
+    expect(consent?.querySelector('input')).toBeNull();
+  });
+
+  it('says so when commerce rejects the alert', async () => {
+    addStockAlert.mockImplementationOnce(() => ({
+      unwrap: () => Promise.reject(new Error('401'))
+    }));
+
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertErrorLabel: 'Could not register'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    expect(container.querySelector('[data-variant-alert-success]')).toBeNull();
+    expect(
+      container.querySelector('[data-variant-alert-error]')?.textContent
+    ).toBe('Could not register');
+  });
+
+  it('confirms in the brand words when it worked', async () => {
+    const { container } = renderBlock({
+      ...ON,
+      stockAlertSuccessLabel: 'You are on the list for {option}'
+    });
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    const success = container.querySelector('[data-variant-alert-success]');
+    expect(success?.textContent).toBe('You are on the list for L');
+    expect(success?.getAttribute('role')).toBe('status');
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* The designer is not a storefront.                                   */
+/* ------------------------------------------------------------------ */
+
+describe('designer safety', () => {
+  it('never posts an alert from the canvas', async () => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+
+    const { container } = renderBlock(ON, true);
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    await act(async () => {
+      fireEvent.submit(
+        container.querySelector('[data-variant-alert-form]') as HTMLFormElement
+      );
+    });
+
+    expect(addStockAlert).not.toHaveBeenCalled();
+  });
+
+  it('shows the author the form even though nobody is signed in', () => {
+    const { container } = renderBlock(ON, true);
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    expect(container.querySelector('[data-variant-alert-form]')).toBeTruthy();
+  });
+
+  it('leaves the sign-in link inert', () => {
+    const { container } = renderBlock(
+      { ...ON, stockAlertSignInUrl: '/users/login' },
+      true
+    );
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+    // The designer branch shows the form, so no navigation is offered at all.
+    expect(container.querySelector('[data-variant-alert-signin]')).toBeNull();
+  });
+
+  it('locks no scroll and claims no dialog on the canvas', () => {
+    const { container } = renderBlock(
+      { ...ON, stockAlertPresentation: 'modal' },
+      true
+    );
+
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    expect(document.body.style.overflow).toBe('');
+    expect(
+      container.querySelector('[data-variant-alert]')?.hasAttribute('aria-modal')
+    ).toBe(false);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* The modal owes the full contract.                                   */
+/* ------------------------------------------------------------------ */
+
+describe('modal contract', () => {
+  const MODAL = { ...ON, stockAlertPresentation: 'modal' };
+
+  beforeEach(() => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+  });
+
+  it('claims aria-modal, moves focus in and returns it on close', () => {
+    const { container } = renderBlock(MODAL);
+    const button = trigger(container, 'L') as HTMLButtonElement;
+
+    fireEvent.click(button);
+
+    const panel = container.querySelector('[data-variant-alert]');
+    expect(panel?.getAttribute('aria-modal')).toBe('true');
+    expect(panel?.getAttribute('role')).toBe('dialog');
+    expect(panel?.contains(document.activeElement)).toBe(true);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(container.querySelector('[data-variant-alert]')).toBeNull();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it('reference-counts the scroll lock across two open pickers', () => {
+    document.body.style.overflow = 'scroll';
+
+    const first = renderBlock(MODAL);
+    const second = renderBlock(MODAL);
+
+    fireEvent.click(trigger(first.container, 'L') as HTMLButtonElement);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    fireEvent.click(trigger(second.container, 'L') as HTMLButtonElement);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    // Closed one at a time: Escape is on the document, so it would dismiss
+    // both at once and never exercise the counting.
+    fireEvent.click(
+      first.container.querySelector(
+        '[data-variant-alert-close]'
+      ) as HTMLButtonElement
+    );
+    // The first letting go must not unlock the page under the second.
+    expect(document.body.style.overflow).toBe('hidden');
+
+    fireEvent.click(
+      second.container.querySelector(
+        '[data-variant-alert-close]'
+      ) as HTMLButtonElement
+    );
+    // Only the last holder restores what the page had before either opened.
+    expect(document.body.style.overflow).toBe('scroll');
+  });
+
+  it('closes on the backdrop but not on a click inside the dialog', () => {
+    const { container } = renderBlock(MODAL);
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    fireEvent.click(
+      container.querySelector('[data-variant-alert-input]') as HTMLElement
+    );
+    expect(container.querySelector('[data-variant-alert]')).toBeTruthy();
+
+    fireEvent.click(
+      container.querySelector('[data-variant-alert-backdrop]') as HTMLElement
+    );
+    expect(container.querySelector('[data-variant-alert]')).toBeNull();
+  });
+
+  it('keeps the backdrop out of the dialog subtree', () => {
+    const { container } = renderBlock(MODAL);
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    const backdrop = container.querySelector('[data-variant-alert-backdrop]');
+    const panel = container.querySelector('[data-variant-alert]');
+    // aria-hidden on an ancestor would hide the dialog it sits behind.
+    expect(backdrop?.contains(panel as Node)).toBe(false);
+  });
+
+  it('claims no aria-modal for the inline panel', () => {
+    const { container } = renderBlock(ON);
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    const panel = container.querySelector('[data-variant-alert]');
+    expect(panel?.hasAttribute('aria-modal')).toBe(false);
+    expect(panel?.getAttribute('role')).toBe('group');
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('draws the inline panel inside the group that owns the option', () => {
+    const { container } = renderBlock(ON);
+    fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
+
+    const group = container.querySelector('[data-variant-group="size"]');
+    expect(group?.querySelector('[data-variant-alert]')).toBeTruthy();
+    expect(
+      container
+        .querySelector('[data-variant-group="color"]')
+        ?.querySelector('[data-variant-alert]')
+    ).toBeNull();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Two dialogs on one PDP is an ordinary composition — a desktop       */
+/* picker and a mobile one — and it must not take the tab with it.     */
+/* ------------------------------------------------------------------ */
+
+describe('two dialogs open at once', () => {
+  const MODAL = { ...ON, stockAlertPresentation: 'modal' };
+
+  beforeEach(() => {
+    sessionStatus = 'authenticated';
+    sessionEmail = 'shopper@example.com';
+  });
+
+  const openBoth = () => {
+    const first = renderBlock(MODAL);
+    const second = renderBlock(MODAL);
+
+    fireEvent.click(trigger(first.container, 'L') as HTMLButtonElement);
+    fireEvent.click(trigger(second.container, 'L') as HTMLButtonElement);
+
+    return {
+      firstPanel: first.container.querySelector(
+        '[data-variant-alert]'
+      ) as HTMLElement,
+      secondPanel: second.container.querySelector(
+        '[data-variant-alert]'
+      ) as HTMLElement
+    };
+  };
+
+  it('does not fight itself to death when focus lands outside both', () => {
+    const { secondPanel } = openBoth();
+
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    // Each panel used to read the other's focus as "outside" and pull it back
+    // into itself, forever: RangeError: Maximum call stack size exceeded.
+    let moves = 0;
+    const countMoves = () => {
+      moves += 1;
+    };
+    document.addEventListener('focusin', countMoves);
+
+    try {
+      expect(() => outside.focus()).not.toThrow();
+    } finally {
+      document.removeEventListener('focusin', countMoves);
+      outside.remove();
+    }
+
+    // The move itself, plus the one correction from the dialog on top.
+    expect(moves).toBeLessThan(5);
+    expect(secondPanel.contains(document.activeElement)).toBe(true);
+  });
+
+  it('lets only the dialog on top claim the rest of the page is inert', () => {
+    const { firstPanel, secondPanel } = openBoth();
+
+    expect(firstPanel.hasAttribute('aria-modal')).toBe(false);
+    expect(secondPanel.getAttribute('aria-modal')).toBe('true');
+  });
+});