@transferwise/components 46.167.0 → 46.168.0

package/src/Prompt/Snackbar/SnackbarProvider.test.tsx

@@ -0,0 +1,783 @@
+import { renderHook } from '@testing-library/react';
+
+import { act, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { resetLiveRegionAnnouncementQueue } from '../../common/LiveRegion/LiveRegion';
+import { EXIT_ANIMATION as DIMMER_EXIT_DURATION } from '../../Dimmer/Dimmer';
+import Modal from '../../Modal';
+
+import {
+  SNACKBAR_DEFAULT_DURATION,
+  SNACKBAR_ENTER_DURATION,
+  SNACKBAR_EXIT_DURATION,
+  SNACKBAR_EXTENDED_DURATION,
+} from './constants';
+import type { SnackbarCreationProps } from './Snackbar.types';
+import SnackbarProvider from './SnackbarProvider';
+import { SnackbarConsumer } from './SnackbarContext';
+import useSnackbar from './useSnackbar';
+import useSnackbarManager from './useSnackbarManager';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+
+const advanceTimers = (duration: number) => {
+  act(() => jest.advanceTimersByTime(duration));
+};
+
+type SnackbarTrigger = { label: string; snackbar: SnackbarCreationProps };
+
+const SnackbarTriggers = ({ triggers }: { triggers: SnackbarTrigger[] }) => {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <>
+      {triggers.map(({ label, snackbar }) => (
+        <button key={label} type="button" onClick={() => createSnackbar(snackbar)}>
+          {label}
+        </button>
+      ))}
+    </>
+  );
+};
+
+const BatchedSnackbarTrigger = ({
+  clear = false,
+  onFirstDismiss,
+  onLatestDismiss,
+}: {
+  clear?: boolean;
+  onFirstDismiss?: () => void;
+  onLatestDismiss?: () => void;
+}) => {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        createSnackbar({ text: 'First message', onDismiss: onFirstDismiss });
+        createSnackbar({ text: 'Latest message', onDismiss: onLatestDismiss });
+        if (clear) {
+          createSnackbar({ text: '' });
+        }
+      }}
+    >
+      Show latest
+    </button>
+  );
+};
+
+const renderProvider = (triggers: SnackbarTrigger[], timeout?: number) =>
+  render(
+    <SnackbarProvider timeout={timeout}>
+      <SnackbarTriggers triggers={triggers} />
+    </SnackbarProvider>,
+  );
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  resetLiveRegionAnnouncementQueue();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+/* eslint-disable testing-library/no-node-access -- Portal placement, teardown and transition classes require structural DOM assertions. */
+describe('SnackbarProvider orchestration', () => {
+  it('does not mount a portal or live region while idle', () => {
+    const { baseElement } = renderProvider([]);
+
+    expect(baseElement.querySelector('.wds-Snackbar')).toBeNull();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it.each(['', '   ', undefined, null, false, true])(
+    'does not show an empty surface when text is %p',
+    async (text) => {
+      renderProvider([{ label: 'Show', snackbar: { text } }]);
+
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+      expect(document.querySelector('.wds-Snackbar')).toBeNull();
+      expect(jest.getTimerCount()).toBe(0);
+    },
+  );
+
+  it('keeps zero as valid message content', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 0 } }]);
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('0');
+  });
+
+  it('creates a Snackbar programmatically in document.body', async () => {
+    const { container } = renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', sentiment: 'success' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('Changes saved');
+    expect(container).not.toContainElement(screen.getByRole('status'));
+    expect(screen.getByText('Changes saved').closest('.wds-Snackbar')?.parentElement).toBe(
+      document.body,
+    );
+  });
+
+  it('dismisses after the default four-second duration', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('retains an explicitly configured Provider timeout', async () => {
+    renderProvider(
+      [{ label: 'Show', snackbar: { text: 'Changes saved' } }],
+      SNACKBAR_DEFAULT_DURATION * 2,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('uses an explicit semantic duration instead of the legacy Provider timeout', async () => {
+    renderProvider(
+      [{ label: 'Show', snackbar: { text: 'Changes saved', duration: 'extended' } }],
+      1,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it.each(['running', 'hovered', 'focused'] as const)(
+    'applies an updated Provider timeout while the timer is %s',
+    async (interaction) => {
+      const triggers = [
+        { label: 'Show', snackbar: { text: 'Changes saved', action: { label: 'Undo' } } },
+      ];
+      const view = renderProvider(triggers, 4000);
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+      advanceTimers(2000);
+      const message = screen.getByText('Changes saved');
+      const action = screen.getByRole('button', { name: 'Undo' });
+      if (interaction === 'hovered') {
+        await user.hover(message);
+      } else if (interaction === 'focused') {
+        act(() => action.focus());
+      }
+
+      view.rerender(
+        <SnackbarProvider timeout={9000}>
+          <SnackbarTriggers triggers={triggers} />
+        </SnackbarProvider>,
+      );
+
+      if (interaction !== 'running') {
+        advanceTimers(10_000);
+      }
+      expect(message).toBeInTheDocument();
+      if (interaction === 'hovered') {
+        await user.unhover(message);
+      } else if (interaction === 'focused') {
+        act(() => action.blur());
+      }
+      advanceTimers(8999);
+      expect(message).toBeInTheDocument();
+      expect(message.closest('.wds-Snackbar-container')).not.toHaveClass(
+        'wds-Snackbar-container-exit-active',
+      );
+      advanceTimers(1);
+      advanceTimers(SNACKBAR_EXIT_DURATION);
+      expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+    },
+  );
+
+  it('does not reset an explicit semantic duration when the Provider timeout changes', async () => {
+    const triggers: SnackbarTrigger[] = [
+      { label: 'Show', snackbar: { text: 'Changes saved', duration: 'default' } },
+    ];
+    const view = renderProvider(triggers, 1000);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(2000);
+
+    view.rerender(
+      <SnackbarProvider timeout={9000}>
+        <SnackbarTriggers triggers={triggers} />
+      </SnackbarProvider>,
+    );
+    advanceTimers(1999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('pauses the provider timer while keyboard focus moves within the Snackbar', async () => {
+    renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', action: { label: 'Undo' } } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Undo' })).toHaveFocus();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveFocus();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    await user.tab();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('keeps indefinite notifications until manually dismissed', async () => {
+    renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', duration: 'indefinite' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(60_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('keeps a loading Snackbar until manually dismissed and cleans up its indicator', async () => {
+    renderProvider(
+      [
+        {
+          label: 'Show',
+          snackbar: { text: 'Uploading document', loading: true, duration: 'default' },
+        },
+      ],
+      0,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION * 2);
+    expect(screen.getByTestId('Snackbar_ProcessIndicator')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Uploading document');
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('replaces loading with a timed completion Snackbar after exit', async () => {
+    renderProvider([
+      { label: 'Upload', snackbar: { text: 'Uploading document', loading: true } },
+      { label: 'Complete', snackbar: { text: 'Document uploaded', sentiment: 'success' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Upload' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION * 2);
+
+    await user.click(screen.getByRole('button', { name: 'Complete' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('Uploading document')).toBeInTheDocument();
+    expect(screen.queryByText('Document uploaded')).not.toBeInTheDocument();
+    advanceTimers(1);
+    expect(screen.queryByTestId('Snackbar_ProcessIndicator')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Document uploaded');
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(screen.getByText('Document uploaded')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('exits the active Snackbar before showing the latest replacement', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Show second', snackbar: { text: 'Second message' } },
+      { label: 'Show latest', snackbar: { text: 'Latest message' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Latest message')).not.toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+    expect(screen.getByText('Latest message').closest('.wds-Snackbar-container')).toHaveClass(
+      'wds-Snackbar-container-appear-active',
+    );
+  });
+
+  it('shows the latest Snackbar when creations are batched before the first render', async () => {
+    const onFirstDismiss = jest.fn();
+    const onLatestDismiss = jest.fn();
+    render(
+      <SnackbarProvider>
+        <BatchedSnackbarTrigger onFirstDismiss={onFirstDismiss} onLatestDismiss={onLatestDismiss} />
+      </SnackbarProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+    expect(onFirstDismiss).not.toHaveBeenCalled();
+    expect(onLatestDismiss).not.toHaveBeenCalled();
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('Latest message')).not.toBeInTheDocument();
+    expect(onFirstDismiss).not.toHaveBeenCalled();
+    expect(onLatestDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('replaces Snackbars even when their timestamps and the clock are unchanged', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message', timestamp: 1 } },
+      { label: 'Show second', snackbar: { text: 'Second message', timestamp: 1 } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('gives a replacing Snackbar a fresh timeout after the active one exits', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Replace', snackbar: { text: 'Replacement' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - SNACKBAR_EXIT_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(screen.getByText('Replacement')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Replacement')).not.toBeInTheDocument();
+  });
+
+  it.each(['', undefined])('dismisses instead of replacing with empty text %p', async (text) => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Clear', snackbar: { text } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('clears a pending replacement when the latest request has empty text', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Replace', snackbar: { text: 'Pending message' } },
+      { label: 'Clear', snackbar: { text: '' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('Pending message')).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('never mounts a surface when a batched creation is followed by empty text', async () => {
+    render(
+      <SnackbarProvider>
+        <BatchedSnackbarTrigger clear />
+      </SnackbarProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('cleans up the active Snackbar timer when the Provider unmounts', async () => {
+    const view = renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    expect(jest.getTimerCount()).toBe(1);
+
+    view.unmount();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('removes the portal after the close button finishes dismissing it', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it.each(['timeout', 'close', 'repeated Escape', 'action', 'clear', 'replacement'] as const)(
+    'calls onDismiss once after the exit finishes for %s',
+    async (dismissal) => {
+      const onDismiss = jest.fn();
+      renderProvider([
+        {
+          label: 'Show',
+          snackbar: { text: 'Changes saved', onDismiss, action: { label: 'Undo' } },
+        },
+        { label: 'Clear', snackbar: { text: '' } },
+        { label: 'Replace', snackbar: { text: 'Replacement', duration: 'indefinite' } },
+      ]);
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+
+      if (dismissal === 'timeout') {
+        advanceTimers(SNACKBAR_DEFAULT_DURATION);
+      } else if (dismissal === 'repeated Escape') {
+        await user.keyboard('{Escape}{Escape}{Escape}');
+      } else {
+        const label = { close: 'Close', action: 'Undo', clear: 'Clear', replacement: 'Replace' }[
+          dismissal
+        ];
+        await user.click(screen.getByRole('button', { name: label }));
+      }
+      expect(onDismiss).not.toHaveBeenCalled();
+      advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+      expect(onDismiss).not.toHaveBeenCalled();
+      advanceTimers(1);
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+      advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it('does not call onDismiss when the provider unmounts during exit', async () => {
+    const onDismiss = jest.fn();
+    const view = renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', onDismiss } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.keyboard('{Escape}');
+
+    view.unmount();
+    advanceTimers(SNACKBAR_EXIT_DURATION + SNACKBAR_DEFAULT_DURATION);
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('starts a replacement without the dismissed Snackbar swipe transform', async () => {
+    const onDismiss = jest.fn();
+    renderProvider([
+      { label: 'Show', snackbar: { text: 'First message', duration: 'indefinite', onDismiss } },
+      { label: 'Replace', snackbar: { text: 'Replacement', duration: 'indefinite' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    const surface = screen.getByText('First message').closest('.wds-Snackbar-container');
+    if (!surface) {
+      throw new Error('Expected the Snackbar surface');
+    }
+    Object.defineProperty(surface, 'offsetHeight', { configurable: true, value: 100 });
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    expect(onDismiss).not.toHaveBeenCalled();
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(onDismiss).not.toHaveBeenCalled();
+    advanceTimers(1);
+
+    const replacement = screen.getByText('Replacement').closest('.wds-Snackbar');
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(replacement).toHaveStyle({ transform: '' });
+    expect(replacement).not.toHaveClass('wds-Snackbar--swipe-dismiss');
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports a throwing onDismiss without losing the pending Snackbar after the actual exit', async () => {
+    const error = new Error('Dismissal callback failed');
+    const reportError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const onDismiss = jest.fn(() => {
+      throw error;
+    });
+
+    try {
+      renderProvider([
+        { label: 'Show', snackbar: { text: 'First message', duration: 'indefinite', onDismiss } },
+        { label: 'Replace', snackbar: { text: 'Replacement', duration: 'indefinite' } },
+      ]);
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+      await user.click(screen.getByRole('button', { name: 'Replace' }));
+      expect(onDismiss).not.toHaveBeenCalled();
+
+      advanceTimers(SNACKBAR_EXIT_DURATION);
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(reportError).toHaveBeenCalledTimes(1);
+      expect(reportError).toHaveBeenCalledWith('Snackbar onDismiss callback failed:', error);
+      expect(screen.queryByText('First message')).not.toBeInTheDocument();
+      expect(screen.getByText('Replacement')).toBeInTheDocument();
+
+      advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+      expect(screen.getByText('Replacement')).toBeInTheDocument();
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      await user.click(screen.getByRole('button', { name: 'Close' }));
+      advanceTimers(SNACKBAR_EXIT_DURATION);
+      expect(screen.queryByText('Replacement')).not.toBeInTheDocument();
+    } finally {
+      reportError.mockRestore();
+    }
+  });
+
+  it('lets Modal consume Escape before dismissing the Snackbar', async () => {
+    const onClose = jest.fn();
+    const onDismiss = jest.fn();
+    const example = (open: boolean) => (
+      <SnackbarProvider>
+        <SnackbarTriggers
+          triggers={[
+            {
+              label: 'Show',
+              snackbar: { text: 'Changes saved', duration: 'indefinite', onDismiss },
+            },
+          ]}
+        />
+        <Modal open={open} body="Modal content" onClose={onClose} />
+      </SnackbarProvider>
+    );
+    const view = render(example(false));
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    view.rerender(example(true));
+
+    await user.keyboard('{Escape}');
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    view.rerender(example(false));
+    advanceTimers(Math.max(DIMMER_EXIT_DURATION, SNACKBAR_EXIT_DURATION));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    await user.keyboard('{Escape}');
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('does not restart the timer when its parent rerenders', async () => {
+    const triggers = [{ label: 'Show', snackbar: { text: 'Changes saved' } }];
+    const view = renderProvider(triggers);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+
+    view.rerender(
+      <SnackbarProvider>
+        <SnackbarTriggers triggers={triggers} />
+      </SnackbarProvider>,
+    );
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it.each(['mouse', 'keyboard', 'touch'] as const)(
+    'dismisses after action activation with %s even if focus stays inside',
+    async (activation) => {
+      const onClick = jest.fn();
+      renderProvider([
+        { label: 'Show', snackbar: { text: 'Changes saved', action: { label: 'Undo', onClick } } },
+      ]);
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+      const action = screen.getByRole('button', { name: 'Undo' });
+      await user.tab();
+      expect(action).toHaveFocus();
+
+      if (activation === 'keyboard') {
+        await user.keyboard('{Enter}');
+      } else if (activation === 'touch') {
+        await user.pointer([{ target: action, keys: '[TouchA>]' }, { keys: '[/TouchA]' }]);
+      } else {
+        await user.click(action);
+      }
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      advanceTimers(SNACKBAR_EXIT_DURATION);
+      expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    },
+  );
+
+  it('preserves a follow-up Snackbar created by the action callback', async () => {
+    render(
+      <SnackbarProvider>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => (
+            <button
+              type="button"
+              onClick={() =>
+                createSnackbar({
+                  text: 'Transfer deleted',
+                  action: {
+                    label: 'Undo',
+                    onClick: () =>
+                      createSnackbar({ text: 'Undo completed', duration: 'indefinite' }),
+                  },
+                })
+              }
+            >
+              Show
+            </button>
+          )}
+        </SnackbarConsumer>
+      </SnackbarProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+
+    await user.click(screen.getByRole('button', { name: 'Undo' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('Transfer deleted')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Undo completed');
+  });
+
+  it('forwards navigation actions unchanged', async () => {
+    renderProvider([
+      {
+        label: 'Show',
+        snackbar: {
+          text: 'Transfer completed',
+          action: { label: <span>View transfer</span>, href: '/transfers/123', target: '_blank' },
+        },
+      },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    const link = screen.getByRole('link', { name: 'View transfer' });
+    expect(link).toHaveAttribute('href', '/transfers/123');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});
+
+/* eslint-enable testing-library/no-node-access */
+
+describe('Snackbar manager instance guards', () => {
+  it('ignores stale exit state updates from an already replaced instance', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => result.current.createSnackbar({ text: 'First message' }));
+    const firstExited = result.current.handleExited;
+    act(() => result.current.createSnackbar({ text: 'Replacement' }));
+    act(() => firstExited());
+    const replacementKey = result.current.announcementKey;
+
+    act(() => firstExited());
+
+    expect(result.current.active?.props.text).toBe('Replacement');
+    expect(result.current.announcementKey).toBe(replacementKey);
+    expect(result.current.visible).toBe(true);
+  });
+
+  it('preserves a follow-up Snackbar created by onDismiss', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    const onDismiss = jest.fn(() => result.current.createSnackbar({ text: 'Follow-up' }));
+    act(() => result.current.createSnackbar({ text: 'First message', onDismiss }));
+    act(() => result.current.dismissSnackbar());
+
+    act(() => result.current.handleExited());
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(result.current.active?.props.text).toBe('Follow-up');
+    expect(result.current.visible).toBe(true);
+  });
+
+  it('can dismiss a batched instance before it has rendered', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => {
+      result.current.createSnackbar({ text: 'Changes saved' });
+      result.current.dismissSnackbar();
+    });
+
+    expect(result.current.active).toBeNull();
+    expect(result.current.visible).toBe(false);
+  });
+});