From acfe25cbdbafa099e2fbcaeb6da601b5951cad19 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Mon, 28 Aug 2023 16:09:55 -0400 Subject: [PATCH] get stuff working wrapped in act --- .../FacilitySelectFilter.test.tsx | 3 - .../ManageFacility/ManageFacility.test.tsx | 157 +++++++++++------- .../ManageFacility/ManageFacility.tsx | 3 +- 3 files changed, 98 insertions(+), 65 deletions(-) diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx index 62536181800..8ccd8bde505 100644 --- 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 index 46e21757bea..5327db799b3 100644 --- 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,17 +71,27 @@ 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(); }); @@ -100,38 +99,59 @@ 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" + ); - 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,8 +161,8 @@ 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(); }); @@ -150,25 +170,42 @@ 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: "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 index 8b911ae58c6..c0a9ed616cb 100644 --- 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, })); }