From c838d40b558dbf6d9956bc6673c821cc415439e6 Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Mon, 2 Dec 2024 12:20:29 -0800
Subject: [PATCH] test: improve test coverage

---
 package-lock.json                                  | 13 +++++--------
 package.json                                       |  2 +-
 .../masquerade-widget/MasqueradeWidget.test.tsx    | 14 ++++++++------
 3 files changed, 14 insertions(+), 15 deletions(-)

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));
   });
 });