@transferwise/components 46.166.0 → 46.168.0

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

@@ -0,0 +1,1079 @@
+import { Card } from '@transferwise/icons';
+
+import { act, fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { WDS_LIVE_REGION_DELAY_MS } from '../../common/constants';
+import { resetLiveRegionAnnouncementQueue } from '../../common/LiveRegion/LiveRegion';
+
+import {
+  SNACKBAR_DEFAULT_DURATION,
+  SNACKBAR_ENTER_DURATION,
+  SNACKBAR_EXIT_DURATION,
+  SNACKBAR_EXTENDED_DURATION,
+  SNACKBAR_SWIPE_DISMISS_THRESHOLD,
+} from './constants';
+import { Snackbar, type SnackbarProps } from './Snackbar';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+
+const advanceTimers = (duration: number) => {
+  act(() => jest.advanceTimersByTime(duration));
+};
+
+const enableLiveRegion = () => advanceTimers(WDS_LIVE_REGION_DELAY_MS);
+
+const renderSnackbar = (props: Partial<SnackbarProps> = {}) => {
+  const snackbarProps: SnackbarProps = {
+    text: 'Changes saved',
+    timeout: SNACKBAR_DEFAULT_DURATION,
+    announcementKey: 1,
+    visible: true,
+    onDismissRequest: jest.fn(),
+    onExited: jest.fn(),
+    ...props,
+  };
+  return { ...render(<Snackbar {...snackbarProps} />), snackbarProps };
+};
+
+const renderEnteredSnackbar = (props: Partial<SnackbarProps> = {}) => {
+  const view = renderSnackbar(props);
+  advanceTimers(SNACKBAR_ENTER_DURATION);
+  return view;
+};
+
+beforeEach(() => {
+  resetLiveRegionAnnouncementQueue();
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+describe('Snackbar controlled surface', () => {
+  it('renders no live region while not visible', () => {
+    renderSnackbar({ visible: false });
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('renders the message when visible on mount', () => {
+    renderSnackbar();
+
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('renders an action and calls its onClick handler', async () => {
+    const onClick = jest.fn();
+    const { snackbarProps } = renderSnackbar({ action: { label: 'View', onClick } });
+
+    await user.click(screen.getByRole('button', { name: 'View' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('runs the action before requesting dismissal', async () => {
+    const onDismissRequest = jest.fn();
+    const onClick = jest.fn(() => expect(onDismissRequest).not.toHaveBeenCalled());
+    renderSnackbar({ action: { label: 'Undo', onClick }, onDismissRequest });
+
+    await user.click(screen.getByRole('button', { name: 'Undo' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('requests dismissal even when the action throws, without swallowing its error', async () => {
+    const error = new Error('Action failed');
+    const handleError = jest.fn((event: ErrorEvent) => event.preventDefault());
+    const { snackbarProps } = renderSnackbar({
+      action: {
+        label: 'Undo',
+        onClick: () => {
+          throw error;
+        },
+      },
+    });
+    window.addEventListener('error', handleError);
+    try {
+      await user.click(screen.getByRole('button', { name: 'Undo' }));
+
+      expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+      expect(handleError).toHaveBeenCalled();
+      expect(handleError.mock.calls[0][0].error).toBe(error);
+    } finally {
+      window.removeEventListener('error', handleError);
+    }
+  });
+
+  it('requests dismissal for a navigation action without a callback', async () => {
+    const { snackbarProps } = renderSnackbar({
+      action: { label: 'View transfer', href: '/transfers/123', target: '_blank' },
+    });
+
+    await user.click(screen.getByRole('link', { name: 'View transfer' }));
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a navigation action with a React-node label', () => {
+    renderSnackbar({
+      action: { label: <span>View transfer</span>, href: '/transfers/123', target: '_blank' },
+    });
+
+    const link = screen.getByRole('link', { name: 'View transfer' });
+    expect(link).toHaveAttribute('href', '/transfers/123');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('calls a navigation action handler when activated with the keyboard', async () => {
+    const onClick: React.MouseEventHandler<HTMLAnchorElement> = jest.fn((event) => {
+      event.preventDefault();
+    });
+    renderSnackbar({ action: { label: 'View transfer', href: '/transfers/123', onClick } });
+
+    act(() => screen.getByRole('link', { name: 'View transfer' }).focus());
+    await user.keyboard('{Enter}');
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('requests dismissal after the timeout without changing its own visibility', () => {
+    const onDismissRequest = jest.fn();
+    renderEnteredSnackbar({ onDismissRequest });
+
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(onDismissRequest).not.toHaveBeenCalled();
+
+    advanceTimers(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('clears the dismissal timer when it begins exiting', () => {
+    const onDismissRequest = jest.fn();
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ onDismissRequest });
+
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION);
+
+    expect(onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('notifies the provider only after its exit transition finishes', () => {
+    const onExited = jest.fn();
+    const { rerender, snackbarProps } = renderSnackbar({ onExited });
+
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(onExited).not.toHaveBeenCalled();
+
+    advanceTimers(1);
+    expect(onExited).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+});
+
+describe('Snackbar keyboard dismissal', () => {
+  it('requests dismissal with Escape without moving focus', async () => {
+    const { snackbarProps } = renderSnackbar({ action: { label: 'Undo' } });
+    const action = screen.getByRole('button', { name: 'Undo' });
+    act(() => action.focus());
+
+    await user.keyboard('{Escape}');
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(action).toHaveFocus();
+  });
+
+  it('respects Escape already handled by the focused control', async () => {
+    const { snackbarProps } = renderSnackbar();
+    render(
+      <button type="button" onKeyDown={(event) => event.preventDefault()}>
+        Other control
+      </button>,
+    );
+    act(() => screen.getByRole('button', { name: 'Other control' }).focus());
+
+    await user.keyboard('{Escape}');
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('ignores other keys', async () => {
+    const { snackbarProps } = renderSnackbar();
+
+    await user.keyboard('{Enter}');
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('ignores Escape during IME composition but handles it afterwards', async () => {
+    const { snackbarProps } = renderSnackbar();
+    render(<input aria-label="Recipient" />);
+    const input = screen.getByRole('textbox', { name: 'Recipient' });
+    act(() => input.focus());
+
+    // eslint-disable-next-line testing-library/prefer-user-event -- userEvent cannot set KeyboardEvent.isComposing.
+    fireEvent.keyDown(input, { key: 'Escape', isComposing: true });
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(input).toHaveFocus();
+
+    await user.keyboard('{Escape}');
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(input).toHaveFocus();
+  });
+
+  it.each(['exit', 'unmount'] as const)('removes its Escape listener on %s', async (cleanup) => {
+    const { rerender, unmount, snackbarProps } = renderSnackbar();
+    if (cleanup === 'exit') {
+      rerender(<Snackbar {...snackbarProps} visible={false} />);
+    } else {
+      unmount();
+    }
+
+    await user.keyboard('{Escape}');
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('includes the translated keyboard hint in the polite announcement, not the close button', () => {
+    renderSnackbar();
+    enableLiveRegion();
+
+    const hint = screen.getByText('Press Escape to dismiss.');
+    expect(hint).toHaveClass('sr-only');
+    expect(screen.getByRole('status')).toContainElement(hint);
+    expect(screen.getByRole('status')).toHaveTextContent('Changes saved Press Escape to dismiss.');
+    expect(screen.getByRole('button', { name: 'Close' })).not.toContainElement(hint);
+    expect(screen.queryByText('neptune.Snackbar.escapeDismissHint')).not.toBeInTheDocument();
+  });
+});
+
+describe('Snackbar duration', () => {
+  it.each([
+    ['default', 'extended', SNACKBAR_EXTENDED_DURATION],
+    ['extended', 'default', SNACKBAR_DEFAULT_DURATION],
+    ['indefinite', 'default', SNACKBAR_DEFAULT_DURATION],
+  ] as const)('starts a fresh duration when %s changes to %s', (initial, next, milliseconds) => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: initial });
+    advanceTimers(2000);
+
+    rerender(<Snackbar {...snackbarProps} duration={next} />);
+
+    advanceTimers(milliseconds - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels a running timer when the duration becomes indefinite', () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    advanceTimers(2000);
+
+    rerender(<Snackbar {...snackbarProps} duration="indefinite" />);
+    advanceTimers(60_000);
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('preserves remaining time when the dismissal callback changes while running', () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+    const onDismissRequest = jest.fn();
+
+    rerender(<Snackbar {...snackbarProps} onDismissRequest={onDismissRequest} />);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('preserves remaining time when the dismissal callback changes while paused', async () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+    await user.hover(message);
+    const onDismissRequest = jest.fn();
+
+    rerender(<Snackbar {...snackbarProps} onDismissRequest={onDismissRequest} />);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(onDismissRequest).not.toHaveBeenCalled();
+    await user.unhover(message);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('starts the full reading duration only after the entry transition finishes', () => {
+    const { snackbarProps } = renderSnackbar({ duration: 'default' });
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not start the timer when hover ends before entry finishes', async () => {
+    const { snackbarProps } = renderSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+    await user.hover(message);
+    await user.unhover(message);
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('starts paused when keyboard focus enters during the entry transition', () => {
+    const { snackbarProps } = renderSnackbar({ duration: 'default', action: { label: 'Undo' } });
+    const action = screen.getByRole('button', { name: 'Undo' });
+    act(() => action.focus());
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    act(() => action.blur());
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not start the timer when focus leaves before entry finishes', () => {
+    const { snackbarProps } = renderSnackbar({ duration: 'default', action: { label: 'Undo' } });
+    const action = screen.getByRole('button', { name: 'Undo' });
+    act(() => action.focus());
+    act(() => action.blur());
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses four seconds when no duration or legacy timeout is supplied', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ timeout: undefined });
+
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    ['default', SNACKBAR_DEFAULT_DURATION],
+    ['extended', SNACKBAR_EXTENDED_DURATION],
+  ] as const)('uses the %s duration instead of the legacy timeout', (duration, milliseconds) => {
+    const { snackbarProps } = renderEnteredSnackbar({ duration, timeout: 1 });
+
+    advanceTimers(milliseconds - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([1000, 4500, 5000, 5001, 9000])(
+    'preserves an explicit legacy timeout of %sms',
+    (timeout) => {
+      const { snackbarProps } = renderEnteredSnackbar({ timeout });
+
+      advanceTimers(timeout - 1);
+      expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+      advanceTimers(1);
+      expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it('preserves a zero legacy timeout rather than using the default duration', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ timeout: 0 });
+
+    advanceTimers(0);
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not auto-dismiss an indefinite Snackbar, even with a legacy timeout', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ duration: 'indefinite', timeout: 1 });
+
+    advanceTimers(60_000);
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('pauses on hover and resumes with only the remaining time', async () => {
+    const { snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+
+    advanceTimers(2000);
+    await user.hover(message);
+    advanceTimers(10_000);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    await user.unhover(message);
+    advanceTimers(1999);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('pauses on keyboard focus and resumes when focus leaves', () => {
+    const { snackbarProps } = renderEnteredSnackbar({
+      duration: 'default',
+      action: { label: 'Undo' },
+    });
+
+    advanceTimers(2000);
+    act(() => screen.getByRole('button', { name: 'Undo' }).focus());
+    advanceTimers(10_000);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    act(() => screen.getByRole('button', { name: 'Undo' }).blur());
+    advanceTimers(1999);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('stays paused when focus moves between Snackbar controls', () => {
+    const { snackbarProps } = renderEnteredSnackbar({
+      duration: 'default',
+      action: { label: 'Undo' },
+    });
+
+    advanceTimers(2000);
+    act(() => screen.getByRole('button', { name: 'Undo' }).focus());
+    act(() => screen.getByRole('button', { name: 'Close' }).focus());
+    advanceTimers(10_000);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    act(() => screen.getByRole('button', { name: 'Close' }).blur());
+    advanceTimers(2000);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['hover', 'focus'] as const)(
+    'resumes only after both hover and focus end, with %s ending first',
+    async (firstToEnd) => {
+      const { snackbarProps } = renderEnteredSnackbar({
+        duration: 'default',
+        action: { label: 'Undo' },
+      });
+      const message = screen.getByText('Changes saved');
+      const action = screen.getByRole('button', { name: 'Undo' });
+
+      advanceTimers(2000);
+      await user.hover(message);
+      act(() => action.focus());
+      if (firstToEnd === 'hover') {
+        await user.unhover(message);
+      } else {
+        act(() => action.blur());
+      }
+      advanceTimers(10_000);
+      expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+      if (firstToEnd === 'hover') {
+        act(() => action.blur());
+      } else {
+        await user.unhover(message);
+      }
+      advanceTimers(1999);
+      expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+      advanceTimers(1);
+      expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it('keeps the remaining time across repeated pauses', async () => {
+    const { snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+
+    advanceTimers(1000);
+    await user.hover(message);
+    advanceTimers(10_000);
+    await user.unhover(message);
+    advanceTimers(1000);
+    await user.hover(message);
+    advanceTimers(10_000);
+    await user.unhover(message);
+    advanceTimers(1999);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('cleans up a resumed timer when unmounted', async () => {
+    const { unmount, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+
+    advanceTimers(1000);
+    await user.hover(message);
+    await user.unhover(message);
+    unmount();
+    advanceTimers(10_000);
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('starts paused if the surface is already hovered when shown', async () => {
+    const matches = jest
+      .spyOn(HTMLElement.prototype, 'matches')
+      .mockImplementation((selector) => selector === ':hover');
+    let view: ReturnType<typeof renderSnackbar>;
+    try {
+      view = renderEnteredSnackbar({ duration: 'default' });
+    } finally {
+      matches.mockRestore();
+    }
+
+    advanceTimers(10_000);
+    expect(view.snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    const message = screen.getByText('Changes saved');
+    await user.hover(message);
+    await user.unhover(message);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(view.snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(view.snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not restart a paused timer while the Snackbar is exiting', async () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    const message = screen.getByText('Changes saved');
+    advanceTimers(1000);
+    await user.hover(message);
+
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+    await user.unhover(message);
+    advanceTimers(10_000);
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+});
+
+describe('Snackbar loading', () => {
+  it.each(['neutral', 'success', 'warning', 'negative', 'proposition'] as const)(
+    'replaces custom media and %s sentiment with the neutral loading indicator',
+    (sentiment) => {
+      renderSnackbar({ loading: true, sentiment, media: <Card title="Card" /> });
+
+      expect(screen.getByTestId('Snackbar_ProcessIndicator')).toHaveClass(
+        'process-xs',
+        'wds-Snackbar__process-indicator',
+      );
+      expect(screen.queryByTestId('card-icon')).not.toBeInTheDocument();
+      expect(screen.getByRole('status').closest('.wds-prompt')).toHaveClass(
+        'wds-sentiment-neutral-light-elevated',
+      );
+    },
+  );
+
+  it.each([undefined, 'default', 'extended', 'indefinite'] as const)(
+    'does not auto-dismiss while loading with duration %s, even with a zero timeout',
+    (duration) => {
+      const { snackbarProps } = renderEnteredSnackbar({ loading: true, duration, timeout: 0 });
+
+      advanceTimers(SNACKBAR_EXTENDED_DURATION * 2);
+
+      expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    },
+  );
+
+  it('cancels a running timer when loading begins', () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({ duration: 'default' });
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+
+    rerender(<Snackbar {...snackbarProps} loading />);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION * 2);
+
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('starts a fresh duration after loading ends, respecting hover', async () => {
+    const { rerender, snackbarProps } = renderEnteredSnackbar({
+      loading: true,
+      duration: 'default',
+      sentiment: 'success',
+      media: <Card title="Card" />,
+    });
+    const message = screen.getByText('Changes saved');
+    await user.hover(message);
+
+    rerender(<Snackbar {...snackbarProps} loading={false} />);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION * 2);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    expect(screen.queryByTestId('Snackbar_ProcessIndicator')).not.toBeInTheDocument();
+    expect(screen.getByTestId('card-icon')).toBeInTheDocument();
+    expect(message.closest('.wds-prompt')).toHaveClass('wds-sentiment-success-light-elevated');
+
+    await user.unhover(message);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('Snackbar live region', () => {
+  it('announces the notification as a polite status message', () => {
+    renderSnackbar();
+    const liveRegion = screen.getByRole('status');
+
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+    expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('delays live-region exposure until assistive technology can observe the update', () => {
+    renderSnackbar();
+    const liveRegionContent = screen.getByRole('status').firstElementChild;
+
+    expect(liveRegionContent).toHaveAttribute('aria-hidden', 'true');
+    advanceTimers(WDS_LIVE_REGION_DELAY_MS - 1);
+    expect(liveRegionContent).toHaveAttribute('aria-hidden', 'true');
+
+    advanceTimers(1);
+    expect(liveRegionContent).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('keeps interactive controls outside the delayed announcement subtree', () => {
+    renderSnackbar({ action: { label: 'Undo' } });
+
+    const liveRegionContent = screen.getByRole('status').firstElementChild;
+    const action = screen.getByRole('button', { name: 'Undo' });
+    const dismiss = screen.getByRole('button', { name: 'Close' });
+    expect(liveRegionContent).toHaveAttribute('aria-hidden', 'true');
+    expect(action.closest('[aria-hidden="true"]')).toBeNull();
+    expect(dismiss.closest('[aria-hidden="true"]')).toBeNull();
+  });
+});
+
+describe('Snackbar media', () => {
+  it('uses the shared PrimitivePrompt structure', () => {
+    renderSnackbar();
+    enableLiveRegion();
+
+    expect(screen.getByText('Changes saved').closest('.wds-prompt')).toHaveClass(
+      'wds-Snackbar-container',
+    );
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass(
+      'wds-prompt__dismiss',
+      'np-icon-button-minimal-default',
+    );
+  });
+
+  it('renders custom media in the fixed-size media wrapper', () => {
+    renderSnackbar({ media: <Card title="Card" /> });
+
+    expect(screen.getByTestId('card-icon').parentElement).toHaveClass('wds-Snackbar__media-asset');
+  });
+
+  it('renders proposition media in the fixed-size media wrapper', () => {
+    renderSnackbar({ sentiment: 'proposition' });
+    const icon = screen
+      .getByText('Changes saved')
+      .closest('.wds-prompt')
+      ?.querySelector('.tw-icon-tags');
+
+    expect(icon?.parentElement).toHaveClass('wds-Snackbar__media-asset');
+  });
+
+  it('requests dismissal through the close button', async () => {
+    const onDismissRequest = jest.fn();
+    renderSnackbar({ onDismissRequest });
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('Snackbar swipe dismissal', () => {
+  const setupSwipe = (props: Partial<SnackbarProps> = {}) => {
+    const view = renderEnteredSnackbar({ duration: 'indefinite', ...props });
+    const surface = screen.getByText('Changes saved').closest('.wds-Snackbar-container');
+    const container = surface?.closest('.wds-Snackbar');
+    if (!surface || !container) {
+      throw new Error('Expected the Snackbar surface and wrapper');
+    }
+    Object.defineProperty(surface, 'offsetHeight', { configurable: true, value: 100 });
+    Object.defineProperty(container, 'offsetHeight', { configurable: true, value: 140 });
+    return { ...view, surface, container };
+  };
+
+  const mockPointerCapture = (element: Element) => {
+    const captured = new Set<number>();
+    const setPointerCapture = jest.fn((id: number) => captured.add(id));
+    const releasePointerCapture = jest.fn((id: number) => captured.delete(id));
+    Object.assign(element, {
+      setPointerCapture,
+      releasePointerCapture,
+      hasPointerCapture: (id: number) => captured.has(id),
+    });
+    return { setPointerCapture, releasePointerCapture };
+  };
+
+  it.each([-1, 0, 1])('uses the half-height threshold with an offset of %spx', async (offset) => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    const distance = 100 * SNACKBAR_SWIPE_DISMISS_THRESHOLD + offset;
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: distance } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(offset < 0 ? 0 : 1);
+    expect(container).toHaveClass(
+      offset < 0 ? 'wds-Snackbar--swipe-settle' : 'wds-Snackbar--swipe-dismiss',
+    );
+    expect(container).toHaveStyle({ transform: offset < 0 ? '' : 'translateY(140px)' });
+  });
+
+  it('dismisses at the threshold with a touch pointer', async () => {
+    const { surface, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[TouchA>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 50 } },
+      '[/TouchA]',
+    ]);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('captures and releases a pointer whose release coordinates are outside the surface', async () => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    const capture = mockPointerCapture(surface);
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 30 } },
+    ]);
+    expect(capture.setPointerCapture).toHaveBeenCalledWith(1);
+    expect(container).toHaveStyle({ transform: 'translateY(30px)' });
+
+    await user.pointer({ keys: '[/MouseLeft]', coords: { clientX: 0, clientY: 200 } });
+
+    expect(capture.releasePointerCapture).toHaveBeenCalledWith(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(container).toHaveStyle({ transform: 'translateY(200px)' });
+  });
+
+  it('does not trigger an action when a committed swipe starts on it', async () => {
+    const onClick = jest.fn();
+    const { snackbarProps } = setupSwipe({ action: { label: 'Undo', onClick } });
+    const action = screen.getByRole('button', { name: 'Undo' });
+    const capture = mockPointerCapture(action);
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: action, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(capture.setPointerCapture).toHaveBeenCalledWith(1);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps normal touch activation of the action working', async () => {
+    const onClick = jest.fn();
+    const { snackbarProps } = setupSwipe({ action: { label: 'Undo', onClick } });
+    await user.pointer([
+      { keys: '[TouchA>]', target: screen.getByRole('button', { name: 'Undo' }) },
+      '[/TouchA]',
+    ]);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('prevents native link dragging without blocking a navigation action swipe', async () => {
+    const onClick = jest.fn();
+    const { snackbarProps } = setupSwipe({
+      action: { label: 'View', href: '#transfer', onClick },
+    });
+    const action = screen.getByRole('link', { name: 'View' });
+    mockPointerCapture(action);
+    await user.pointer({
+      keys: '[MouseLeft>]',
+      target: action,
+      coords: { clientX: 0, clientY: 0 },
+    });
+
+    expect(fireEvent.dragStart(action)).toBe(false);
+
+    await user.pointer([{ coords: { clientX: 0, clientY: 50 } }, '[/MouseLeft]']);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    ['button', undefined],
+    ['link', '#transfer'],
+  ] as const)('cancels off-target drag clicks on an action %s', async (role, href) => {
+    const onClick = jest.fn();
+    const { snackbarProps } = setupSwipe({ action: { label: 'Undo', href, onClick } });
+    const action = screen.getByRole(role, { name: 'Undo' });
+    mockPointerCapture(action);
+    jest.spyOn(action, 'getBoundingClientRect').mockReturnValue({
+      left: 0,
+      right: 100,
+      top: 0,
+      bottom: 40,
+    } as DOMRect);
+
+    for (const coords of [
+      { clientX: 20, clientY: -60 },
+      { clientX: 150, clientY: 20 },
+    ]) {
+      await user.pointer([
+        { keys: '[MouseLeft>]', target: action, coords: { clientX: 20, clientY: 20 } },
+        { coords },
+        '[/MouseLeft]',
+      ]);
+    }
+
+    expect(onClick).not.toHaveBeenCalled();
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: action, coords: { clientX: 20, clientY: 20 } },
+      '[/MouseLeft]',
+    ]);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['{Enter}', ' '])(
+    'keeps keyboard activation with %s after an off-target release',
+    async (key) => {
+      const onClick = jest.fn();
+      setupSwipe({ action: { label: 'Undo', onClick } });
+      const action = screen.getByRole('button', { name: 'Undo' });
+      await user.pointer({ keys: '[MouseLeft>]', target: action });
+      // A cancelled press need not produce a click before the next keyboard activation.
+      const release = new MouseEvent('pointerup', { bubbles: true, clientX: 0, clientY: -60 });
+      Object.defineProperty(release, 'pointerId', { value: 1 });
+      fireEvent(action, release);
+      await user.keyboard(key);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      await user.pointer('[/MouseLeft]');
+    },
+  );
+
+  it.each([
+    [0, -60],
+    [80, 60],
+    [60, 60],
+  ])('ignores non-downward/mostly vertical movement (%s, %s)', async (clientX, clientY) => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX, clientY } },
+      '[/MouseLeft]',
+    ]);
+    expect(container).toHaveStyle({ transform: '' });
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it.each(['pointercancel', 'lostpointercapture'])('restores the position on %s', async (type) => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    mockPointerCapture(surface);
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 80 } },
+    ]);
+    expect(container).toHaveStyle({ transform: 'translateY(80px)' });
+    const event = new Event(type, { bubbles: true });
+    Object.defineProperty(event, 'pointerId', { value: 1 });
+    fireEvent(surface, event);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(container).toHaveClass('wds-Snackbar--swipe-settle');
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    await user.pointer('[/MouseLeft]');
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('recovers when a captured child is removed and capture loss fires on its document', async () => {
+    const { surface, container, rerender, snackbarProps } = setupSwipe({
+      media: <span>Drag me</span>,
+    });
+    const child = screen.getByText('Drag me');
+    mockPointerCapture(child);
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: child, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 30 } },
+    ]);
+    expect(container).toHaveStyle({ transform: 'translateY(30px)' });
+
+    // An unrelated pointer losing capture must not cancel the active gesture.
+    const unrelatedLoss = new Event('lostpointercapture', { bubbles: true });
+    Object.defineProperty(unrelatedLoss, 'pointerId', { value: 2 });
+    fireEvent(surface.ownerDocument, unrelatedLoss);
+    expect(container).toHaveStyle({ transform: 'translateY(30px)' });
+
+    rerender(<Snackbar {...snackbarProps} media={undefined} />);
+    expect(child).not.toBeInTheDocument();
+    const captureLoss = new Event('lostpointercapture', { bubbles: true });
+    Object.defineProperty(captureLoss, 'pointerId', { value: 1 });
+    fireEvent(surface.ownerDocument, captureLoss);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(container).toHaveClass('wds-Snackbar--swipe-settle');
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    await user.pointer({ keys: '[/MouseLeft]', target: document.body });
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('removes its document capture-loss listener on unmount', () => {
+    const addListener = jest.spyOn(document, 'addEventListener');
+    const removeListener = jest.spyOn(document, 'removeEventListener');
+    try {
+      const { unmount } = setupSwipe();
+      const listener = addListener.mock.calls.find(([type]) => type === 'lostpointercapture')?.[1];
+      expect(listener).toEqual(expect.any(Function));
+
+      unmount();
+
+      expect(removeListener).toHaveBeenCalledWith('lostpointercapture', listener);
+    } finally {
+      addListener.mockRestore();
+      removeListener.mockRestore();
+    }
+  });
+
+  it('ignores secondary pointers while retaining the primary gesture', async () => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    const capture = mockPointerCapture(surface);
+    await user.pointer([
+      { keys: '[TouchA>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { keys: '[TouchB>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { pointerName: 'TouchB', coords: { clientX: 0, clientY: 100 } },
+      '[/TouchB]',
+    ]);
+    expect(capture.setPointerCapture).toHaveBeenCalledTimes(1);
+    expect(container).toHaveStyle({ transform: '' });
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    await user.pointer([
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 50 } },
+      '[/TouchA]',
+    ]);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores non-primary mouse buttons', async () => {
+    const { surface, container, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[MouseRight>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 100 } },
+      '[/MouseRight]',
+    ]);
+    expect(container).toHaveStyle({ transform: '' });
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('clears the drag state after the exit finishes', async () => {
+    const { surface, container, rerender, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(container).toHaveStyle({ transform: '' });
+    expect(container).not.toHaveClass('wds-Snackbar--swipe-dismiss');
+    expect(snackbarProps.onExited).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps dragging across a render and uses the latest dismissal callback', async () => {
+    const { surface, container, rerender, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 30 } },
+    ]);
+    const onDismissRequest = jest.fn();
+    rerender(<Snackbar {...snackbarProps} onDismissRequest={onDismissRequest} />);
+    expect(container).toHaveStyle({ transform: 'translateY(30px)' });
+
+    await user.pointer([{ coords: { clientX: 0, clientY: 50 } }, '[/MouseLeft]']);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('ends an active gesture without dismissing again when an exit starts mid-drag', async () => {
+    const { surface, container, rerender, snackbarProps } = setupSwipe();
+    const capture = mockPointerCapture(surface);
+    await user.pointer([
+      { keys: '[TouchA>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 30 } },
+    ]);
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+
+    expect(capture.releasePointerCapture).toHaveBeenCalledTimes(1);
+    expect(container).toHaveStyle({ transform: '' });
+
+    await user.pointer([
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 80 } },
+      '[/TouchA]',
+    ]);
+    expect(container).toHaveStyle({ transform: '' });
+    expect(container).not.toHaveClass('wds-Snackbar--swipe-dismiss');
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+  });
+
+  it('pauses auto-dismiss during a touch gesture and resumes with the remaining time', async () => {
+    const { surface, snackbarProps } = setupSwipe({ duration: 'default' });
+    advanceTimers(1000);
+    await user.pointer([
+      { keys: '[TouchA>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 20 } },
+    ]);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+
+    await user.pointer('[/TouchA]');
+    // Touch emulates mouse hover; leave so only the swipe pause is under test.
+    await user.unhover(surface);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1000 - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('stays off-screen when the parent honours the swipe dismissal', async () => {
+    const { surface, container, rerender, snackbarProps } = setupSwipe();
+    await user.pointer([
+      { keys: '[TouchA>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { pointerName: 'TouchA', coords: { clientX: 0, clientY: 50 } },
+      '[/TouchA]',
+    ]);
+    rerender(<Snackbar {...snackbarProps} visible={false} />);
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(container).toHaveStyle({ transform: 'translateY(140px)' });
+    expect(container).toHaveClass('wds-Snackbar--swipe-dismiss');
+  });
+});