get stuff working wrapped in act

CDCgov · Aug 28, 2023 · acfe25c · acfe25c
1 parent 39e612a
commit acfe25c
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 65 deletions.
diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx
@@ -8,15 +8,12 @@ import {
 import { MemoryRouter } from "react-router-dom";
 import React from "react";
 import { ComboBoxRef } from "@trussworks/react-uswds";
-import { Simulate } from "react-dom/test-utils";
 
 import { Option } from "../../commonComponents/Dropdown";
 
 import FacilitySelectFilter from "./FacilitySelectFilter";
 import { initialState, ManageFacilityState } from "./ManageFacility";
 
-import focus = Simulate.focus;
-
 describe("FacilitySelectFilter", () => {
   const handleClearFilter = jest.fn();
   const handleSelectOrg = jest.fn();

diff --git a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx
@@ -1,13 +1,7 @@
-import {
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-  within,
-} from "@testing-library/react";
+import { act, render, screen, waitFor, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
-import { fireEvent, userEvent } from "@storybook/testing-library";
+import userEvent from "@testing-library/user-event";
 
 import {
   DeleteFacilityDocument,
@@ -49,31 +43,26 @@ describe("ManageFacility", () => {
     expect(screen.getByText(/No facility selected/)).toBeInTheDocument();
   });
 
-  it.only("does nothing if no facility selection is made", async () => {
+  it("does nothing if no facility selection is made", async () => {
     const clearFiltersBtn = getClearFilterBtn();
     expect(clearFiltersBtn).toBeDisabled();
 
     const orgSelectionDiv = screen.getByText("Organization");
-    const orgDropdown = within(orgSelectionDiv).getByTestId("combo-box-select");
-    await waitFor(() => expect(orgDropdown).toBeEnabled());
-    await waitForElementToBeRemoved(() =>
-      within(orgSelectionDiv).queryByText("No results found")
+    const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox");
+    const orgComboBoxList = within(orgSelectionDiv).getByTestId(
+      "combo-box-option-list"
     );
 
-    userEvent.selectOptions(orgDropdown, [
-      "604f2e80-b4b7-4fff-806a-2a77973aa08f",
-    ]); // picks Dis Organization
-
+    await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
+    await act(async () => {
+      await userEvent.type(orgComboBoxInput, "dis");
+      await userEvent.click(
+        within(orgComboBoxList).getByText("Dis Organization")
+      );
+    });
+    expect(orgComboBoxInput).toHaveValue("Dis Organization");
     expect(clearFiltersBtn).toBeEnabled();
 
-    const facilitySelectionDiv = screen.getByText("Testing facility");
-    const facilityDropdown = within(facilitySelectionDiv).getByRole("combobox");
-    await waitFor(() => expect(facilityDropdown).toBeEnabled());
-
-    userEvent.selectOptions(facilityDropdown, [
-      screen.getByText("Dis Organization"),
-    ]); // picks -Select-
-
     await waitFor(() => expect(clearFiltersBtn).toBeEnabled());
     expect(screen.getByText(/No facility selected/)).toBeInTheDocument();
   });
@@ -82,56 +71,87 @@ describe("ManageFacility", () => {
     const clearFiltersBtn = getClearFilterBtn();
     expect(clearFiltersBtn).toBeDisabled();
 
-    const orgDropdown = screen.getByRole("combobox", { name: /organization/i });
-    await waitFor(() => expect(orgDropdown).toBeEnabled());
-    fireEvent.change(orgDropdown, {
-      target: { value: "604f2e80-b4b7-4fff-806a-2a77973aa08f" },
-    }); // picks Dis Organization
+    const orgSelectionDiv = screen.getByText("Organization");
+    const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox");
+    const orgComboBoxList = within(orgSelectionDiv).getByTestId(
+      "combo-box-option-list"
+    );
+    await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
+
+    await act(async () => {
+      await userEvent.type(orgComboBoxInput, "dis");
+      await userEvent.click(
+        within(orgComboBoxList).getByText("Dis Organization")
+      );
+    });
 
     await waitFor(() => expect(clearFiltersBtn).toBeEnabled());
-    fireEvent.click(clearFiltersBtn);
+    await act(async () => {
+      await userEvent.click(clearFiltersBtn);
+    });
 
     await waitFor(() => expect(clearFiltersBtn).toBeDisabled());
-    expect(orgDropdown).toHaveValue("");
+    expect(orgComboBoxInput).toHaveValue("");
     expect(screen.getByText(/No facility selected/)).toBeInTheDocument();
   });
 
   it("loads facility and deletes it", async () => {
     const clearFiltersBtn = getClearFilterBtn();
     expect(clearFiltersBtn).toBeDisabled();
 
-    const orgDropdown = screen.getByRole("combobox", { name: /organization/i });
-    await waitFor(() => expect(orgDropdown).toBeEnabled());
-    fireEvent.change(orgDropdown, {
-      target: { value: "604f2e80-b4b7-4fff-806a-2a77973aa08f" },
-    }); // picks Dis Organization
+    const orgSelectionDiv = screen.getByText("Organization");
+    const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox");
+    const orgComboBoxList = within(orgSelectionDiv).getByTestId(
+      "combo-box-option-list"
+    );
 
-    const facilityDropdown = screen.getByRole("combobox", {
-      name: /facility/i,
+    await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
+    await act(async () => {
+      await userEvent.type(orgComboBoxInput, "dis");
+      await userEvent.click(
+        within(orgComboBoxList).getByText("Dis Organization")
+      );
     });
-    await waitFor(() => expect(facilityDropdown).toBeEnabled());
+
+    const facilitySelectionDiv = screen.getByText("Testing facility");
+    const facilityComboBoxInput =
+      within(facilitySelectionDiv).getByRole("combobox");
+    const facilityComboBoxList = within(facilitySelectionDiv).getByTestId(
+      "combo-box-option-list"
+    );
+
+    await waitFor(() => expect(facilityComboBoxInput).toBeEnabled());
     expect(clearFiltersBtn).toBeEnabled();
-    fireEvent.change(facilityDropdown, {
-      target: { value: "1919865a-92eb-4c46-b73b-471b02b131b7" },
-    }); // picks testing site
+    await act(async () => {
+      await userEvent.type(facilityComboBoxInput, "testing site");
+      await userEvent.click(
+        within(facilityComboBoxList).getByText("Testing Site")
+      );
+    });
 
     const searchBtn = screen.getByRole("button", {
       name: /search/i,
     });
-    fireEvent.click(searchBtn);
+    await act(async () => {
+      await userEvent.click(searchBtn);
+    });
 
     await screen.findByRole("heading", { name: /Testing Site/i });
 
     const deleteFacilityBtn = screen.getByRole("button", {
       name: /delete facility testing site/i,
     });
-    fireEvent.click(deleteFacilityBtn);
+    await act(async () => {
+      await userEvent.click(deleteFacilityBtn);
+    });
 
     await screen.findByRole("heading", { name: /delete testing site/i });
     const yesDeleteBtn = screen.getByRole("button", {
       name: /yes, delete facility/i,
     });
-    fireEvent.click(yesDeleteBtn);
+    await act(async () => {
+      await userEvent.click(yesDeleteBtn);
+    });
 
     await waitFor(() =>
       expect(
@@ -141,34 +161,51 @@ describe("ManageFacility", () => {
 
     // Facility testing site successfully deleted
     // page resets
-    await waitFor(() => expect(orgDropdown).toHaveValue(""));
-    expect(facilityDropdown).toHaveValue("");
+    await waitFor(() => expect(orgComboBoxInput).toHaveValue(""));
+    expect(facilityComboBoxInput).toHaveValue("");
     expect(clearFiltersBtn).toBeDisabled();
   });
 
   it("loads the page even when no facility is retrieved", async () => {
     const clearFiltersBtn = getClearFilterBtn();
     expect(clearFiltersBtn).toBeDisabled();
 
-    const orgDropdown = screen.getByRole("combobox", { name: /organization/i });
-    await waitFor(() => expect(orgDropdown).toBeEnabled());
-    fireEvent.change(orgDropdown, {
-      target: { value: "09cdf298-39b3-41b0-92f7-092c2bfe065e" },
-    }); // picks Dis Organization
+    const orgSelectionDiv = screen.getByText("Organization");
+    const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox");
+    const orgComboBoxList = within(orgSelectionDiv).getByTestId(
+      "combo-box-option-list"
+    );
 
-    const facilityDropdown = screen.getByRole("combobox", {
-      name: /facility/i,
+    await waitFor(() => expect(orgComboBoxInput).toBeEnabled());
+    await act(async () => {
+      await userEvent.type(orgComboBoxInput, "dat");
+      await userEvent.click(
+        within(orgComboBoxList).getByText("Dat Organization")
+      );
     });
-    await waitFor(() => expect(facilityDropdown).toBeEnabled());
+
+    const facilitySelectionDiv = screen.getByText("Testing facility");
+    const facilityComboBoxInput =
+      within(facilitySelectionDiv).getByRole("combobox");
+    const facilityComboBoxList = within(facilitySelectionDiv).getByTestId(
+      "combo-box-option-list"
+    );
+
+    await waitFor(() => expect(facilityComboBoxInput).toBeEnabled());
     expect(clearFiltersBtn).toBeEnabled();
-    fireEvent.change(facilityDropdown, {
-      target: { value: "1919865a-92eb-4c46-b73b-471b02b131b8" },
-    }); // picks testing site
+    await act(async () => {
+      await userEvent.type(facilityComboBoxInput, "incom");
+      await userEvent.click(
+        within(facilityComboBoxList).getByText("Incomplete Site")
+      );
+    });
 
     const searchBtn = screen.getByRole("button", {
       name: /search/i,
     });
-    fireEvent.click(searchBtn);
+    await act(async () => {
+      await userEvent.click(searchBtn);
+    });
 
     await screen.findByRole("heading", { name: /Incomplete Site/i });
   });

diff --git a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.tsx b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.tsx
@@ -91,7 +91,6 @@ const ManageFacility = () => {
    * Facility select filter handlers
    */
   function handleSelectOrganization(selectedOrg: string | undefined) {
-    console.log("in handle function: ", selectedOrg);
     if (selectedOrg) {
       queryGetFacilitiesByOrgId({
         variables: { orgId: selectedOrg },
@@ -118,7 +117,7 @@ const ManageFacility = () => {
   async function handleSelectFacility(selectedFacility: string | undefined) {
     updateLocalState((prevState) => ({
       ...prevState,
-      selectedFacilityId: selectedFacility,
+      facilityId: selectedFacility,
     }));
   }