@transferwise/components 0.0.0-experimental-e3e9aac → 0.0.0-experimental-b795207

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);
     });
 

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -137,10 +137,9 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
         return 'Backspace';
       }
       return triggerEvent.key;
-    } else {
-      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-      return 'Paste';
     }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
   };
 
   resetEvent = () => {
@@ -273,6 +272,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
+    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -283,9 +283,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     );
 
     setTimeout(() => {
-      if (triggerEvent) {
-        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
-      }
+      target?.setSelectionRange(cursorPosition, cursorPosition);
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -1,180 +0,0 @@
-/* eslint-disable jest/expect-expect */
-import { mount } from 'enzyme';
-
-import { fakeKeyDownEventForKey } from '../common/fakeEvents';
-import { mockMatchMedia } from '../test-utils';
-
-import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
-
-mockMatchMedia();
-
-const defaultLocale = 'en-GB';
-const formatMessage = (id) => String(id);
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale, formatMessage }} />;
-    },
-  useIntl: () => ({ locale: defaultLocale, formatMessage }),
-  defineMessages: (translations) => translations,
-}));
-
-describe('DateLookup (keyboard events)', () => {
-  const date = new Date(2018, 11, 27);
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = { value: date, onChange: jest.fn() };
-    component = mount(<DateLookup {...props} />);
-  });
-
-  it('can be opened by LEFT arrow', () => {
-    pressKey('ArrowLeft');
-    expect(component.instance().state.open).toBe(true);
-  });
-
-  it('can be opened by UP arrow', () => {
-    pressKey('ArrowUp');
-    expect(component.instance().state.open).toBe(true);
-  });
-
-  it('can be opened by RIGHT arrow', () => {
-    pressKey('ArrowRight');
-    expect(component.instance().state.open).toBe(true);
-  });
-
-  it('can be opened by DOWN arrow', () => {
-    pressKey('ArrowDown');
-    expect(component.instance().state.open).toBe(true);
-  });
-
-  it('can be closed by pressing ESCAPE', () => {
-    component.setState({ open: true });
-    pressKey('Escape');
-    expect(component.instance().state.open).toBe(false);
-  });
-
-  describe('when open and in day mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'day' });
-    });
-
-    it('moves 1 day back by pressing LEFT', () => {
-      pressKey('ArrowLeft');
-      onChangeCalledWith(new Date(2018, 11, 26));
-    });
-
-    it('moves 7 days back by pressing UP', () => {
-      pressKey('ArrowUp');
-      onChangeCalledWith(new Date(2018, 11, 20));
-    });
-
-    it('moves 1 day forward by pressing RIGHT', () => {
-      pressKey('ArrowRight');
-      onChangeCalledWith(new Date(2018, 11, 28));
-    });
-
-    it('moves 7 day forward by pressing DOWN', () => {
-      pressKey('ArrowDown');
-      onChangeCalledWith(new Date(2019, 0, 3));
-    });
-
-    it('resets to original date when escape key is pressed', () => {
-      pressKey('ArrowLeft');
-      pressKey('Escape');
-      onChangeCalledWith(date);
-    });
-
-    it('resets to original date when clicking outside modal', () => {
-      pressKey('ArrowLeft');
-      component.find('.dimmer').simulate('click');
-      onChangeCalledWith(date);
-    });
-  });
-
-  describe('when open and in month mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'month' });
-    });
-
-    it('moves 1 month back by pressing LEFT', () => {
-      pressKey('ArrowLeft');
-      onChangeCalledWith(new Date(2018, 10, 27));
-    });
-
-    it('moves 4 months back by pressing UP', () => {
-      pressKey('ArrowUp');
-      onChangeCalledWith(new Date(2018, 7, 27));
-    });
-
-    it('moves 1 month forward by pressing RIGHT', () => {
-      pressKey('ArrowRight');
-      onChangeCalledWith(new Date(2019, 0, 27));
-    });
-
-    it('moves 4 months forward by pressing DOWN', () => {
-      pressKey('ArrowDown');
-      onChangeCalledWith(new Date(2019, 3, 27));
-    });
-  });
-
-  describe('when open and in year mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'year' });
-    });
-
-    it('moves 1 year back by pressing LEFT', () => {
-      pressKey('ArrowLeft');
-      onChangeCalledWith(new Date(2017, 11, 27));
-    });
-
-    it('moves 4 years back by pressing UP', () => {
-      pressKey('ArrowUp');
-      onChangeCalledWith(new Date(2014, 11, 27));
-    });
-
-    it('moves 1 year forward by pressing RIGHT', () => {
-      pressKey('ArrowRight');
-      onChangeCalledWith(new Date(2019, 11, 27));
-    });
-
-    it('moves 4 year forward by pressing DOWN', () => {
-      pressKey('ArrowDown');
-      onChangeCalledWith(new Date(2022, 11, 27));
-    });
-  });
-
-  describe('when min and max provided', () => {
-    beforeEach(() => {
-      component.setState({
-        open: true,
-        mode: 'day',
-        min: new Date(2018, 11, 26),
-        max: new Date(2018, 11, 28),
-      });
-    });
-
-    it('makes sure that date is >= min', () => {
-      pressKey('ArrowLeft');
-      onChangeCalledWith(new Date(2018, 11, 26));
-      pressKey('ArrowLeft');
-      onChangeCalledWith(new Date(2018, 11, 26));
-    });
-
-    it('makes sure that date is <= max', () => {
-      pressKey('ArrowRight');
-      onChangeCalledWith(new Date(2018, 11, 28));
-      pressKey('ArrowRight');
-      onChangeCalledWith(new Date(2018, 11, 28));
-    });
-  });
-
-  const pressKey = (key) => {
-    component.simulate('keyDown', fakeKeyDownEventForKey(key));
-  };
-
-  const onChangeCalledWith = (d) => {
-    expect(props.onChange).toHaveBeenLastCalledWith(d);
-  };
-});