test(component): refactor Button component tests

bigcommerce · Nov 23, 2021 · b0b246d · b0b246d
1 parent 3c9ac79
commit b0b246d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 45 deletions.
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -60,9 +60,11 @@
     "@babel/preset-typescript": "^7.15.0",
     "@bigcommerce/configs": "^0.15.2-alpha.0",
     "@bigcommerce/pack": "^0.1.1-alpha.0",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^13.1.8",
     "@types/react": "^17.0.2",

diff --git a/packages/big-design/src/components/Button/spec.tsx b/packages/big-design/src/components/Button/spec.tsx
@@ -1,188 +1,189 @@
 import { AddIcon } from '@bigcommerce/big-design-icons';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React, { createRef } from 'react';
 import 'jest-styled-components';
 
-import { fireEvent, render } from '@test/utils';
+import { render } from '@test/utils';
 
 import { StyleableButton } from './private';
 
 import { Button } from './index';
 
 test('render default button', () => {
-  const { container } = render(<Button>Button</Button>);
+  render(<Button>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render disabled button', () => {
-  const { container } = render(<Button disabled>Button</Button>);
+  render(<Button disabled>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render destructive button', () => {
-  const { container } = render(<Button actionType="destructive">Button</Button>);
+  render(<Button actionType="destructive">Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render destructive disabled button', () => {
-  const { container } = render(
+  render(
     <Button actionType="destructive" disabled>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render secondary button', () => {
-  const { container } = render(<Button variant="secondary">Button</Button>);
+  render(<Button variant="secondary">Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render secondary disabled button', () => {
-  const { container } = render(
+  render(
     <Button variant="secondary" disabled>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render secondary destructive button', () => {
-  const { container } = render(
+  render(
     <Button variant="secondary" actionType="destructive">
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render secondary destructive disabled button', () => {
-  const { container } = render(
+  render(
     <Button variant="secondary" actionType="destructive" disabled>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render subtle button', () => {
-  const { container } = render(<Button variant="subtle">Button</Button>);
+  render(<Button variant="subtle">Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render subtle disabled button', () => {
-  const { container } = render(
+  render(
     <Button variant="subtle" disabled>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render subtle destructive button', () => {
-  const { container } = render(
+  render(
     <Button variant="subtle" actionType="destructive">
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render subtle destructive disabled button', () => {
-  const { container } = render(
+  render(
     <Button variant="subtle" actionType="destructive" disabled>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render loading button', () => {
-  const { container } = render(<Button isLoading={true}>Button</Button>);
+  render(<Button isLoading={true}>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render icon only button', () => {
-  const { container } = render(<Button iconOnly={<AddIcon />}>Button</Button>);
+  render(<Button iconOnly={<AddIcon />}>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render icon left button', () => {
-  const { container } = render(<Button iconLeft={<AddIcon />}>Button</Button>);
+  render(<Button iconLeft={<AddIcon />}>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render icon right button', () => {
-  const { container } = render(<Button iconRight={<AddIcon />}>Button</Button>);
+  render(<Button iconRight={<AddIcon />}>Button</Button>);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('render icon left and right button', () => {
-  const { container } = render(
+  render(
     <Button iconLeft={<AddIcon />} iconRight={<AddIcon />}>
       Button
     </Button>,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toMatchSnapshot();
 });
 
 test('forwards ref', () => {
   const ref = createRef<HTMLButtonElement>();
 
-  const { container } = render(<Button ref={ref} />);
-  const button = container.querySelector('button');
+  render(<Button ref={ref} />);
 
-  expect(button).toBe(ref.current);
+  expect(screen.getByRole('button')).toBe(ref.current);
 });
 
 test('triggers onClick', () => {
   const onClick = jest.fn();
 
-  const { container } = render(<Button onClick={onClick} />);
-  const button = container.firstChild as HTMLElement;
+  render(<Button onClick={onClick} />);
 
-  fireEvent.click(button);
+  userEvent.click(screen.getByRole<HTMLButtonElement>('button'));
 
   expect(onClick).toHaveBeenCalled();
 });
 
 test('does not forward styles', () => {
   const { container } = render(<Button className="test" style={{ background: 'red' }} />);
 
-  expect(container.getElementsByClassName('test').length).toBe(0);
+  expect(container.getElementsByClassName('test')).toHaveLength(0);
   expect(container.firstChild).not.toHaveStyle('background: red');
 });
 
 test('private StyleableButton forwards styles', () => {
   const { container } = render(<StyleableButton className="test" style={{ background: 'red' }} />);
 
-  expect(container.getElementsByClassName('test').length).toBe(1);
+  expect(container.getElementsByClassName('test')).toHaveLength(1);
   expect(container.firstChild).toHaveStyle('background: red');
 });
 
 test('render only icon only with left and right icons button', () => {
   const plusIcon = <AddIcon data-testid="icon-only" />;
-  const { getAllByTestId } = render(
+
+  render(
     <Button iconLeft={plusIcon} iconOnly={plusIcon} iconRight={plusIcon}>
       Button
     </Button>,
   );
 
-  expect(getAllByTestId('icon-only').length).toBe(1);
+  expect(screen.getAllByTestId('icon-only')).toHaveLength(1);
 });