@transferwise/components 0.0.0-experimental-40b5678 → 0.0.0-experimental-ef26b66

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,8 +9,6 @@ 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', () => {
@@ -60,7 +58,10 @@ describe('UploadInput', () => {
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
 
       expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -115,7 +116,7 @@ describe('UploadInput', () => {
       expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute('multiple');
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
 
       await waitFor(() => {
         expect(props.onUploadFile).toHaveBeenCalledTimes(2);
@@ -243,11 +244,11 @@ describe('UploadInput', () => {
       });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
 
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
       const jpgFile2 = new File(['foo2'], 'foo2.jpg', { type: 'image/jpeg' });
-      await user.upload(input, [pngFile2, jpgFile2]);
+      userEvent.upload(input, [pngFile2, jpgFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
@@ -273,7 +274,7 @@ describe('UploadInput', () => {
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
 
-      await user.upload(input, [pngFile, jpgFile, pngFile2]);
+      userEvent.upload(input, [pngFile, jpgFile, pngFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
@@ -304,7 +305,7 @@ describe('UploadInput', () => {
       const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
       Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
 
-      await user.upload(input, overSizedFile);
+      userEvent.upload(input, [overSizedFile]);
       await waitFor(() => {
         expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
       });

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Status } from '../common';
 
@@ -14,6 +14,8 @@ const meta: Meta<typeof UploadInput> = {
 
 export default meta;
 
+type Story = StoryFn<UploadInputProps>;
+
 const files = [
   {
     id: 1,
@@ -61,46 +63,46 @@ 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({});
+export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
 UploadInputWithDescriptionFromProps.args = {
   ...props,
   multiple: true,
   description: 'Custom file description from prop',
 };
 
-export const Disabled: Story<UploadInputProps> = Template.bind({});
+export const Disabled: Story = Template.bind({});
 Disabled.args = { ...props, disabled: true };
 
-export const WithAnyFileType: Story<UploadInputProps> = Template.bind({});
+export const WithAnyFileType: Story = Template.bind({});
 WithAnyFileType.args = { ...props, fileTypes: '*' };
 
-export const WithSingleFileType: Story<UploadInputProps> = Template.bind({});
+export const WithSingleFileType: Story = Template.bind({});
 WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
 
-export const WithMultipleExistingFiles: Story<UploadInputProps> = Template.bind({});
+export const WithMultipleExistingFiles: Story = Template.bind({});
 WithMultipleExistingFiles.args = {
   ...props,
   files,
   multiple: true,
 };
 
-export const WithFileErrors: Story<UploadInputProps> = Template.bind({});
+export const WithFileErrors: Story = Template.bind({});
 WithFileErrors.args = {
   ...props,
   files: [
@@ -143,7 +145,7 @@ WithFileErrors.args = {
   multiple: true,
 };
 
-export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
+export const WithoutDelete: Story = Template.bind({});
 WithoutDelete.args = {
   ...props,
   files,
@@ -151,7 +153,7 @@ WithoutDelete.args = {
   multiple: true,
 };
 
-export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
+export const WithUploadFailed: Story = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
@@ -159,7 +161,7 @@ WithUploadFailed.args = {
   multiple: true,
 };
 
-export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
+export const WithDeleteFailed: Story = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
@@ -167,7 +169,7 @@ WithDeleteFailed.args = {
   multiple: true,
 };
 
-export const CustomConfirmMessage: Story<UploadInputProps> = Template.bind({});
+export const CustomConfirmMessage: Story = Template.bind({});
 CustomConfirmMessage.args = {
   ...props,
   files: files.slice(0),
@@ -182,21 +184,21 @@ CustomConfirmMessage.args = {
   },
 };
 
-export const withManualDownloadHandler: Story<UploadInputProps> = Template.bind({});
+export const withManualDownloadHandler: Story = Template.bind({});
 withManualDownloadHandler.args = {
   ...props,
   files,
   onDownload: action('Manual download handler'),
 };
 
-export const withFilesChangeHandler: Story<UploadInputProps> = Template.bind({});
+export const withFilesChangeHandler: Story = Template.bind({});
 withFilesChangeHandler.args = {
   ...props,
   files,
   onFilesChange: action('Files change handler'),
 };
 
-export const withMaxFilesToUploadLimit: Story<UploadInputProps> = Template.bind({});
+export const withMaxFilesToUploadLimit: Story = Template.bind({});
 withMaxFilesToUploadLimit.args = {
   ...props,
   multiple: true,
@@ -204,14 +206,14 @@ withMaxFilesToUploadLimit.args = {
   maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
 };
 
-export const withFileSizeErrorMessage: Story<UploadInputProps> = Template.bind({});
+export const withFileSizeErrorMessage: Story = Template.bind({});
 withFileSizeErrorMessage.args = {
   ...props,
   sizeLimit: 1,
   sizeLimitErrorMessage: 'The file is oversized',
 };
 
-export const withCustomUploadButtonTitle: Story<UploadInputProps> = Template.bind({});
+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', async () => {
+    it('trigger onChange callback with a FileList', () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      await userEvent.upload(input, [pngFile, jpgFile]);
+      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', async () => {
+    it('trigger onChange callback with a FileList', () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      await userEvent.upload(input, [pngFile, jpgFile]);
+      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 } from './UploadItem';
+import UploadItem, { UploadItemProps, TEST_IDS } 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', async () => {
+    it('calls onDownload handler provided through props', () => {
       const onDownload = jest.fn();
       renderComponent({ ...props, onDownload });
-      await userEvent.click(screen.getAllByRole('link')[0]);
+      userEvent.click(screen.getAllByRole('link')[0]);
       expect(onDownload).toHaveBeenCalledTimes(1);
       expect(onDownload).toHaveBeenCalledWith(props.file);
     });