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

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