@transferwise/components 46.94.1 → 46.95.0

package/src/main.less

@@ -30,6 +30,7 @@
 @import "./definitionList/DefinitionList.less";
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
+@import "./divider/Divider.less";
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";

package/src/upload/Upload.spec.tsx

@@ -0,0 +1,293 @@
+import { render, fireEvent, waitFor, screen } from '../test-utils';
+import { act } from 'react';
+import Upload from '.';
+import { asyncFileRead } from './utils/asyncFileRead';
+import { postData } from './utils/postData';
+
+jest.mock('./utils/asyncFileRead');
+jest.mock('./utils/postData');
+
+const TEST_FILE = new File(['test content'], 'test.png', { type: 'image/png' });
+const INVALID_FILE = new File(['invalid content'], 'invalid.txt', { type: 'text/plain' });
+
+beforeAll(() => {
+  class MockDataTransfer {
+    items: { add: (file: File) => void };
+    files: File[];
+
+    constructor() {
+      this.items = {
+        add: (file: File) => {
+          this.files.push(file);
+        },
+      };
+      this.files = [];
+    }
+  }
+
+  // @ts-expect-error: Mocking global DataTransfer for testing purposes
+  global.DataTransfer = MockDataTransfer;
+});
+
+describe('Upload Component', () => {
+  const props = {
+    animationDelay: 100,
+    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 waitForUpload = async () => {
+    for (let i = 0; i < 4; i += 1) {
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+    }
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    (asyncFileRead as jest.Mock).mockImplementation(async () => 'a value');
+    (postData as jest.Mock).mockResolvedValue('ServerResponse');
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  });
+
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  test('adds droppable-dropping class on dragenter', async () => {
+    const { container } = render(<Upload {...props} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+    expect(droppableElement).toBeTruthy();
+
+    fireEvent.dragEnter(droppableElement!, { dataTransfer: new DataTransfer() });
+
+    await waitFor(() => {
+      expect(droppableElement).toHaveClass('droppable-dropping');
+    });
+  });
+
+  test('removes droppable-dropping class on dragleave', async () => {
+    const { container } = render(<Upload {...props} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+    expect(droppableElement).toBeTruthy();
+
+    fireEvent.dragEnter(droppableElement!, { dataTransfer: new DataTransfer() });
+
+    await waitFor(() => {
+      expect(droppableElement).toHaveClass('droppable-dropping');
+    });
+
+    fireEvent.dragLeave(droppableElement!);
+
+    await waitFor(() => {
+      expect(droppableElement).not.toHaveClass('droppable-dropping');
+    });
+  });
+
+  test('adds droppable-processing when file is dropped', async () => {
+    const { container } = render(<Upload {...props} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    fireEvent.drop(droppableElement!, { dataTransfer });
+
+    await waitFor(() => expect(droppableElement).toHaveClass('droppable-processing'));
+  });
+
+  test('should handle successful file upload', async () => {
+    (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
+    (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
+
+    const { container } = render(<Upload {...props} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(TEST_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(10);
+      jest.advanceTimersByTime(props.animationDelay);
+    });
+
+    expect(await screen.findByText(/csSuccessText/i)).toBeInTheDocument();
+  });
+
+  test('should handle file size exceeding the limit', async () => {
+    const largeFile = new File(['large '.repeat(1000000)], 'large.jpg', { type: 'image/jpeg' });
+    const { container } = render(<Upload {...props} maxSize={10} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(largeFile);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+      jest.advanceTimersByTime(props.animationDelay);
+    });
+
+    await waitForUpload();
+
+    expect(await screen.findByText(/csTooLargeMessage/i)).toBeInTheDocument();
+  });
+
+  test('should handle invalid file type', async () => {
+    (postData as jest.Mock).mockRejectedValue(new Error('mockErrorResponse'));
+
+    const { container } = render(<Upload {...props} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(INVALID_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await waitForUpload();
+
+    expect(await screen.findByText(/File type not supported. Please try again with a different file/i)).toBeInTheDocument();
+  });
+
+  test('should handle canceling the upload', async () => {
+    const { container } = render(<Upload {...props} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(TEST_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    fireEvent.click(await screen.findByText(/csButtonText/i));
+
+    expect(props.onCancel).toHaveBeenCalled();
+  });
+
+  test('should handle retrying the upload', async () => {
+    (asyncFileRead as jest.Mock).mockRejectedValueOnce('error');
+
+    const { container } = render(<Upload {...props} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(TEST_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await waitForUpload();
+
+    fireEvent.click(await screen.findByText(/Try again/i));
+
+    expect(props.onStart).toHaveBeenCalled();
+  });
+
+  test('should call onSuccess with the server response when httpOptions are provided', async () => {
+    (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
+    (postData as jest.Mock).mockResolvedValue('mockServerResponse');
+
+    const { container } = render(<Upload {...props} httpOptions={{ url: 'test-url' }} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await waitForUpload();
+
+    expect(props.onSuccess).toHaveBeenCalledWith('mockServerResponse', TEST_FILE.name);
+  });
+
+  test('should not allow new file to process while current one is in progress', async () => {
+    (asyncFileRead as jest.Mock).mockResolvedValue('someResult');
+
+    const { container } = render(<Upload {...props} httpOptions={{ url: 'test-url' }} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    const secondFileDataTransfer = new DataTransfer();
+    secondFileDataTransfer.items.add(TEST_FILE);
+
+    let dropResult = true;
+    await act(async () => {
+      try {
+        fireEvent.drop(droppableElement!, { dataTransfer: secondFileDataTransfer });
+      } catch {
+        dropResult = false;
+      }
+    });
+
+    expect(dropResult).toBe(true);
+  });
+
+  test('should override the error icon label when errorIconLabel prop is provided', async () => {
+    (asyncFileRead as jest.Mock).mockRejectedValueOnce('mockReadError');
+    (postData as jest.Mock).mockRejectedValueOnce(new Error('mockPostError'));
+
+    const customLabel = 'Custom error label';
+    const { container } = render(<Upload {...props} errorIconLabel={customLabel} />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await waitForUpload();
+
+    const errorIcon = await screen.findByLabelText(/Custom error label/i);
+    expect(errorIcon).toBeInTheDocument();
+  });
+});

package/src/upload/Upload.tsx

@@ -172,7 +172,11 @@ export class Upload extends Component<UploadProps, UploadState> {
             isProcessing: false,
             isComplete: true,
           },
-          onSuccess ? () => onSuccess(response as string | Response, fileName) : undefined,
+          onSuccess
+            ? () => {
+                onSuccess(response as string | Response, fileName);
+              }
+            : undefined,
         );
       }, animationDelay);
     }

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

@@ -0,0 +1,51 @@
+import { render, fireEvent, waitFor, screen } from '../../../test-utils';
+
+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 container: HTMLElement;
+
+  beforeEach(() => {
+    const view = render(<CompleteStep {...COMPLETED_STEP_PROPS} />);
+    container = view.container;
+  });
+
+  test('renders container', async () => {
+    await waitFor(() => {
+      const complete = container.querySelector('.droppable-complete-card');
+      expect(complete).toBeInTheDocument();
+    });
+  });
+
+  describe('when error is false', () => {
+    test('renders isImage or Upload icon', () => {
+      expect(screen.getByTestId('document-icon')).toBeInTheDocument();
+    });
+
+    test('renders filename when error is false', () => {
+      expect(screen.getByText(COMPLETED_STEP_PROPS.fileName)).toBeInTheDocument();
+    });
+  });
+
+  test('renders button when csButtonText is set up', () => {
+    expect(screen.getByText(COMPLETED_STEP_PROPS.csButtonText)).toBeInTheDocument();
+  });
+
+  test('calls onClear when button is clicked', () => {
+    fireEvent.click(screen.getByText(COMPLETED_STEP_PROPS.csButtonText));
+    expect(COMPLETED_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
+  });
+});

package/src/upload/steps/completeStep/completeStep.tsx

@@ -1,6 +1,6 @@
 import { Document as DocumentIcon } from '@transferwise/icons';
 
-import { Typography } from '../../..';
+import { Typography } from '../../../common';
 import Body from '../../../body';
 import Button from '../../../button';
 import Title from '../../../title';

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

@@ -0,0 +1,59 @@
+import { render, fireEvent, waitFor, screen } from '../../../test-utils';
+
+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',
+    psButtonDisabled: false,
+  };
+
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const view = render(<ProcessingStep {...PROCESSING_STEP_PROPS} />);
+    container = view.container;
+  });
+
+  test('renders container', async () => {
+    await waitFor(() => {
+      const processing = container.querySelector('.droppable-processing-card');
+      expect(processing).toBeInTheDocument();
+    });
+  });
+  
+  test('renders ProcessIndicator with default status', () => {
+    expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
+  });
+
+  test('renders ProcessIndicator with success status', async () => {
+    const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isSuccess />);
+    await waitFor(() => {
+      const processIndicator = container.querySelector('.process-success');
+      expect(processIndicator).toBeInTheDocument();
+    });
+  });
+
+  test('renders ProcessIndicator with error status', async () => {
+    const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isError />);
+    await waitFor(() => {
+      const processIndicator = container.querySelector('.process-danger');
+      expect(processIndicator).toBeInTheDocument();
+    });
+  });
+
+  test('renders button when psButtonText is set up', () => {
+    expect(screen.getByText(PROCESSING_STEP_PROPS.psButtonText)).toBeInTheDocument();
+  });
+
+  test('calls onClear when button is clicked', () => {
+    fireEvent.click(screen.getByText(PROCESSING_STEP_PROPS.psButtonText));
+    expect(PROCESSING_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,79 @@
+import { render, screen } from '../../../test-utils';
+
+import UploadImageStep from '.';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+describe('uploadImageStep', () => {
+  const UPLOADIMAGE_STEP_PROPS = {
+    fileDropped: jest.fn(),
+    isComplete: false,
+    usAccept: 'image/*',
+    usButtonText: 'Upload Image',
+    usDisabled: false,
+    usLabel: 'Upload your image',
+    usHelpImage: 'https://example.com/help-image.png',
+    usPlaceholder: 'Drag and drop an image or click to upload',
+    errorMessage: '',
+    errorIconLabel: '',
+  };
+
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const view = render(<UploadImageStep {...UPLOADIMAGE_STEP_PROPS} />);
+    container = view.container;
+  });
+
+  test('renders container', () => {
+    const processing = container.querySelector('.droppable-default-card');
+    expect(processing).toBeInTheDocument();
+  });
+
+  test('renders helpImage or Upload icon', () => {
+    const uploadIcons = screen.getAllByAltText('Upload your image');
+    expect(uploadIcons.length).toBeGreaterThan(0);
+    expect(uploadIcons[0]).toBeInTheDocument();
+  });
+
+  test('renders label', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usLabel)).toBeInTheDocument();
+  });
+
+  test('renders placeholder', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usPlaceholder)).toBeInTheDocument();
+  });
+
+  test('renders buttonText', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usButtonText)).toBeInTheDocument();
+  });
+
+  test('should render with `errorIconLabel` and `errorMessage` override', () => {
+    const errorIconLabel = 'Error icon label';
+    const errorMessage = 'Maximum filesize is 2MB.';
+    const { container } = render(
+      <UploadImageStep 
+        {...UPLOADIMAGE_STEP_PROPS} 
+        errorMessage={errorMessage}
+        errorIconLabel={errorIconLabel} 
+      />
+    );
+
+    expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+});

package/src/upload/Upload.events.spec.js

@@ -1,49 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Upload from '.';
-
-const defaultLocale = 'en-GB';
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return (
-        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
-      );
-    },
-  defineMessages: (translations) => translations,
-}));
-
-describe('Upload (events)', () => {
-  let component;
-  const props = {
-    onCancel: jest.fn(),
-    onChange: jest.fn(),
-    onFailure: jest.fn(),
-    onStart: jest.fn(),
-    onSuccess: jest.fn(),
-  };
-
-  describe('on shallow', () => {
-    beforeEach(() => {
-      component = shallow(<Upload {...props} />).dive();
-      jest.restoreAllMocks();
-    });
-
-    it('increments dragCounter on dragenter', () => {
-      component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toBe(1);
-    });
-
-    it('decrements dragCounter on dragleave', () => {
-      component.find('.droppable').simulate('dragleave', new Event('event'));
-      expect(component.instance().dragCounter).toBe(-1);
-    });
-
-    it('reset dragCounter on drop', () => {
-      component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toBe(1);
-      component.find('.droppable').simulate('drop', new Event('event'));
-      expect(component.instance().dragCounter).toBe(0);
-    });
-  });
-});