@transferwise/components 46.84.0 → 46.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.84.0",
+  "version": "46.84.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.20.1",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
+import { expect, fn, type Mock, screen, userEvent, within, waitFor } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
@@ -75,7 +75,7 @@ export const Months: Story<Month | null> = {
 
     await step('renders placeholder', async () => {
       const triggerButton = canvas.getByRole('combobox');
-      await expect(triggerButton).toHaveTextContent('Month');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('Month'));
     });
 
     await step('selects option via mouse', async () => {
@@ -89,7 +89,7 @@ export const Months: Story<Month | null> = {
       });
       await userEvent.click(option);
 
-      await expect(triggerButton).toHaveTextContent('May');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('May'));
     });
   },
 };
@@ -189,27 +189,61 @@ const CurrenciesArgs = {
 export const Currencies: Story<Currency> = {
   args: CurrenciesArgs,
   play: async ({ step }) => {
-    await step('filters options via keyboard', async () => {
+    await step('Tab to the combobox', async () => {
       await userEvent.tab();
-      await userEvent.keyboard(' ');
+    });
 
-      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(8);
-      await expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument();
+    await step('Open the combobox', async () => {
+      await userEvent.keyboard(' ');
+    });
 
-      const input = screen.getByRole('combobox');
+    await step('Check if options are displayed', async () => {
+      await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(8));
+      await waitFor(async () => expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument());
+    });
 
-      await wait(0); // TODO: Remove
+    await step('Type "huf" in the combobox', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, 'huf');
-      await expect(
-        within(screen.getByRole('listbox')).queryByRole('option'),
-      ).not.toBeInTheDocument();
-      await expect(screen.getByText(/^It’s not possible use HUF yet./u)).toBeInTheDocument();
+    });
 
+    await step('Check if no options are displayed', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      await expect(await screen.findByText(/^No results found/u)).toBeInTheDocument();
+      await expect(await screen.findByText(/^It’s not possible use HUF yet./u)).toBeInTheDocument();
+      await waitFor(
+        async () => {
+          await expect(screen.queryAllByRole('option')).toHaveLength(0);
+        },
+        { timeout: 1500 },
+      );
+    });
+
+    await step('Remove last two characters', async () => {
+      await wait(500);
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, '{Backspace}{Backspace}');
-      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2);
+    });
+
+    await step('Check if two options are displayed', async () => {
+      await waitFor(async () =>
+        expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2),
+      );
+    });
 
+    await step('Type "e" in the combobox', async () => {
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, '{Backspace}e');
-      await expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+
+    await step('Check if aria-activedescendant is not set', async () => {
+      const input = screen.getByRole('combobox');
+      await waitFor(async () => expect(input).toHaveAttribute('aria-activedescendant'));
     });
   },
 };
@@ -234,18 +268,24 @@ export const MultipleCurrencies: Story<Currency, true> = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step('selects multiple options via mouse', async () => {
+    await step('Open the combobox', async () => {
       const triggerButton = canvas.getByRole('combobox');
-
       await userEvent.click(triggerButton);
+      await wait(500);
       await userEvent.unhover(triggerButton);
+    });
 
+    await step('Select EUR option', async () => {
       const option = within(screen.getByRole('listbox')).getAllByRole('option', {
         name: /^EUR/u,
       })[0];
+      await wait(500);
       await userEvent.click(option);
+    });
 
-      await expect(triggerButton).toHaveTextContent('USD, EUR');
+    await step('Check if selected options are displayed', async () => {
+      const triggerButton = document.querySelector('button[role="combobox"]');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('USD, EUR'));
     });
   },
 };
@@ -270,11 +310,13 @@ export const CustomTrigger: Story<Month> = {
     ),
     onChange: fn() satisfies Mock,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+    });
   },
 };
 
@@ -315,11 +357,13 @@ export const Advanced: Story<Month> = {
     filterPlaceholder: 'Type a month’s name',
     onChange: fn() satisfies Mock,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+    });
   },
 };
 

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveAnchor from '..';
+import PrimitiveAnchor from '../src';
 
 const meta = {
   title: 'Primitives/Anchor/Tests',
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.click(link);
-    await expect(link).toHaveTextContent('Clicked!');
+
+    await step('Click the link', async () => {
+      await userEvent.click(link);
+    });
+
+    await step('Check if link text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -46,12 +52,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await expect(link).toHaveTextContent('Focused!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -65,14 +77,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
-    await expect(link).toHaveTextContent('Blurred!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+    });
+
+    await step('Tab away from the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -86,12 +110,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.hover(link);
-    await expect(link).toHaveTextContent('Hovered!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Check if link text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -105,12 +134,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.unhover(link);
-    await expect(link).toHaveTextContent('Left!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Unhover the link', async () => {
+      await userEvent.unhover(link);
+    });
+
+    await step('Check if link text changes to "Left!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -124,14 +162,19 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.tab();
-    await wait();
-    await userEvent.keyboard('{ArrowDown}');
-    await expect(link).toHaveTextContent('Key Pressed!');
+
+    await step('Press ArrowDown key on the link', async () => {
+      await userEvent.tab();
+      await wait();
+      await userEvent.keyboard('{ArrowDown}');
+    });
+
+    await step('Check if link text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -153,11 +196,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const TabIndexBehavior: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link does not have focus', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveButton from '..';
+import PrimitiveButton from '../src';
 
 const meta = {
   title: 'Primitives/Button/Tests',
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Clicked!');
+
+    await step('Click the button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -40,12 +46,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -59,14 +71,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
-    await expect(button).toHaveTextContent('Blurred!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+    });
+
+    await step('Tab away from the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -80,11 +104,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Hovered!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -98,11 +128,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Left!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Unhover the button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text changes to "Left!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -116,11 +156,17 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Key Pressed!');
+
+    await step('Press Enter key on the button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -134,11 +180,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const DisabledClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Click the disabled button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -150,11 +202,17 @@ export const DisabledClickInteraction: Story = {
 };
 
 export const DisabledFocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -166,11 +224,17 @@ export const DisabledFocusInteraction: Story = {
 };
 
 export const DisabledBlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -182,11 +246,17 @@ export const DisabledBlurInteraction: Story = {
 };
 
 export const DisabledKeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Press Enter key on the disabled button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -198,11 +268,17 @@ export const DisabledKeyDownInteraction: Story = {
 };
 
 export const DisabledMouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Hover over the disabled button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -214,11 +290,17 @@ export const DisabledMouseEnterInteraction: Story = {
 };
 
 export const DisabledMouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Unhover the disabled button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (