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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-40b5678",
+  "version": "0.0.0-experimental-6ad430a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -66,10 +66,10 @@
     "@storybook/test": "^7.6.19",
     "@storybook/theming": "^7.6.19",
     "@storybook/types": "^7.6.19",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-tokens": "^8.9.2",
     "@tsconfig/recommended": "^1.0.6",
@@ -82,6 +82,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "4.4.10",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@wise/art": "^2.7.0",
     "babel-plugin-formatjs": "^10.5.14",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -94,8 +95,8 @@
     "rollup": "^4.17.2",
     "storybook": "^7.6.19",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.3.0",
-    "@transferwise/neptune-css": "14.10.0"
+    "@transferwise/neptune-css": "14.10.0",
+    "@wise/components-theming": "1.3.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/accordion/Accordion.spec.js

@@ -49,25 +49,25 @@ describe('Accordion', () => {
   });
 
   describe('open and close', () => {
-    it('can open and close an item when clicked', async () => {
+    it('can open and close an item when clicked', () => {
       const item = items[0];
       render(<Accordion items={items} />);
 
-      await userEvent.click(screen.getByRole('button', { name: item.title }));
+      userEvent.click(screen.getByRole('button', { name: item.title }));
       expect(screen.getByText(item.content)).toBeInTheDocument();
 
-      await userEvent.click(screen.getByRole('button', { name: item.title }));
+      userEvent.click(screen.getByRole('button', { name: item.title }));
       expect(screen.queryByText(item.content)).not.toBeInTheDocument();
     });
   });
 
   describe('onClick', () => {
-    it('calls onClick when an item is clicked', async () => {
+    it('calls onClick when an item is clicked', () => {
       const onClick = jest.fn();
 
       render(<Accordion items={items} onClick={onClick} />);
 
-      await userEvent.click(screen.getAllByRole('button')[0]);
+      userEvent.click(screen.getAllByRole('button')[0]);
 
       expect(onClick).toHaveBeenCalledTimes(1);
       expect(onClick).toHaveBeenCalledWith(0);

package/src/accordion/AccordionItem/AccordionItem.spec.js

@@ -39,12 +39,12 @@ describe('AccordionItem', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when item is clicked', async () => {
+    it('calls onClick when item is clicked', () => {
       const onClick = jest.fn();
 
       render(<AccordionItem {...props} onClick={onClick} />);
 
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
 
       expect(onClick).toHaveBeenCalledTimes(1);
     });

package/src/actionButton/ActionButton.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen, userEvent } from '../test-utils';
 
 import ActionButton from '.';
@@ -39,17 +40,17 @@ describe('ActionButton', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
+    it('calls onClick when clicked', () => {
       const onClick = jest.fn();
       render(<ActionButton {...props} onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', async () => {
+    it('does not call onClick when clicked if disabled', () => {
       const onClick = jest.fn();
       render(<ActionButton {...props} disabled onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/alert/Alert.spec.tsx

@@ -175,14 +175,14 @@ describe('Alert', () => {
       expect(element).not.toHaveAttribute('target');
     });
 
-    it('sets text and onClick', async () => {
+    it('sets text and onClick', () => {
       action = {
         onClick: jest.fn(),
         text: 'Learn more',
       };
       render(<Alert action={action} message={message} />);
 
-      await userEvent.click(screen.getByText('Learn more'));
+      userEvent.click(screen.getByText('Learn more'));
 
       expect(action.onClick).toHaveBeenCalled();
     });
@@ -246,12 +246,12 @@ describe('Alert', () => {
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
-    it('calls onDismiss when the close button is clicked', async () => {
+    it('calls onDismiss when the close button is clicked', () => {
       const onDismiss = jest.fn();
 
       render(<Alert message={message} onDismiss={onDismiss} />);
 
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
 
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });

package/src/button/Button.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { createRef } from 'react';
 
+import '@testing-library/jest-dom';
 import { ControlType, Type, Priority, Size } from '../common';
 import { render, cleanup, screen, userEvent } from '../test-utils';
 
@@ -93,17 +94,17 @@ describe('Button', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
+    it('calls onClick when clicked', () => {
       const onClick = jest.fn();
       render(<Button {...props} onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', async () => {
+    it('does not call onClick when clicked if disabled', () => {
       const onClick = jest.fn();
       render(<Button {...props} disabled onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/card/Card.spec.tsx

@@ -68,10 +68,10 @@ describe('Card', () => {
       expect(screen.getByTestId(dataTestId)).toHaveClass('np-card--inactive');
     });
 
-    it("doesn't call onClick when clicked", async () => {
+    it("doesn't call onClick when clicked", () => {
       renderCard();
 
-      await userEvent.click(screen.getByText(defaultProps.title));
+      userEvent.click(screen.getByText(defaultProps.title));
 
       expect(defaultProps.onClick).not.toHaveBeenCalled();
     });
@@ -84,7 +84,7 @@ describe('Card', () => {
   });
 
   describe('when there is children prop', () => {
-    it('calls on onClick with inverse of current isExpanded value when clicked', async () => {
+    it('calls on onClick with inverse of current isExpanded value when clicked', () => {
       const onClick = jest.fn();
       renderCard({
         'aria-label': 'test',
@@ -94,7 +94,7 @@ describe('Card', () => {
         onClick,
       });
 
-      await userEvent.click(screen.getByRole('button', { name: 'test' }));
+      userEvent.click(screen.getByRole('button', { name: 'test' }));
       expect(onClick).toHaveBeenCalledWith(true);
     });
 

package/src/carousel/Carousel.spec.tsx

@@ -69,7 +69,7 @@ describe('Carousel', () => {
     expect(screen.getByText('Get Quick Pay')).toBeInTheDocument();
   });
 
-  it('allows user to scroll carousel to the right when at start', async () => {
+  it('allows user to scroll carousel to the right when at start', () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -80,12 +80,12 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeDisabled();
     expect(scrollRightButton).toBeEnabled();
 
-    await userEvent.click(scrollRightButton);
+    userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left or right when in middle', async () => {
+  it('allows user to scroll carousel to the left or right when in middle', () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -99,16 +99,16 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeEnabled();
 
-    await userEvent.click(scrollLeftButton);
+    userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
 
-    await userEvent.click(scrollRightButton);
+    userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left when at end', async () => {
+  it('allows user to scroll carousel to the left when at end', () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -122,7 +122,7 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeDisabled();
 
-    await userEvent.click(scrollLeftButton);
+    userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
   });
@@ -142,23 +142,23 @@ describe('Carousel', () => {
     expect(focusSpy).toHaveBeenCalledTimes(0);
     expect(firstCard).toHaveClass('carousel__card--focused');
 
-    await userEvent.click(yourWebsiteIndicator);
+    userEvent.click(yourWebsiteIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(1);
     expect(secondCard).toHaveClass('carousel__card--focused');
 
-    await userEvent.click(shopOrStallIndicator);
+    userEvent.click(shopOrStallIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(2);
     expect(thirdCard).toHaveClass('carousel__card--focused');
 
-    await userEvent.click(yourInvoiceIndicator);
+    userEvent.click(yourInvoiceIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(3);
     expect(firstCard).toHaveClass('carousel__card--focused');
   });
 
-  it('is focused on the first element and lets user navigate through them', async () => {
+  it('is focused on the first element and lets user navigate through them', () => {
     renderCarousel();
 
     const firstCard = getFirstCard();
@@ -170,27 +170,27 @@ describe('Carousel', () => {
     firstCard.focus();
     expect(firstCard).toHaveFocus();
 
-    await userEvent.keyboard('{arrowright}');
+    userEvent.keyboard('{arrowright}');
 
     expect(secondCard).toHaveFocus();
 
-    await userEvent.keyboard('{arrowright}');
+    userEvent.keyboard('{arrowright}');
 
     expect(thirdCard).toHaveFocus();
 
-    await userEvent.keyboard('{arrowleft}');
+    userEvent.keyboard('{arrowleft}');
 
     expect(secondCard).toHaveFocus();
 
-    await userEvent.keyboard('{arrowleft}');
+    userEvent.keyboard('{arrowleft}');
 
     expect(firstCard).toHaveFocus();
   });
 
-  it('calls onClick when a card is clicked', async () => {
+  it('calls onClick when a card is clicked', () => {
     renderCarousel();
 
-    await userEvent.click(getFirstCard());
+    userEvent.click(getFirstCard());
 
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(yourInvoiceOnClick).toHaveBeenCalledTimes(1);

package/src/checkbox/Checkbox.spec.tsx

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 import { render, fireEvent, screen } from '@testing-library/react';
 
 import Checkbox, { CheckboxProps } from '.';

package/src/checkboxButton/CheckboxButton.spec.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jest/expect-expect */
+import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxButton from '.';

package/src/checkboxOption/CheckboxOption.spec.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jest/expect-expect */
+import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxOption from '.';

package/src/chevron/Chevron.spec.tsx

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

package/src/chips/Chips.spec.tsx

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

package/src/circularButton/CircularButton.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { Plus } from '@transferwise/icons';
 
 import { ControlType, Priority } from '../common';
@@ -53,17 +54,17 @@ describe('CircularButton', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
+    it('calls onClick when clicked', () => {
       const onClick = jest.fn();
       render(<CircularButton {...props} onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', async () => {
+    it('does not call onClick when clicked if disabled', () => {
       const onClick = jest.fn();
       render(<CircularButton {...props} disabled onClick={onClick} />);
-      await userEvent.click(screen.getByRole('button'));
+      userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/common/RadioButton/RadioButton.spec.tsx

@@ -21,7 +21,7 @@ describe('Radio button', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('responds to user input', async () => {
+  it('responds to user input', () => {
     const onChange = jest.fn();
     render(
       <label htmlFor="an-id">
@@ -29,7 +29,7 @@ describe('Radio button', () => {
       </label>,
     );
 
-    await userEvent.click(screen.getByLabelText('A radio'));
+    userEvent.click(screen.getByLabelText('A radio'));
 
     expect(onChange).toHaveBeenCalledWith('a-value');
   });

package/src/common/closeButton/CloseButton.spec.tsx

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

package/src/common/flowHeader/FlowHeader.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 
 import { Layout } from '../propsValues/layouts';

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -4,8 +4,6 @@ import DateLookup, { DateLookupProps } from './DateLookup';
 
 import { act } from 'react';
 
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-
 mockMatchMedia();
 mockResizeObserver();
 
@@ -38,12 +36,12 @@ describe('DateLookup', () => {
     async (text) => {
       render(<DateLookup value={initialValue} onChange={() => {}} />);
 
-      await user.tab();
-      await user.keyboard(text);
+      userEvent.tab();
+      userEvent.keyboard(text);
 
       expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
 
-      await user.keyboard('{Escape}');
+      userEvent.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -55,7 +53,7 @@ describe('DateLookup', () => {
   const setupAndOpenWithMouse = async (props: Partial<DateLookupProps> = {}) => {
     const view = render(<DateLookup value={initialValue} onChange={() => {}} {...props} />);
 
-    await user.click(screen.getByRole('button'));
+    userEvent.click(screen.getByRole('button'));
     await act(async () => {
       await jest.runOnlyPendingTimersAsync();
     });
@@ -70,7 +68,7 @@ describe('DateLookup', () => {
 
     const dimmerElement = screen.getByRole('dialog').parentElement?.parentElement;
     if (dimmerElement != null) {
-      await user.click(dimmerElement);
+      userEvent.click(dimmerElement);
     }
     await act(async () => {
       await jest.runOnlyPendingTimersAsync();
@@ -91,13 +89,13 @@ describe('DateLookup', () => {
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      await user.keyboard(text);
+      userEvent.keyboard(text);
 
       const value = new Date(initialValue);
       value.setDate(initialValue.getDate() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      await user.keyboard('{Escape}');
+      userEvent.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -116,20 +114,20 @@ describe('DateLookup', () => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
-      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      await user.keyboard(text);
+      userEvent.keyboard(text);
 
       const value = new Date(initialValue);
       value.setFullYear(initialValue.getFullYear() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      await user.keyboard('{Escape}');
+      userEvent.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -148,24 +146,24 @@ describe('DateLookup', () => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
-      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
-      await user.keyboard(' ');
+      userEvent.keyboard(' ');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      await user.keyboard(text);
+      userEvent.keyboard(text);
 
       const value = new Date(initialValue);
       value.setMonth(initialValue.getMonth() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      await user.keyboard('{Escape}');
+      userEvent.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -180,7 +178,7 @@ describe('DateLookup', () => {
     const handleChange = jest.fn();
     await setupAndOpenWithMouse({ min, onChange: handleChange });
 
-    await user.keyboard('{ArrowLeft}{ArrowLeft}');
+    userEvent.keyboard('{ArrowLeft}{ArrowLeft}');
 
     expect(handleChange).toHaveBeenCalledWith(min);
   });
@@ -191,7 +189,7 @@ describe('DateLookup', () => {
     const handleChange = jest.fn();
     await setupAndOpenWithMouse({ max, onChange: handleChange });
 
-    await user.keyboard('{ArrowRight}{ArrowRight}');
+    userEvent.keyboard('{ArrowRight}{ArrowRight}');
 
     expect(handleChange).toHaveBeenCalledWith(max);
   });