@transferwise/components 46.74.0 → 46.75.0

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

@@ -1,52 +1,52 @@
 import { action } from '@storybook/addon-actions';
-import { StoryFn, Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Status } from '../common';
-
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
+import { userEvent, within } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
   component: UploadInput,
 };
-
 export default meta;
-type Story = StoryFn<UploadInputProps>;
 
-const files = [
+type Story = StoryObj<UploadInputProps>;
+
+const files: UploadedFile[] = [
   {
-    id: 1,
+    id: '0hd8hf8',
     filename: 'purchase-receipt-0.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 2,
+    id: '1r7hgc83',
     filename: 'purchase-receipt-1.pdf',
   },
   {
-    id: 3,
+    id: '2nhc7387hc8h',
     filename: 'purchase-receipt-2.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 4,
+    id: '39wd8uc',
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 5,
+    id: '437yyf8hf',
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 6,
+    id: '5biehveifh',
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },
   },
-] satisfies UploadedFile[];
+];
 
 const createDelayedPromise = async ({
   successful = true,
@@ -65,163 +65,230 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => {
-    return createDelayedPromise();
+  onUploadFile: async (formData: FormData) => createDelayedPromise(),
+  onDeleteFile: async (id: string | number) => createDelayedPromise(),
+};
+
+export const UploadInputWithDescriptionFromProps: Story = {
+  args: {
+    ...props,
+    multiple: true,
+    description: 'Custom file description from prop',
   },
-  onDeleteFile: async (id: string | number) => {
-    return createDelayedPromise();
+};
+
+export const Disabled: Story = {
+  args: {
+    ...props,
+    disabled: true,
   },
 };
 
-const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
+export const WithAnyFileType: Story = {
+  args: {
+    ...props,
+    fileTypes: '*',
+  },
+};
 
-export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
-UploadInputWithDescriptionFromProps.args = {
-  ...props,
-  multiple: true,
-  description: 'Custom file description from prop',
+export const WithSingleFileType: Story = {
+  args: {
+    ...props,
+    fileTypes: '.zip,application/zip',
+  },
 };
 
-export const Disabled: Story = Template.bind({});
-Disabled.args = { ...props, disabled: true };
+export const WithMultipleExistingFiles: Story = {
+  args: {
+    ...props,
+    files,
+    multiple: true,
+  },
+};
 
-export const WithAnyFileType: Story = Template.bind({});
-WithAnyFileType.args = { ...props, fileTypes: '*' };
+export const WithFileErrors: Story = {
+  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',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          'Error 3',
+        ],
+      },
+      {
+        id: 6,
+        filename: 'Error with multiple `obj` errors passed in `array`.png',
+        status: Status.FAILED,
+        errors: [
+          { message: 'Error 1' },
+          {
+            message:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          },
+          { message: 'Error 3' },
+        ],
+      },
+    ],
+    multiple: true,
+  },
+};
 
-export const WithSingleFileType: Story = Template.bind({});
-WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
+export const WithoutDelete: Story = {
+  args: {
+    ...props,
+    files,
+    onDeleteFile: undefined,
+    multiple: true,
+  },
+};
 
-export const WithMultipleExistingFiles: Story = Template.bind({});
-WithMultipleExistingFiles.args = {
-  ...props,
-  files,
-  multiple: true,
+export const WithUploadFailed: Story = {
+  args: {
+    ...props,
+    files: files.slice(0),
+    onUploadFile: async () => createDelayedPromise({ successful: false }),
+    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',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        'Error 3',
-      ],
-    },
-    {
-      id: 6,
-      filename: 'Error with multiple `obj` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: [
-        { message: 'Error 1' },
-        {
-          message:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-        { message: 'Error 3' },
-      ],
-    },
-  ],
-  multiple: true,
+export const WithDeleteFailed: Story = {
+  args: {
+    ...props,
+    files: files.slice(0),
+    onDeleteFile: async () => createDelayedPromise({ successful: false }),
+    multiple: true,
+  },
 };
 
-export const WithoutDelete: Story = Template.bind({});
-WithoutDelete.args = {
-  ...props,
-  files,
-  onDeleteFile: undefined,
-  multiple: true,
+export const CustomConfirmMessage: Story = {
+  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 WithUploadFailed: Story = Template.bind({});
-WithUploadFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onUploadFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
+export const WithManualDownloadHandler: Story = {
+  args: {
+    ...props,
+    files,
+    onDownload: action('Manual download handler'),
+  },
 };
 
-export const WithDeleteFailed: Story = Template.bind({});
-WithDeleteFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onDeleteFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
+export const WithFilesChangeHandler: Story = {
+  args: {
+    ...props,
+    files,
+    onFilesChange: action('Files change handler'),
+  },
 };
 
-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 WithMaxFilesToUploadLimit: Story = {
+  args: {
+    ...props,
+    multiple: true,
+    maxFiles: 5,
+    maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
   },
 };
 
-export const WithManualDownloadHandler: Story = Template.bind({});
-WithManualDownloadHandler.args = {
-  ...props,
-  files,
-  onDownload: action('Manual download handler'),
+export const WithFileSizeErrorMessage: Story = {
+  args: {
+    ...props,
+    sizeLimit: 1,
+    sizeLimitErrorMessage: 'The file is oversized',
+  },
 };
 
-export const WithFilesChangeHandler: Story = Template.bind({});
-WithFilesChangeHandler.args = {
-  ...props,
-  files,
-  onFilesChange: action('Files change handler'),
+export const WithCustomUploadButtonTitle: Story = {
+  args: {
+    ...props,
+    uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+  },
 };
 
-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",
+const triggerModalAndConfirm = async ({ isLink = true } = {}) => {
+  if (isLink) {
+    await wait();
+    await userEvent.tab();
+  }
+  await wait();
+  await userEvent.keyboard('{Enter}');
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.keyboard('{Enter}');
+  await wait();
 };
+const wait = async (time = 250) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
 
-export const WithFileSizeErrorMessage: Story = Template.bind({});
-WithFileSizeErrorMessage.args = {
-  ...props,
-  sizeLimit: 1,
-  sizeLimitErrorMessage: 'The file is oversized',
+export const DeletingTop: Story = {
+  args: {
+    ...props,
+    files: [files[0], files[1], files[2]],
+    multiple: true,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.tab();
+    await triggerModalAndConfirm();
+    await triggerModalAndConfirm({ isLink: false });
+    await triggerModalAndConfirm();
+  },
 };
 
-export const WithCustomUploadButtonTitle: Story = Template.bind({});
-WithCustomUploadButtonTitle.args = {
-  ...props,
-  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+export const DeletingBottom: Story = {
+  args: {
+    ...props,
+    files: [files[0], files[1], files[2]],
+    multiple: true,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await triggerModalAndConfirm();
+    await triggerModalAndConfirm({ isLink: false });
+    await triggerModalAndConfirm();
+  },
 };