@transferwise/components 46.38.0 → 46.39.0

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Status } from '../common';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
@@ -9,6 +9,8 @@ import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton'
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 import { act } from 'react';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -58,10 +60,7 @@ describe('UploadInput', () => {
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
+      await user.upload(input, [pngFile, jpgFile]);
 
       expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -116,7 +115,7 @@ describe('UploadInput', () => {
       expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute('multiple');
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       await waitFor(() => {
         expect(props.onUploadFile).toHaveBeenCalledTimes(2);
@@ -244,11 +243,11 @@ describe('UploadInput', () => {
       });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
       const jpgFile2 = new File(['foo2'], 'foo2.jpg', { type: 'image/jpeg' });
-      userEvent.upload(input, [pngFile2, jpgFile2]);
+      await user.upload(input, [pngFile2, jpgFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
@@ -274,7 +273,7 @@ describe('UploadInput', () => {
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
 
-      userEvent.upload(input, [pngFile, jpgFile, pngFile2]);
+      await user.upload(input, [pngFile, jpgFile, pngFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
@@ -305,7 +304,7 @@ describe('UploadInput', () => {
       const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
       Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
 
-      userEvent.upload(input, [overSizedFile]);
+      await user.upload(input, overSizedFile);
       await waitFor(() => {
         expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
       });

package/src/uploadInput/UploadInput.story.tsx

@@ -1,10 +1,7 @@
-import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react';
-
-import { Status } from '../common';
+import { StoryFn, Meta } from '@storybook/react';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
-import { UploadedFile, UploadResponse } from './types';
+import { UploadResponse } from './types';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
@@ -13,36 +10,7 @@ const meta: Meta<typeof UploadInput> = {
 };
 
 export default meta;
-
-const files = [
-  {
-    id: 1,
-    filename: 'purchase-receipt-0.pdf',
-    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
-  },
-  {
-    id: 2,
-    filename: 'purchase-receipt-1.pdf',
-    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
-  },
-  {
-    id: 2,
-    filename: 'receipt failed.png',
-    status: Status.FAILED,
-  },
-  {
-    id: 3,
-    filename: 'receipt failed with error string.png',
-    status: Status.FAILED,
-    error: 'Something went wrong',
-  },
-  {
-    id: 4,
-    filename: 'receipt failed with error object.png',
-    status: Status.FAILED,
-    error: { message: 'Something went wrong' },
-  },
-] satisfies UploadedFile[];
+type Story = StoryFn<UploadInputProps>;
 
 const createDelayedPromise = async ({
   successful = true,
@@ -61,158 +29,18 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => {
+  onUploadFile: async () => {
     return createDelayedPromise();
   },
-  onDeleteFile: async (id: string | number) => {
+  onDeleteFile: async () => {
     return createDelayedPromise();
   },
 };
 
-const Template: Story<UploadInputProps> = (args: UploadInputProps) => <UploadInput {...args} />;
+const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
 
-export const SingleFile: Story<UploadInputProps> = Template.bind({});
+export const SingleFile: Story = Template.bind({});
 SingleFile.args = { ...props };
 
-export const MultipleFiles: Story<UploadInputProps> = Template.bind({});
+export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
-
-export const UploadInputWithDescriptionFromProps: Story<UploadInputProps> = Template.bind({});
-UploadInputWithDescriptionFromProps.args = {
-  ...props,
-  multiple: true,
-  description: 'Custom file description from prop',
-};
-
-export const Disabled: Story<UploadInputProps> = Template.bind({});
-Disabled.args = { ...props, disabled: true };
-
-export const WithAnyFileType: Story<UploadInputProps> = Template.bind({});
-WithAnyFileType.args = { ...props, fileTypes: '*' };
-
-export const WithSingleFileType: Story<UploadInputProps> = Template.bind({});
-WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
-
-export const WithMultipleExistingFiles: Story<UploadInputProps> = Template.bind({});
-WithMultipleExistingFiles.args = {
-  ...props,
-  files,
-  multiple: true,
-};
-
-export const WithFileErrors: Story<UploadInputProps> = Template.bind({});
-WithFileErrors.args = {
-  ...props,
-  files: [
-    {
-      id: 1,
-      filename: 'Error with default message.png',
-      status: Status.FAILED,
-    },
-    {
-      id: 2,
-      filename: 'Error with `string` error.png',
-      status: Status.FAILED,
-      error: 'Single string error',
-    },
-    {
-      id: 3,
-      filename: 'Error with `obj` error ({ message : `string` }).png',
-      status: Status.FAILED,
-      error: { message: 'Single obj error' },
-    },
-    {
-      id: 4,
-      filename: 'Error with single error passed in `array`.png',
-      status: Status.FAILED,
-      errors: ['Single error in array'],
-    },
-    {
-      id: 5,
-      filename: 'Error with multiple `string` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: ['Error 1', 'Error 2', 'Error 3'],
-    },
-    {
-      id: 6,
-      filename: 'Error with multiple `obj` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
-    },
-  ],
-  multiple: true,
-};
-
-export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
-WithoutDelete.args = {
-  ...props,
-  files,
-  onDeleteFile: undefined,
-  multiple: true,
-};
-
-export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
-WithUploadFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onUploadFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
-};
-
-export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
-WithDeleteFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onDeleteFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
-};
-
-export const CustomConfirmMessage: Story<UploadInputProps> = Template.bind({});
-CustomConfirmMessage.args = {
-  ...props,
-  files: files.slice(0),
-  deleteConfirm: {
-    title: 'Sure you want to remove this invoice?',
-    body: (
-      <img
-        alt="brand logo"
-        src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
-      />
-    ),
-  },
-};
-
-export const withManualDownloadHandler: Story<UploadInputProps> = Template.bind({});
-withManualDownloadHandler.args = {
-  ...props,
-  files,
-  onDownload: action('Manual download handler'),
-};
-
-export const withFilesChangeHandler: Story<UploadInputProps> = Template.bind({});
-withFilesChangeHandler.args = {
-  ...props,
-  files,
-  onFilesChange: action('Files change handler'),
-};
-
-export const withMaxFilesToUploadLimit: Story<UploadInputProps> = Template.bind({});
-withMaxFilesToUploadLimit.args = {
-  ...props,
-  multiple: true,
-  maxFiles: 5,
-  maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
-};
-
-export const withFileSizeErrorMessage: Story<UploadInputProps> = Template.bind({});
-withFileSizeErrorMessage.args = {
-  ...props,
-  sizeLimit: 1,
-  sizeLimitErrorMessage: 'The file is oversized',
-};
-
-export const withCustomUploadButtonTitle: Story<UploadInputProps> = Template.bind({});
-withCustomUploadButtonTitle.args = {
-  ...props,
-  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
-};

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -0,0 +1,212 @@
+import { action } from '@storybook/addon-actions';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { Status } from '../common';
+
+import UploadInput, { UploadInputProps } from './UploadInput';
+import { UploadedFile, UploadResponse } from './types';
+
+const meta: Meta<typeof UploadInput> = {
+  title: 'Forms/UploadInput/Tests',
+  component: UploadInput,
+};
+
+export default meta;
+type Story = StoryFn<UploadInputProps>;
+
+const files = [
+  {
+    id: 1,
+    filename: 'purchase-receipt-0.pdf',
+    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
+  },
+  {
+    id: 2,
+    filename: 'purchase-receipt-1.pdf',
+    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
+  },
+  {
+    id: 2,
+    filename: 'receipt failed.png',
+    status: Status.FAILED,
+  },
+  {
+    id: 3,
+    filename: 'receipt failed With error string.png',
+    status: Status.FAILED,
+    error: 'Something went wrong',
+  },
+  {
+    id: 4,
+    filename: 'receipt failed With error object.png',
+    status: Status.FAILED,
+    error: { message: 'Something went wrong' },
+  },
+] satisfies UploadedFile[];
+
+const createDelayedPromise = async ({
+  successful = true,
+  delaySeconds = 3,
+  response = { id: Math.round(Math.random() * 10000), url: '#' },
+}: {
+  successful?: boolean;
+  delaySeconds?: number;
+  response?: UploadResponse;
+} = {}): Promise<UploadResponse> =>
+  new Promise((resolve, reject) => {
+    setTimeout(
+      () => (successful ? resolve(response) : reject(new Error('Unexpected error'))),
+      delaySeconds * 1000,
+    );
+  });
+
+const props = {
+  onUploadFile: async (formData: FormData) => {
+    return createDelayedPromise();
+  },
+  onDeleteFile: async (id: string | number) => {
+    return createDelayedPromise();
+  },
+};
+
+const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
+
+export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
+UploadInputWithDescriptionFromProps.args = {
+  ...props,
+  multiple: true,
+  description: 'Custom file description from prop',
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = { ...props, disabled: true };
+
+export const WithAnyFileType: Story = Template.bind({});
+WithAnyFileType.args = { ...props, fileTypes: '*' };
+
+export const WithSingleFileType: Story = Template.bind({});
+WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
+
+export const WithMultipleExistingFiles: Story = Template.bind({});
+WithMultipleExistingFiles.args = {
+  ...props,
+  files,
+  multiple: true,
+};
+
+export const WithFileErrors: Story = Template.bind({});
+WithFileErrors.args = {
+  ...props,
+  files: [
+    {
+      id: 1,
+      filename: 'Error with default message.png',
+      status: Status.FAILED,
+    },
+    {
+      id: 2,
+      filename: 'Error with `string` error.png',
+      status: Status.FAILED,
+      error: 'Single string error',
+    },
+    {
+      id: 3,
+      filename: 'Error with `obj` error ({ message : `string` }).png',
+      status: Status.FAILED,
+      error: { message: 'Single obj error' },
+    },
+    {
+      id: 4,
+      filename: 'Error with single error passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Single error in array'],
+    },
+    {
+      id: 5,
+      filename: 'Error with multiple `string` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Error 1', 'Error 2', 'Error 3'],
+    },
+    {
+      id: 6,
+      filename: 'Error with multiple `obj` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
+    },
+  ],
+  multiple: true,
+};
+
+export const WithoutDelete: Story = Template.bind({});
+WithoutDelete.args = {
+  ...props,
+  files,
+  onDeleteFile: undefined,
+  multiple: true,
+};
+
+export const WithUploadFailed: Story = Template.bind({});
+WithUploadFailed.args = {
+  ...props,
+  files: files.slice(0),
+  onUploadFile: async () => createDelayedPromise({ successful: false }),
+  multiple: true,
+};
+
+export const WithDeleteFailed: Story = Template.bind({});
+WithDeleteFailed.args = {
+  ...props,
+  files: files.slice(0),
+  onDeleteFile: async () => createDelayedPromise({ successful: false }),
+  multiple: true,
+};
+
+export const CustomConfirmMessage: Story = Template.bind({});
+CustomConfirmMessage.args = {
+  ...props,
+  files: files.slice(0),
+  deleteConfirm: {
+    title: 'Sure you want to remove this invoice?',
+    body: (
+      <img
+        alt="brand logo"
+        src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
+      />
+    ),
+  },
+};
+
+export const WithManualDownloadHandler: Story = Template.bind({});
+WithManualDownloadHandler.args = {
+  ...props,
+  files,
+  onDownload: action('Manual download handler'),
+};
+
+export const WithFilesChangeHandler: Story = Template.bind({});
+WithFilesChangeHandler.args = {
+  ...props,
+  files,
+  onFilesChange: action('Files change handler'),
+};
+
+export const WithMaxFilesToUploadLimit: Story = Template.bind({});
+WithMaxFilesToUploadLimit.args = {
+  ...props,
+  multiple: true,
+  maxFiles: 5,
+  maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
+};
+
+export const WithFileSizeErrorMessage: Story = Template.bind({});
+WithFileSizeErrorMessage.args = {
+  ...props,
+  sizeLimit: 1,
+  sizeLimitErrorMessage: 'The file is oversized',
+};
+
+export const WithCustomUploadButtonTitle: Story = Template.bind({});
+WithCustomUploadButtonTitle.args = {
+  ...props,
+  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+};

package/src/uploadInput/uploadButton/UploadButton.spec.tsx

@@ -35,9 +35,9 @@ describe('UploadButton', () => {
       );
     });
 
-    it('trigger onChange callback with a FileList', () => {
+    it('trigger onChange callback with a FileList', async () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await userEvent.upload(input, [pngFile, jpgFile]);
 
       expect(props.onChange).toHaveBeenCalledTimes(1);
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -55,9 +55,9 @@ describe('UploadButton', () => {
       expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute('multiple');
     });
 
-    it('trigger onChange callback with a FileList', () => {
+    it('trigger onChange callback with a FileList', async () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await userEvent.upload(input, [pngFile, jpgFile]);
 
       expect(props.onChange).toHaveBeenCalledTimes(1);
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

package/src/uploadInput/uploadItem/UploadItem.spec.tsx

@@ -1,9 +1,9 @@
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Status } from '../../common';
 import { render, screen } from '../../test-utils';
 
-import UploadItem, { UploadItemProps, TEST_IDS } from './UploadItem';
+import UploadItem, { UploadItemProps } from './UploadItem';
 
 describe('UploadItem', () => {
   const props: UploadItemProps = {
@@ -111,10 +111,10 @@ describe('UploadItem', () => {
   });
 
   describe('manual file download handler', () => {
-    it('calls onDownload handler provided through props', () => {
+    it('calls onDownload handler provided through props', async () => {
       const onDownload = jest.fn();
       renderComponent({ ...props, onDownload });
-      userEvent.click(screen.getAllByRole('link')[0]);
+      await userEvent.click(screen.getAllByRole('link')[0]);
       expect(onDownload).toHaveBeenCalledTimes(1);
       expect(onDownload).toHaveBeenCalledWith(props.file);
     });

package/src/flowNavigation/backButton/BackButton.js

@@ -1,32 +0,0 @@
-import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Avatar, { AvatarType } from '../../avatar';
-
-const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
-  <Avatar type={AvatarType.ICON} size={40}>
-    <button
-      type="button"
-      aria-label={ariaLabel}
-      className={classNames('np-back-button', 'btn-unstyled', className)}
-      onClick={onClick}
-    >
-      <ArrowLeftIcon size={24} />
-    </button>
-  </Avatar>
-);
-
-BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.element,
-  onClick: PropTypes.func,
-};
-
-BackButton.defaultProps = {
-  className: undefined,
-  label: undefined,
-};
-
-export default BackButton;

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,16 +0,0 @@
-import { render } from '../../test-utils';
-import messages from '../FlowNavigation.messages';
-
-import BackButton from '.';
-
-const props = {
-  label: <>label</>,
-  className: 'className',
-  onClick: jest.fn(),
-  'aria-label': messages.back.defaultMessage,
-};
-describe('BackButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<BackButton {...props} />).container).toMatchSnapshot();
-  });
-});

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BackButton renders as expected 1`] = `
-<div>
-  <div
-    class="tw-avatar tw-avatar--40 tw-avatar--icon"
-  >
-    <div
-      class="tw-avatar__content"
-    >
-      <button
-        class="np-back-button btn-unstyled className"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-arrow-left "
-          data-testid="arrow-left-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/src/flowNavigation/backButton/index.js

@@ -1,3 +0,0 @@
-import BackButton from './BackButton';
-
-export default BackButton;

package/src/overlayHeader/index.js

@@ -1 +0,0 @@
-export { default } from './OverlayHeader';