From b0b246dad1ed8f4f434eb86925a705a12b8b333c Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Mon, 15 Nov 2021 19:48:08 +0200
Subject: [PATCH] test(component): refactor Button component tests

---
 packages/big-design/package.json              |  2 +
 .../big-design/src/components/Button/spec.tsx | 91 ++++++++++---------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/packages/big-design/package.json b/packages/big-design/package.json
index 61bff6eae..89aaceef2 100644
--- 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
index ca5837823..50928c175 100644
--- a/packages/big-design/src/components/Button/spec.tsx
+++ b/packages/big-design/src/components/Button/spec.tsx
@@ -1,163 +1,163 @@
 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();
 });
@@ -165,24 +165,25 @@ test('triggers onClick', () => {
 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);
 });