uikit-react-public 0.30.1 → 0.32.4

package/lib/components/Snackbar/__tests__/Snackbar.test.tsx

@@ -2,18 +2,32 @@ import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 // import '@testing-library/jest-dom';
 import Snackbar from '../Snackbar';
-import { ThemeContextProvider } from '../../../theme/useTheme';
+import Icon from '../../Icon';
+import { ThemeContextProvider, themes } from '../../../theme/useTheme';
+
+const tokenTestTheme = {
+  ...themes.light,
+  colour: {
+    ...themes.light.colour,
+    fill: {
+      ...themes.light.colour.fill,
+      brandPrimary: '#010101',
+      critical: '#020202',
+      success: '#030303',
+    },
+  },
+};
 
 describe('Snackbar', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
+    vi.restoreAllMocks();
   });
 
   // Snapshot tests
 
   test('snapshot: minimal props', () => {
     const renderResult = render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar action='close'>Test snackbar</Snackbar>
       </ThemeContextProvider>
     );
@@ -22,7 +36,7 @@ describe('Snackbar', () => {
 
   test('snapshot: custom test id', () => {
     const renderResult = render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='undo'
           testId='custom-test-id'
@@ -39,7 +53,7 @@ describe('Snackbar', () => {
   test('Test ID: Default', () => {
     const defaultTestId = 'ucl-uikit-snackbar';
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar action='close'>Test snackbar</Snackbar>
       </ThemeContextProvider>
     );
@@ -49,7 +63,7 @@ describe('Snackbar', () => {
 
   test('Test ID: Custom', () => {
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='undo'
           testId='custom-test-id'
@@ -62,10 +76,123 @@ describe('Snackbar', () => {
     expect(customTestId).toBeDefined();
   });
 
+  test('passes ref to the root element', () => {
+    const ref = { current: null as HTMLDivElement | null };
+
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar ref={ref}>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    expect(ref.current).toBe(screen.getByTestId('ucl-uikit-snackbar'));
+  });
+
+  test('Default variant uses polite status semantics', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar action='undo'>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const snackbar = screen.getByRole('status');
+    expect(snackbar.textContent).toBe('Test snackbar');
+  });
+
+  test('Error variant uses assertive alert semantics', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar
+          action='close'
+          variant='error'
+        >
+          Test snackbar
+        </Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const snackbar = screen.getByRole('alert');
+    expect(snackbar.textContent).toBe('Test snackbar');
+  });
+
+  test('Success variant uses polite status semantics', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar
+          action='close'
+          variant='success'
+        >
+          Test snackbar
+        </Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const snackbar = screen.getByRole('status');
+    expect(snackbar.textContent).toBe('Test snackbar');
+  });
+
+  test.each([
+    ['default', 'rgb(1, 1, 1)'],
+    ['error', 'rgb(2, 2, 2)'],
+    ['success', 'rgb(3, 3, 3)'],
+  ] as const)(
+    '%s variant uses its semantic background token',
+    (variant, colour) => {
+      render(
+        <ThemeContextProvider theme={tokenTestTheme}>
+          <Snackbar
+            action='close'
+            variant={variant}
+          >
+            Test snackbar
+          </Snackbar>
+        </ThemeContextProvider>
+      );
+
+      expect(
+        getComputedStyle(screen.getByTestId('ucl-uikit-snackbar'))
+          .backgroundColor
+      ).toBe(colour);
+    }
+  );
+
+  test('Close button has a default accessible name', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar action='close'>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const closeButton = screen.getByRole('button', {
+      name: 'Dismiss notification',
+    });
+
+    expect(closeButton).toBeDefined();
+  });
+
+  test('Close button accessible name can be customised', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar
+          action='close'
+          closeButtonAriaLabel='Dismiss saved notification'
+        >
+          Test snackbar
+        </Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const closeButton = screen.getByRole('button', {
+      name: 'Dismiss saved notification',
+    });
+
+    expect(closeButton).toBeDefined();
+  });
+
   test('Close callback is called', () => {
     const onClose = vi.fn();
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='close'
           onClose={onClose}
@@ -82,7 +209,7 @@ describe('Snackbar', () => {
   test('Undo callback is called', () => {
     const onUndo = vi.fn();
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='undo'
           onUndo={onUndo}
@@ -96,10 +223,95 @@ describe('Snackbar', () => {
     expect(onUndo).toHaveBeenCalled();
   });
 
+  test('Undo action uses sentence case label', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar action='undo'>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('button', { name: 'Undo' })).toBeDefined();
+  });
+
+  test('Default variant renders info icon', () => {
+    vi.spyOn(Icon, 'Info').mockImplementation((props) => (
+      <svg
+        data-testid='info-icon'
+        {...props}
+      />
+    ));
+
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar action='close'>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('info-icon')).toBeDefined();
+  });
+
+  test('Error variant renders warning icon', () => {
+    vi.spyOn(Icon, 'AlertTriangle').mockImplementation((props) => (
+      <svg
+        data-testid='alert-triangle-icon'
+        {...props}
+      />
+    ));
+
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar
+          action='close'
+          variant='error'
+        >
+          Test snackbar
+        </Snackbar>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('alert-triangle-icon')).toBeDefined();
+  });
+
+  test('Success variant renders check icon', () => {
+    vi.spyOn(Icon, 'CheckCircle').mockImplementation((props) => (
+      <svg
+        data-testid='check-circle-icon'
+        {...props}
+      />
+    ));
+
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar
+          action='close'
+          variant='success'
+        >
+          Test snackbar
+        </Snackbar>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('check-circle-icon')).toBeDefined();
+  });
+
+  test('Decorative icons are hidden from assistive technology', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Snackbar action='close'>Test snackbar</Snackbar>
+      </ThemeContextProvider>
+    );
+
+    const icons = screen.getAllByTestId('ucl-uikit-icon');
+
+    icons.forEach((icon) => {
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+  });
+
   test("Close callback cannot be called when action is 'undo'", () => {
     const onClose = vi.fn();
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='undo'
           onClose={onClose}
@@ -117,7 +329,7 @@ describe('Snackbar', () => {
   test("Undo callback cannot be called when action is 'close'", () => {
     const onUndo = vi.fn();
     render(
-      <ThemeContextProvider>
+      <ThemeContextProvider theme='light'>
         <Snackbar
           action='close'
           onUndo={onUndo}

package/lib/components/Snackbar/__tests__/Snackbars.test.tsx

@@ -0,0 +1,377 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Snackbars, { type SnackbarsItem } from '../Snackbars';
+
+const renderSnackbars = (
+  items: SnackbarsItem[],
+  onDismiss = vi.fn(),
+  props: Partial<React.ComponentProps<typeof Snackbars>> = {}
+) =>
+  render(
+    <ThemeContextProvider>
+      <Snackbars
+        items={items}
+        onDismiss={onDismiss}
+        duration={0}
+        {...props}
+      />
+    </ThemeContextProvider>
+  );
+
+describe('Snackbars', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  test('renders a single snackbar with default lifecycle wrapper', () => {
+    renderSnackbars([{ id: 'saved', children: 'Saved' }]);
+
+    expect(screen.getByTestId('ucl-uikit-snackbars')).toBeDefined();
+    expect(screen.getByTestId('ucl-uikit-snackbars-saved')).toBeDefined();
+    expect(screen.getByText('Saved')).toBeDefined();
+  });
+
+  test('passes snackbar props through to each rendered snackbar', () => {
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+
+    renderSnackbars([
+      {
+        id: 'saved',
+        children: 'Saved',
+        closeButtonAriaLabel: 'Close saved notification',
+        onFocus,
+        onBlur,
+        tabIndex: 0,
+        title: 'Saved notification',
+      },
+    ]);
+
+    const snackbar = screen.getByTestId('ucl-uikit-snackbars-saved');
+
+    expect(snackbar).toHaveAttribute('title', 'Saved notification');
+    expect(
+      screen.getByLabelText('Close saved notification')
+    ).toBeInTheDocument();
+
+    act(() => {
+      snackbar.focus();
+    });
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      snackbar.blur();
+    });
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders up to maxVisible snackbars', () => {
+    renderSnackbars(
+      [
+        { id: 'one', children: 'One' },
+        { id: 'two', children: 'Two' },
+        { id: 'three', children: 'Three' },
+      ],
+      vi.fn(),
+      { maxVisible: 2 }
+    );
+
+    expect(screen.getByText('One')).toBeDefined();
+    expect(screen.getByText('Two')).toBeDefined();
+    expect(screen.queryByText('Three')).toBeNull();
+  });
+
+  test('close action dismisses after transition duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      transitionDuration: 200,
+    });
+
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-snackbars-saved-close-button'
+    );
+
+    act(() => {
+      closeButton.click();
+    });
+
+    expect(closeButton).toBeDisabled();
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('close action is disabled while exiting', () => {
+    const onClose = vi.fn();
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved', onClose }], onDismiss, {
+      transitionDuration: 200,
+    });
+
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-snackbars-saved-close-button'
+    );
+
+    act(() => {
+      closeButton.click();
+      closeButton.click();
+    });
+
+    expect(closeButton).toBeDisabled();
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('undo action calls onUndo and dismisses after transition duration', () => {
+    const onDismiss = vi.fn();
+    const onUndo = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          onUndo,
+        },
+      ],
+      onDismiss,
+      { transitionDuration: 200 }
+    );
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-undoable-undo-button').click();
+    });
+
+    expect(
+      screen.getByTestId('ucl-uikit-snackbars-undoable-undo-button')
+    ).toBeDisabled();
+    expect(onUndo).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('undo action is disabled while exiting', () => {
+    const onDismiss = vi.fn();
+    const onUndo = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          onUndo,
+        },
+      ],
+      onDismiss,
+      { transitionDuration: 200 }
+    );
+
+    const undoButton = screen.getByTestId(
+      'ucl-uikit-snackbars-undoable-undo-button'
+    );
+
+    act(() => {
+      undoButton.click();
+      undoButton.click();
+    });
+
+    expect(undoButton).toBeDisabled();
+    expect(onUndo).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('auto-dismisses after duration and transition duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 100,
+      transitionDuration: 200,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('does not auto-dismiss when duration is zero', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 0,
+      transitionDuration: 50,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('undo action still auto-dismisses when duration is zero', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars(
+      [{ id: 'undoable', action: 'undo', children: 'Undoable' }],
+      onDismiss,
+      {
+        duration: 0,
+        transitionDuration: 50,
+      }
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('undo action item duration zero falls back to the collection duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          duration: 0,
+        },
+      ],
+      onDismiss,
+      {
+        duration: 100,
+        transitionDuration: 50,
+      }
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('pauses auto-dismiss while a snackbar has focus', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 100,
+      transitionDuration: 50,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(60);
+    });
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-saved-close-button').focus();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-saved-close-button').blur();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(39);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('adding a snackbar does not refresh existing snackbar duration timers', () => {
+    const onDismiss = vi.fn();
+    const { rerender } = render(
+      <ThemeContextProvider>
+        <Snackbars
+          items={[{ id: 'first', children: 'First' }]}
+          onDismiss={onDismiss}
+          duration={100}
+          transitionDuration={50}
+        />
+      </ThemeContextProvider>
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(75);
+    });
+
+    rerender(
+      <ThemeContextProvider>
+        <Snackbars
+          items={[
+            { id: 'first', children: 'First' },
+            { id: 'second', children: 'Second' },
+          ]}
+          onDismiss={onDismiss}
+          duration={100}
+          transitionDuration={50}
+        />
+      </ThemeContextProvider>
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(25);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledWith('first');
+  });
+});