@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-da6dbbf

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,47 +75,49 @@ const Tooltip = ({
   }, [open]);
 
   return (
-    <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`}
+    <>
+      <span
+        ref={anchorReference}
+        className="tw-tooltip-container"
+        onMouseOver={() => setOpen(true)}
+        onFocus={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+        onBlur={() => setOpen(false)}
       >
-        <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}
-          />
+        {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>
-      </div>
-    </span>
+      </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=":r0:-tooltip"
+      aria-describedby="radix-0-tooltip"
     >
       Hover me
     </span>
     <div
       aria-hidden="true"
       class="np-tooltip np-panel"
-      id=":r0:-tooltip"
+      id="radix-0-tooltip"
       role="tooltip"
       style="position: absolute; left: 0px; top: 0px;"
     >

package/src/upload/Upload.spec.js

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

package/src/uploadInput/UploadInput.spec.tsx

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

package/src/uploadInput/uploadItem/UploadItem.tsx

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