diff --git a/package-lock.json b/package-lock.json index a84a98d4f4..4878aac286 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,7 +60,7 @@ "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "^8.0.1", - "@testing-library/user-event": "13.5.0", + "@testing-library/user-event": "14.5.2", "axios-mock-adapter": "2.1.0", "bundlewatch": "^0.4.0", "eslint-import-resolver-webpack": "^0.13.9", @@ -5035,15 +5035,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 cad59273d8..3310dbdf7f 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "^8.0.1", - "@testing-library/user-event": "13.5.0", + "@testing-library/user-event": "14.5.2", "axios-mock-adapter": "2.1.0", "bundlewatch": "^0.4.0", "eslint-import-resolver-webpack": "^0.13.9", diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.tsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.tsx index 3e12486a84..46bf5cfac0 100644 --- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.tsx +++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.tsx @@ -1,4 +1,5 @@ import { getConfig } from '@edx/frontend-platform'; +import userEvent from '@testing-library/user-event'; import MockAdapter from 'axios-mock-adapter'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; import { MasqueradeWidget } from './MasqueradeWidget'; @@ -126,6 +127,7 @@ describe('Masquerade Widget Dropdown', () => { }); it('can masquerade as a specific user', async () => { + const user = userEvent.setup(); // Configure our mock: axiosMock.onPost(masqueradeUrl).reply(200, { ...mockResponse, @@ -137,18 +139,18 @@ describe('Masquerade Widget Dropdown', () => { // Select "specific student..." const dropdownToggle = container.querySelector('.dropdown-toggle')!; - fireEvent.click(dropdownToggle); + await user.click(dropdownToggle); const dropdownMenu = container.querySelector('.dropdown-menu') as HTMLElement; const studentOption = getAllByRole(dropdownMenu, 'button', { hidden: true }).filter( button => (button.textContent === 'Specific Student...'), )[0]; - fireEvent.click(studentOption); + await user.click(studentOption); - // Enter a username + // Enter a username, POST the request to the server const usernameInput = await screen.findByLabelText(/Username or email/); - fireEvent.change(usernameInput, { target: { value: 'testUser' } }); + await user.type(usernameInput, 'testuser'); expect(axiosMock.history.post).toHaveLength(0); - fireEvent.keyDown(usernameInput, { key: 'Enter' }); - // await waitFor(() => expect(axiosMock.history.post).toHaveLength(1)); + await user.keyboard('{Enter}'); + await waitFor(() => expect(axiosMock.history.post).toHaveLength(1)); }); });