@transferwise/components 46.34.0 → 46.35.0

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

package/src/processIndicator/ProcessIndicator.js

@@ -1,117 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import { Status, Size } from '../common';
-
-const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
-export const ANIMATION_DURATION_IN_MS = 1500;
-
-class ProcessIndicator extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: props.status,
-      size: props.size,
-    };
-    this.interval = null;
-    this.timeout = null;
-  }
-
-  /**
-   * Create interval for animation duration (1500ms)
-   * Update state only at the end of every interval
-   * (end of animation loop) if props changed before end of animation
-   */
-  componentDidMount() {
-    this.interval = setInterval(() => {
-      const statusFromState = this.state.status;
-      const sizeFromState = this.state.size;
-
-      const statusFromProps = this.props.status;
-      const sizeFromProps = this.props.size;
-
-      if (statusFromState !== statusFromProps) {
-        this.setState({ status: statusFromProps }, this.runCallBack(statusFromProps));
-      }
-
-      if (sizeFromState !== sizeFromProps) {
-        this.setState({ size: sizeFromProps });
-      }
-    }, ANIMATION_DURATION_IN_MS);
-  }
-
-  /**
-   * Only trigger render if comopnent's state got
-   * updated from interval callback
-   *
-   * @param nextProps
-   * @param nextState
-   */
-  shouldComponentUpdate(nextProps, nextState) {
-    const isSameStatus = nextProps.status === nextState.status;
-    const isSameSize = nextProps.size === nextState.size;
-
-    return isSameStatus && isSameSize;
-  }
-
-  // Clear interval before destroying component
-  componentWillUnmount() {
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
-  }
-
-  runCallBack = (statusFromProps) => {
-    const { onAnimationCompleted } = this.props;
-    if (onAnimationCompleted) {
-      this.timeouts = setTimeout(() => {
-        onAnimationCompleted(statusFromProps);
-      }, ANIMATION_DURATION_IN_MS);
-    }
-  };
-
-  render() {
-    const { className, 'data-testid': dataTestId } = this.props;
-    const { size, status } = this.state;
-    const classes = classNames(`process process-${size}`, className, {
-      [`process-danger`]: status === Status.FAILED,
-      [`process-stopped`]: status === Status.HIDDEN,
-      [`process-success`]: status === Status.SUCCEEDED,
-    });
-
-    return (
-      <span className={classes} data-testid={dataTestId}>
-        <span className="process-icon-container">
-          <span className="process-icon-horizontal" />
-          <span className="process-icon-vertical" />
-        </span>
-        <svg xmlns="http://www.w3.org/2000/svg">
-          <circle
-            className="process-circle"
-            cx="50%"
-            cy="50%"
-            r={radius[this.state.size]}
-            fillOpacity="0.0"
-          />
-        </svg>
-      </span>
-    );
-  }
-}
-ProcessIndicator.propTypes = {
-  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes.func,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string,
-};
-
-ProcessIndicator.defaultProps = {
-  status: Status.PROCESSING,
-  size: Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null,
-};
-
-export default ProcessIndicator;

package/src/processIndicator/ProcessIndicator.spec.js

@@ -1,101 +0,0 @@
-import { mount } from 'enzyme';
-
-import { Status, Size } from '../common';
-
-import ProcessIndicator from '.';
-
-describe('processIndicator', () => {
-  let wrapper;
-  const ANIMATION_DURATION = 1500;
-  const props = {
-    status: Status.PROCESSING,
-    size: Size.Small,
-    onAnimationCompleted: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-
-    wrapper = mount(<ProcessIndicator {...props} />);
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-    jest.clearAllMocks();
-    jest.clearAllTimers();
-  });
-
-  it('has right classes when rendered with provided props', () => {
-    expect(wrapper.find('.process')).toHaveLength(1);
-    expect(wrapper.find('.process-sm')).toHaveLength(1);
-
-    expect(wrapper.find('.process-lg')).toHaveLength(0);
-    expect(wrapper.find('.process-xs')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-  });
-
-  it('updates component state with delay on props change to create smooth transition between CSS animations', () => {
-    expect(wrapper.state().status).toBe('processing');
-
-    wrapper.setProps({ status: 'succeeded' });
-    expect(wrapper.props().status).toBe('succeeded');
-    expect(wrapper.state().status).toBe('processing');
-
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-
-    expect(wrapper.state().status).toBe('succeeded');
-  });
-
-  it('updates size classes with delay', () => {
-    expect(wrapper.find('.process-sm')).toHaveLength(1);
-    wrapper.setProps({ size: 'xl' });
-    expect(wrapper.find('.process-xl')).toHaveLength(0);
-
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-
-    expect(wrapper.find('.process-xs')).toHaveLength(0);
-    expect(wrapper.find('.process-sm')).toHaveLength(0);
-    expect(wrapper.find('.process-xl')).toHaveLength(1);
-  });
-
-  it('properly updates status classes with delay', () => {
-    wrapper.setProps({ status: 'succeeded' });
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(1);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-
-    wrapper.setProps({ status: 'failed' });
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(1);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-
-    wrapper.setProps({ status: 'hidden' });
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(1);
-  });
-
-  it('calls onAnimationCompleted with Delay', () => {
-    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
-    wrapper.setProps({ status: Status.FAILED });
-    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
-    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
-    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.FAILED);
-    wrapper.setProps({ status: Status.SUCCEEDED });
-    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
-    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.SUCCEEDED);
-  });
-});