@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

package/src/Snackbar/Snackbar.test.tsx

@@ -0,0 +1,697 @@
+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_EXIT_DURATION } from './constants';
+import { Snackbar } from './Snackbar';
+import { SnackbarPortal } from './SnackbarPortal';
+import type { SnackbarProps } from './Snackbar.types';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+
+const advanceTimers = (duration: number) => {
+  act(() => {
+    jest.advanceTimersByTime(duration);
+  });
+};
+
+const enableLiveRegion = () => advanceTimers(WDS_LIVE_REGION_DELAY_MS);
+
+beforeEach(() => {
+  resetLiveRegionAnnouncementQueue();
+});
+
+const showSnackbar = (props: Partial<SnackbarProps> = {}) =>
+  render(<Snackbar {...props} text={props.text ?? 'Changes saved'} />);
+
+describe('Snackbar duration', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('dismisses after the default four-second duration', () => {
+    showSnackbar();
+
+    advanceTimers(3999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('dismisses after the extended six-second duration', () => {
+    showSnackbar({ duration: 'extended' });
+
+    advanceTimers(5999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('retains an explicitly configured legacy timeout during migration', () => {
+    showSnackbar({ timeout: 1000 });
+
+    advanceTimers(999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('uses semantic duration instead of the deprecated timeout when both are provided', () => {
+    showSnackbar({ duration: 'default', timeout: 1 });
+
+    advanceTimers(3999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('does not auto-dismiss an indefinite Snackbar', () => {
+    showSnackbar({ duration: 'indefinite' });
+
+    advanceTimers(60_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('does not auto-dismiss a loading Snackbar', () => {
+    showSnackbar({ duration: 'extended', loading: true });
+
+    advanceTimers(60_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('restarts the duration when direct Snackbar text changes', () => {
+    const view = showSnackbar();
+
+    advanceTimers(2000);
+    view.rerender(<Snackbar text="Updated changes saved" />);
+
+    advanceTimers(3999);
+    expect(screen.getByText('Updated changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Updated changes saved')).not.toBeInTheDocument();
+  });
+
+  it('reactivates a direct Snackbar when text changes after dismissal', async () => {
+    const view = showSnackbar({ duration: 'indefinite' });
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+
+    view.rerender(<Snackbar text="Updated changes saved" duration="indefinite" />);
+
+    expect(screen.getByText('Updated changes saved')).toBeInTheDocument();
+  });
+
+  it('pauses and resumes while the Snackbar is hovered', async () => {
+    showSnackbar();
+    const snackbar = screen.getByText('Changes saved').closest('.wds-Snackbar-container');
+
+    if (!snackbar) {
+      throw new Error('Expected the Snackbar surface to be rendered');
+    }
+
+    advanceTimers(2000);
+    await user.hover(snackbar);
+    advanceTimers(10_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    await user.unhover(snackbar);
+    advanceTimers(1999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('pauses and resumes while keyboard focus is within the Snackbar', () => {
+    showSnackbar({ action: { label: 'Undo' } });
+    const action = screen.getByText('Undo').closest('button');
+
+    if (!action) {
+      throw new Error('Expected the Snackbar action to be rendered');
+    }
+
+    advanceTimers(2000);
+    fireEvent.focus(action);
+    advanceTimers(10_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    fireEvent.blur(action, { relatedTarget: null });
+    advanceTimers(1999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('stays paused until both hover and focus interruptions end', async () => {
+    showSnackbar({ action: { label: 'Undo' } });
+    const action = screen.getByRole('button', { name: 'Undo' });
+    const snackbar = action.closest('.wds-Snackbar-container');
+
+    if (!snackbar) {
+      throw new Error('Expected the Snackbar surface to be rendered');
+    }
+
+    advanceTimers(2000);
+    await user.hover(snackbar);
+    fireEvent.focus(action);
+    await user.unhover(snackbar);
+
+    advanceTimers(10_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    fireEvent.blur(action, { relatedTarget: null });
+    advanceTimers(1999);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+});
+
+describe('Snackbar accessibility', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('announces every sentiment as a polite status message', () => {
+    showSnackbar({ sentiment: 'negative' });
+
+    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', () => {
+    showSnackbar({ duration: 'indefinite' });
+    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('re-announces changed text for a direct Snackbar', () => {
+    const view = showSnackbar({ duration: 'indefinite' });
+    enableLiveRegion();
+
+    view.rerender(<Snackbar text="Updated changes saved" duration="indefinite" />);
+
+    const liveRegionContent = screen.getByRole('status').firstElementChild;
+    expect(liveRegionContent).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion();
+    expect(liveRegionContent).not.toHaveAttribute('aria-hidden');
+    expect(screen.getByRole('status')).toHaveTextContent('Updated changes saved');
+  });
+
+  it('keeps interactive controls outside the delayed announcement subtree', () => {
+    showSnackbar({ action: { label: 'Undo' }, duration: 'indefinite' });
+
+    const liveRegionContent = screen.getByRole('status').firstElementChild;
+    const action = screen.queryByRole('button', { name: 'Undo' });
+    const dismiss = screen.queryByRole('button', { name: 'Close' });
+    expect(liveRegionContent).toHaveAttribute('aria-hidden', 'true');
+    expect(action).toBeInTheDocument();
+    expect(dismiss).toBeInTheDocument();
+    expect(action?.closest('[aria-hidden="true"]')).toBeNull();
+    expect(dismiss?.closest('[aria-hidden="true"]')).toBeNull();
+  });
+
+  it('does not steal focus when it appears', () => {
+    const view = render(<button type="button">Save changes</button>);
+    const trigger = screen.getByRole('button', { name: 'Save changes' });
+
+    trigger.focus();
+    view.rerender(
+      <>
+        <button type="button">Save changes</button>
+        <Snackbar text="Changes saved" />
+      </>,
+    );
+
+    expect(trigger).toHaveFocus();
+  });
+
+  it('exposes the action with its visible label', () => {
+    showSnackbar({ action: { label: 'Undo' } });
+    enableLiveRegion();
+
+    expect(screen.getByRole('button', { name: 'Undo' })).toBeEnabled();
+  });
+
+  it('allows the action to be triggered with the keyboard', async () => {
+    const onAction = jest.fn();
+    showSnackbar({ action: { label: 'Undo', onClick: onAction }, duration: 'indefinite' });
+    enableLiveRegion();
+
+    screen.getByRole('button', { name: 'Undo' }).focus();
+    await user.keyboard('{Enter}');
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('dismisses after an action callback throws', async () => {
+    const onAction = jest.fn(() => {
+      throw new Error('Action failed');
+    });
+    const preventExpectedError = (event: ErrorEvent) => event.preventDefault();
+    showSnackbar({ action: { label: 'Undo', onClick: onAction }, duration: 'indefinite' });
+    enableLiveRegion();
+
+    window.addEventListener('error', preventExpectedError);
+    try {
+      await user.click(screen.getByRole('button', { name: 'Undo' }));
+    } finally {
+      window.removeEventListener('error', preventExpectedError);
+    }
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('announces that Escape dismisses the Snackbar without moving focus', () => {
+    showSnackbar({ duration: 'indefinite' });
+    enableLiveRegion();
+
+    expect(screen.getByRole('status')).toHaveTextContent('Changes saved Press Escape to dismiss.');
+  });
+
+  it('gives the desktop dismiss button an accessible name', () => {
+    showSnackbar();
+    enableLiveRegion();
+
+    expect(screen.getByRole('button', { name: 'Close' })).toBeEnabled();
+  });
+});
+
+describe('Snackbar media', () => {
+  it('uses the shared PrimitivePrompt structure', () => {
+    showSnackbar({ duration: 'indefinite' });
+
+    expect(screen.getByText('Changes saved').closest('.wds-prompt')).toHaveClass(
+      'wds-Snackbar-container',
+    );
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('wds-prompt__dismiss');
+  });
+
+  it('renders custom media in the fixed-size media wrapper', () => {
+    showSnackbar({ duration: 'indefinite', 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', () => {
+    showSnackbar({ duration: 'indefinite', sentiment: 'proposition' });
+    const propositionIcon = screen
+      .getByText('Changes saved')
+      .closest('.wds-prompt')
+      ?.querySelector('.tw-icon-tags');
+
+    expect(propositionIcon?.parentElement).toHaveClass('wds-Snackbar__media-asset');
+  });
+});
+
+describe('Snackbar swipe dismissal', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  const getSnackbar = () => {
+    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 to be rendered');
+    }
+
+    return { container, surface };
+  };
+
+  const setElementHeight = (element: Element, height = 100) => {
+    Object.defineProperty(element, 'offsetHeight', { configurable: true, value: height });
+  };
+
+  const mockPointerCapture = (element: Element) => {
+    const capturedPointers = new Set<number>();
+    const setPointerCapture = jest.fn((pointerId: number) => capturedPointers.add(pointerId));
+    const releasePointerCapture = jest.fn((pointerId: number) =>
+      capturedPointers.delete(pointerId),
+    );
+    const hasPointerCapture = jest.fn((pointerId: number) => capturedPointers.has(pointerId));
+
+    Object.assign(element, { hasPointerCapture, releasePointerCapture, setPointerCapture });
+
+    return { releasePointerCapture, setPointerCapture };
+  };
+
+  it('dismisses after a downward swipe at half the Snackbar height', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+    setElementHeight(container, 140);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(container).toHaveClass('wds-Snackbar--swipe-dismiss');
+    expect(container).toHaveStyle({ transform: 'translateY(140px)' });
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('dismisses after a downward mouse drag above the threshold', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { surface } = getSnackbar();
+    setElementHeight(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 51 } },
+      '[/MouseLeft]',
+    ]);
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('captures the pointer until a drag released outside the Snackbar ends', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+    const { releasePointerCapture, setPointerCapture } = mockPointerCapture(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 30 } },
+    ]);
+    expect(container).toHaveStyle({ transform: 'translateY(30px)' });
+    expect(setPointerCapture).toHaveBeenCalledWith(1);
+
+    await user.pointer({ keys: '[/MouseLeft]' });
+    expect(container).toHaveStyle({ transform: '' });
+    expect(releasePointerCapture).toHaveBeenCalledWith(1);
+
+    await user.pointer({ target: surface, coords: { clientX: 0, clientY: 80 } });
+    expect(container).toHaveStyle({ transform: '' });
+  });
+
+  it('clears the swipe position when a Snackbar is reactivated during exit', async () => {
+    const view = render(<SnackbarPortal text="Changes saved" duration="indefinite" />);
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+    setElementHeight(container, 140);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+    expect(container).toHaveClass('wds-Snackbar--swipe-dismiss');
+
+    view.rerender(<SnackbarPortal text="" duration="indefinite" />);
+    view.rerender(<SnackbarPortal text="Replacement message" duration="indefinite" />);
+
+    const reactivatedContainer = screen.getByText('Replacement message').closest('.wds-Snackbar');
+    expect(reactivatedContainer).not.toHaveClass('wds-Snackbar--swipe-dismiss');
+    expect(reactivatedContainer).toHaveStyle({ transform: '' });
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.getByText('Replacement message')).toBeInTheDocument();
+  });
+
+  it('does not trigger an action when a swipe starts on it', async () => {
+    const onAction = jest.fn();
+    showSnackbar({
+      action: { label: 'Undo', onClick: onAction },
+      duration: 'indefinite',
+    });
+    const { surface } = getSnackbar();
+    const action = screen.getByRole('button', { name: 'Undo' });
+    setElementHeight(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: action, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 50 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(onAction).not.toHaveBeenCalled();
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('restores after downward movement below the threshold', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 0, clientY: 49 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('ignores upward movement', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 60 } },
+      { coords: { clientX: 0, clientY: 0 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('ignores predominantly horizontal movement', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(surface);
+
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: surface, coords: { clientX: 0, clientY: 0 } },
+      { coords: { clientX: 80, clientY: 60 } },
+      '[/MouseLeft]',
+    ]);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('restores its position when the gesture is cancelled', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    const { container, surface } = getSnackbar();
+    setElementHeight(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 cancelEvent = new Event('pointercancel', { bubbles: true });
+    Object.defineProperty(cancelEvent, 'pointerId', { value: 1 });
+    fireEvent(surface, cancelEvent);
+
+    expect(container).toHaveStyle({ transform: '' });
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+});
+
+describe('Snackbar dismissal', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('calls onDismiss after the exit transition completes', async () => {
+    const onDismiss = jest.fn();
+    showSnackbar({ duration: 'indefinite', onDismiss });
+    enableLiveRegion();
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('unmounts the fixed wrapper after the exit transition completes', async () => {
+    showSnackbar({ duration: 'indefinite' });
+    enableLiveRegion();
+    const snackbar = screen.getByRole('status');
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    expect(snackbar).toBeInTheDocument();
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(snackbar).not.toBeInTheDocument();
+  });
+
+  it('dismisses when Escape is pressed without moving focus', async () => {
+    const onDismiss = jest.fn();
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+    trigger.focus();
+    showSnackbar({ duration: 'indefinite', onDismiss });
+
+    await user.keyboard('{Escape}');
+
+    expect(trigger).toHaveFocus();
+    expect(onDismiss).not.toHaveBeenCalled();
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    trigger.remove();
+  });
+
+  it('runs the action before dismissing the Snackbar', async () => {
+    const onAction = jest.fn();
+    const onDismiss = jest.fn();
+    showSnackbar({
+      action: { label: 'Undo', onClick: onAction },
+      duration: 'indefinite',
+      onDismiss,
+    });
+    enableLiveRegion();
+
+    await user.click(screen.getByRole('button', { name: 'Undo' }));
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('SnackbarPortal compatibility', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders numeric text', () => {
+    render(<SnackbarPortal text={0} duration="indefinite" />);
+
+    expect(screen.getByRole('status')).toHaveTextContent('0');
+  });
+
+  it('preserves timestamp-based exit-before-enter replacement', () => {
+    const view = render(
+      <SnackbarPortal text="First message" timestamp={1} duration="indefinite" />,
+    );
+
+    view.rerender(
+      <SnackbarPortal text="Replacement message" timestamp={2} duration="indefinite" />,
+    );
+
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Replacement message')).not.toBeInTheDocument();
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Replacement message')).toBeInTheDocument();
+  });
+
+  it('renders the first present message when its initial timestamp is unchanged', () => {
+    const view = render(<SnackbarPortal text="" timestamp={1} duration="indefinite" />);
+
+    view.rerender(<SnackbarPortal text="First message" timestamp={1} duration="indefinite" />);
+
+    expect(screen.getByText('First message')).toBeInTheDocument();
+  });
+
+  it('updates changed props in place when timestamp is omitted', () => {
+    const view = render(<SnackbarPortal text="First message" duration="indefinite" />);
+
+    view.rerender(<SnackbarPortal text="Replacement message" duration="indefinite" />);
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Replacement message')).toBeInTheDocument();
+  });
+
+  it('does not restart dismissal when an inline action is recreated without timestamp', () => {
+    const view = render(
+      <SnackbarPortal text="First message" action={{ label: 'Undo' }} timeout={1000} />,
+    );
+
+    advanceTimers(500);
+    view.rerender(
+      <SnackbarPortal text="First message" action={{ label: 'Undo' }} timeout={1000} />,
+    );
+
+    advanceTimers(500);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+  });
+
+  it('reactivates a timestamp-less Snackbar when text returns during its exit', () => {
+    const view = render(<SnackbarPortal text="First message" duration="indefinite" />);
+
+    view.rerender(<SnackbarPortal text="" duration="indefinite" />);
+    view.rerender(<SnackbarPortal text="Replacement message" duration="indefinite" />);
+
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.getByText('Replacement message')).toBeInTheDocument();
+  });
+});