From d86a861425ddb6c9bf9f27c2e1d1154f1d924225 Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Wed, 25 Sep 2024 11:02:03 +0200 Subject: [PATCH] update: userEvent package --- package-lock.json | 13 ++--- package.json | 2 +- .../components/panel/__tests__/infopanel.jsx | 4 +- src/web/pages/extras/TrashcanPage.jsx | 1 + .../pages/extras/__tests__/TrashcanPage.jsx | 55 ++++++++++--------- src/web/pages/radius/__tests__/dialog.jsx | 6 +- 6 files changed, 41 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea3092325a..383f3c8400 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,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", @@ -3595,15 +3595,12 @@ } }, "node_modules/@testing-library/user-event": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", - "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==", + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", "dev": true, - "dependencies": { - "@babel/runtime": "^7.12.5" - }, "engines": { - "node": ">=10", + "node": ">=12", "npm": ">=6" }, "peerDependencies": { diff --git a/package.json b/package.json index 1fcb412d1d..5cef70c73c 100644 --- a/package.json +++ b/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", diff --git a/src/web/components/panel/__tests__/infopanel.jsx b/src/web/components/panel/__tests__/infopanel.jsx index af26cd24fa..5e5cf2fc11 100644 --- a/src/web/components/panel/__tests__/infopanel.jsx +++ b/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( { expect(closeButton).toBeInTheDocument(); - userEvent.click(closeButton); + await userEvent.click(closeButton); expect(handleCloseClick).toHaveBeenCalled(); }); diff --git a/src/web/pages/extras/TrashcanPage.jsx b/src/web/pages/extras/TrashcanPage.jsx index 2a4d951c27..273cf6176b 100644 --- a/src/web/pages/extras/TrashcanPage.jsx +++ b/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) { diff --git a/src/web/pages/extras/__tests__/TrashcanPage.jsx b/src/web/pages/extras/__tests__/TrashcanPage.jsx index 44e23c7c60..49a052e511 100644 --- a/src/web/pages/extras/__tests__/TrashcanPage.jsx +++ b/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(); + const {getByText, queryByTestId, getByRole} = render(); 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(); + const {getByText, queryByTestId, getByRole} = render(); 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(); + const {getByText, queryByTestId, getByRole} = render(); 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(); }); }); diff --git a/src/web/pages/radius/__tests__/dialog.jsx b/src/web/pages/radius/__tests__/dialog.jsx index 7d5c29bcc7..cd49e49341 100644 --- a/src/web/pages/radius/__tests__/dialog.jsx +++ b/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);