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

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -1,4 +1,5 @@
-import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import user from '@testing-library/user-event';
 import { act } from 'react';
 
 import { render, screen, mockMatchMedia } from '../test-utils';
@@ -54,103 +55,103 @@ describe('DateLookup (events)', () => {
 
     it('switches to years', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
+      openDateLookup(view);
+      clickDateButton(view);
 
       expect(getActiveYearButton(view)).toHaveFocus();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('has aria-label for 20 years', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
+      openDateLookup(view);
+      clickDateButton(view);
 
       expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('switches to months', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
 
       expect(getActiveMonthButton(view)).toHaveFocus();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('has aria label for year', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
 
       expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('switches to days', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
+      user.click(getActiveMonthButton(view));
 
       expect(getActiveDayButton(view)).toHaveFocus();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('has aria label for month', async () => {
       const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
+      openDateLookup(view);
+      clickDateButton(view);
+      user.click(getActiveYearButton(view));
+      user.click(getActiveMonthButton(view));
 
       expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('updates selected date and closes', async () => {
       const view = await setup();
-      await openDateLookup(view);
+      openDateLookup(view);
       const d = new Date(2018, 11, 28);
       const newDay = screen.getByText(d.getDate().toString());
-      await userEvent.click(newDay);
+      user.click(newDay);
 
       expect(handleChange).toHaveBeenCalledWith(d);
       expect(getOpenButton(view)).toHaveFocus();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('has aria label on selected date', async () => {
       const view = await setup();
-      await openDateLookup(view);
+      openDateLookup(view);
       const d = new Date(2018, 11, 28);
       const newDay = screen.getByText(d.getDate().toString());
-      await userEvent.click(newDay);
-      await openDateLookup(view);
+      user.click(newDay);
+      openDateLookup(view);
       expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
 
     it('supports custom `aria-labelledby` attribute', async () => {
       const view = await setup();
       expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
 
-      await closeDateLookup(view);
+      closeDateLookup(view);
     });
   });
 
@@ -182,33 +183,29 @@ describe('DateLookup (events)', () => {
 
     it('when user clicks on clear the focus returns to btn', async () => {
       const view = await setup();
-      await clickClearButton(view);
+      clickClearButton(view);
       expect(getOpenButton(view)).toHaveFocus();
     });
 
     it('onChange gets called with null when reset button is clicked', async () => {
       const view = await setup();
-      await clickClearButton(view);
+      clickClearButton(view);
       expect(props.onChange).toHaveBeenCalledWith(null);
     });
   });
 
-  const openDateLookup = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getOpenButton(view));
+  const openDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getOpenButton(view));
 
-  const clickDateButton = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getDateButton(view));
+  const clickDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getDateButton(view));
 
   // Close dateLookup and removes events attached to documents.
-  const closeDateLookup = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(view.container);
+  const closeDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(view.container);
 
-  const clickClearButton = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getClearButton(view));
+  const clickClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
+    user.click(getClearButton(view));
 
   const getActiveYearButton = (
     /** @type {import('@testing-library/react').RenderResult} */ view,

package/src/decision/Decision.spec.js

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia } from '../mocks';

package/src/dimmer/Dimmer.rtl.spec.js

@@ -25,42 +25,42 @@ describe('Dimmer', () => {
   });
 
   describe('closing behaviour', () => {
-    it('calls onClose if the dimmer is clicked', async () => {
+    it('calls onClose if the dimmer is clicked', () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} onClose={onClose} />);
-      await userEvent.click(screen.getByRole('presentation'));
+      userEvent.click(screen.getByRole('presentation'));
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClose if the dimmer content is clicked', async () => {
+    it('does not call onClose if the dimmer content is clicked', () => {
       const onClose = jest.fn();
       render(
         <Dimmer {...props} onClose={onClose}>
           <Button onClick={() => {}}>McClicky</Button>
         </Dimmer>,
       );
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
-    it('does not call onClose when clicked if disableClickToClose is true', async () => {
+    it('does not call onClose when clicked if disableClickToClose is true', () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
-      await userEvent.click(screen.getByRole('presentation'));
+      userEvent.click(screen.getByRole('presentation'));
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
-    it('calls onClose if the escape key is pressed', async () => {
+    it('calls onClose if the escape key is pressed', () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} onClose={onClose} />);
-      await userEvent.keyboard('{Escape}');
+      userEvent.keyboard('{esc}');
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClose if the escape key is pressed when disableClickToClose is true', async () => {
+    it('does not call onClose if the escape key is pressed when disableClickToClose is true', () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
-      await userEvent.keyboard('{Escape}');
+      userEvent.keyboard('{esc}');
       expect(onClose).toHaveBeenCalledTimes(1);
     });
   });

package/src/drawer/Drawer.rtl.spec.tsx

@@ -48,10 +48,10 @@ describe('Drawer', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('calls onClose when user clicks close button', async () => {
+  it('calls onClose when user clicks close button', () => {
     render(<Drawer {...props}>content</Drawer>);
     expect(props.onClose).not.toHaveBeenCalled();
-    await userEvent.click(getCloseButton());
+    userEvent.click(getCloseButton());
     expect(props.onClose).toHaveBeenCalledTimes(1);
   });
 

package/src/emphasis/Emphasis.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render } from '../test-utils';
 
 import Emphasis from './Emphasis';

package/src/field/Field.spec.tsx

@@ -73,7 +73,7 @@ describe('Field', () => {
     button.addEventListener('click', handleClick);
 
     const label = screen.getByText('Phone number');
-    await userEvent.click(label);
+    userEvent.click(label);
 
     expect(handleClick).not.toHaveBeenCalled();
   });
@@ -90,6 +90,6 @@ describe('Field', () => {
     expect(screen.getByRole('textbox')).not.toHaveAttribute('id');
 
     const label = screen.getByText('Phone number');
-    await userEvent.click(label);
+    userEvent.click(label);
   });
 });

package/src/flowNavigation/FlowNavigation.spec.js

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 import Avatar, { AvatarType } from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '../../test-utils';
 
 import AnimatedLabel from '.';

package/src/header/Header.spec.tsx

@@ -9,7 +9,7 @@ describe('Header', () => {
     expect(screen.getByText('Header title')).toBeInTheDocument();
   });
 
-  it('can trigger header action', async () => {
+  it('can trigger header action', () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -22,12 +22,12 @@ describe('Header', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
+    userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
 
-  it('can set aria-label property for header action', async () => {
+  it('can set aria-label property for header action', () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -41,7 +41,7 @@ describe('Header', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: 'Magic' }));
+    userEvent.click(screen.getByRole('button', { name: 'Magic' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
@@ -75,7 +75,7 @@ describe('Header', () => {
     expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
   });
 
-  it('runs onClick if specified even when it got href prop', async () => {
+  it('runs onClick if specified even when it got href prop', () => {
     const callback = jest.fn();
     render(
       <Header
@@ -88,7 +88,7 @@ describe('Header', () => {
     const button = screen.getByRole('link', { name: 'Click me' });
     expect(button).toBeInTheDocument();
 
-    await userEvent.click(button);
+    userEvent.click(button);
 
     expect(callback).toHaveBeenCalledTimes(1);
   });

package/src/image/Image.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import '@testing-library/jest-dom';
 import { Sentiment } from '../common';
 import { render, screen } from '../test-utils';
 

package/src/inputs/SelectInput.spec.tsx

@@ -1,5 +1,5 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import { act, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
@@ -42,22 +42,25 @@ describe('SelectInput', () => {
       />,
     );
 
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(' ');
+    });
 
     const footer = screen.getByText('All items shown');
     expect(footer).toBeInTheDocument();
 
-    await userEvent.keyboard('u');
+    userEvent.keyboard('u');
     expect(footer).toHaveTextContent(/‘u’$/);
 
-    await userEvent.keyboard('r');
+    userEvent.keyboard('r');
     expect(footer).toHaveTextContent(/‘ur’$/);
 
-    await userEvent.keyboard('x');
+    userEvent.keyboard('x');
     expect(footer).toHaveTextContent(/‘urx’$/);
 
-    await userEvent.keyboard('{Backspace}');
+    userEvent.keyboard('{Backspace}');
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
@@ -77,13 +80,16 @@ describe('SelectInput', () => {
     expect(screen.queryByText('EUR')).not.toBeInTheDocument();
 
     const trigger = screen.getAllByRole('button')[0];
-    await userEvent.click(trigger);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     const option = within(listbox).getByRole('option', { name: 'EUR' });
-    await userEvent.click(option);
+    userEvent.click(option);
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -111,28 +117,34 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(' ');
+    });
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(3);
 
-    await userEvent.keyboard('u');
+    userEvent.keyboard('u');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
 
-    await userEvent.keyboard('r');
+    userEvent.keyboard('r');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
-    await userEvent.keyboard('x');
+    userEvent.keyboard('x');
     expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
 
-    await userEvent.keyboard('{Backspace}');
+    userEvent.keyboard('{Backspace}');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];
-    await userEvent.click(option);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(option);
+    });
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -153,18 +165,21 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(' ');
+    });
 
     expect(handleFilterChange).not.toHaveBeenCalled();
 
-    await userEvent.keyboard(' x');
+    userEvent.keyboard(' x');
     expect(handleFilterChange).toHaveBeenLastCalledWith({
       query: ' x',
       queryNormalized: 'x',
     });
 
-    await userEvent.keyboard('{Escape}');
+    userEvent.keyboard('{Escape}');
     await waitFor(() => {
       expect(handleFilterChange).toHaveBeenLastCalledWith({
         query: '',
@@ -172,7 +187,10 @@ describe('SelectInput', () => {
       });
     });
 
-    await userEvent.click(trigger);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
@@ -190,13 +208,16 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    await userEvent.click(trigger);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
 
     const listbox = screen.getByRole('listbox');
     const options = within(listbox).getAllByRole('option');
-    for (const option of options) {
-      await userEvent.click(option);
-    }
+    options.forEach((option) => {
+      userEvent.click(option);
+    });
 
     expect(trigger).toHaveTextContent('USD, EUR');
   });

package/src/link/Link.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '../test-utils';
 
 import Link from '.';

package/src/listItem/ListItem.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import ActionButton from '../actionButton/ActionButton';
 import { render, screen, within } from '../test-utils';
 

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -62,11 +62,11 @@ describe('MoneyInput', () => {
     ['1±!@#$^*,_+?><2', '1,2'],
     ['12,3', '12,3'],
     ['12.3', '12.3'],
-  ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
+  ])("ignores the letters when typed '%s' and shows '%s'", (testValue, expectedValue) => {
     render(<MoneyInput {...props} amount={null} />);
 
     const input = screen.getByRole('textbox');
-    await userEvent.type(input, testValue);
+    userEvent.type(input, testValue);
     expect(input).toHaveValue(expectedValue);
   });
 

package/src/popover/Popover.spec.tsx

@@ -29,7 +29,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
 
       await waitForPanel();
       expect(getPanel()).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe('Popover', () => {
         </Popover>,
       ));
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getTitle()).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
 
       expect(getTitle()).not.toBeInTheDocument();
     });
@@ -67,7 +67,7 @@ describe('Popover', () => {
 
       expect(getPanel()).not.toBeInTheDocument();
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getPanel()).toBeInTheDocument();
@@ -79,19 +79,19 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', async () => {
+    it('renders when is open', () => {
       ({ container } = render(
         <Popover {...props}>
           <button type="button">Open</button>
         </Popover>,
       ));
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
 
       expect(container).toMatchSnapshot();
     });
 
-    it('renders BottomSheet onClick', async () => {
+    it('renders BottomSheet onClick', () => {
       render(
         <Popover {...props}>
           <button type="button">Open</button>
@@ -100,7 +100,7 @@ describe('Popover', () => {
 
       expect(getBottomSheet()).not.toBeInTheDocument();
 
-      await userEvent.click(screen.getByText('Open'));
+      userEvent.click(screen.getByText('Open'));
 
       expect(getBottomSheet()).toBeInTheDocument();
     });
@@ -115,11 +115,11 @@ describe('Popover', () => {
     );
 
     expect(handleOnClose).not.toHaveBeenCalled();
-    await userEvent.click(screen.getByText('Open'));
+    userEvent.click(screen.getByText('Open'));
     await waitForPanel();
     const dimmer = getDimmer();
     if (dimmer != null) {
-      await userEvent.click(dimmer);
+      userEvent.click(dimmer);
     }
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });

package/src/progress/Progress.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render } from '../test-utils';
 
 import Progress from '.';

package/src/progressBar/ProgressBar.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '../test-utils';
 
 import ProgressBar from './ProgressBar';