@transferwise/components 46.87.2 → 46.88.0

package/src/button/Button.spec.tsx

@@ -1,246 +1,362 @@
-import { createRef } from 'react';
+import { Freeze } from '@transferwise/icons';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import Button, { ButtonProps } from './Button.resolver';
+import { CommonProps } from './Button.types';
 
-import { ControlType, Type, Priority, Size } from '../common';
-import { render, screen, userEvent } from '../test-utils';
-
-import Button from '.';
-import messages from '../i18n/commonMessages/Button.messages';
-import { ButtonReferenceType } from './Button';
-
-const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
-const { PAY, LINK, DANGER } = Type;
-const { PRIMARY, SECONDARY, TERTIARY } = Priority;
-const { SMALL, MEDIUM, LARGE } = Size;
+mockMatchMedia();
 
 describe('Button', () => {
-  // eslint-disable-next-line no-console
-  const originalWarn = console.warn;
-  let mockedWarn: typeof originalWarn;
-
-  const props = {
-    onClick: jest.fn(),
-    onFocus: jest.fn(),
-    onBlur: jest.fn(),
-    children: 'Send money',
+  const legacyProps: ButtonProps = {
+    as: 'button',
+    priority: 'primary',
+    size: 'md',
+    type: 'accent',
   };
 
-  beforeAll(() => {
-    mockedWarn = jest.fn().mockImplementation((args) => {
-      if (typeof args !== 'string' || !args.startsWith('Button has deprecated the')) {
-        originalWarn(args);
-      }
-    });
-    // eslint-disable-next-line no-console
-    console.warn = mockedWarn;
-  });
+  const newProps: ButtonProps = {
+    as: 'button',
+    v2: true,
+    priority: 'primary',
+    size: 'md',
+  };
 
-  beforeEach(jest.clearAllMocks);
+  const testId = 'new-button';
 
-  afterAll(() => {
-    // eslint-disable-next-line no-console
-    console.warn = originalWarn;
+  it('renders LegacyButton when v2 is false', () => {
+    render(<Button {...legacyProps}>Legacy Button</Button>);
+    const button = screen.getByText('Legacy Button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('btn btn-md np-btn np-btn-md btn-accent btn-priority-1');
   });
 
-  describe('by default', () => {
-    it('renders the text', () => {
-      render(<Button {...props} />);
-      expect(screen.getByText(props.children)).toBeInTheDocument();
-    });
-
-    it('set `ref` to be true on Button', () => {
-      const reference = createRef<ButtonReferenceType>();
-
-      expect(reference.current).toBeFalsy();
-      render(<Button ref={reference}>Click me!</Button>);
-      expect(reference.current).toBeTruthy();
-    });
-
-    it('is not disabled', () => {
-      render(<Button {...props} />);
-      expect(screen.getByRole('button')).toBeEnabled();
-    });
-
-    it('renders a medium button of type accent and priority primary', () => {
-      expect(render(<Button {...props} />).container).toMatchSnapshot();
-    });
-
-    it('renders an anchor tag with button styles of type accent and priority primary', () => {
-      expect(render(<Button {...props} as="a" href="#" />).container).toMatchSnapshot();
-    });
+  it('renders the new Button when v2 is true', () => {
+    render(
+      <Button data-testid={testId} {...newProps}>
+        New Button
+      </Button>,
+    );
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('wds-Button wds-Button--medium wds-Button--primary');
   });
 
-  describe('button attributes', () => {
-    it('sets the htmlType if set', () => {
-      render(<Button {...props} htmlType="submit" />);
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
-    });
-
-    it('passes through custom classes if set', () => {
-      render(<Button {...props} className="donkeysarethebest" />);
-      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
-    });
-
-    it('passes through aria-label if set', () => {
-      render(<Button {...props} aria-label="unique label" />);
-      const loadingButton = screen.getByLabelText('unique label');
-      expect(loadingButton).toBeInTheDocument();
-    });
-  });
-
-  describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
-      render(<Button {...props} />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when clicked if disabled', async () => {
-      render(<Button {...props} disabled />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-
-    it('does not call onClick when clicked if loading', async () => {
-      render(<Button {...props} loading />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-  });
+  describe('render as HTML anchor', () => {
+    const href = 'https://example.com';
+    const name = 'Button as link';
+
+    describe('v2', () => {
+      describe('rendered HTMLS element', () => {
+        it('should render as button by default', () => {
+          render(<Button v2>{name}</Button>);
+          expect(screen.getByRole('button', { name })).toBeInTheDocument();
+        });
+
+        it('should render as link if href is provided', () => {
+          render(
+            <Button v2 href={href}>
+              {name}
+            </Button>,
+          );
+          expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
+        });
+
+        it('should render a HTML anchor if `as="a"` is provided', () => {
+          render(
+            <Button v2 as="a">
+              {name}
+            </Button>,
+          );
+          expect(screen.getByText(name).closest('a')).toBeInTheDocument();
+        });
+
+        it('should render as a button if `href` is set together with `as="button"`', () => {
+          render(
+            <Button v2 href={href} as="button">
+              {name}
+            </Button>,
+          );
+          expect(screen.getByRole('button', { name })).toBeInTheDocument();
+        });
+      });
 
-  describe('onFocus and onBlur', () => {
-    it('calls both handlers by default', async () => {
-      render(<Button {...props} />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-    });
+      describe('HTML attributes', () => {
+        it('should not set `type` if rendered as HTML anchor', () => {
+          render(
+            <Button v2 type="submit" href="wise.com">
+              {name}
+            </Button>,
+          );
+          expect(screen.getByRole('link')).not.toHaveAttribute('type');
+        });
+
+        it('should not set `href` or `target` if rendered as HTML button', () => {
+          render(
+            <Button v2 as="button" href="wise.com" target="_blank">
+              {name}
+            </Button>,
+          );
+          const button = screen.getByRole('button');
+          expect(button).not.toHaveAttribute('href');
+          expect(button).not.toHaveAttribute('target');
+        });
+      });
 
-    it('does not call either handler if disabled', async () => {
-      render(<Button {...props} disabled />);
-      await userEvent.tab();
-      expect(props.onFocus).not.toHaveBeenCalled();
-      await userEvent.tab();
-      expect(props.onFocus).not.toHaveBeenCalled();
-    });
+      describe('disabled mode', () => {
+        describe('button', () => {
+          it('should not be disabled by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode and set it only via the `disabled` attribute', () => {
+            render(
+              <Button v2 disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be disabled by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode', () => {
+            render(
+              <Button v2 href="wise.com" disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
 
-    it('calls both handlers if loading', async () => {
-      render(<Button {...props} loading />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      describe('loading mode', () => {
+        describe('button', () => {
+          it('should not be loading by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be loading by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
     });
   });
 
-  describe('sizes', () => {
-    it('renders small buttons', () => {
-      expect(render(<Button {...props} size={SMALL} />).container).toMatchSnapshot();
-    });
-
-    it('renders medium buttons', () => {
-      expect(render(<Button {...props} size={MEDIUM} />).container).toMatchSnapshot();
-    });
-
-    it('renders large buttons', () => {
-      expect(render(<Button {...props} size={LARGE} />).container).toMatchSnapshot();
-    });
+  it('does not set type when type is in LegacyButtonType', () => {
+    const legacyTypeProps: ButtonProps = {
+      ...newProps,
+      // @ts-expect-error here we intentionally set wrong value to test `type` attr in DOM
+      type: 'accent',
+    };
+    render(
+      <Button data-testid={testId} {...legacyTypeProps}>
+        Button Type
+      </Button>,
+    );
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).not.toHaveAttribute('type');
   });
 
-  describe('types', () => {
-    it('renders accent buttons', () => {
-      expect(render(<Button {...props} type={ACCENT} />).container).toMatchSnapshot();
-    });
-
-    it('renders positive buttons', () => {
-      expect(render(<Button {...props} type={POSITIVE} />).container).toMatchSnapshot();
-    });
-
-    it('renders negative buttons', () => {
-      expect(render(<Button {...props} type={NEGATIVE} />).container).toMatchSnapshot();
-    });
+  it('sets type when type is not in LegacyButtonType', () => {
+    const buttonTypeProps: ButtonProps = {
+      ...newProps,
+      type: 'submit',
+    };
+    render(
+      <Button data-testid={testId} {...buttonTypeProps}>
+        Submit Button
+      </Button>,
+    );
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
   });
 
-  describe('priorities', () => {
-    it('renders primary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={PRIMARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-
-    it('renders secondary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={SECONDARY} type={type} />).container,
-        ).toMatchSnapshot(),
+  describe('addons', () => {
+    const avatarProp: CommonProps['addonStart'] = {
+      type: 'avatar',
+      value: [{ asset: <Freeze /> }],
+    };
+    const iconProp: CommonProps['addonStart'] = { type: 'icon', value: <Freeze /> };
+
+    const renderAllPriorities = (props: CommonProps) =>
+      render(
+        <>
+          <Button {...props} priority="primary">
+            primary
+          </Button>
+          <Button {...props} priority="secondary">
+            secondary
+          </Button>
+          <Button {...props} priority="secondary-neutral">
+            secondary-neutral
+          </Button>
+          <Button {...props} priority="tertiary">
+            tertiary
+          </Button>
+        </>,
       );
-    });
-
-    it('renders tertiary buttons', () => {
-      expect(
-        render(<Button {...props} priority={TERTIARY} type={ACCENT} />).container,
-      ).toMatchSnapshot();
-    });
 
-    it('defaults tertiary buttons to secondary for positive buttons', () => {
-      [POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={TERTIARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-  });
-
-  describe('other states', () => {
-    it('renders as loading if `loading` is true', () => {
-      render(<Button {...props} loading />);
-      const button = screen.queryByRole('button', {
-        name: messages.loadingAriaLabel.defaultMessage,
+    describe('addonsStart', () => {
+      describe('large', () => {
+        it('should not support avatars', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'lg',
+            addonStart: avatarProp,
+          });
+          expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
+        });
+
+        it('should not support icons', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'lg',
+            addonStart: iconProp,
+          });
+          expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
+        });
       });
-      expect(button).toBeInTheDocument();
-      expect(button).toBeEnabled();
-      expect(button).toHaveClass('btn-loading');
-      expect(button).toHaveAttribute('aria-disabled', 'true');
-      expect(button).toHaveAttribute('aria-busy', 'true');
-      expect(button).toHaveAttribute('aria-live', 'polite');
-      expect(screen.getByTestId('ButtonProgressIndicator')).toBeInTheDocument();
-    });
-
-    it('disables the button', () => {
-      render(<Button {...props} disabled />);
-      const button = screen.queryByRole('button');
-      expect(button).toBeDisabled();
-      expect(button).toHaveClass('disabled');
-      expect(button).toHaveAttribute('aria-disabled', 'false');
-      expect(button).toHaveAttribute('aria-busy', 'false');
-      expect(button).toHaveAttribute('aria-live', 'off');
-    });
 
-    it('renders as block if block is true', () => {
-      expect(render(<Button {...props} block />).container).toMatchSnapshot();
-    });
-  });
+      describe('medium', () => {
+        it('should support avatar', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'md',
+            addonStart: avatarProp,
+          });
+          expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
+        });
+
+        it('should support icon', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'md',
+            addonStart: iconProp,
+          });
+          expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
+        });
+      });
 
-  describe('deprecated types', () => {
-    it('renders primary as accent buttons and logs a warning', () => {
-      expect(render(<Button {...props} type={PRIMARY} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
+      describe('small', () => {
+        it('should not support avatar', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'sm',
+            addonStart: avatarProp,
+          });
+          expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
+        });
+
+        it('should support icon', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'sm',
+            addonStart: iconProp,
+          });
+          expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
+        });
+      });
     });
 
-    it('renders pay as positive buttons and logs a warning', () => {
-      expect(render(<Button {...props} type={PAY} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
-    });
+    describe('addonEnd', () => {
+      describe('large', () => {
+        it('should support icon', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'lg',
+            addonEnd: iconProp,
+          });
+          expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
+        });
+      });
 
-    it('renders danger as negative buttons with priority secondary and logs a warning', () => {
-      expect(render(<Button {...props} type={DANGER} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
-    });
+      describe('medium', () => {
+        it('should support icon', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'sm',
+            addonEnd: iconProp,
+          });
+          expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
+        });
+      });
 
-    it('renders link as accent buttons with priority tertiary and logs a warning', () => {
-      expect(render(<Button {...props} type={LINK} />).container).toMatchSnapshot();
+      describe('small', () => {
+        it('should support icon', () => {
+          renderAllPriorities({
+            v2: true,
+            size: 'md',
+            addonEnd: iconProp,
+          });
+          expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
+        });
+      });
     });
   });
 });