@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/Snackbar/Snackbar.test.tsx

@@ -1,25 +1,48 @@
-import { act, render, screen, userEvent } from '../test-utils';
-import Button from '../Button';
-
+import { Card } from '@transferwise/icons';
+
+import { act, 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,
+} from './constants';
 import { Snackbar, type SnackbarProps } from './Snackbar';
-import { SnackbarConsumer } from './SnackbarContext';
-import SnackbarProvider from './SnackbarProvider';
-
-const CSS_TRANSITION_DURATION = 400;
-const TIMEOUT = 4000;
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
+mockMatchMedia();
+
 const advanceTimers = (duration: number) => {
-  act(() => {
-    jest.advanceTimersByTime(duration);
-  });
+  act(() => jest.advanceTimersByTime(duration));
 };
 
-const renderSnackbar = (props: Partial<SnackbarProps> = {}) =>
-  render(<Snackbar text="" timeout={TIMEOUT} timestamp={0} {...props} />);
+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();
 });
 
@@ -28,179 +51,486 @@ afterEach(() => {
   jest.useRealTimers();
 });
 
-describe('Snackbar', () => {
-  it('renders the live region wrapper even while no notification is shown', () => {
+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.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
-    expect(screen.getByRole('alert')).toHaveClass('snackbar');
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
   });
 
-  it('does not show a notification that is already present on mount', () => {
-    renderSnackbar({ text: 'Changes saved', timestamp: 1 });
+  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(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('shows the notification once text arrives after mount', () => {
-    const { rerender } = renderSnackbar();
+  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 });
 
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    await user.click(screen.getByRole('button', { name: 'Undo' }));
 
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('renders an action and calls its onClick handler', async () => {
-    const onClick = jest.fn();
-    const { rerender } = renderSnackbar();
-
-    rerender(
-      <Snackbar
-        action={{ label: 'View', onClick }}
-        text="Transfer completed"
-        timeout={TIMEOUT}
-        timestamp={1}
-      />,
-    );
-    await user.click(screen.getByRole('button', { name: 'View' }));
+  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('dismisses the notification once the timeout elapses', () => {
-    const { rerender } = renderSnackbar();
+  it('requests dismissal after the timeout without changing its own visibility', () => {
+    const onDismissRequest = jest.fn();
+    renderEnteredSnackbar({ onDismissRequest });
 
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(onDismissRequest).not.toHaveBeenCalled();
 
-    advanceTimers(TIMEOUT - 1);
+    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);
-    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(onExited).toHaveBeenCalledTimes(1);
     expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
   });
+});
 
-  it('exits the current notification before entering the next one', () => {
-    const { rerender } = renderSnackbar();
+describe('Snackbar duration', () => {
+  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 text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    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();
+  });
 
-    advanceTimers(CSS_TRANSITION_DURATION - 1);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  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(screen.getByText('Second message')).toBeInTheDocument();
-    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('shows the next notification immediately when the previous one has already been dismissed', () => {
-    const { rerender } = renderSnackbar();
+  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());
 
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
 
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
+    act(() => action.blur());
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('restarts the timeout for a replacing notification', () => {
-    const { rerender } = renderSnackbar();
+  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());
 
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT - 100);
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+    advanceTimers(1);
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+  });
 
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
+  it('uses four seconds when no duration or legacy timeout is supplied', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ timeout: undefined });
 
-    advanceTimers(TIMEOUT - 1);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
+    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);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('dismisses a delayed replacement on the timeout current when it appears', () => {
-    const { rerender } = renderSnackbar();
+  it.each([1000, 4500, 5000, 5001, 9000])(
+    'preserves an explicit legacy timeout of %sms',
+    (timeout) => {
+      const { snackbarProps } = renderEnteredSnackbar({ timeout });
 
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    // Shortened while the replacement is still waiting out the exit transition.
-    rerender(<Snackbar text="Second message" timeout={1000} timestamp={2} />);
+      advanceTimers(timeout - 1);
+      expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
+      advanceTimers(1);
+      expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
+    },
+  );
 
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
+  it('preserves a zero legacy timeout rather than using the default duration', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ timeout: 0 });
 
-    advanceTimers(1000);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    advanceTimers(0);
+
+    expect(snackbarProps.onDismissRequest).toHaveBeenCalledTimes(1);
   });
 
-  // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
-  // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
-  it('keeps the notification visible for as long as text is empty', () => {
-    const { rerender } = renderSnackbar();
+  it('does not auto-dismiss an indefinite Snackbar, even with a legacy timeout', () => {
+    const { snackbarProps } = renderEnteredSnackbar({ duration: 'indefinite', timeout: 1 });
 
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="" timeout={TIMEOUT} timestamp={2} />);
+    advanceTimers(60_000);
 
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    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('ignores a repeated timestamp', () => {
-    const { rerender } = renderSnackbar();
+  it('pauses on keyboard focus and resumes when focus leaves', () => {
+    const { snackbarProps } = renderEnteredSnackbar({
+      duration: 'default',
+      action: { label: 'Undo' },
+    });
 
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(2000);
+    act(() => screen.getByRole('button', { name: 'Undo' }).focus());
+    advanceTimers(10_000);
+    expect(snackbarProps.onDismissRequest).not.toHaveBeenCalled();
 
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('First message')).toBeInTheDocument();
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    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('clears its pending dismissal timer on unmount', () => {
-    const { rerender, unmount } = renderSnackbar();
+  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');
 
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    const pendingTimers = jest.getTimerCount();
+    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);
 
-    // The timer left behind belongs to CSSTransition's enter timeout, not to Snackbar.
-    expect(jest.getTimerCount()).toBe(pendingTimers - 1);
+    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 created through SnackbarProvider', () => {
-  const renderProvider = () =>
-    render(
-      <SnackbarProvider timeout={TIMEOUT}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <Button onClick={() => createSnackbar({ text: 'Changes saved' })}>Show</Button>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>,
+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');
+  });
 
-  it('shows a notification created through the context', async () => {
-    renderProvider();
+  it('renders custom media in the fixed-size media wrapper', () => {
+    renderSnackbar({ media: <Card title="Card" /> });
 
-    await user.click(screen.getByRole('button', { name: 'Show' }));
+    expect(screen.getByTestId('card-icon').parentElement).toHaveClass('wds-Snackbar__media-asset');
+  });
 
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  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('shows only one notification when the trigger is clicked repeatedly', async () => {
-    renderProvider();
+  it('requests dismissal through the close button', async () => {
+    const onDismissRequest = jest.fn();
+    renderSnackbar({ onDismissRequest });
 
-    const trigger = screen.getByRole('button', { name: 'Show' });
-    await user.click(trigger);
-    await user.click(trigger);
-    await user.click(trigger);
+    await user.click(screen.getByRole('button', { name: 'Close' }));
 
-    expect(screen.getAllByRole('alert')).toHaveLength(1);
+    expect(onDismissRequest).toHaveBeenCalledTimes(1);
   });
 });