Cover the hooks with tests

packages/react-components/src/Toast/toast.tsx

@@ -62,7 +62,7 @@ export const Toast: React.FC<ToastOwnProps> = (props) => {
  }
 
  return undefined;
- });
+ }, []);
 
  return (
  <Fade in>

packages/react-components/src/Toast/toast_provider.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { act, renderHook, screen } from '../test-utils';
+
+import { ToastProvider } from './toast_provider';
+import { useToast } from './use_toast';
+
+const DURATION = 5000;
+
+const Provider = ({ children }: { children: React.ReactNode }) => (
+ <ToastProvider maxToasts={2}>
+ {children}
+ </ToastProvider>
+);
+
+jest.useFakeTimers();
+
+describe('<ToastProvider />', () => {
+ it('should render toast', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast } = result.current;
+
+ act(() => addToast({ message: 'Toast' }));
+
+ expect(screen.queryByText('Toast')).toBeInTheDocument();
+ });
+
+ it('should unmount toast after expiration', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast } = result.current;
+
+ act(() => addToast({ message: 'Toast', duration: DURATION }));
+
+ expect(screen.queryByText('Toast')).toBeInTheDocument();
+
+ act(() => jest.advanceTimersByTime(DURATION));
+
+ expect(screen.queryByText('Toast')).not.toBeInTheDocument();
+ });
+
+ it('should not render toast if toast with the same `id` is already in the state', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast } = result.current;
+
+ act(() => addToast({ id: '0', message: 'Toast-0' }));
+ act(() => addToast({ id: '0', message: 'Toast-1' }));
+
+ expect(screen.queryByText('Toast-1')).not.toBeInTheDocument();
+ });
+
+ it('should render the next toast in the queue after the first one expires', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast } = result.current;
+
+ act(() => addToast({ message: 'Toast-0', duration: 10 }));
+ act(() => addToast({ message: 'Toast-1', duration: DURATION }));
+ act(() => addToast({ message: 'Toast-2', duration: DURATION }));
+
+ expect(screen.queryAllByText(/^Toast/)).toHaveLength(2);
+
+ act(() => jest.advanceTimersByTime(10));
+
+ expect(screen.queryByText('Toast-1')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-2')).toBeInTheDocument();
+
+ act(jest.runAllTimers);
+ });
+
+ it('should render maximum `maxToasts` toasts', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast } = result.current;
+
+ act(() => addToast({ message: 'Toast-0' }));
+ act(() => addToast({ message: 'Toast-1' }));
+ act(() => addToast({ message: 'Toast-2' }));
+
+ expect(screen.queryByText('Toast-0')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-1')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-2')).not.toBeInTheDocument();
+ });
+
+ it('should remove toast by id and render the next toast in the queue', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast, removeToast } = result.current;
+
+ act(() => addToast({ id: '0', message: 'Toast-0' }));
+ act(() => addToast({ id: '1', message: 'Toast-1' }));
+ act(() => addToast({ id: '2', message: 'Toast-2' }));
+
+ expect(screen.queryByText('Toast-0')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-1')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-2')).not.toBeInTheDocument();
+
+ act(() => removeToast('0'));
+
+ expect(screen.queryByText('Toast-0')).not.toBeInTheDocument();
+ expect(screen.queryByText('Toast-1')).toBeInTheDocument();
+ expect(screen.queryByText('Toast-2')).toBeInTheDocument();
+ });
+
+ it('should unmount and remove all toasts from queue', () => {
+ const { result } = renderHook(useToast, { wrapper: Provider });
+ const { addToast, removeAllToasts } = result.current;
+
+ for (let i = 0; i <= 5; i += 1) {
+ act(() => addToast({ message: `Toast-${i}` }));
+ }
+
+ act(removeAllToasts);
+
+ expect(screen.queryByText(/^Toast/)).not.toBeInTheDocument();
+ });
+});

packages/react-components/src/Toast/use_toast.test.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import { renderHook } from '../test-utils';
+import { useToast } from './use_toast';
+import { ToastContext } from './toast_context';
+
+describe('useToast()', () => {
+ it('should return `ToastContext`', () => {
+ const { result: result0 } = renderHook(useToast);
+ const { result: result1 } = renderHook(() => useContext(ToastContext));
+
+ expect(result0).toEqual(result1);
+ });
+});

packages/react-components/src/hooks/use_clipboard.test.ts

@@ -0,0 +1,49 @@
+import { act, renderHook } from '../test-utils';
+import { useClipboard } from './use_clipboard';
+import { copyToClipboard } from '../utils';
+
+jest.useFakeTimers();
+
+jest.mock('../utils', () => ({
+ copyToClipboard: jest.fn(),
+}));
+
+describe('useClipboard()', () => {
+ afterEach(() => {
+ jest.resetAllMocks();
+ });
+
+ it('should return `isCopied=true` on successfully copied', async () => {
+ const { result } = renderHook(useClipboard);
+
+ await act(() => result.current.copy('text_stub'));
+
+ expect(copyToClipboard).toBeCalled();
+ expect(result.current.isCopied).toBe(true);
+ });
+
+ it('should ignore an error that occurs during copying', async () => {
+ const { result } = renderHook(useClipboard);
+
+ jest.mock('../utils', () => ({
+ copyToClipboard: () => {
+ throw new Error();
+ },
+ }));
+
+ const copy = act(() => result.current.copy('text_stub'));
+
+ await expect(copy).resolves.toBeUndefined();
+ });
+
+ it('should remain `isCopied=true` until the timeout expires and becomes `false` after', async () => {
+ const { result, rerender } = renderHook(useClipboard);
+
+ await act(() => result.current.copy('text_stub'));
+
+ expect(result.current.isCopied).toBe(true);
+ act(() => jest.advanceTimersByTime(1500));
+ rerender();
+ expect(result.current.isCopied).toBe(false);
+ });
+});

packages/react-components/src/hooks/use_controllable.test.ts

@@ -0,0 +1,50 @@
+import { act, renderHook } from '../test-utils';
+import { useControllableState } from './use_controllable';
+
+describe('useControllableState()', () => {
+ it('should set default value and change state', () => {
+ const { result, rerender } = renderHook(() => useControllableState({
+ defaultValue: 'default_value',
+ }));
+
+ expect(result.current[0]).toEqual('default_value');
+
+ act(() => result.current[1]('new_value'));
+ rerender();
+
+ expect(result.current[0]).toEqual('new_value');
+ });
+
+ it('should call `onChange` on state update is `onChange` is passed', () => {
+ const onChangeMock = jest.fn();
+ const { result } = renderHook(() => useControllableState({
+ onChange: onChangeMock,
+ }));
+
+ act(() => result.current[1]('new_value'));
+
+ expect(onChangeMock).toBeCalled();
+ });
+
+ it('should do not update state if `shouldUpdate` is passed but not resolved', () => {
+ const shouldUpdateMock = jest.fn().mockImplementationOnce(() => false);
+ const { result } = renderHook(() => useControllableState({
+ shouldUpdate: shouldUpdateMock,
+ }));
+
+ act(() => result.current[1]('new_value'));
+
+ expect(result.current[0]).toBeUndefined();
+ });
+
+ it('should update state if `shouldUpdate` is passed and resolved', () => {
+ const shouldUpdateMock = jest.fn().mockImplementationOnce(() => true);
+ const { result } = renderHook(() => useControllableState({
+ shouldUpdate: shouldUpdateMock,
+ }));
+
+ act(() => result.current[1]('new_value'));
+
+ expect(result.current[0]).toEqual('new_value');
+ });
+});

packages/react-components/src/hooks/use_debounce_callback.test.ts

@@ -0,0 +1,65 @@
+import { renderHook } from '../test-utils';
+import { useDebounceCallback } from './use_debounce_callback';
+
+jest.useFakeTimers();
+
+const DEBOUNCE_TIMEOUT = 500;
+
+describe('useDebounceCallback()', () => {
+ const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+ afterEach(() => {
+ clearTimeoutSpy.mockClear();
+ });
+
+ it('should call the callback after timeout', () => {
+ const callbackMock = jest.fn();
+ const { result } = renderHook(() => useDebounceCallback(
+ callbackMock,
+ DEBOUNCE_TIMEOUT,
+ ));
+
+ result.current();
+ expect(callbackMock).not.toBeCalled();
+
+ jest.advanceTimersByTime(DEBOUNCE_TIMEOUT);
+ expect(callbackMock).toBeCalled();
+ });
+
+ it.only('should clear previous timer on the next debounced function call', () => {
+ const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+ const callbackMock = jest.fn();
+ const { result } = renderHook(() => useDebounceCallback(
+ callbackMock,
+ DEBOUNCE_TIMEOUT,
+ ));
+
+ // Call timeout with callback on first call
+ result.current();
+ expect(setTimeoutSpy).toBeCalled();
+ expect(callbackMock).not.toBeCalled();
+
+ // Clear previous callback timeout and set a new one on second call
+ result.current();
+ expect(clearTimeoutSpy).toBeCalled();
+ expect(setTimeoutSpy).toBeCalled();
+
+ jest.advanceTimersByTime(DEBOUNCE_TIMEOUT);
+
+ expect(callbackMock).toBeCalled();
+ });
+
+ it('should clear timer on unmount if `cleanUp=true', () => {
+ const { result, unmount } = renderHook(() => useDebounceCallback(
+ jest.fn(),
+ DEBOUNCE_TIMEOUT,
+ true,
+ ));
+
+ result.current();
+
+ unmount();
+
+ expect(clearTimeoutSpy).toBeCalled();
+ });
+});

packages/react-components/src/hooks/use_event_callback.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+ render,
+ renderHook,
+ screen,
+ fireEvent,
+} from '../test-utils';
+import { useEventCallback } from './use_event_callback';
+
+describe('useEventCallback()', () => {
+ it('should do not call the callback during render', () => {
+ const callbackMock = jest.fn();
+ const { result } = renderHook(() => useEventCallback(callbackMock));
+
+ render(
+ // eslint-disable-next-line react/button-has-type
+ <button onClick={result.current}>Button</button>,
+ );
+
+ expect(callbackMock).not.toBeCalled();
+ });
+
+ it('should call callback on event trigger', () => {
+ const callbackMock = jest.fn();
+ const { result } = renderHook(() => useEventCallback(callbackMock));
+
+ render(
+ // eslint-disable-next-line react/button-has-type
+ <button onClick={result.current}>Button</button>,
+ );
+
+ fireEvent.click(screen.getByText('Button'));
+
+ expect(callbackMock).toBeCalled();
+ });
+
+ it('should do not change callback reference on re-render', () => {
+ const { result, rerender } = renderHook(() => useEventCallback(() => {}));
+ const initialReference = result.current;
+
+ rerender();
+
+ expect(initialReference).toEqual(result.current);
+ });
+});

packages/react-components/src/hooks/use_id.test.ts

@@ -2,20 +2,20 @@ import { renderHook } from '../test-utils';
 import { useId } from './use_id';
 
 describe('useId()', () => {
- it('generated ID is 21 characters long', () => {
- const { result } = renderHook(() => useId());
+ it('should generate 21 characters long ID', () => {
+ const { result } = renderHook(useId);
 
  expect(result.current.length).toBe(21);
  });
 
- it('generated IDs are unique', () => {
- const { result: resultA } = renderHook(() => useId());
- const { result: resultB } = renderHook(() => useId());
+ it('should generate unique IDs', () => {
+ const { result: resultA } = renderHook(useId);
+ const { result: resultB } = renderHook(useId);
 
  expect(resultA.current).not.toEqual(resultB.current);
  });
 
- it('returns the provided ID', () => {
+ it('should return the provided ID', () => {
  const { result } = renderHook(() => useId('my-custom-id'));
 
  expect(result.current).toBe('my-custom-id');