test: replace fireEvent with userEvent lib

securityscorecard · Dec 9, 2024 · 402d02b · 402d02b
1 parent f99ae16
commit 402d02b
Show file tree

Hide file tree

Showing 14 changed files with 182 additions and 178 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/src/components/Breadcrumbs/Breadcrumbs.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 
 import { setup } from '../../utils/tests/setup';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -42,7 +42,7 @@ describe('Breadcrumbs', () => {
   });
 
   it('should show all items inside dropdown when dropdown is opened', async () => {
-    setup(
+    const { user } = setup(
       <Breadcrumbs>
         <BreadcrumbItem href="#">Root</BreadcrumbItem>
         <BreadcrumbItem href="#">Parent1</BreadcrumbItem>
@@ -57,7 +57,7 @@ describe('Breadcrumbs', () => {
     // Click to open dropdown
     const dropdownButton = screen.getByLabelText('Open breadcrumbs menu');
     expect(dropdownButton).toBeInTheDocument();
-    fireEvent.click(dropdownButton);
+    await user.click(dropdownButton);
 
     await waitFor(() => {
       expect(screen.getByTestId('dropdown-pane')).toBeInTheDocument();
@@ -70,7 +70,7 @@ describe('Breadcrumbs', () => {
   });
 
   it('should show items within dropdown using correct order ', async () => {
-    setup(
+    const { user } = setup(
       <Breadcrumbs>
         <BreadcrumbItem href="#">Link1</BreadcrumbItem>
         <BreadcrumbItem href="#">Link2</BreadcrumbItem>
@@ -85,7 +85,7 @@ describe('Breadcrumbs', () => {
     // Click to open dropdown
     const dropdownButton = screen.getByLabelText('Open breadcrumbs menu');
     expect(dropdownButton).toBeInTheDocument();
-    fireEvent.click(dropdownButton);
+    await user.click(dropdownButton);
     await waitFor(() => {
       expect(screen.getByTestId('dropdown-pane')).toBeInTheDocument();
     });
@@ -97,7 +97,7 @@ describe('Breadcrumbs', () => {
   });
 
   it('should be the last breadcrumb item not a link', async () => {
-    setup(
+    const { user } = setup(
       <Breadcrumbs>
         <BreadcrumbItem href="#">Link1</BreadcrumbItem>
         <BreadcrumbItem href="#">Link2</BreadcrumbItem>
@@ -112,7 +112,7 @@ describe('Breadcrumbs', () => {
     // Click to open dropdown
     const dropdownButton = screen.getByLabelText('Open breadcrumbs menu');
     expect(dropdownButton).toBeInTheDocument();
-    fireEvent.click(dropdownButton);
+    await user.click(dropdownButton);
 
     await waitFor(() => {
       expect(screen.getByTestId('dropdown-pane')).toBeInTheDocument();

diff --git a/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx b/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import { setup } from '../../../../utils/tests/setup';
@@ -44,22 +44,22 @@ describe('Datatable/BatchActions', () => {
         });
       });
     });
-    it('should call onClick handler on top-level action with correct parameters', () => {
-      setup(<BatchActions actions={actions} />);
+    it('should call onClick handler on top-level action with correct parameters', async () => {
+      const { user } = setup(<BatchActions actions={actions} />);
 
-      fireEvent.click(screen.getByRole('button', { name: /Action/i }));
+      await user.click(screen.getByRole('button', { name: /Action/i }));
       expect(actionFnMock).toBeCalledWith(
         selectedIds,
         false,
         expect.any(Function),
       );
     });
 
-    it('should call onClick handler in dropdown action with correct parameters', () => {
-      setup(<BatchActions actions={actions} />);
+    it('should call onClick handler in dropdown action with correct parameters', async () => {
+      const { user } = setup(<BatchActions actions={actions} />);
 
-      fireEvent.click(screen.getByRole('button', { name: /Dropdown/i }));
-      fireEvent.click(screen.getByRole('button', { name: /Dropdown Item/i }));
+      await user.click(screen.getByRole('button', { name: /Dropdown/i }));
+      await user.click(screen.getByRole('button', { name: /Dropdown Item/i }));
 
       expect(subactionFnMock).toBeCalledWith(
         selectedIds,
@@ -77,15 +77,15 @@ describe('Datatable/BatchActions', () => {
         });
       });
     });
-    it('should call onClick handler on top-level action with correct parameters', () => {
-      setup(<BatchActions actions={actions} />);
+    it('should call onClick handler on top-level action with correct parameters', async () => {
+      const { user } = setup(<BatchActions actions={actions} />);
       act(() => {
         DatatableStore.update((s) => {
           s.selectedIds = selectedIds;
         });
       });
 
-      fireEvent.click(screen.getByRole('button', { name: /Action/i }));
+      await user.click(screen.getByRole('button', { name: /Action/i }));
       expect(actionFnMock).toBeCalledWith(
         selectedIds,
         true,
@@ -94,15 +94,15 @@ describe('Datatable/BatchActions', () => {
     });
 
     it('should call onClick handler in dropdown action with correct parameters', async () => {
-      setup(<BatchActions actions={actions} />);
+      const { user } = setup(<BatchActions actions={actions} />);
       act(() => {
         DatatableStore.update((s) => {
           s.selectedIds = selectedIds;
         });
       });
 
-      fireEvent.click(screen.getByRole('button', { name: /Dropdown/i }));
-      fireEvent.click(screen.getByRole('button', { name: /Dropdown Item/i }));
+      await user.click(screen.getByRole('button', { name: /Dropdown/i }));
+      await user.click(screen.getByRole('button', { name: /Dropdown Item/i }));
 
       await waitFor(() => {
         expect(screen.queryByTestId('dropdown-pane')).not.toBeInTheDocument();
@@ -117,9 +117,9 @@ describe('Datatable/BatchActions', () => {
   });
   describe('given subactions are defined', () => {
     it('should create dropdown button', async () => {
-      setup(<BatchActions actions={actions} />);
+      const { user } = setup(<BatchActions actions={actions} />);
 
-      fireEvent.click(screen.getByRole('button', { name: /Dropdown/i }));
+      await user.click(screen.getByRole('button', { name: /Dropdown/i }));
 
       await waitFor(() => {
         expect(screen.getByTestId('dropdown-pane')).toBeInTheDocument();

diff --git a/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx b/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 
 import ElementCounter, { getCounterContent } from './ElementCounter';
 import { setup } from '../../../../utils/tests/setup';
@@ -54,22 +54,22 @@ describe('Datatable/ElementCounter', () => {
 
   describe('DatatableStore actions', () => {
     describe('given selection dropdown is visible', () => {
-      it('should set "hasExclusiveSelection" to "true" on Select All click', () => {
-        setup(
+      it('should set "hasExclusiveSelection" to "true" on Select All click', async () => {
+        const { user } = setup(
           <ElementCounter
             dataSize={1000}
             hasSelection
             hasOnlyPerPageSelection={false}
           />,
         );
 
-        fireEvent.click(screen.getByTestId('selection-dropdown'));
-        fireEvent.click(screen.getByRole('button', { name: /Select All/i }));
+        await user.click(screen.getByTestId('selection-dropdown'));
+        await user.click(screen.getByRole('button', { name: /Select All/i }));
 
         expect(DatatableStore.getRawState().hasExclusiveSelection).toBe(true);
       });
-      it('should set "hasExclusiveSelection" to "false" on Select None click', () => {
-        setup(
+      it('should set "hasExclusiveSelection" to "false" on Select None click', async () => {
+        const { user } = setup(
           <ElementCounter
             dataSize={1000}
             hasSelection
@@ -83,40 +83,40 @@ describe('Datatable/ElementCounter', () => {
           }),
         );
 
-        fireEvent.click(screen.getByTestId('selection-dropdown'));
-        fireEvent.click(screen.getByRole('button', { name: /Select None/i }));
+        await user.click(screen.getByTestId('selection-dropdown'));
+        await user.click(screen.getByRole('button', { name: /Select None/i }));
 
         expect(DatatableStore.getRawState().hasExclusiveSelection).toBe(false);
       });
-      it('should set "shouldResetSelectedRows" to "true" on Select All click', () => {
-        setup(
+      it('should set "shouldResetSelectedRows" to "true" on Select All click', async () => {
+        const { user } = setup(
           <ElementCounter
             dataSize={1000}
             hasSelection
             hasOnlyPerPageSelection={false}
           />,
         );
 
-        fireEvent.click(screen.getByTestId('selection-dropdown'));
-        fireEvent.click(screen.getByRole('button', { name: /Select All/i }));
+        await user.click(screen.getByTestId('selection-dropdown'));
+        await user.click(screen.getByRole('button', { name: /Select All/i }));
 
         expect(DatatableStore.getRawState().shouldResetSelectedRows).toBe(true);
       });
-      it('should set "shouldResetSelectedRows" to "true" on Select None click', () => {
-        setup(
+      it('should set "shouldResetSelectedRows" to "true" on Select None click', async () => {
+        const { user } = setup(
           <ElementCounter
             dataSize={1000}
             hasSelection
             hasOnlyPerPageSelection={false}
           />,
         );
 
-        fireEvent.click(screen.getByTestId('selection-dropdown'));
-        fireEvent.click(screen.getByRole('button', { name: /Select None/i }));
+        await user.click(screen.getByTestId('selection-dropdown'));
+        await user.click(screen.getByRole('button', { name: /Select None/i }));
 
         expect(DatatableStore.getRawState().shouldResetSelectedRows).toBe(true);
       });
-      it('should react on "selectedIds" change', () => {
+      it('should react on "selectedIds" change', async () => {
         setup(
           <ElementCounter
             dataSize={1000}
@@ -157,8 +157,8 @@ describe('Datatable/ElementCounter', () => {
       });
     });
     describe('given selection dropdown is hidden', () => {
-      it('should set "shouldResetSelectedRows" to "true" on Select None click', () => {
-        setup(
+      it('should set "shouldResetSelectedRows" to "true" on Select None click', async () => {
+        const { user } = setup(
           <ElementCounter
             dataSize={1000}
             hasSelection
@@ -172,7 +172,7 @@ describe('Datatable/ElementCounter', () => {
           }),
         );
 
-        fireEvent.click(screen.getByRole('button', { name: /Select None/i }));
+        await user.click(screen.getByRole('button', { name: /Select None/i }));
 
         expect(DatatableStore.getRawState().shouldResetSelectedRows).toBe(true);
       });

diff --git a/src/components/DateRangePicker/DateRangePicker.test.tsx b/src/components/DateRangePicker/DateRangePicker.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import { setup } from '../../utils/tests/setup';
@@ -47,7 +47,7 @@ describe('DateRangePicker', () => {
     await user.click(inputStartDate);
 
     // Click on a date
-    fireEvent.click(screen.getByLabelText('Choose Friday, March 12th, 2021'));
+    await user.click(screen.getByLabelText('Choose Friday, March 12th, 2021'));
 
     expect(handleChangeDate).toHaveBeenCalled();
 
@@ -57,7 +57,7 @@ describe('DateRangePicker', () => {
     await user.click(inputEndDate);
 
     // Click on a date
-    fireEvent.click(screen.getByLabelText('Choose Friday, March 12th, 2021'));
+    await user.click(screen.getByLabelText('Choose Friday, March 12th, 2021'));
 
     expect(handleChangeDate).toHaveBeenCalled();
   });