@transferwise/components 46.94.1 → 46.95.0

package/src/upload/Upload.spec.js

@@ -1,305 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import { act } from 'react';
-import { mockMatchMedia } from '../test-utils';
-
-import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
-
-import { CompleteStep, UploadImageStep, ProcessingStep } from './steps';
-
-import Upload from '.';
-import { Cross } from '@transferwise/icons';
-
-mockMatchMedia();
-
-jest.mock('./utils/postData', () => ({
-  postData: async () => 'ServerResponse',
-}));
-
-jest.mock('./utils/asyncFileRead');
-const { asyncFileRead } = require('./utils/asyncFileRead');
-
-const defaultLocale = 'en-GB';
-const formatMessage = (id) => String(id);
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return (
-        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => String(id) }} />
-      );
-    },
-  useIntl: () => ({ formatMessage }),
-  defineMessages: (translations) => translations,
-}));
-
-const TEST_FILE = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
-const ANIMATION_DELAY = ANIMATION_DURATION_IN_MS * 2;
-
-const props = {
-  animationDelay: 1000,
-  csButtonText: 'csButtonText',
-  csFailureText: 'csFailureText',
-  csSuccessText: 'csSuccessText',
-  csTooLargeMessage: 'csTooLargeMessage',
-  maxSize: 5000000,
-  onCancel: jest.fn(),
-  onChange: jest.fn(),
-  onFailure: jest.fn(),
-  onStart: jest.fn(),
-  onSuccess: jest.fn(),
-  psButtonText: 'psButtonText',
-  psProcessingText: 'psProcessingText',
-  usAccept: 'image/*',
-  usButtonText: 'Or Select File',
-  usButtonRetryText: 'Try again',
-  usDropMessage: 'Drop file to start upload',
-  usPlaceholder: 'Drag and drop a file less than 5MB',
-};
-
-const UPLOADIMAGE_STEP_PROPS = {
-  fileDropped: expect.any(Function),
-  isComplete: false,
-  usAccept: props.usAccept,
-  usButtonText: props.usButtonText,
-  usDisabled: false,
-  usHelpImage: undefined,
-  usLabel: '',
-  usPlaceholder: props.usPlaceholder,
-};
-
-const PROCESSING_STEP_PROPS = {
-  isComplete: false,
-  isError: false,
-  isSuccess: false,
-  onAnimationCompleted: expect.any(Function),
-  onClear: expect.any(Function),
-  psButtonText: props.psButtonText,
-  psProcessingText: props.psProcessingText,
-  psButtonDisabled: false,
-};
-
-const COMPLETED_STEP_PROPS = {
-  csButtonText: props.csButtonText,
-  csFailureText: props.csFailureText,
-  csSuccessText: props.csSuccessText,
-  fileName: TEST_FILE.name,
-  isComplete: true,
-  isError: false,
-  isImage: true,
-  onClear: expect.any(Function),
-  uploadedImage: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-};
-
-describe('Upload', () => {
-  let component;
-  beforeEach(() => {
-    jest.useFakeTimers();
-    component = shallow(<Upload {...props} />).dive();
-    asyncFileRead.mockImplementation(async () => 'a value');
-  });
-
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-    jest.clearAllMocks();
-    jest.clearAllTimers();
-  });
-
-  it('renders container', () => {
-    expect(component.find('.droppable-md')).toHaveLength(1);
-  });
-
-  it('renders the UploadImageStep by default', () => {
-    expect(component.find(UploadImageStep)).toHaveLength(1);
-    expect(component.find(ProcessingStep)).toHaveLength(0);
-    expect(component.find(CompleteStep)).toHaveLength(0);
-    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
-  });
-
-  it('renders the ProcessingStep when state is processing', () => {
-    component.setState({ isProcessing: true });
-
-    expect(component.find(UploadImageStep)).toHaveLength(0);
-    expect(component.find(ProcessingStep)).toHaveLength(1);
-    expect(component.find(CompleteStep)).toHaveLength(0);
-    expect(component.find('.droppable-dropping-card')).toHaveLength(0);
-  });
-
-  it('renders the CompleteStep when state is completed', () => {
-    component.setState({ isComplete: true });
-
-    expect(component.find(UploadImageStep)).toHaveLength(0);
-    expect(component.find(ProcessingStep)).toHaveLength(0);
-    expect(component.find(CompleteStep)).toHaveLength(1);
-    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
-  });
-
-  describe('before file is dropped', () => {
-    it('renders the UploadImageStep with right props', () => {
-      expect(component.find(UploadImageStep).props()).toStrictEqual(UPLOADIMAGE_STEP_PROPS);
-    });
-  });
-
-  describe('when file is dropped', () => {
-    it('onStart is called with file', async () => {
-      await component.instance().fileDropped(TEST_FILE);
-
-      expect(props.onStart).toHaveBeenCalledWith(TEST_FILE);
-    });
-
-    it('step changes from UploadImageStep to ProcessingStep', async () => {
-      expect(component.find(UploadImageStep)).toHaveLength(1);
-      expect(component.find(ProcessingStep)).toHaveLength(0);
-      expect(component.find(CompleteStep)).toHaveLength(0);
-
-      await component.instance().fileDropped(TEST_FILE);
-      component.update();
-
-      expect(component.find(UploadImageStep)).toHaveLength(0);
-      expect(component.find(ProcessingStep)).toHaveLength(1);
-      expect(component.find(CompleteStep)).toHaveLength(0);
-    });
-
-    it('step changes from UploadImageStep to ProcessingStep with right props', async () => {
-      await component.instance().fileDropped(TEST_FILE);
-      component.update();
-
-      expect(component.find(ProcessingStep).props()).toStrictEqual(PROCESSING_STEP_PROPS);
-    });
-  });
-
-  describe('when file is being processed', () => {
-    it('step ProcessingStep is called with success props', async () => {
-      await component.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay);
-      component.update();
-
-      expect(component.find(ProcessingStep).props()).toStrictEqual({
-        ...PROCESSING_STEP_PROPS,
-        isSuccess: true,
-      });
-    });
-
-    it('step ProcessingStep is called with error props', async () => {
-      asyncFileRead.mockImplementation(async () => {
-        throw 'An error';
-      });
-
-      await component.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay);
-      component.update();
-
-      expect(component.find(ProcessingStep).props()).toStrictEqual({
-        ...PROCESSING_STEP_PROPS,
-        isError: true,
-      });
-    });
-
-    it('should disable processing button when psButtonDisabled is true', async () => {
-      component.setProps({ psButtonDisabled: true });
-      await component.instance().fileDropped(TEST_FILE);
-      jest.advanceTimersByTime(props.animationDelay);
-      component.update();
-
-      expect(component.find(ProcessingStep).props()).toStrictEqual({
-        ...PROCESSING_STEP_PROPS,
-        psButtonDisabled: true,
-        isError: false,
-        isSuccess: true,
-      });
-    });
-  });
-
-  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();
-      expect(upload.find(UploadImageStep)).toHaveLength(1);
-      expect(upload.find(ProcessingStep)).toHaveLength(0);
-      expect(upload.find(CompleteStep)).toHaveLength(0);
-
-      await act(async () => {
-        await upload.instance().fileDropped(TEST_FILE);
-      });
-      await waitForUpload();
-      component.update();
-
-      expect(component.find(UploadImageStep)).toHaveLength(0);
-      expect(component.find(ProcessingStep)).toHaveLength(0);
-      expect(component.find(CompleteStep)).toHaveLength(1);
-    });
-
-    it('step UploadImageStep is called with error props', async () => {
-      component = mount(<Upload {...props} />);
-      const upload = component.children();
-      asyncFileRead.mockImplementation(async () => {
-        throw 'An error';
-      });
-
-      await act(async () => {
-        await upload.instance().fileDropped(TEST_FILE);
-      });
-      await waitForUpload();
-      component.update();
-
-      expect(component.find(UploadImageStep).props()).toStrictEqual({
-        ...UPLOADIMAGE_STEP_PROPS,
-        isComplete: false,
-        errorMessage: 'csFailureText',
-        errorIconLabel: undefined,
-        usButtonText: 'Try again',
-        usHelpImage: null,
-      });
-    });
-
-    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();
-
-      expect(props.onSuccess).toHaveBeenCalledWith('ServerResponse', TEST_FILE.name);
-    });
-
-    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));
-
-      expect(result).toBe(false);
-
-      await waitForUpload();
-
-      expect(props.onSuccess).toHaveBeenCalledTimes(1);
-    });
-
-    it('should respect `errorIconLabel` override', async () => {
-      const errorIconLabel = 'Custom error icon label';
-      component = mount(<Upload {...props} errorIconLabel={errorIconLabel} />);
-      const upload = component.children();
-      asyncFileRead.mockImplementation(async () => {
-        throw 'An error';
-      });
-
-      await act(async () => {
-        await upload.instance().fileDropped(TEST_FILE);
-      });
-      await waitForUpload();
-      component.update();
-
-      expect(component.find(Cross).at(1).prop('title')).toBe(errorIconLabel);
-    });
-  });
-});

package/src/upload/steps/completeStep/completeStep.spec.js

@@ -1,51 +0,0 @@
-import { Document as DocumentIcon } from '@transferwise/icons';
-import { shallow } from 'enzyme';
-
-import Body from '../../../body';
-import Button from '../../../button';
-
-import CompleteStep from '.';
-
-describe('CompleteStep', () => {
-  const COMPLETED_STEP_PROPS = {
-    isComplete: true,
-    uploadedImage: '',
-    fileName: 'fileName',
-    isError: false,
-    isImage: true,
-    csSuccessText: 'csSuccessText',
-    csFailureText: 'csFailureText',
-    csButtonText: 'csButtonText',
-    onClear: jest.fn(),
-    usLabel: 'usLabel',
-  };
-  let component;
-  beforeEach(() => {
-    component = shallow(<CompleteStep {...COMPLETED_STEP_PROPS} />);
-  });
-
-  it('renders container', () => {
-    expect(component.find('.droppable-complete-card')).toHaveLength(1);
-  });
-
-  describe('when error is false', () => {
-    it('renders isImage or Upload icon', () => {
-      expect(component.find(DocumentIcon)).toHaveLength(1);
-      component.setProps({ uploadedImage: 'uploadedImage' });
-      expect(component.find('img.thumbnail')).toHaveLength(1);
-    });
-
-    it('renders filename when error is false', () => {
-      expect(component.find(Body).props().children).toBe(COMPLETED_STEP_PROPS.fileName);
-    });
-  });
-
-  it('renders button when csButtonText is set up', () => {
-    expect(component.find(Button)).toHaveLength(1);
-  });
-
-  it('calls onClear when button is clicked', () => {
-    component.find(Button).simulate('click', {});
-    expect(COMPLETED_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
-  });
-});

package/src/upload/steps/processingStep/processingStep.spec.js

@@ -1,55 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Button from '../../../button';
-import ProcessIndicator from '../../../processIndicator';
-import Title from '../../../title/Title';
-
-import ProcessingStep from '.';
-
-describe('ProcessingStep', () => {
-  const PROCESSING_STEP_PROPS = {
-    isComplete: false,
-    isError: false,
-    isSuccess: false,
-    onAnimationCompleted: jest.fn(),
-    onClear: jest.fn(),
-    psButtonText: 'psButtonText',
-    psProcessingText: 'psProcessingText',
-  };
-  let component;
-  beforeEach(() => {
-    component = shallow(<ProcessingStep {...PROCESSING_STEP_PROPS} />);
-  });
-
-  it('renders container', () => {
-    expect(component.find('.droppable-processing-card')).toHaveLength(1);
-  });
-
-  it('renders ProcessIndicator with default status', () => {
-    expect(component.find(ProcessIndicator)).toHaveLength(1);
-    expect(component.find(ProcessIndicator).props().status).toBe('processing');
-  });
-
-  it('renders ProcessIndicator with success status', () => {
-    component = shallow(<ProcessingStep {...PROCESSING_STEP_PROPS} isSuccess />);
-    expect(component.find(ProcessIndicator).props().status).toBe('succeeded');
-  });
-
-  it('renders ProcessIndicator with error status', () => {
-    component = shallow(<ProcessingStep {...PROCESSING_STEP_PROPS} isError />);
-    expect(component.find(ProcessIndicator).props().status).toBe('failed');
-  });
-
-  it('renders psProcessingText', () => {
-    expect(component.find(Title).props().children).toBe(PROCESSING_STEP_PROPS.psProcessingText);
-  });
-
-  it('renders button when psButtonText is set up', () => {
-    expect(component.find(Button)).toHaveLength(1);
-  });
-
-  it('calls onClear when button is clicked', () => {
-    component.find(Button).simulate('click', {});
-    expect(PROCESSING_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
-  });
-});

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js

@@ -1,91 +0,0 @@
-import { Upload as UploadIcon } from '@transferwise/icons';
-import { shallow } from 'enzyme';
-import StatusIcon from '../../../statusIcon/StatusIcon';
-
-import UploadImageStep from '.';
-import { InlineAlert } from '../../../index';
-
-describe('uploadImageStep', () => {
-  const UPLOADIMAGE_STEP_PROPS = {
-    fileDropped: jest.fn(),
-    isComplete: false,
-    usAccept: 'usAccept',
-    usButtonText: '',
-    usDisabled: false,
-    usLabel: '',
-    usHelpImage: '',
-    usPlaceholder: '',
-    errorMessage: '',
-  };
-  let component;
-  beforeEach(() => {
-    component = shallow(<UploadImageStep {...UPLOADIMAGE_STEP_PROPS} />);
-  });
-
-  it('renders container', () => {
-    expect(component.find('.droppable-default-card')).toHaveLength(1);
-  });
-
-  it('renders helpImage or Upload icon', () => {
-    expect(component.find(UploadIcon)).toHaveLength(2);
-    component.setProps({ usHelpImage: 'usHelpImage' });
-    expect(component.find('img.thumbnail')).toHaveLength(1);
-  });
-
-  it('renders label', () => {
-    expect(component.find('h4')).toHaveLength(0);
-    component.setProps({ usLabel: 'usLabel' });
-    expect(component.find('h4').text()).toBe('usLabel');
-  });
-
-  it('renders placeholder', () => {
-    expect(component.find('p')).toHaveLength(0);
-    component.setProps({ usPlaceholder: 'usPlaceholder' });
-    expect(component.find('p').text()).toBe('usPlaceholder');
-  });
-
-  it('renders buttonText or Icon', () => {
-    expect(component.find('.btn-primary')).toHaveLength(1);
-    expect(component.find(UploadIcon)).toHaveLength(2);
-    component.setProps({ usButtonText: 'usButtonText' });
-    expect(component.find('.btn-primary span').text()).toBe('usButtonText');
-    expect(component.find(UploadIcon)).toHaveLength(1);
-  });
-
-  it('renders input file', () => {
-    expect(component.find('input[type="file"]')).toHaveLength(1);
-  });
-
-  it('renders a custom usHelpImage file', () => {
-    component = shallow(
-      <UploadImageStep
-        {...UPLOADIMAGE_STEP_PROPS}
-        usHelpImage={<img src="https://test.com" alt="test" className="test-image" />}
-      />,
-    );
-
-    expect(component.find('.test-image')).toHaveLength(1);
-  });
-
-  it('should respect `errorIconLabel` override', () => {
-    const errorIconLabel = 'Error icon label';
-    component = shallow(
-      <UploadImageStep
-        {...UPLOADIMAGE_STEP_PROPS}
-        errorMessage="Maximum filesize is 2MB."
-        errorIconLabel={errorIconLabel}
-      />,
-    );
-    expect(component.find(InlineAlert).prop('iconLabel')).toBe(errorIconLabel);
-  });
-
-  describe('when errorMessage is not empty', () => {
-    it('renders errorMessage and icon when error is true', () => {
-      component = shallow(
-        <UploadImageStep {...UPLOADIMAGE_STEP_PROPS} errorMessage="error message" />,
-      );
-      expect(component.find('.upload-error-message').text()).toBe('<InlineAlert />');
-      expect(component.find(StatusIcon)).toHaveLength(1);
-    });
-  });
-});