update: userEvent package

package.json

@@ -75,7 +75,7 @@
     "@pandatix/js-cvss": "^0.4.4",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",

src/web/components/panel/__tests__/infopanel.jsx

@@ -84,7 +84,7 @@ describe('InfoPanel tests', () => {
     expect(heading).toHaveStyleRule('background-color', Theme.mediumLightRed);
   });
 
-  test('should call click handler', () => {
+  test('should call click handler', async () => {
     const handleCloseClick = testing.fn();
     const {queryByRole} = render(
       <InfoPanel
@@ -98,7 +98,7 @@ describe('InfoPanel tests', () => {
 
     expect(closeButton).toBeInTheDocument();
 
-    userEvent.click(closeButton);
+    await userEvent.click(closeButton);
 
     expect(handleCloseClick).toHaveBeenCalled();
   });

src/web/pages/extras/TrashcanPage.jsx

@@ -233,6 +233,7 @@ class Trashcan extends React.Component {
 
   closeEmptyTrashDialog = () => {
     this.setState({isEmptyTrashDialogVisible: false});
+    this.setState({error: undefined});
   };
 
   createContentsTable(trash) {

src/web/pages/extras/__tests__/TrashcanPage.jsx

@@ -7,9 +7,17 @@ import {describe, test, expect, testing} from '@gsa/testing';
 
 import {userEvent, rendererWith, waitFor} from 'web/utils/testing';
 
-import Trashcanpage from 'web/pages/extras/TrashcanPage';
+import TrashcanPage from 'web/pages/extras/TrashcanPage';
 import Capabilities from 'gmp/capabilities/capabilities';
 
+/*
+ * The following is a workaround for userEvent v14 and fake timers https://github.com/testing-library/react-testing-library/issues/1197
+ */
+
+testing.useFakeTimers({
+  shouldAdvanceTime: true,
+});
+
 const gmp = {
   trashcan: {
     empty: testing.fn().mockResolvedValueOnce(),
@@ -41,7 +49,7 @@ describe('Trashcan page tests', () => {
       store: true,
     });
 
-    const {getByText, queryByTestId, getByRole} = render(<Trashcanpage />);
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
     expect(queryByTestId('loading')).toBeVisible();
     await waitFor(() => {
       expect(queryByTestId('loading')).not.toBeInTheDocument();
@@ -59,12 +67,14 @@ describe('Trashcan page tests', () => {
 
     const confirmButton = getByRole('button', {name: /Confirm/i});
 
-    userEvent.click(confirmButton);
+    await userEvent.click(confirmButton);
 
     await waitFor(() => {
       expect(gmp.trashcan.empty).toHaveBeenCalled();
     });
 
+    testing.advanceTimersByTime(1000);
+
     await waitFor(() => {
       expect(confirmButton).not.toBeVisible();
     });
@@ -86,7 +96,7 @@ describe('Trashcan page tests', () => {
       store: true,
     });
 
-    const {getByText, queryByTestId, getByRole} = render(<Trashcanpage />);
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
     expect(queryByTestId('loading')).toBeVisible();
     await waitFor(() => {
       expect(queryByTestId('loading')).not.toBeInTheDocument();
@@ -104,19 +114,15 @@ describe('Trashcan page tests', () => {
 
     const confirmButton = getByRole('button', {name: /Confirm/i});
 
-    userEvent.click(confirmButton);
+    await userEvent.click(confirmButton);
 
-    await waitFor(() => {
-      expect(errorGmp.trashcan.empty).toHaveBeenCalled();
-    });
+    expect(errorGmp.trashcan.empty).toHaveBeenCalled();
 
-    await waitFor(() => {
-      expect(
-        getByText(
-          'An error occurred while emptying the trash, please try again.',
-        ),
-      ).toBeVisible();
-    });
+    expect(
+      getByText(
+        'An error occurred while emptying the trash, please try again.',
+      ),
+    ).toBeVisible();
   });
 
   test('Should render open and close dialog', async () => {
@@ -126,7 +132,7 @@ describe('Trashcan page tests', () => {
       store: true,
     });
 
-    const {getByText, queryByTestId, getByRole} = render(<Trashcanpage />);
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
     expect(queryByTestId('loading')).toBeVisible();
     await waitFor(() => {
       expect(queryByTestId('loading')).not.toBeInTheDocument();
@@ -135,19 +141,16 @@ describe('Trashcan page tests', () => {
       name: /Empty Trash/i,
     });
 
-    userEvent.click(emptyTrashcanButton);
-    await waitFor(() => {
-      expect(
-        getByText('Are you sure you want to empty the trash?'),
-      ).toBeVisible();
-    });
+    await userEvent.click(emptyTrashcanButton);
+
+    expect(
+      getByText('Are you sure you want to empty the trash?'),
+    ).toBeVisible();
 
     const cancelButton = getByRole('button', {name: /Cancel/i});
 
-    userEvent.click(cancelButton);
+    await userEvent.click(cancelButton);
 
-    await waitFor(() => {
-      expect(cancelButton).not.toBeVisible();
-    });
+    expect(cancelButton).not.toBeVisible();
   });
 });

src/web/pages/radius/__tests__/dialog.jsx

@@ -68,7 +68,7 @@ describe('RADIUS dialog component tests', () => {
     expect(handleClose).toHaveBeenCalled();
   });
 
-  test('should allow to change data', () => {
+  test('should allow to change data', async () => {
     const handleClose = testing.fn();
     const handleSave = testing.fn();
 
@@ -85,10 +85,10 @@ describe('RADIUS dialog component tests', () => {
     fireEvent.click(checkBox);
 
     const radiusHostTextField = getByTestId('radiushost-textfield');
-    userEvent.type(radiusHostTextField, 'lorem');
+    await userEvent.type(radiusHostTextField, 'lorem');
 
     const radiusKeyTextField = getByTestId('radiuskey-textfield');
-    userEvent.type(radiusKeyTextField, 'bar');
+    await userEvent.type(radiusKeyTextField, 'bar');
 
     const saveButton = getByTestId('dialog-save-button');
     fireEvent.click(saveButton);