@transferwise/components 46.34.0 → 46.35.0

package/src/snackbar/Snackbar.spec.js

@@ -1,9 +1,10 @@
 import { mount } from 'enzyme';
 import ReactDOM from 'react-dom';
 
-import SnackbarAppendingToBody, { Snackbar, CSS_TRANSITION_DURATION } from './Snackbar';
+import SnackbarAppendingToBody, { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
+import { act } from 'react';
 
 describe('Snackbar', () => {
   const timeout = 1000;
@@ -78,7 +79,12 @@ describe('Snackbar', () => {
     expect(snackbar().text()).toContain(props.text);
     expect(snackbar()).toHaveLength(1);
 
-    jest.advanceTimersByTime(timeout + CSS_TRANSITION_DURATION + 500);
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
 
     expect(snackbar().text()).not.toContain(props.text);
   });

package/src/snackbar/Snackbar.story.tsx

@@ -1,11 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
 import { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, waitFor, within } from '@storybook/test';
 import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
 
 import Button from '../button';
 import CheckboxOption from '../checkboxOption/CheckboxOption';
+import { wait } from '../test-utils/wait';
 
 import { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
@@ -122,6 +123,7 @@ export const basic = () => {
 };
 
 basic.play = async ({ canvasElement }: StoryContext) => {
+  await wait(0); // TODO: Remove
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole('button'));
 };

package/src/snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import { Theme, ThemeDark, ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
 import withNextPortal from '../withNextPortal/withNextPortal';
 
-export const CSS_TRANSITION_DURATION = 400;
+const CSS_TRANSITION_DURATION = 400;
 
 export interface SnackbarProps {
   action?: {

package/src/tabs/Tabs.spec.js

@@ -1,5 +1,6 @@
 import { Spring } from '@react-spring/web';
 import { mount } from 'enzyme';
+import { act } from 'react';
 
 import { Size, Width } from '../common';
 
@@ -8,8 +9,6 @@ import TabPanel from './TabPanel';
 import Tabs from './Tabs';
 import { getElasticDragDifference } from './utils';
 
-jest.useFakeTimers();
-
 jest.mock('@react-spring/web', () => ({
   animated: {
     div: ({ children, style }) => (
@@ -37,6 +36,7 @@ describe('Tabs', () => {
   let props;
 
   beforeEach(() => {
+    jest.useFakeTimers();
     props = {
       animatePanelsOnClick: true,
       tabs: generateTabs(),
@@ -57,6 +57,11 @@ describe('Tabs', () => {
     jest.clearAllMocks();
   });
 
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+  });
+
   it('renders with right props', () => {
     expect(component.find(Tabs)).toHaveLength(1);
     expect(component.find(Tabs).props()).toStrictEqual({ ...props });
@@ -172,11 +177,13 @@ describe('Tabs', () => {
     expect(component.find(Tab)).toHaveLength(props.tabs.length);
   });
 
-  it('does not animate when a tab before the selected tab goes from disabled to enabled', () => {
+  it('does not animate when a tab before the selected tab goes from disabled to enabled', async () => {
     component.setProps({ selected: 2 });
     expect(component.state('isAnimating')).toBe(true);
 
-    triggerSpringOnRest();
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
     expect(component.state('isAnimating')).toBe(false);
 
     component.setProps({ tabs: generateTabs([false, false, false]) });
@@ -248,14 +255,16 @@ describe('Tabs', () => {
       ${5}     | ${Width.AUTO}  | ${'240px'}     | ${'-900px'}
     `(
       'when selecting tab number %selected when headerWidth is set to %headerWidth',
-      ({ selected, headerWidth, lineTranslateX, sliderTranslateX }) => {
+      async ({ selected, headerWidth, lineTranslateX, sliderTranslateX }) => {
         component.setProps({ headerWidth });
 
         const getLineStyles = () => getComputedStyle(component.find('.tabs__line').getDOMNode());
         const getSliderStyles = () =>
           getComputedStyle(component.find('.tabs__slider').getDOMNode());
 
-        component.setProps({ selected });
+        await act(async () => {
+          component.setProps({ selected });
+        });
 
         expect(component.state('isAnimating')).toBe(true);
         expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(${lineTranslateX})`);
@@ -263,7 +272,9 @@ describe('Tabs', () => {
           `translateX(${sliderTranslateX})`,
         );
 
-        triggerSpringOnRest();
+        await act(async () => {
+          await jest.runOnlyPendingTimersAsync();
+        });
 
         expect(component.state('isAnimating')).toBe(false);
         expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(${lineTranslateX})`);
@@ -276,15 +287,11 @@ describe('Tabs', () => {
 
       const getLineStyles = () => getComputedStyle(component.find('.tabs__line').getDOMNode());
 
-      triggerSpringOnRest();
-
       expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(60px)`);
       expect(component.state('fullWidthTabs')).toBeFalsy();
 
       component.setProps({ tabs: generateTabs([false, true, false, false, false, false, false]) });
 
-      triggerSpringOnRest();
-
       expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(100%)`);
       expect(component.state('fullWidthTabs')).toBeTruthy();
     });
@@ -319,41 +326,57 @@ describe('Tabs', () => {
       });
     });
 
-    it('displays all tabs when animating', () => {
-      component.setState({ isAnimating: true });
+    it('displays all tabs when animating', async () => {
+      await act(async () => {
+        component.setState({ isAnimating: true });
+      });
 
       component.find(TabPanel).forEach((tab) => {
         expect(tab.prop('style').display).toBe('block');
       });
     });
 
-    it('displays all tabs when swiping', () => {
-      component.setState({ isSwiping: true });
+    it('displays all tabs when swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
 
       component.find(TabPanel).forEach((tab) => {
         expect(tab.prop('style').display).toBe('block');
       });
     });
 
-    it('has `overflow: hidden` on the parent when animating/swiping', () => {
-      component.setState({ isSwiping: false, isAnimating: false });
+    it('has `overflow: hidden` on the parent when animating/swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: false });
+      });
       expect(getPanelContainerOverflow(component)).toBe('visible');
 
-      component.setState({ isSwiping: true });
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
       expect(getPanelContainerOverflow(component)).toBe('hidden');
 
-      component.setState({ isSwiping: false, isAnimating: true });
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: true });
+      });
       expect(getPanelContainerOverflow(component)).toBe('hidden');
     });
 
-    it('sets the panel width according to if animating/swiping', () => {
-      component.setState({ isSwiping: false, isAnimating: false });
+    it('sets the panel width according to if animating/swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: false });
+      });
       expect(getPanelWidth(component)).toBe('100%');
 
-      component.setState({ isSwiping: true });
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
       expect(getPanelWidth(component)).toBe('300px');
 
-      component.setState({ isSwiping: false, isAnimating: true });
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: true });
+      });
       expect(getPanelWidth(component)).toBe('300px');
     });
   });
@@ -373,10 +396,6 @@ function createClientXY(x, y) {
   return { clientX: x, clientY: y };
 }
 
-function triggerSpringOnRest() {
-  jest.runAllTimers();
-}
-
 function getPanelContainerOverflow(component) {
   return component.find('.tabs__panel-container').prop('style').overflow;
 }

package/src/test-utils/index.js

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Provider } from '..';
@@ -30,9 +29,8 @@ function customRenderHook(callback, { locale = DEFAULT_LOCALE, messages = en } =
   });
 }
 
-export * from './window-mock';
-export * from './story-config';
-export * from './fake-data';
 export * from '@testing-library/react';
-export { userEvent };
-export { customRender as render, customRenderHook as renderHook };
+export * from './fake-data';
+export * from './story-config';
+export * from './window-mock';
+export { customRender as render, customRenderHook as renderHook, userEvent };

package/src/test-utils/jest.setup.js

@@ -1,17 +1,23 @@
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+const { default: Adapter } = require('@cfaester/enzyme-adapter-react-18');
 const Enzyme = require('enzyme');
+const util = require('node:util');
 
 global.fetch = require('jest-fetch-mock');
+
 Enzyme.configure({ adapter: new Adapter() });
 
 global.requestAnimationFrame = (callback) => callback();
 
+Object.defineProperty(global, 'TextEncoder', {
+  value: util.TextEncoder,
+});
+
 // https://github.com/esphen/jest-prop-type-error/blob/master/index.js
 // This mock will make tests fail when props error occurs.
 const { error, warn } = console;
 // eslint-disable-next-line no-console
 console.error = (message, ...args) => {
-  if (/(Invalid prop|Failed prop type)/gi.test(message)) {
+  if (/(Invalid prop|Failed prop type)/i.test(message)) {
     throw new Error(message);
   }
 
@@ -20,7 +26,7 @@ console.error = (message, ...args) => {
 
 // eslint-disable-next-line no-console
 console.warn = (message, ...args) => {
-  if (/(Call to useTheme outside a ThemeProvider)/gi.test(message)) {
+  if (/(Call to useTheme outside a ThemeProvider)/i.test(message)) {
     return;
   }
 

package/src/test-utils/wait.ts

@@ -0,0 +1,7 @@
+export async function wait(ms: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(() => {
+      resolve();
+    }, ms);
+  });
+}

package/src/tooltip/Tooltip.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
   cloneElement,
+  useEffect,
+  useId,
   useRef,
   useState,
-  useEffect,
-  ReactNode,
-  ReactElement,
-  PropsWithChildren,
 } from 'react';
 import { usePopper } from 'react-popper';
 
@@ -75,49 +75,47 @@ const Tooltip = ({
   }, [open]);
 
   return (
-    <>
-      <span
-        ref={anchorReference}
-        className="tw-tooltip-container"
-        onMouseOver={() => setOpen(true)}
-        onFocus={() => setOpen(true)}
-        onMouseOut={() => setOpen(false)}
-        onBlur={() => setOpen(false)}
+    <span
+      ref={anchorReference}
+      className="tw-tooltip-container"
+      onMouseOver={() => setOpen(true)}
+      onFocus={() => setOpen(true)}
+      onMouseOut={() => setOpen(false)}
+      onBlur={() => setOpen(false)}
+    >
+      {children
+        ? cloneElement(children as ReactElement, {
+            'aria-describedby': `${tooltipId}-tooltip`,
+          })
+        : null}
+      <div
+        // @ts-expect-error
+        ref={setPopperElement}
+        className={classNames(
+          'np-tooltip',
+          'np-panel',
+          open ? `np-panel--open np-tooltip--open` : null,
+          className,
+        )}
+        // eslint-disable-next-line react/forbid-dom-props
+        style={{ ...styles.popper }}
+        {...attributes.popper}
+        aria-hidden={!open}
+        role="tooltip"
+        id={`${tooltipId}-tooltip`}
       >
-        {children
-          ? cloneElement(children as ReactElement, {
-              'aria-describedby': `${tooltipId}-tooltip`,
-            })
-          : null}
-        <div
-          // @ts-expect-error
-          ref={setPopperElement}
-          className={classNames(
-            'np-tooltip',
-            'np-panel',
-            open ? `np-panel--open np-tooltip--open` : null,
-            className,
-          )}
-          // eslint-disable-next-line react/forbid-dom-props
-          style={{ ...styles.popper }}
-          {...attributes.popper}
-          aria-hidden={!open}
-          role="tooltip"
-          id={`${tooltipId}-tooltip`}
-        >
-          <div className="np-panel__content tooltip-inner">
-            {label}
-            <div
-              // @ts-expect-error
-              ref={setArrowElement}
-              className={classNames('np-panel__arrow')}
-              // eslint-disable-next-line react/forbid-dom-props
-              style={styles.arrow}
-            />
-          </div>
+        <div className="np-panel__content tooltip-inner">
+          {label}
+          <div
+            // @ts-expect-error
+            ref={setArrowElement}
+            className={classNames('np-panel__arrow')}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={styles.arrow}
+          />
         </div>
-      </span>
-    </>
+      </div>
+    </span>
   );
 };
 

package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap

@@ -6,14 +6,14 @@ exports[`Tooltip Component renders an empty list when no items are passed 1`] =
     class="tw-tooltip-container"
   >
     <span
-      aria-describedby="radix-0-tooltip"
+      aria-describedby=":r0:-tooltip"
     >
       Hover me
     </span>
     <div
       aria-hidden="true"
       class="np-tooltip np-panel"
-      id="radix-0-tooltip"
+      id=":r0:-tooltip"
       role="tooltip"
       style="position: absolute; left: 0px; top: 0px;"
     >

package/src/upload/Upload.spec.js

@@ -1,4 +1,5 @@
 import { shallow, mount } from 'enzyme';
+import { act } from 'react';
 
 import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
 
@@ -6,7 +7,6 @@ import { CompleteStep, UploadImageStep, MediaUploadStep, ProcessingStep } from '
 
 import Upload from '.';
 
-jest.useFakeTimers();
 jest.mock('./utils/postData', () => ({
   postData: async () => 'ServerResponse',
 }));
@@ -15,12 +15,12 @@ jest.mock('./utils/asyncFileRead');
 const { asyncFileRead } = require('./utils/asyncFileRead');
 
 const defaultLocale = 'en-GB';
-const formatMessage = (id) => `${id}`;
+const formatMessage = (id) => String(id);
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
       return (
-        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
+        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => String(id) }} />
       );
     },
   useIntl: () => ({ formatMessage }),
@@ -87,11 +87,14 @@ const COMPLETED_STEP_PROPS = {
 describe('Upload', () => {
   let component;
   beforeEach(() => {
+    jest.useFakeTimers();
     component = shallow(<Upload {...props} />).dive();
     asyncFileRead.mockImplementation(async () => 'a value');
   });
 
-  afterEach(() => {
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
     jest.clearAllMocks();
     jest.clearAllTimers();
   });
@@ -213,6 +216,14 @@ describe('Upload', () => {
   });
 
   describe('when file is processed', () => {
+    const waitForUpload = async () => {
+      for (let i = 0; i < 4; i += 1) {
+        await act(async () => {
+          await jest.runOnlyPendingTimersAsync();
+        });
+      }
+    };
+
     it('step changes from UploadImageStep to CompleteStep', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
@@ -220,8 +231,10 @@ describe('Upload', () => {
       expect(upload.find(ProcessingStep)).toHaveLength(0);
       expect(upload.find(CompleteStep)).toHaveLength(0);
 
-      await upload.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      await act(async () => {
+        await upload.instance().fileDropped(TEST_FILE);
+      });
+      await waitForUpload();
       component.update();
 
       expect(component.find(UploadImageStep)).toHaveLength(0);
@@ -236,8 +249,10 @@ describe('Upload', () => {
         throw 'An error';
       });
 
-      await upload.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      await act(async () => {
+        await upload.instance().fileDropped(TEST_FILE);
+      });
+      await waitForUpload();
       component.update();
 
       expect(component.find(CompleteStep).props()).toStrictEqual({
@@ -252,8 +267,10 @@ describe('Upload', () => {
     it('onSuccess is called with response when httpOptions are provided', async () => {
       component = mount(<Upload {...props} httpOptions={{ url: 'a-url' }} />).children();
 
-      await component.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      await act(async () => {
+        await component.instance().fileDropped(TEST_FILE);
+      });
+      await waitForUpload();
 
       expect(props.onSuccess).toHaveBeenCalledWith('ServerResponse', TEST_FILE.name);
     });
@@ -261,11 +278,15 @@ describe('Upload', () => {
     it('wont process new file while current process is in progress', async () => {
       component = mount(<Upload {...props} httpOptions={{ url: 'a-url' }} />).children();
 
-      await component.instance().fileDropped(TEST_FILE);
-      const result = await component.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      await act(async () => {
+        await component.instance().fileDropped(TEST_FILE);
+      });
+      const result = await act(async () => component.instance().fileDropped(TEST_FILE));
 
       expect(result).toBe(false);
+
+      await waitForUpload();
+
       expect(props.onSuccess).toHaveBeenCalledTimes(1);
     });
   });

package/src/uploadInput/UploadInput.spec.tsx

@@ -7,8 +7,7 @@ import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } fr
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
-
-const spiedDateObject = jest.spyOn(global, 'Date');
+import { act } from 'react';
 
 mockMatchMedia();
 
@@ -42,43 +41,35 @@ describe('UploadInput', () => {
     render(<UploadInput {...customProps} />);
 
   beforeEach(() => {
-    (spiedDateObject as jest.Mock).mockImplementation(() => ({
-      getTime: jest.fn().mockReturnValue(Math.random()),
-    }));
+    jest.useFakeTimers();
   });
 
-  afterAll(() => {
-    (spiedDateObject as jest.Mock).mockRestore();
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
   });
 
   describe('single file upload', () => {
     it('should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field', async () => {
-      const mockTimeStampValue1 = '11111111';
-      const mockTimeStampValue2 = '22222222';
-      (spiedDateObject as jest.Mock).mockImplementation(() => ({
-        getTime: jest
-          .fn()
-          .mockReturnValueOnce(mockTimeStampValue1)
-          .mockReturnValueOnce(mockTimeStampValue2),
-      }));
+      const date = Date.now();
+      jest.setSystemTime(date);
 
       const onFilesChange = jest.fn();
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       userEvent.upload(input, [pngFile, jpgFile]);
-
-      await waitFor(() => {
-        expect(props.onUploadFile).toHaveBeenCalledTimes(1);
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
       });
 
+      expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
       expect(onFilesChange).toHaveBeenNthCalledWith(1, [
         {
           filename: 'foo.png',
-          id: `foo.png_3_${mockTimeStampValue1}`,
+          id: `foo.png_3_${date}`,
           status: 'pending',
-          url: undefined,
         },
       ]);
 
@@ -150,6 +141,10 @@ describe('UploadInput', () => {
 
       const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
       within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
       screen.getByText('Remove').click();
 
       await waitForElementToBeRemoved(fileToDelete);
@@ -179,7 +174,7 @@ describe('UploadInput', () => {
       ]);
     });
 
-    it('should delete file with failed state without modal confirmation', () => {
+    it('should delete file with failed state without modal confirmation', async () => {
       const files = [
         {
           id: 1,
@@ -197,6 +192,9 @@ describe('UploadInput', () => {
 
       const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
       within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
 
       expect(fileToDelete).not.toBeInTheDocument();
 
@@ -240,7 +238,7 @@ describe('UploadInput', () => {
         onUploadFile: mockOnUploadFileFn,
       });
 
-      mockOnUploadFileFn.mockImplementation((formData: FormData) => {
+      mockOnUploadFileFn.mockImplementation(async (formData: FormData) => {
         const file = formData.get('file');
         return Promise.resolve({ file, id: Math.random() });
       });
@@ -268,7 +266,7 @@ describe('UploadInput', () => {
         onUploadFile: mockOnUploadFileFn,
       });
 
-      mockOnUploadFileFn.mockImplementation((formData: FormData) => {
+      mockOnUploadFileFn.mockImplementation(async (formData: FormData) => {
         const file = formData.get('file');
         return Promise.resolve({ file, id: Math.random() });
       });

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -83,9 +83,7 @@ const UploadItem = ({
   };
 
   const getErrorMessage = () =>
-    (typeof error === 'object' && error.message) ||
-    error ||
-    formatMessage(MESSAGES.uploadingFailed);
+    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
 
   const getDescription = () => {
     if (error || status === Status.FAILED) {