test(component): refactor collapse component tests (bigcommerce#654)

bc-juanvasquez · May 10, 2022 · c4293ce · c4293ce
1 parent a2376fc
commit c4293ce
Showing 1 changed file with 64 additions and 53 deletions.
diff --git a/packages/big-design/src/components/Collapse/spec.tsx b/packages/big-design/src/components/Collapse/spec.tsx
@@ -1,7 +1,9 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import 'jest-styled-components';
 
-import { fireEvent, render } from '@test/utils';
+import { render } from '@test/utils';
 
 import { Text } from '../Typography';
 
@@ -21,150 +23,159 @@ const CollapseWithVisiblePanelMock = (
 );
 
 test('renders with title button', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
+  render(CollapseWithStaticTitleMock);
 
-  expect(getByRole('button')).toBeInTheDocument();
+  expect(screen.getByRole('button')).toBeInTheDocument();
 });
 
 test('renders with provided title', () => {
-  const { queryAllByText } = render(CollapseWithStaticTitleMock);
+  render(CollapseWithStaticTitleMock);
 
-  expect(queryAllByText('title')).toHaveLength(2);
+  expect(screen.getAllByText('title')).toHaveLength(2);
 });
 
 test('renders with panel', () => {
-  const { getByRole } = render(CollapseWithVisiblePanelMock);
+  render(CollapseWithVisiblePanelMock);
 
-  expect(getByRole('region')).toBeInTheDocument();
+  expect(screen.getByRole('region')).toBeInTheDocument();
 });
 
 test('title button has id', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
+  render(CollapseWithStaticTitleMock);
 
-  expect(getByRole('button').id).toBeDefined();
+  expect(screen.getByRole('button').id).toBeDefined();
 });
 
 test('title button has aria-controls', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const button = getByRole('button');
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
 
-  fireEvent.focus(button);
+  const button = screen.getByRole('button');
+  const panelId = screen.getByRole('region', { hidden: true }).id;
 
-  expect(button.getAttribute('aria-controls')).toBe(panel.id);
+  expect(button.getAttribute('aria-controls')).toBe(panelId);
 });
 
 test('title button has icon', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
-  const icon = trigger.querySelector('svg');
+  render(CollapseWithStaticTitleMock);
+
+  const icon = screen.getByRole('button').querySelector('svg');
 
   expect(icon).toBeInTheDocument();
 });
 
 test('title button icon in initially collapsed state', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
-  const icon = trigger.querySelector('svg');
+  render(CollapseWithStaticTitleMock);
+
+  const icon = screen.getByRole('button').querySelector('svg');
 
   expect(icon).not.toHaveStyle('transform: rotate(-180deg)');
 });
 
 test('title button icon in initially expanded state', () => {
-  const { getByRole } = render(CollapseWithVisiblePanelMock);
-  const trigger = getByRole('button');
-  const icon = trigger.querySelector('svg');
+  render(CollapseWithVisiblePanelMock);
+
+  const icon = screen.getByRole('button').querySelector('svg');
 
   expect(icon).toHaveStyle('transform: rotate(-180deg)');
 });
 
 test('title button icon toggles on title click', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
+  render(CollapseWithStaticTitleMock);
+
+  const trigger = screen.getByRole('button');
   const icon = trigger.querySelector('svg');
 
-  fireEvent.click(trigger);
+  userEvent.click(trigger);
 
   expect(icon).toHaveStyle('transform: rotate(-180deg)');
 
-  fireEvent.click(trigger);
+  userEvent.click(trigger);
 
   expect(icon).not.toHaveStyle('transform: rotate(-180deg)');
 });
 
 test('panel has id', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
+
+  const panelId = screen.getByRole('region', { hidden: true }).id;
 
-  expect(panel.id).toBeDefined();
+  expect(panelId).toBeDefined();
 });
 
 test('panel has aria-labelledby attribute', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
+
+  const panel = screen.getByRole('region', { hidden: true });
 
   expect(panel.getAttribute('aria-labelledby')).toBeDefined();
 });
 
 test('panel has role attribute', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
+
+  const panel = screen.getByRole('region', { hidden: true });
 
   expect(panel).toBeInTheDocument();
 });
 
 test('panel is hidden', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
+
+  const panel = screen.getByRole('region', { hidden: true });
 
   expect(panel).not.toBeVisible();
 });
 
 test('panel is visible', () => {
-  const { getByRole } = render(CollapseWithVisiblePanelMock);
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithVisiblePanelMock);
+
+  const panel = screen.getByRole('region', { hidden: true });
 
   expect(panel).toBeVisible();
 });
 
 test('hidden panel becomes visible on title click', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithStaticTitleMock);
 
-  fireEvent.click(trigger);
+  const trigger = screen.getByRole<HTMLButtonElement>('button');
+  const panel = screen.getByRole('region', { hidden: true });
+
+  userEvent.click(trigger);
 
   expect(panel).toBeVisible();
 });
 
 test('visible panel becomes hidden on title click', () => {
-  const { getByRole } = render(CollapseWithVisiblePanelMock);
-  const trigger = getByRole('button');
-  const panel = getByRole('region', { hidden: true });
+  render(CollapseWithVisiblePanelMock);
+
+  const trigger = screen.getByRole<HTMLButtonElement>('button');
+  const panel = screen.getByRole('region', { hidden: true });
 
-  fireEvent.click(trigger);
+  userEvent.click(trigger);
 
   expect(panel).not.toBeVisible();
 });
 
 test('click on title toggles aria-expanded attribute on title button', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
+  render(CollapseWithStaticTitleMock);
 
-  fireEvent.click(trigger);
+  const trigger = screen.getByRole<HTMLButtonElement>('button');
+
+  userEvent.click(trigger);
 
   expect(trigger.getAttribute('aria-expanded')).toBe('true');
 
-  fireEvent.click(trigger);
+  userEvent.click(trigger);
 
   expect(trigger.getAttribute('aria-expanded')).toBe('false');
 });
 
 test('onCollapseChange is called', () => {
-  const { getByRole } = render(CollapseWithStaticTitleMock);
-  const trigger = getByRole('button');
+  render(CollapseWithStaticTitleMock);
+
+  const trigger = screen.getByRole<HTMLButtonElement>('button');
 
-  fireEvent.click(trigger);
+  userEvent.click(trigger);
 
   expect(handleChange).toHaveBeenCalled();
 });