use recommended userEvent setup pattern

CDCgov · Aug 31, 2023 · 2e16c23 · 2e16c23
1 parent 1c584e9
commit 2e16c23
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 40 deletions.
diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx
@@ -1,13 +1,8 @@
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
+import { act, render, screen, waitFor, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import React from "react";
 import { ComboBoxRef } from "@trussworks/react-uswds";
+import userEvent from "@testing-library/user-event";
 
 import { Option } from "../../commonComponents/Dropdown";
 
@@ -69,6 +64,7 @@ describe("FacilitySelectFilter", () => {
       </MemoryRouter>
     );
   };
+  const user = userEvent.setup();
 
   it("disables controls when loading data", () => {
     renderWithMocks([], [], initialState);
@@ -90,16 +86,16 @@ describe("FacilitySelectFilter", () => {
       name: /clear facility selection filters/i,
     });
     expect(clearFiltersBtn).toBeEnabled();
-    fireEvent.click(clearFiltersBtn);
+    await act(() => user.click(clearFiltersBtn));
     await waitFor(() => expect(handleClearFilter).toHaveBeenCalled());
   });
 
   it("calls event handlers when organization is selected", async () => {
     renderWithMocks(mockOrganizationOptions, mockFacilityOptions, initialState);
 
-    const [orgDropdown] = getOrgComboBoxElements();
+    const [, orgDropdown] = getOrgComboBoxElements();
 
-    fireEvent.change(orgDropdown, { target: { value: "123" } });
+    await act(() => user.selectOptions(orgDropdown, ["organization-123"]));
     await waitFor(() => expect(handleSelectOrg).toHaveBeenCalled());
   });
 
@@ -110,8 +106,8 @@ describe("FacilitySelectFilter", () => {
       facility: undefined,
     });
 
-    const [facilityDropdown] = getFacilityComboBoxElements();
-    fireEvent.change(facilityDropdown, { target: { value: "123" } });
+    const [, facilityDropdown] = getFacilityComboBoxElements();
+    await act(() => user.selectOptions(facilityDropdown, ["facility-123"]));
     await waitFor(() => expect(handleSelectFacility).toHaveBeenCalled());
   });
 
@@ -126,7 +122,7 @@ describe("FacilitySelectFilter", () => {
       name: /search/i,
     });
     expect(searchBtn).toBeEnabled();
-    fireEvent.click(searchBtn);
+    await act(() => user.click(searchBtn));
 
     await waitFor(() => expect(handleSearch).toHaveBeenCalled());
   });

diff --git a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx
@@ -31,6 +31,8 @@ describe("ManageFacility", () => {
       name: /clear facility selection filters/i,
     });
 
+  const user = userEvent.setup();
+
   beforeEach(() => {
     renderWithMocks();
   });
@@ -53,12 +55,10 @@ describe("ManageFacility", () => {
     const [orgComboBoxInput, orgComboBoxList] = getOrgComboBoxElements();
 
     await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
-    await act(async () => await userEvent.type(orgComboBoxInput, "dis"));
+    await act(async () => await user.type(orgComboBoxInput, "dis"));
     await act(
       async () =>
-        await userEvent.click(
-          within(orgComboBoxList).getByText("Dis Organization")
-        )
+        await user.click(within(orgComboBoxList).getByText("Dis Organization"))
     );
     expect(orgComboBoxInput).toHaveValue("Dis Organization");
     expect(clearFiltersBtn).toBeEnabled();
@@ -73,16 +73,14 @@ describe("ManageFacility", () => {
     const [orgComboBoxInput, orgComboBoxList] = getOrgComboBoxElements();
     await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
 
-    await act(async () => await userEvent.type(orgComboBoxInput, "dis"));
+    await act(async () => await user.type(orgComboBoxInput, "dis"));
     await act(
       async () =>
-        await userEvent.click(
-          within(orgComboBoxList).getByText("Dis Organization")
-        )
+        await user.click(within(orgComboBoxList).getByText("Dis Organization"))
     );
 
     await waitFor(() => expect(clearFiltersBtn).toBeEnabled());
-    await act(async () => await userEvent.click(clearFiltersBtn));
+    await act(async () => await user.click(clearFiltersBtn));
 
     await waitFor(() => expect(clearFiltersBtn).toBeDisabled());
     expect(orgComboBoxInput).toHaveValue("");
@@ -98,43 +96,39 @@ describe("ManageFacility", () => {
       getFacilityComboBoxElements();
 
     await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
-    await act(async () => await userEvent.type(orgComboBoxInput, "dis"));
+    await act(async () => await user.type(orgComboBoxInput, "dis"));
     await act(
       async () =>
-        await userEvent.click(
-          within(orgComboBoxList).getByText("Dis Organization")
-        )
+        await user.click(within(orgComboBoxList).getByText("Dis Organization"))
     );
 
     await waitFor(() => expect(facilityComboBoxInput).toBeEnabled());
     await waitFor(() => expect(clearFiltersBtn).toBeEnabled());
     await act(
-      async () => await userEvent.type(facilityComboBoxInput, "testing site")
+      async () => await user.type(facilityComboBoxInput, "testing site")
     );
     await act(
       async () =>
-        await userEvent.click(
-          within(facilityComboBoxList).getByText("Testing Site")
-        )
+        await user.click(within(facilityComboBoxList).getByText("Testing Site"))
     );
 
     const searchBtn = screen.getByRole("button", {
       name: /search/i,
     });
-    await act(async () => await userEvent.click(searchBtn));
+    await act(async () => await user.click(searchBtn));
 
     await screen.findByRole("heading", { name: /Testing Site/i });
 
     const deleteFacilityBtn = screen.getByRole("button", {
       name: /delete facility testing site/i,
     });
-    await act(async () => await userEvent.click(deleteFacilityBtn));
+    await act(async () => await user.click(deleteFacilityBtn));
 
     await screen.findByRole("heading", { name: /delete testing site/i });
     const yesDeleteBtn = screen.getByRole("button", {
       name: /yes, delete facility/i,
     });
-    await act(async () => await userEvent.click(yesDeleteBtn));
+    await act(async () => await user.click(yesDeleteBtn));
 
     await waitFor(() =>
       expect(
@@ -158,28 +152,26 @@ describe("ManageFacility", () => {
       getFacilityComboBoxElements();
 
     await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
-    await act(async () => await userEvent.type(orgComboBoxInput, "dat"));
+    await act(async () => await user.type(orgComboBoxInput, "dat"));
     await act(
       async () =>
-        await userEvent.click(
-          within(orgComboBoxList).getByText("Dat Organization")
-        )
+        await user.click(within(orgComboBoxList).getByText("Dat Organization"))
     );
 
     await waitFor(() => expect(facilityComboBoxInput).toBeEnabled());
     expect(clearFiltersBtn).toBeEnabled();
-    await act(async () => await userEvent.type(facilityComboBoxInput, "incom"));
+    await act(async () => await user.type(facilityComboBoxInput, "incom"));
     await act(
       async () =>
-        await userEvent.click(
+        await user.click(
           within(facilityComboBoxList).getByText("Incomplete Site")
         )
     );
 
     const searchBtn = screen.getByRole("button", {
       name: /search/i,
     });
-    await act(async () => await userEvent.click(searchBtn));
+    await act(async () => await user.click(searchBtn));
 
     await screen.findByRole("heading", { name: /Incomplete Site/i });
   });