@transferwise/components 0.0.0-experimental-40b5678 → 0.0.0-experimental-6ad430a

package/src/tooltip/Tooltip.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 
 import Tooltip from '.';
 
@@ -25,7 +26,7 @@ describe('Tooltip Component', () => {
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should render the tooltip label when closed', async () => {
+  it('should render the tooltip label when closed', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -35,11 +36,11 @@ describe('Tooltip Component', () => {
     const tooltip = screen.getByRole('tooltip', { hidden: true });
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
-  it('should display the tooltip on mouse hover', async () => {
+  it('should display the tooltip on mouse hover', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover over me!</span>
@@ -47,13 +48,13 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover over me!');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
 
     const tooltipElement = screen.queryByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on mouse out', async () => {
+  it('should hide the tooltip on mouse out', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -61,16 +62,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover me');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     let tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
 
-    await userEvent.unhover(triggerElement);
+    userEvent.unhover(triggerElement);
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip on focus', async () => {
+  it('should display the tooltip on focus', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -78,12 +79,12 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    await userEvent.tab();
+    userEvent.tab();
     const tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on blur', async () => {
+  it('should hide the tooltip on blur', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -91,16 +92,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    await userEvent.tab();
+    userEvent.tab();
     let tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
 
-    await userEvent.tab({ shift: true }); // Blur the element
+    userEvent.tab({ shift: true }); // Blur the element
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip when the "children" prop is a React element', async () => {
+  it('should display the tooltip when the "children" prop is a React element', () => {
     render(
       <Tooltip label="Test Tooltip">
         <button type="button">Click me</button>
@@ -108,7 +109,7 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Click me');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });

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/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);
     });