@transferwise/components 46.38.0 → 46.39.0

package/src/select/Select.spec.js

@@ -42,16 +42,16 @@ describe('Select', () => {
     global.requestAnimationFrame = originalRAF;
   });
 
-  const openSelect = (container) => {
+  const openSelect = async (container) => {
     const button = screen.getByRole('button');
-    userEvent.click(button);
+    await userEvent.click(button);
   };
 
   describe('search property', () => {
     it('should focus input when dropdown is open', async () => {
       const { container } = render(<Select {...props} search />);
 
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
 
       expect(input).toHaveFocus();
@@ -60,7 +60,7 @@ describe('Select', () => {
     it('should pass id to search box', async () => {
       const { container } = render(<Select {...props} search id="dummy" />);
 
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
 
       expect(input).toHaveAttribute('id', 'dummy-searchbox');
@@ -69,9 +69,9 @@ describe('Select', () => {
     it('should filter the options with the default filter function', async () => {
       const { container } = render(<Select {...props} search />);
 
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'yo');
+      await userEvent.type(input, 'yo');
 
       // Not ideal, this higlights accessibility issues.
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
@@ -113,14 +113,14 @@ describe('Select', () => {
       beforeEach(async () => {
         const { container } = render(<Select {...props} options={searchableOptions} search />);
 
-        openSelect(container);
+        await openSelect(container);
 
         input = screen.getByPlaceholderText('Search...');
       });
 
       describe('when searching by label', () => {
-        it('should display the search result', () => {
-          userEvent.type(input, 'second_label');
+        it('should display the search result', async () => {
+          await userEvent.type(input, 'second_label');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.getByText('second_label')).toBeInTheDocument();
@@ -129,8 +129,8 @@ describe('Select', () => {
       });
 
       describe('when searching by note', () => {
-        it('should display the search result', () => {
-          userEvent.type(input, 'third_note');
+        it('should display the search result', async () => {
+          await userEvent.type(input, 'third_note');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -139,8 +139,8 @@ describe('Select', () => {
       });
 
       describe('when searching by secondary', () => {
-        it('should display the search result', () => {
-          userEvent.type(input, 'first_secondary');
+        it('should display the search result', async () => {
+          await userEvent.type(input, 'first_secondary');
 
           expect(screen.getByText('first_label')).toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -149,8 +149,8 @@ describe('Select', () => {
       });
 
       describe('when searching by currency', () => {
-        it('should display the search result', () => {
-          userEvent.type(input, 'usd');
+        it('should display the search result', async () => {
+          await userEvent.type(input, 'usd');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.getByText('second_label')).toBeInTheDocument();
@@ -159,8 +159,8 @@ describe('Select', () => {
       });
 
       describe('when searching by searchStrings', () => {
-        it('should display the search result', () => {
-          userEvent.type(input, 'third_search_string');
+        it('should display the search result', async () => {
+          await userEvent.type(input, 'third_search_string');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -169,7 +169,7 @@ describe('Select', () => {
       });
     });
 
-    it('should be able to search disabled options', () => {
+    it('should be able to search disabled options', async () => {
       const { container } = render(
         <Select
           {...props}
@@ -180,9 +180,9 @@ describe('Select', () => {
           ]}
         />,
       );
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'Disabled');
+      await userEvent.type(input, 'Disabled');
       expect(screen.queryByText('Enabled Option')).not.toBeInTheDocument();
       expect(screen.getByText('Disabled Option')).toBeInTheDocument();
     });
@@ -199,9 +199,9 @@ describe('Select', () => {
         />,
       );
 
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'HUF');
+      await userEvent.type(input, 'HUF');
 
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
         container.querySelector('.np-dropdown-item'),
@@ -224,9 +224,9 @@ describe('Select', () => {
         />,
       );
 
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'Tallinn');
+      await userEvent.type(input, 'Tallinn');
 
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
         container.querySelector('.np-dropdown-item'),
@@ -239,9 +239,9 @@ describe('Select', () => {
     it('should filter the options with a custom search function', async () => {
       const searchFunction = jest.fn();
       const { container } = render(<Select {...props} search={searchFunction} />);
-      openSelect(container);
+      await openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'o');
+      await userEvent.type(input, 'o');
 
       expect(searchFunction).toHaveBeenCalledTimes(3);
     });
@@ -249,10 +249,10 @@ describe('Select', () => {
     it('should filter the options with a custom search function with 3 results', async () => {
       const searchFunction = (option, searchValue) => option.label.includes(searchValue);
       const { container } = render(<Select {...props} search={searchFunction} />);
-      openSelect(container);
+      await openSelect(container);
 
       const input = screen.getByPlaceholderText('Search...');
-      userEvent.type(input, 'o');
+      await userEvent.type(input, 'o');
 
       expect(screen.getByRole('listbox').children).toHaveLength(3);
     });
@@ -260,7 +260,7 @@ describe('Select', () => {
 
   it('show list of options in dropdown (Panel) on desktop', async () => {
     const { container } = render(<Select {...props} />);
-    openSelect(container);
+    await openSelect(container);
 
     const drawer = document.querySelector('.np-panel');
     expect(drawer).toBeInTheDocument();
@@ -269,7 +269,7 @@ describe('Select', () => {
   it('show list of options in Bottom Sheet when on mobile', async () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} />);
-    openSelect(container);
+    await openSelect(container);
 
     const bottomSheet = await screen.findByRole('dialog');
 
@@ -279,7 +279,7 @@ describe('Select', () => {
   it('show list of options in Drawer when on mobile and search in enabled', async () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} search />);
-    openSelect(container);
+    await openSelect(container);
 
     await waitFor(() => {
       const drawer = document.querySelector('.np-drawer');
@@ -289,7 +289,7 @@ describe('Select', () => {
 
   it('focuses dropdown options when clicked', async () => {
     const { container } = render(<Select {...props} />);
-    openSelect(container);
+    await openSelect(container);
 
     const dropdown = screen.getByRole('listbox');
     expect(dropdown).toHaveFocus();
@@ -299,7 +299,7 @@ describe('Select', () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} onSearchChange={jest.fn()} />);
 
-    openSelect(container);
+    await openSelect(container);
     const input = await screen.findByPlaceholderText('Search...');
 
     expect(input).not.toHaveFocus();
@@ -308,7 +308,7 @@ describe('Select', () => {
   it('on not touch device focuses on the search box once opened', async () => {
     const { container } = render(<Select {...props} search onSearchChange={jest.fn()} />);
 
-    openSelect(container);
+    await openSelect(container);
     const input = screen.getByPlaceholderText('Search...');
 
     expect(input).toHaveFocus();
@@ -316,7 +316,7 @@ describe('Select', () => {
 
   it('renders controls with fallback id', async () => {
     const { container } = render(<Select {...props} />);
-    openSelect(container);
+    await openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -327,7 +327,7 @@ describe('Select', () => {
 
   it('renders controls with passed id', async () => {
     const { container } = render(<Select id="my-select-component" {...props} />);
-    openSelect(container);
+    await openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -338,7 +338,7 @@ describe('Select', () => {
 
   it('renders button with correct aria-controls attribute', async () => {
     const { container } = render(<Select {...props} search onSearchChange={jest.fn()} />);
-    openSelect(container);
+    await openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -353,11 +353,11 @@ describe('Select', () => {
     it('navigates to the next item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -372,17 +372,17 @@ describe('Select', () => {
         />,
       );
 
-      openSelect(container);
+      await openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -392,17 +392,17 @@ describe('Select', () => {
     it('cannot navigate past the first list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      userEvent.keyboard('[ArrowUp]');
+      await userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowUp]');
+      await userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -412,29 +412,29 @@ describe('Select', () => {
     it('cannot navigate past the last list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'dawg' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -445,11 +445,11 @@ describe('Select', () => {
       it('maintains focus on search but visually indicates which item is focused with keyboard navigation and selects it on enter', async () => {
         const { container } = render(<Select {...props} search />);
 
-        openSelect(container);
+        await openSelect(container);
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        userEvent.keyboard('[ArrowDown]');
+        await userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'yo' })).toHaveClass(
@@ -460,7 +460,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        userEvent.keyboard('[ArrowDown]');
+        await userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'dawg' })).toHaveClass(
@@ -471,7 +471,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        userEvent.keyboard('[Enter]');
+        await userEvent.keyboard('[Enter]');
 
         expect(props.onChange).toHaveBeenCalledWith({ label: 'dawg', value: 1 });
       });
@@ -486,11 +486,11 @@ describe('Select', () => {
     it('navigates to the next item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -505,17 +505,17 @@ describe('Select', () => {
         />,
       );
 
-      openSelect(container);
+      await openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -525,17 +525,17 @@ describe('Select', () => {
     it('cannot navigate past the first list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      userEvent.keyboard('[ArrowUp]');
+      await userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowUp]');
+      await userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -545,29 +545,29 @@ describe('Select', () => {
     it('cannot navigate past the last list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      openSelect(container);
+      await openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'dawg' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
       });
 
-      userEvent.keyboard('[ArrowDown]');
+      await userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -582,13 +582,13 @@ describe('Select', () => {
       it('visually indicates which item is focused with keyboard navigation and selects it on enter', async () => {
         const { container } = render(<Select {...props} search />);
 
-        openSelect(container);
+        await openSelect(container);
 
         await waitFor(() => {
           expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
         });
 
-        userEvent.keyboard('[ArrowDown]');
+        await userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'yo' })).toHaveClass(
@@ -599,7 +599,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
 
-        userEvent.keyboard('[ArrowDown]');
+        await userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'dawg' })).toHaveClass(
@@ -610,7 +610,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
 
-        userEvent.keyboard('[Enter]');
+        await userEvent.keyboard('[Enter]');
 
         expect(props.onChange).toHaveBeenCalledWith({ label: 'dawg', value: 1 });
       });

package/src/test-utils/index.js

@@ -1,5 +1,5 @@
 import { render, renderHook } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Provider } from '..';
 import { DEFAULT_LOCALE } from '../common/locale';

package/src/test-utils/jest.setup.js

@@ -1,3 +1,5 @@
+require('@testing-library/jest-dom');
+
 const { default: Adapter } = require('@cfaester/enzyme-adapter-react-18');
 const Enzyme = require('enzyme');
 const util = require('node:util');

package/src/tooltip/Tooltip.spec.tsx

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