Johanna/small clean up frontend tests

frontend/src/app/ReportingApp.test.tsx

@@ -3,6 +3,7 @@ import { Provider } from "react-redux";
 import createMockStore, { MockStoreEnhanced } from "redux-mock-store";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
 import {
+  act,
   render,
   screen,
   waitFor,
@@ -252,8 +253,11 @@ describe("App", () => {
     await waitForElementToBeRemoved(() =>
       screen.queryByText("Loading account information...")
     );
-    await userEvent.click(
-      screen.getAllByText("Testing Site", { exact: false })[0]
+    await act(
+      async () =>
+        await userEvent.click(
+          screen.getAllByText("Testing Site", { exact: false })[0]
+        )
     );
     expect(
       await screen.findByText("COVID-19 testing data")
@@ -280,7 +284,10 @@ describe("App", () => {
       exact: false,
     });
     expect(trainingWelcome).toBeInTheDocument();
-    await userEvent.click(screen.getByText("Got it", { exact: false }));
+    await act(
+      async () =>
+        await userEvent.click(screen.getByText("Got it", { exact: false }))
+    );
     expect(trainingWelcome).not.toBeInTheDocument();
   });
 

frontend/src/app/Settings/Facility/Components/ManageDevices.test.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import {
+  act,
   fireEvent,
   render,
   screen,
@@ -105,8 +106,11 @@ describe("ManageDevices", () => {
       const deviceInput = screen.getByTestId("multi-select-toggle");
       const deviceList = screen.getByTestId("multi-select-option-list");
 
-      await userEvent.click(deviceInput);
-      await userEvent.click(within(deviceList).getByText("Device C"));
+      await act(async () => await userEvent.click(deviceInput));
+      await act(
+        async () =>
+          await userEvent.click(within(deviceList).getByText("Device C"))
+      );
 
       expect(await screen.findByTestId("pill-container"));
       expect(

frontend/src/app/Settings/Facility/FacilityFormContainer.test.tsx

@@ -1,4 +1,5 @@
 import {
+  act,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -226,7 +227,10 @@ describe("FacilityFormContainer", () => {
 
     it("redirects on successful facility update", async () => {
       await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
-      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
+      await act(
+        async () =>
+          await userEvent.click(screen.getByRole("button", { name: /submit/i }))
+      );
       expect(await screen.findByText("Redirected")).toBeInTheDocument();
     });
 
@@ -235,7 +239,10 @@ describe("FacilityFormContainer", () => {
         trackEvent: trackEventMock,
       }));
       await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
-      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
+      await act(
+        async () =>
+          await userEvent.click(screen.getByRole("button", { name: /submit/i }))
+      );
       expect(trackEventMock).toBeCalledWith({ name: "Save Settings" });
     });
   });
@@ -247,7 +254,10 @@ describe("FacilityFormContainer", () => {
 
     it("creates a new facility", async () => {
       expect(await screen.findByRole("button", { name: /submit/i }));
-      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
+      await act(
+        async () =>
+          await userEvent.click(screen.getByRole("button", { name: /submit/i }))
+      );
       expect(await screen.findByText("Redirected")).toBeInTheDocument();
     });
   });

frontend/src/app/Settings/ManageSelfRegistrationLinks.test.tsx

@@ -1,5 +1,5 @@
 import { MockedProvider } from "@apollo/client/testing";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {
@@ -64,15 +64,15 @@ describe("ManageSelfRegistrationLinks", () => {
   it("copies the org link", async () => {
     const orgUrl = `${process.env.REACT_APP_BASE_URL}/register/${expectedOrgSlug}`;
     const [orgBtn] = screen.getAllByRole("button");
-    await userEvent.click(orgBtn);
+    await act(async () => await userEvent.click(orgBtn));
     await waitFor(async () => expect(orgBtn).toBeEnabled());
     expect(navigator.clipboard.writeText).toBeCalledWith(orgUrl);
   });
 
   it("copies a facility link", async () => {
     const facilityUrl = `${process.env.REACT_APP_BASE_URL}/register/${expectedFacilitySlug}`;
     const btns = screen.getAllByRole("button");
-    await userEvent.click(btns[2]);
+    await act(async () => await userEvent.click(btns[2]));
     await waitFor(async () => expect(btns[2]).toBeEnabled());
     expect(navigator.clipboard.writeText).toBeCalledWith(facilityUrl);
   });

frontend/src/app/VersionEnforcer.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Link, MemoryRouter, Outlet, Route, Routes } from "react-router-dom";
 
@@ -61,8 +61,11 @@ describe("VersionEnforcer", () => {
     expect(await screen.findByText("This is the first page", { exact: false }));
 
     // WHEN
-    await userEvent.click(
-      screen.getByText("Go to a new page", { exact: false })
+    await act(
+      async () =>
+        await userEvent.click(
+          screen.getByText("Go to a new page", { exact: false })
+        )
     );
 
     // THEN

frontend/src/app/accountCreation/MfaPhone/MfaPhone.test.tsx

@@ -1,4 +1,5 @@
 import {
+  act,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -39,11 +40,17 @@ describe("Phone call MFA", () => {
   });
 
   it("can enter a valid phone number", async () => {
-    await userEvent.type(
-      screen.getByLabelText("Phone number", { exact: false }),
-      "(910) 867-5309"
+    await act(
+      async () =>
+        await userEvent.type(
+          screen.getByLabelText("Phone number", { exact: false }),
+          "(910) 867-5309"
+        )
+    );
+    await act(
+      async () =>
+        await userEvent.click(screen.getByText("Send code", { exact: false }))
     );
-    await userEvent.click(screen.getByText("Send code", { exact: false }));
     await waitForElementToBeRemoved(() =>
       screen.queryByText("Validating phone number …")
     );
@@ -53,18 +60,27 @@ describe("Phone call MFA", () => {
   });
 
   it("requires a phone number", async () => {
-    await userEvent.click(screen.getByText("Send code", { exact: false }));
+    await act(
+      async () =>
+        await userEvent.click(screen.getByText("Send code", { exact: false }))
+    );
     expect(
       await screen.findByText("Enter your phone number", { exact: false })
     );
   });
 
   it("requires a valid phone number", async () => {
-    await userEvent.type(
-      screen.getByLabelText("Phone number", { exact: false }),
-      "(555) 555-5555"
+    await act(
+      async () =>
+        await userEvent.type(
+          screen.getByLabelText("Phone number", { exact: false }),
+          "(555) 555-5555"
+        )
+    );
+    await act(
+      async () =>
+        await userEvent.click(screen.getByText("Send code", { exact: false }))
     );
-    await userEvent.click(screen.getByText("Send code", { exact: false }));
     expect(
       await screen.findByText("Enter a valid phone number", { exact: false })
     );

frontend/src/app/accountCreation/MfaSelect/MfaSelect.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 
@@ -34,20 +34,20 @@ jest.mock("../AccountCreationApiService", () => ({
 }));
 
 describe("MfaSelect", () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     render(<MfaSelect />);
   });
 
   it("can choose an mfa option", async () => {
     const smsRadio = screen.getByLabelText("Text message (SMS)", {
       exact: false,
     });
-    await userEvent.click(smsRadio);
+    await act(async () => await userEvent.click(smsRadio));
     expect(smsRadio).toBeChecked();
   });
 
   it("requires an mfa option", async () => {
-    await userEvent.click(screen.getByText("Continue"));
+    await act(async () => await userEvent.click(screen.getByText("Continue")));
     expect(
       screen.getByText("Select an authentication option")
     ).toBeInTheDocument();
@@ -95,9 +95,9 @@ describe("MfaSelect routing", () => {
     const smsRadio = screen.getByLabelText("Text message (SMS)", {
       exact: false,
     });
-    await userEvent.click(smsRadio);
+    await act(async () => await userEvent.click(smsRadio));
     expect(smsRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
     await waitFor(() => {
       expect(
         screen.getByText("Get your security code via text message (SMS).")
@@ -109,9 +109,9 @@ describe("MfaSelect routing", () => {
     const googleRadio = screen.getByLabelText("Google Authenticator", {
       exact: false,
     });
-    await userEvent.click(googleRadio);
+    await act(async () => await userEvent.click(googleRadio));
     expect(googleRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
     expect(
       await screen.findByText(
         "Get your security code via the Google Authenticator application."
@@ -123,9 +123,9 @@ describe("MfaSelect routing", () => {
     const oktaRadio = screen.getByLabelText("Okta Verify", {
       exact: false,
     });
-    await userEvent.click(oktaRadio);
+    await act(async () => await userEvent.click(oktaRadio));
     expect(oktaRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
     expect(
       await screen.findByText(
         "Get your security code via the Okta Verify application."
@@ -141,9 +141,9 @@ describe("MfaSelect routing", () => {
       }
     );
 
-    await userEvent.click(securityKeyRadio);
+    await act(async () => await userEvent.click(securityKeyRadio));
     expect(securityKeyRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
 
     await waitFor(() => {
       expect(
@@ -158,9 +158,9 @@ describe("MfaSelect routing", () => {
     const emailRadio = screen.getByLabelText("Email", {
       exact: false,
     });
-    await userEvent.click(emailRadio);
+    await act(async () => await userEvent.click(emailRadio));
     expect(emailRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
     await waitFor(() => {
       expect(
         screen.getByText(
@@ -175,9 +175,9 @@ describe("MfaSelect routing", () => {
     const phoneRadio = screen.getByLabelText("Phone call", {
       exact: false,
     });
-    await userEvent.click(phoneRadio);
+    await act(async () => await userEvent.click(phoneRadio));
     expect(phoneRadio).toBeChecked();
-    await userEvent.click(continueButton);
+    await act(async () => await userEvent.click(continueButton));
     await waitFor(() => {
       expect(
         screen.getByText("Get your security code via a phone call")

frontend/src/app/accountCreation/MfaSms/MfaSms.test.tsx

@@ -1,4 +1,5 @@
 import {
+  act,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -39,11 +40,14 @@ describe("SMS MFA", () => {
   });
 
   it("can enter a valid phone number", async () => {
-    await userEvent.type(
-      screen.getByLabelText("Phone number", { exact: false }),
-      "(910) 867-5309"
+    await act(
+      async () =>
+        await userEvent.type(
+          screen.getByLabelText("Phone number", { exact: false }),
+          "(910) 867-5309"
+        )
     );
-    await userEvent.click(screen.getByText("Send code"));
+    await act(async () => await userEvent.click(screen.getByText("Send code")));
     await waitForElementToBeRemoved(() =>
       screen.queryByText("Validating phone number …")
     );
@@ -54,16 +58,19 @@ describe("SMS MFA", () => {
   });
 
   it("requires a phone number", async () => {
-    await userEvent.click(screen.getByText("Send code"));
+    await act(async () => await userEvent.click(screen.getByText("Send code")));
     expect(screen.getByText("Enter your phone number")).toBeInTheDocument();
   });
 
   it("requires a valid phone number", async () => {
-    await userEvent.type(
-      screen.getByLabelText("Phone number", { exact: false }),
-      "(555) 555-5555"
+    await act(
+      async () =>
+        await userEvent.type(
+          screen.getByLabelText("Phone number", { exact: false }),
+          "(555) 555-5555"
+        )
     );
-    await userEvent.click(screen.getByText("Send code"));
+    await act(async () => await userEvent.click(screen.getByText("Send code")));
     expect(screen.getByText("Enter a valid phone number")).toBeInTheDocument();
   });
 });