refactor: replace fireEvent with userEvent where it is possible

openedx · Sep 18, 2023 · 46f4f5a · 46f4f5a
1 parent 049fe5b
commit 46f4f5a
Show file tree

Hide file tree

Showing 54 changed files with 822 additions and 762 deletions.
diff --git a/src/AvatarButton/AvatarButton.test.jsx b/src/AvatarButton/AvatarButton.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import AvatarButton from './index';
+import AvatarButton from '.';
 
 describe('AvatarButton', () => {
   it('renders in all sizes', () => {

diff --git a/src/CheckBox/CheckBox.test.jsx b/src/CheckBox/CheckBox.test.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import CheckBox from '.';
 
 describe('<CheckBox />', () => {
@@ -12,44 +14,44 @@ describe('<CheckBox />', () => {
     expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
-  it('aria-label changes after click', () => {
+  it('aria-label changes after click', async () => {
     render(<CheckBox name="checkbox" label="check me out!" />);
     const checkbox = screen.getByLabelText('check me out!');
     expect(checkbox).toHaveAttribute('aria-checked', 'false');
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
-  it('check that callback function is triggered when clicked', () => {
+  it('check that callback function is triggered when clicked', async () => {
     const onChangeSpy = jest.fn();
     render(<CheckBox name="checkbox" label="check me out!" onChange={onChangeSpy} />);
     const checkbox = screen.getByLabelText('check me out!');
     expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
     expect(onChangeSpy).toHaveBeenCalledWith(true, 'checkbox');
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(onChangeSpy).toHaveBeenCalledTimes(2);
     expect(onChangeSpy).toHaveBeenCalledWith(false, 'checkbox');
   });
 
-  it('checks if start state can be set to checked', () => {
+  it('checks if start state can be set to checked', async () => {
     render(<CheckBox name="checkbox" label="I start checked" checked />);
     const checkbox = screen.getByLabelText('I start checked');
     expect(checkbox).toBeChecked();
     expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(checkbox).not.toBeChecked();
     expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
-  it('checkbox can be disabled', () => {
+  it('checkbox can be disabled', async () => {
     render(<CheckBox name="checkbox" label="I am disabled" disabled />);
     const checkbox = screen.getByLabelText('I am disabled');
     expect(checkbox).toBeDisabled();
-    fireEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(checkbox).toBeDisabled();
   });
 

diff --git a/src/Collapsible/Collapsible.test.jsx b/src/Collapsible/Collapsible.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
+import userEvent from '@testing-library/user-event';
 
 import Collapsible from '.';
 
@@ -118,40 +119,40 @@ describe('<Collapsible />', () => {
       collapsible = ref.current;
     });
 
-    it('opens on trigger click', () => {
+    it('opens on trigger click', async () => {
       expect(screen.getAllByRole('button')[0]).toBeInTheDocument();
-      fireEvent.click(screen.getAllByRole('button')[0]); // Open
+      await userEvent.click(screen.getAllByRole('button')[0]); // Open
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
 
-    it('closes on trigger click', () => {
+    it('closes on trigger click', async () => {
       collapsible.open();
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
-      fireEvent.click(screen.getAllByRole('button')[0]); // Close
+      await userEvent.click(screen.getAllByRole('button')[0]); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('does not open on close only trigger click', () => {
+    it('does not open on close only trigger click', async () => {
       collapsible.close();
-      fireEvent.click(screen.getByTestId('close-only')); // No-op
+      await userEvent.click(screen.getByTestId('close-only')); // No-op
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('closes on close only trigger click', () => {
+    it('closes on close only trigger click', async () => {
       collapsible.open();
-      fireEvent.click(screen.getByTestId('close-only')); // Close
+      await userEvent.click(screen.getByTestId('close-only')); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('does not close on open only trigger click', () => {
+    it('does not close on open only trigger click', async () => {
       collapsible.open();
-      fireEvent.click(screen.getByTestId('open-only')); // No-op
+      await userEvent.click(screen.getByTestId('open-only')); // No-op
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
 
-    it('opens on open only trigger click', () => {
+    it('opens on open only trigger click', async () => {
       collapsible.close();
-      fireEvent.click(screen.getByTestId('open-only')); // Open
+      await userEvent.click(screen.getByTestId('open-only')); // Open
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
   });
@@ -166,38 +167,44 @@ describe('<Collapsible />', () => {
       collapsible = ref.current;
     });
 
-    it('opens on trigger enter keydown', () => {
-      fireEvent.keyDown(screen.getAllByRole('button')[0], { key: 'Enter' }); // Open
+    it('opens on trigger enter keydown', async () => {
+      screen.getAllByRole('button')[0].focus();
+      await userEvent.keyboard('{enter}'); // Open
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
 
-    it('closes on trigger enter keydown', () => {
+    it('closes on trigger enter keydown', async () => {
       collapsible.open();
-      fireEvent.keyDown(screen.getAllByRole('button')[0], { key: 'Enter' }); // Close
+      screen.getAllByRole('button')[0].focus();
+      await userEvent.keyboard('{enter}'); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('does not open on close only trigger enter keydown', () => {
+    it('does not open on close only trigger enter keydown', async () => {
       collapsible.close();
-      fireEvent.keyDown(screen.getByTestId('close-only'), { key: 'Enter' }); // No-op
+      screen.getByTestId('close-only').focus();
+      await userEvent.keyboard('{enter}'); // No-op
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('closes on close only trigger enter keydown', () => {
+    it('closes on close only trigger enter keydown', async () => {
       collapsible.open();
-      fireEvent.keyDown(screen.getByTestId('close-only'), { key: 'Enter' }); // Close
+      screen.getByTestId('close-only').focus();
+      await userEvent.keyboard('{enter}'); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
 
-    it('does not close on open only trigger enter keydown', () => {
+    it('does not close on open only trigger enter keydown', async () => {
       collapsible.open();
-      fireEvent.keyDown(screen.getByTestId('open-only'), { key: 'Enter' }); // No-op
+      screen.getByTestId('open-only').focus();
+      await userEvent.keyboard('{enter}'); // No-op
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
 
-    it('opens on open only trigger enter keydown', () => {
+    it('opens on open only trigger enter keydown', async () => {
       collapsible.close();
-      fireEvent.keyDown(screen.getByTestId('open-only'), { key: 'Enter' }); // Open
+      screen.getByTestId('open-only').focus();
+      await userEvent.keyboard('{enter}'); // Open
       expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
     });
   });

diff --git a/src/ColorPicker/ColorPicker.test.jsx b/src/ColorPicker/ColorPicker.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+
 import ColorPicker from '.';
 
 describe('renders correctly', () => {
@@ -29,13 +29,11 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
-    render(<ColorPicker color={color} setColor={setColor} />);
-    await act(async () => {
-      userEvent.click(screen.getByRole('button'));
-    });
+    const { rerender } = render(<ColorPicker color={color} setColor={setColor} />);
+    await userEvent.click(screen.getByRole('button'));
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
-    const input = screen.getByTestId('hex-input');
-    fireEvent.change(input, { target: { value: '#32116c' } });
+
+    rerender(<ColorPicker color="#32116c" setColor={setColor} />);
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
   });
 });
diff --git a/src/DataTable/filters/tests/DropdownFilter.test.jsx b/src/DataTable/filters/tests/DropdownFilter.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import DropdownFilter from '../DropdownFilter';
 
@@ -26,43 +27,43 @@ describe('<DropdownFilter />', () => {
   });
 
   it('renders a select button', () => {
-    const { getByLabelText } = render(<DropdownFilter {...props} />);
-    expect(getByLabelText(props.column.Header)).toBeInTheDocument();
+    render(<DropdownFilter {...props} />);
+    expect(screen.getByLabelText(props.column.Header)).toBeInTheDocument();
   });
 
-  it('sets a filter - no initial filters', () => {
-    const { getByLabelText } = render(<DropdownFilter {...props} />);
-    const select = getByLabelText(props.column.Header);
-    fireEvent.click(select);
-    fireEvent.change(select, { target: { value: palomino.value } });
+  it('sets a filter - no initial filters', async () => {
+    render(<DropdownFilter {...props} />);
+    const select = screen.getByLabelText(props.column.Header);
+    await userEvent.click(select);
+    await userEvent.selectOptions(select, palomino.value);
     expect(setFilterMock).toHaveBeenCalledWith(palomino.value);
   });
 
-  it('sets a filter - initial filters', () => {
-    const { getByLabelText } = render(
+  it('sets a filter - initial filters', async () => {
+    render(
       <DropdownFilter column={{ ...props.column, filterValue: [palomino.value] }} />,
     );
-    const select = getByLabelText(props.column.Header);
-    fireEvent.click(select);
-    fireEvent.change(select, { target: { value: palomino.value } });
+    const select = screen.getByLabelText(props.column.Header);
+    await userEvent.click(select);
+    await userEvent.selectOptions(select, palomino.value);
     expect(setFilterMock).toHaveBeenCalledWith(palomino.value);
   });
 
-  it('removes filters when default option is clicked', () => {
-    const { getByLabelText } = render(
+  it('removes filters when default option is clicked', async () => {
+    render(
       <DropdownFilter column={{ ...props.column, filterValue: [palomino.value] }} />,
     );
-    const select = getByLabelText(props.column.Header);
-    fireEvent.click(select);
-    fireEvent.change(select, { target: { value: '' } });
+    const select = screen.getByLabelText(props.column.Header);
+    await userEvent.click(select);
+    await userEvent.selectOptions(select, '');
     expect(setFilterMock).toHaveBeenCalledWith(undefined);
   });
 
-  it('displays a number if a number is provided', () => {
-    const { getByLabelText, getByText } = render(<DropdownFilter {...props} />);
-    const select = getByLabelText(props.column.Header);
-    fireEvent.click(select);
-    const option = getByText(`${roan.name} (${roan.number})`);
+  it('displays a number if a number is provided', async () => {
+    render(<DropdownFilter {...props} />);
+    const select = screen.getByLabelText(props.column.Header);
+    await userEvent.click(select);
+    const option = screen.getByText(`${roan.name} (${roan.number})`);
     expect(option).toBeInTheDocument();
   });
 });
diff --git a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import {
-  render, fireEvent, screen, act,
-} from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import MultiSelectDropdownFilter from '../MultiSelectDropdownFilter';
 
@@ -28,7 +27,7 @@ describe('<MultiSelectDropdownFilter />', () => {
   });
   it('renders a list of checkboxes', async () => {
     render(<MultiSelectDropdownFilter {...props} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
       const checkboxes = screen.getAllByRole('checkbox');
       expect(checkboxes.length).toEqual(3);
@@ -40,42 +39,36 @@ describe('<MultiSelectDropdownFilter />', () => {
   });
   it('sets a filter - no initial filters', async () => {
     render(<MultiSelectDropdownFilter {...props} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
+    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
     expect(setFilterMock).toHaveBeenCalledWith([palomino.value]);
   });
   it('sets a filter - initial filters', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
+    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
     expect(setFilterMock).toHaveBeenCalledWith([roan.value, palomino.value]);
   });
   it('removes a filter', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [palomino.value] }} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
+    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
     expect(setFilterMock).toHaveBeenCalledWith([]);
   });
   it('renders checkbox label with filter name', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
       const label = screen.getByText(roan.name);
       expect(label).toBeInTheDocument();
     });
   });
   it('renders checkbox label with number - with badge', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
       const label = screen.getByText(roan.name);
       expect(label).toBeInTheDocument();
@@ -87,7 +80,7 @@ describe('<MultiSelectDropdownFilter />', () => {
     render(
       <MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />,
     );
-    fireEvent.click(screen.getByText(props.column.Header));
+    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
       const label = screen.getByText(palomino.name);
       expect(label).toBeInTheDocument();