@transferwise/components 46.84.0 → 46.85.0

package/src/navigationOption/NavigationOption.spec.tsx

@@ -0,0 +1,113 @@
+import { render, screen, userEvent } from '../test-utils';
+import type { PropsWithChildren } from 'react';
+
+import NavigationOption, { type NavigationOptionProps } from './NavigationOption';
+
+describe('Navigation option', () => {
+  const initialProps = {
+    id: 'componentId',
+    name: 'componentName',
+    title: 'Component Title',
+    content: <img alt="contentImage" />,
+    media: <img alt="media" />,
+    onClick: jest.fn(),
+    complex: true,
+  };
+  const customRender = (overrides: Partial<NavigationOptionProps> = {}) =>
+    render(<NavigationOption {...initialProps} {...overrides} />);
+
+  afterEach(jest.resetAllMocks);
+
+  describe('render as', () => {
+    it('should render `button` when a `href` and `as` is not passed', () => {
+      customRender();
+      expect(
+        screen.getByRole('button', { name: new RegExp(initialProps.title) }),
+      ).toBeInTheDocument();
+    });
+
+    it('should render anchor when a `href` is passed', () => {
+      const href = 'https://wise.com';
+      customRender({ href });
+      expect(screen.getByRole('link', { name: new RegExp(initialProps.title) })).toHaveAttribute(
+        'href',
+        href,
+      );
+    });
+
+    it('should respect `as` prop', () => {
+      const View = (props: PropsWithChildren) => <div {...props} data-testid="wrapper" />;
+      customRender({ as: View });
+
+      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+  });
+
+  it('should render `media`', () => {
+    customRender();
+    expect(screen.getByRole('img', { name: 'media' })).toBeInTheDocument();
+  });
+
+  it('passes `id`', () => {
+    customRender();
+    expect(screen.getByRole('button')).toHaveAttribute('id', initialProps.id);
+  });
+
+  it('passes `name`', () => {
+    customRender();
+    expect(screen.getByRole('button')).toHaveAttribute('name', initialProps.name);
+  });
+
+  describe('disabled', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('button')).toBeEnabled();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ disabled: true });
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+
+    it('calls click handler on option click when not disabled', async () => {
+      customRender();
+      await userEvent.click(screen.getByRole('button'));
+      expect(initialProps.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call click handler when disabled', async () => {
+      customRender({ disabled: true });
+      await userEvent.click(screen.getByRole('button'));
+      expect(initialProps.onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('rendering circle', () => {
+    it('should render it by default', () => {
+      customRender();
+      expect(screen.getByRole('img', { name: 'media' }).parentNode).toHaveClass('circle');
+    });
+
+    it('should respect `showMediaCircle` prop', () => {
+      customRender({ showMediaCircle: false });
+      expect(screen.getByRole('img', { name: 'media' }).parentNode).not.toHaveClass('circle');
+    });
+  });
+
+  it('should pass correct class names to Option', () => {
+    customRender({ className: 'test-class-name' });
+    expect(screen.getByRole('button')).toHaveClass('test-class-name');
+  });
+
+  describe('isContainerAligned', () => {
+    it('should not be aligned by default', () => {
+      const { container } = customRender();
+      expect(container.querySelector('.np-option')).not.toHaveClass('np-option__container-aligned');
+    });
+
+    it('renders aligned with container content', () => {
+      const { container } = customRender({ isContainerAligned: true });
+      expect(container.querySelector('.np-option')).toHaveClass('np-option__container-aligned');
+    });
+  });
+});

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 (

package/src/radioOption/RadioOption.spec.tsx

@@ -0,0 +1,73 @@
+import { render, screen, userEvent } from '../test-utils';
+import RadioOption, { type RadioOptionProps } from '.';
+
+describe('Radio option', () => {
+  const initialProps = {
+    id: 'componentId',
+    name: 'componentName',
+    title: 'Component Title',
+    content: <img alt="contentImage" />,
+    onChange: jest.fn(),
+  };
+
+  const customRender = (overrides: Partial<RadioOptionProps> = {}) =>
+    render(<RadioOption {...initialProps} {...overrides} />);
+
+  it('should render `media`', () => {
+    const Icon = <img alt="media" />;
+    customRender({ media: Icon });
+    expect(screen.getByRole('img', { name: 'media' })).toBeInTheDocument();
+  });
+
+  it('passes props to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('id', initialProps.id);
+  });
+
+  it('passes name to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('name', initialProps.name);
+  });
+
+  describe('checked', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ checked: true });
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+  });
+
+  it('passes change handler to radio button', async () => {
+    customRender();
+    await userEvent.click(screen.getByRole('radio'));
+    expect(initialProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  describe('disabled', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).toBeEnabled();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ disabled: true });
+      expect(screen.getByRole('radio')).toBeDisabled();
+    });
+  });
+
+  describe('isContainerAligned', () => {
+    it('should not be aligned by default', () => {
+      const { container } = customRender();
+      expect(container.querySelector('.np-option')).not.toHaveClass('np-option__container-aligned');
+    });
+
+    it('renders aligned with container content', () => {
+      const { container } = customRender({ isContainerAligned: true });
+      expect(container.querySelector('.np-option')).toHaveClass('np-option__container-aligned');
+    });
+  });
+});