@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-e92f7ac

package/src/button/Button/stories/Button.tests.story.tsx

@@ -1,288 +0,0 @@
-import { useState } from 'react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
-import { Meta, StoryObj } from '@storybook/react';
-import Button from '../../src';
-import { Freeze } from '@transferwise/icons';
-
-const meta = {
-  title: 'Actions/Button/Tests',
-  component: Button,
-  args: {
-    children: 'Button text',
-    as: 'button',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export const ClickInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [clicked, setClicked] = useState(false);
-
-    return (
-      <Button {...args} onClick={() => setClicked(true)}>
-        {clicked ? 'Clicked!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const FocusInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [focused, setFocused] = useState(false);
-
-    return (
-      <Button {...args} onFocus={() => setFocused(true)}>
-        {focused ? 'Focused!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const BlurInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [blurred, setBlurred] = useState(false);
-
-    return (
-      <Button {...args} onBlur={() => setBlurred(true)}>
-        {blurred ? 'Blurred!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [hovered, setHovered] = useState(false);
-
-    return (
-      <Button {...args} onMouseEnter={() => setHovered(true)}>
-        {hovered ? 'Hovered!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [left, setLeft] = useState(false);
-
-    return (
-      <Button {...args} onMouseLeave={() => setLeft(true)}>
-        {left ? 'Left!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    const [keyPressed, setKeyPressed] = useState(false);
-
-    return (
-      <Button {...args} onKeyDown={() => setKeyPressed(true)}>
-        {keyPressed ? 'Key Pressed!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-export const DisabledClickInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};
-
-export const DisabledFocusInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};
-
-export const DisabledBlurInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};
-
-export const DisabledKeyDownInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};
-
-export const DisabledMouseEnterInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};
-
-export const DisabledMouseLeaveInteraction: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-
-    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: React.ComponentProps<typeof Button>) {
-    return <Button {...args} disabled />;
-  },
-};

package/src/button/Button/test/Button.spec.tsx

@@ -1,328 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import Button from '..';
-import messages from '../../../i18n/commonMessages/Button.messages';
-import { render } from '../../../test-utils';
-import { Freeze, ArrowRight } from '@transferwise/icons';
-
-beforeAll(() => {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query: string) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    })),
-  });
-});
-
-describe('Button', () => {
-  const defaultProps = {
-    children: 'Click me',
-  };
-
-  const renderButton = (
-    props?: Partial<typeof defaultProps>,
-    locale = 'en',
-    localeMessages = messages,
-  ) => {
-    return render(
-      <Button {...defaultProps} {...props} />,
-      // @ts-expect-error: props be missing properties from type
-      { locale, messages: localeMessages },
-    );
-  };
-
-  it('renders a button by default', () => {
-    renderButton();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveTextContent('Click me');
-  });
-
-  it('applies the correct classes based on props', () => {
-    const props = {
-      ...defaultProps,
-      className: 'custom-class',
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button');
-    expect(button).toHaveClass('custom-class');
-  });
-
-  it('disables the button when disabled is true', () => {
-    const props = {
-      ...defaultProps,
-      disabled: true,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button--disabled');
-    expect(button).toBeDisabled();
-  });
-
-  it('calls onClick when button is clicked', async () => {
-    const handleClick = jest.fn();
-    const props = {
-      ...defaultProps,
-      onClick: handleClick,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    await userEvent.click(button);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onFocus when button is focused', () => {
-    const handleFocus = jest.fn();
-    const props = {
-      ...defaultProps,
-      onFocus: handleFocus,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    fireEvent.focus(button);
-    expect(handleFocus).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onKeyDown when a key is pressed', async () => {
-    const handleKeyDown = jest.fn();
-    const props = {
-      ...defaultProps,
-      onKeyDown: handleKeyDown,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    expect(handleKeyDown).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onBlur when button loses focus', () => {
-    const handleBlur = jest.fn();
-    const props = {
-      ...defaultProps,
-      onBlur: handleBlur,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    fireEvent.blur(button);
-    expect(handleBlur).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onMouseEnter when mouse enters', async () => {
-    const handleMouseEnter = jest.fn();
-    const props = {
-      ...defaultProps,
-      onMouseEnter: handleMouseEnter,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    await userEvent.hover(button);
-    expect(handleMouseEnter).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onMouseLeave when mouse leaves', async () => {
-    const handleMouseLeave = jest.fn();
-    const props = {
-      ...defaultProps,
-      onMouseLeave: handleMouseLeave,
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    await userEvent.unhover(button);
-    expect(handleMouseLeave).toHaveBeenCalledTimes(1);
-  });
-
-  it('sets data-testid attribute', () => {
-    const props = {
-      ...defaultProps,
-      testId: 'custom-id',
-    };
-
-    renderButton(props);
-
-    const button = screen.getByTestId('custom-id');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('sets the type attribute to submit', () => {
-    const props = {
-      ...defaultProps,
-      type: 'submit',
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('type', 'submit');
-  });
-
-  it('sets the type attribute to reset', () => {
-    const props = {
-      ...defaultProps,
-      type: 'reset',
-    };
-
-    renderButton(props);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('type', 'reset');
-  });
-
-  it('sets the type attribute to button by default', () => {
-    renderButton();
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('type', 'button');
-  });
-
-  it('displays the aria-label in Spanish when loading', () => {
-    const props = {
-      ...defaultProps,
-      loading: true,
-    };
-
-    const spanishMessages = {
-      ...messages,
-      'neptune.Button.loadingAriaLabel': 'cargando',
-    };
-
-    renderButton(props, 'es', spanishMessages);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('aria-label', 'cargando');
-  });
-
-  it('displays with one avatar', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ asset: <Freeze /> }],
-    };
-
-    renderButton(props);
-
-    const avatar = screen.getByTestId('freeze-icon');
-    expect(avatar).toBeInTheDocument();
-  });
-
-  it('displays with one avatar and no left icon', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ asset: <Freeze /> }],
-      iconLeft: ArrowRight,
-    };
-
-    renderButton(props);
-
-    const avatar = screen.getByTestId('freeze-icon');
-
-    expect(avatar).toBeInTheDocument();
-    expect(screen.queryByTestId('arrow-left-icon')).not.toBeInTheDocument();
-  });
-
-  it('displays with two avatars', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-    };
-
-    renderButton(props);
-
-    const avatars = screen.getAllByTestId('freeze-icon');
-    avatars.forEach((avatar) => {
-      expect(avatar).toBeInTheDocument();
-    });
-  });
-
-  it('displays with avatar and icon', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ asset: <Freeze /> }],
-      iconRight: ArrowRight,
-    };
-
-    renderButton(props);
-
-    const iconRight = screen.getByTestId('arrow-right-icon');
-    const avatar = screen.getByTestId('freeze-icon');
-
-    expect(avatar).toBeInTheDocument();
-    expect(iconRight).toHaveClass('wds-Button-icon');
-    expect(iconRight).toHaveClass('wds-Button-icon--right');
-  });
-
-  it('displays with a profile name', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ profileName: 'John Doe' }],
-    };
-
-    renderButton(props);
-
-    const avatar = screen.getByText('JD');
-    expect(avatar).toBeInTheDocument();
-  });
-
-  it('displays with a profile image', () => {
-    const props = {
-      ...defaultProps,
-      avatars: [{ imgSrc: '../avatar-rectangle-fox.webp' }],
-    };
-
-    renderButton(props);
-
-    const avatar = screen.getByRole('presentation');
-    expect(avatar).toHaveAttribute('src', '../avatar-rectangle-fox.webp');
-  });
-
-  it('displays with one icon', () => {
-    const props = {
-      ...defaultProps,
-      iconRight: ArrowRight,
-    };
-
-    renderButton(props);
-
-    const iconRight = screen.getByTestId('arrow-right-icon');
-    expect(iconRight).toHaveClass('wds-Button-icon');
-    expect(iconRight).toHaveClass('wds-Button-icon--right');
-  });
-
-  it('displays with two icons', () => {
-    const props = {
-      ...defaultProps,
-      iconRight: ArrowRight,
-      iconLeft: Freeze,
-    };
-
-    renderButton(props);
-
-    const iconRight = screen.getByTestId('arrow-right-icon');
-    const iconLeft = screen.getByTestId('freeze-icon');
-
-    expect(iconRight).toHaveClass('wds-Button-icon');
-    expect(iconRight).toHaveClass('wds-Button-icon--right');
-    expect(iconLeft).toHaveClass('wds-Button-icon');
-    expect(iconLeft).toHaveClass('wds-Button-icon--left');
-  });
-});