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

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/moneyInput/MoneyInput.story.tsx

@@ -1,9 +1,7 @@
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { addons, useGlobals } from '@storybook/manager-api';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
 import Provider from '../provider/Provider';
@@ -107,7 +105,6 @@ export const SingleCurrency: Story = {
   args: {
     currencies: [],
     selectedCurrency: exampleCurrency.eur,
-    onCurrencyChange: undefined,
   },
 };
 

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -19,5 +19,6 @@ export const Basic = {
     selectProps: {
       className: 'custom-class',
     },
+    onChange: () => {},
   },
 } satisfies Story;

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';

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import React from 'react';
 
 import { render, screen, userEvent, waitFor } from '../test-utils';
@@ -59,30 +60,30 @@ describe('SegmentedControl', () => {
     expect(accountingTab).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('lets the user pick through the segments when it is set to input', async () => {
+  it('lets the user pick through the segments when it is set to input', () => {
     renderSegmentedControl();
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    await userEvent.click(payroll);
+    userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('radio', { name: 'Reporting' });
-    await userEvent.click(reporting);
+    userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
 
-  it('lets the user pick through the segments when it is set to view', async () => {
+  it('lets the user pick through the segments when it is set to view', () => {
     renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
 
     const payroll = screen.getByRole('tab', { name: 'Payroll' });
-    await userEvent.click(payroll);
+    userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('tab', { name: 'Reporting' });
-    await userEvent.click(reporting);
+    userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
@@ -133,11 +134,11 @@ describe('SegmentedControl', () => {
     });
   });
 
-  it('updates the selected segment when the selectedValue prop changes', async () => {
+  it('updates the selected segment when the selectedValue prop changes', () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    await userEvent.click(payroll);
+    userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
@@ -147,7 +148,7 @@ describe('SegmentedControl', () => {
     expect(reporting).toBeChecked();
   });
 
-  it('updates the options when the segments prop changes', async () => {
+  it('updates the options when the segments prop changes', () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const newSegments = [
@@ -166,7 +167,7 @@ describe('SegmentedControl', () => {
     rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
 
     const anotherOne = screen.getByRole('radio', { name: 'Another One' });
-    await userEvent.click(anotherOne);
+    userEvent.click(anotherOne);
 
     expect(onChange).toHaveBeenCalledWith('anotherOne');
   });