wip: Try to use waitFor()

editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx

@@ -1,10 +1,9 @@
 import { User } from "@opensystemslab/planx-core/types";
-import { fireEvent, waitFor } from "@testing-library/react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { act } from "react-dom/test-utils";
 import { axe, setup } from "testUtils";
 
 import PayComponent from "./Editor";
@@ -45,6 +44,7 @@ describe("Pay component - Editor Modal", () => {
     let initialState: FullStore;
 
     beforeAll(() => (initialState = getState()));
+    beforeEach(() => setState({ user: mockUser, flowName: "test flow" }));
     afterEach(() => act(() => setState(initialState)));
 
     it("renders the section", () => {
@@ -89,20 +89,20 @@ describe("Pay component - Editor Modal", () => {
         },
       };
 
-      const { user, getAllByLabelText, getByText } = setup(
+      const { user, findAllByLabelText, getByText } = setup(
         <DndProvider backend={HTML5Backend}>
           <PayComponent id="test" node={node} />
         </DndProvider>,
       );
 
-      const keyInputs = getAllByLabelText("Key");
-      const valueInputs = getAllByLabelText("Value");
+      const keyInputs = await findAllByLabelText("Key");
+      const valueInputs = await findAllByLabelText("Value");
 
       expect(keyInputs[2]).toHaveDisplayValue("isInviteToPay");
       expect(valueInputs[2]).toHaveDisplayValue("false");
 
-      await user.click(
-        getByText("Allow applicants to invite someone else to pay"),
+      await waitFor(() =>
+        user.click(getByText("Allow applicants to invite someone else to pay")),
       );
 
       expect(valueInputs[2]).toHaveValue("true");
@@ -131,34 +131,37 @@ describe("Pay component - Editor Modal", () => {
     });
 
     it("allows new values to be added", async () => {
-      act(() => setState({ user: mockUser, flowName: "test flow" }));
-
       const handleSubmit = jest.fn();
 
-      const { getAllByPlaceholderText, getAllByLabelText, user, getByRole } =
-        setup(
-          <DndProvider backend={HTML5Backend}>
-            <PayComponent
-              id="test"
-              handleSubmit={handleSubmit}
-              node={{ data: { fn: "fee" } }}
-            />
-          </DndProvider>,
-        );
+      const {
+        findAllByLabelText,
+        findAllByPlaceholderText,
+        getAllByLabelText,
+        user,
+        getByRole,
+      } = setup(
+        <DndProvider backend={HTML5Backend}>
+          <PayComponent
+            id="test"
+            handleSubmit={handleSubmit}
+            node={{ data: { fn: "fee" } }}
+          />
+        </DndProvider>,
+      );
 
       // Three default rows displayed
-      expect(getAllByLabelText("Delete")).toHaveLength(3);
+      expect(await findAllByLabelText("Delete")).toHaveLength(3);
 
-      await user.click(getByRole("button", { name: "add new" }));
+      await waitFor(() => user.click(getByRole("button", { name: "add new" })));
 
       // New row added
       expect(getAllByLabelText("Delete")).toHaveLength(4);
 
-      const keyInput = getAllByPlaceholderText("key")[3];
-      const valueInput = getAllByPlaceholderText("value")[3];
+      const keyInput = (await findAllByPlaceholderText("key"))[3];
+      const valueInput = (await findAllByPlaceholderText("value"))[3];
 
-      await user.type(keyInput, "myNewKey");
-      await user.type(valueInput, "myNewValue");
+      await waitFor(() => user.type(keyInput, "myNewKey"));
+      await waitFor(() => user.type(valueInput, "myNewValue"));
 
       // Required to trigger submission outside the context of FormModal component
       fireEvent.submit(getByRole("form"));
@@ -167,7 +170,6 @@ describe("Pay component - Editor Modal", () => {
     });
 
     it("allows new values to be deleted", async () => {
-      act(() => setState({ user: mockUser, flowName: "test flow" }));
       const mockNode = {
         data: {
           fn: "fee",
@@ -182,20 +184,20 @@ describe("Pay component - Editor Modal", () => {
 
       const handleSubmit = jest.fn();
 
-      const { getAllByLabelText, user, getByRole } = setup(
+      const { findAllByLabelText, getAllByLabelText, user, getByRole } = setup(
         <DndProvider backend={HTML5Backend}>
           <PayComponent id="test" handleSubmit={handleSubmit} node={mockNode} />
         </DndProvider>,
       );
 
       // Use delete buttons as proxy for rows
-      const deleteButtons = getAllByLabelText("Delete");
+      const deleteButtons = await findAllByLabelText("Delete");
       expect(deleteButtons).toHaveLength(4);
       const finalDeleteButton = deleteButtons[3];
       expect(finalDeleteButton).toBeDefined();
 
-      await user.click(finalDeleteButton);
-      expect(getAllByLabelText("Delete")).toHaveLength(3);
+      await waitFor(() => user.click(finalDeleteButton));
+      await waitFor(() => expect(getAllByLabelText("Delete")).toHaveLength(3));
 
       // Required to trigger submission outside the context of FormModal component
       fireEvent.submit(getByRole("form"));
@@ -210,8 +212,6 @@ describe("Pay component - Editor Modal", () => {
     });
 
     it("displays field-level errors", async () => {
-      act(() => setState({ user: mockUser, flowName: "test flow" }));
-
       const handleSubmit = jest.fn();
 
       const { getByText, user, getByRole } = setup(
@@ -220,8 +220,8 @@ describe("Pay component - Editor Modal", () => {
         </DndProvider>,
       );
 
-      await user.click(getByRole("button", { name: "add new" }));
-      fireEvent.submit(getByRole("form"));
+      await waitFor(() => user.click(getByRole("button", { name: "add new" })));
+      act(() => fireEvent.submit(getByRole("form")));
 
       expect(handleSubmit).not.toHaveBeenCalled();
 
@@ -233,27 +233,25 @@ describe("Pay component - Editor Modal", () => {
     }, 10000);
 
     it("displays array-level errors", async () => {
-      act(() => setState({ user: mockUser, flowName: "test flow" }));
-
       const handleSubmit = jest.fn();
 
-      const { getByText, user, getByRole, getAllByPlaceholderText } = setup(
+      const { findByText, findAllByPlaceholderText, user, getByRole } = setup(
         <DndProvider backend={HTML5Backend}>
           <PayComponent id="test" handleSubmit={handleSubmit} />
         </DndProvider>,
       );
 
       // Add first duplicate key
-      await user.click(getByRole("button", { name: "add new" }));
-      const keyInput4 = getAllByPlaceholderText("key")[3];
-      const valueInput4 = getAllByPlaceholderText("value")[3];
+      await waitFor(() => user.click(getByRole("button", { name: "add new" })));
+      const keyInput4 = (await findAllByPlaceholderText("key"))[3];
+      const valueInput4 = (await findAllByPlaceholderText("value"))[3];
       await user.type(keyInput4, "duplicatedKey");
       await user.type(valueInput4, "myNewValue");
 
       // Add second duplicate key
-      await user.click(getByRole("button", { name: "add new" }));
-      const keyInput5 = getAllByPlaceholderText("key")[4];
-      const valueInput5 = getAllByPlaceholderText("value")[4];
+      await waitFor(() => user.click(getByRole("button", { name: "add new" })));
+      const keyInput5 = (await findAllByPlaceholderText("key"))[4];
+      const valueInput5 = (await findAllByPlaceholderText("value"))[4];
       await user.type(keyInput5, "duplicatedKey");
       await user.type(valueInput5, "myNewValue");
 
@@ -263,9 +261,7 @@ describe("Pay component - Editor Modal", () => {
 
       // Test that validation schema is wired up to UI
       // model.test.ts tests validation schema behaviour in-depth
-      await waitFor(() =>
-        expect(getByText("Keys must be unique")).toBeVisible(),
-      );
+      expect(await findByText("Keys must be unique")).toBeVisible();
     }, 10000);
 
     it("only disables the first instance of a required filed", async () => {