@transferwise/components 0.0.0-experimental-da6dbbf → 0.0.0-experimental-4c1cb43

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/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx

@@ -1,7 +1,8 @@
 import { TextArea, type TextAreaProps } from '../inputs/TextArea';
 import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
 
-export interface TextareaWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+export interface TextareaWithDisplayFormatProps
+  extends Omit<WithDisplayFormatProps<TextAreaProps>, 'render'> {}
 
 const TextareaWithDisplayFormat = (props: TextareaWithDisplayFormatProps) => (
   <WithDisplayFormat<TextAreaProps>

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) {

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -1,4 +1,5 @@
 import { mount } from 'enzyme/build';
+import { act } from 'react';
 
 import { HistoryNavigator } from '../common';
 import { fakeKeyDownEventForKey } from '../common/fakeEvents';
@@ -6,8 +7,6 @@ import { Input } from '../inputs/Input';
 
 import WithDisplayFormat from '.';
 
-jest.useFakeTimers();
-
 const REDO_EVENT = { ctrlKey: true, charCode: 'z', shiftKey: true, which: 90 };
 const UNDO_EVENT = { ctrlKey: true, charCode: 'z', which: 90 };
 
@@ -36,11 +35,13 @@ describe('InputWithTextFormat', () => {
   };
 
   beforeEach(() => {
+    jest.useFakeTimers();
     component = mountComponent(props);
   });
 
-  afterEach(() => {
-    jest.clearAllTimers();
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
   });
 
   TESTS.forEach((test) => {
@@ -64,10 +65,12 @@ describe('InputWithTextFormat', () => {
   });
 
   describe('when Undo/Redo is preformed', () => {
-    it(`goes back/forward in input value's history`, () => {
+    it(`goes back/forward in input value's history`, async () => {
       component.setProps({ displayPattern: '***' });
-      component.setState({
-        historyNavigator: new HistoryNavigator(['@', '@@', '@@@']),
+      await act(async () => {
+        component.setState({
+          historyNavigator: new HistoryNavigator(['@', '@@', '@@@']),
+        });
       });
 
       componentInput().simulate('keyDown', UNDO_EVENT);
@@ -136,8 +139,10 @@ describe('InputWithTextFormat', () => {
       expect(componentInput().props().value).toBe('12-3');
     });
 
-    it(`performs an extra delete if next char is a separator`, () => {
-      component.setState({ selectionStart: 3, selectionEnd: 3 });
+    it(`performs an extra delete if next char is a separator`, async () => {
+      await act(async () => {
+        component.setState({ selectionStart: 3, selectionEnd: 3 });
+      });
 
       componentInput().simulate('change', { target: { value: '123' } });
       expect(componentInput().props().value).toBe('13');
@@ -152,27 +157,41 @@ describe('InputWithTextFormat', () => {
       });
     });
 
-    it(`when entered a char`, () => {
-      component.setState({ selectionStart: 4, selectionEnd: 4 });
+    it(`when entered a char`, async () => {
+      await act(async () => {
+        component.setState({ selectionStart: 4, selectionEnd: 4 });
+      });
       componentInput().simulate('change', { target: { value: '13-4@' } });
-      jest.runAllTimers();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
       expect(component.state().selectionStart).toBe(5);
     });
 
-    it(`when entered a char before a symbol`, () => {
-      component.setState({ selectionStart: 2, selectionEnd: 2 });
+    it(`when entered a char before a symbol`, async () => {
+      await act(async () => {
+        component.setState({ selectionStart: 2, selectionEnd: 2 });
+      });
       componentInput().simulate('change', { target: { value: '13-@' } });
-      jest.runAllTimers();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
       expect(component.state().selectionStart).toBe(4);
     });
     //
-    it(`when deleted a char before the symbol`, () => {
-      component.setState({
-        triggerEvent: { ...triggerEventA, key: 'Backspace' },
+    it(`when deleted a char before the symbol`, async () => {
+      await act(async () => {
+        component.setState({
+          triggerEvent: { ...triggerEventA, key: 'Backspace' },
+        });
+      });
+      await act(async () => {
+        component.setState({ selectionStart: 3, selectionEnd: 3 });
       });
-      component.setState({ selectionStart: 3, selectionEnd: 3 });
       componentInput().simulate('change', { target: { value: '13-45-6' } });
-      jest.runAllTimers();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
       expect(component.state().selectionStart).toBe(1);
     });
 
@@ -187,26 +206,38 @@ describe('InputWithTextFormat', () => {
       expect(component.state().selectionStart).toBe(2);
     });
 
-    it(`when pasted selection is entered after a symbol`, () => {
-      component.setState({
-        triggerType: 'Paste',
-        pastedLength: 2,
+    it(`when pasted selection is entered after a symbol`, async () => {
+      await act(async () => {
+        component.setState({
+          triggerType: 'Paste',
+          pastedLength: 2,
+        });
       });
 
-      component.setState({ selectionStart: 2, selectionEnd: 2 });
+      await act(async () => {
+        component.setState({ selectionStart: 2, selectionEnd: 2 });
+      });
       componentInput().simulate('change', { target: { value: '13-@@' } });
-      jest.runAllTimers();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
       expect(component.state().selectionStart).toBe(5);
     });
 
-    it(`when pasted selection is entered before a symbol`, () => {
-      component.setState({
-        triggerType: 'Paste',
-        pastedLength: 2,
+    it(`when pasted selection is entered before a symbol`, async () => {
+      await act(async () => {
+        component.setState({
+          triggerType: 'Paste',
+          pastedLength: 2,
+        });
+      });
+      await act(async () => {
+        component.setState({ selectionStart: 1, selectionEnd: 1 });
       });
-      component.setState({ selectionStart: 1, selectionEnd: 1 });
       componentInput().simulate('change', { target: { value: '1@-@' } });
-      jest.runAllTimers();
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
       expect(component.state().selectionStart).toBe(4);
     });