fix: remove flaky warning messages in test

Parkreiner · Parkreiner · commit 1060cc025c65 · 2023-10-06T16:21:40.000Z
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx
@@ -2,6 +2,21 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "testHelpers/renderHelpers";
 import { DeleteDialog } from "./DeleteDialog";
+import { act } from "react-dom/test-utils";
+
+const inputTestId = "delete-dialog-name-confirmation";
+
+async function fillInputField(inputElement: HTMLElement, text: string) {
+  // 2023-10-06 - There's something wonky with MUI's ConfirmDialog that causes
+  // its state to update after a typing event being fired, and React Testing
+  // Library isn't able to catch it, making React DOM freak out because an
+  // "unexpected" state change happened. Tried everything under the sun to catch
+  // the state changes the proper way, but the only way to get around it for now
+  // might be to manually make React aware of the changes
+
+  // eslint-disable-next-line testing-library/no-unnecessary-act -- have to make sure state updates don't slip through cracks
+  return act(() => userEvent.type(inputElement, text));
+}
 
 describe("DeleteDialog", () => {
   it("disables confirm button when the text field is empty", () => {
@@ -14,6 +29,7 @@ describe("DeleteDialog", () => {
         name="MyTemplate"
       />,
     );
+
     const confirmButton = screen.getByRole("button", { name: "Delete" });
     expect(confirmButton).toBeDisabled();
   });
@@ -28,8 +44,10 @@ describe("DeleteDialog", () => {
         name="MyTemplate"
       />,
     );
-    const textField = screen.getByTestId("delete-dialog-name-confirmation");
-    await userEvent.type(textField, "MyTemplateWrong");
+
+    const textField = screen.getByTestId(inputTestId);
+    await fillInputField(textField, "MyTemplateButWrong");
+
     const confirmButton = screen.getByRole("button", { name: "Delete" });
     expect(confirmButton).toBeDisabled();
   });
@@ -44,8 +62,10 @@ describe("DeleteDialog", () => {
         name="MyTemplate"
       />,
     );
-    const textField = screen.getByTestId("delete-dialog-name-confirmation");
-    await userEvent.type(textField, "MyTemplate");
+
+    const textField = screen.getByTestId(inputTestId);
+    await fillInputField(textField, "MyTemplate");
+
     const confirmButton = screen.getByRole("button", { name: "Delete" });
     expect(confirmButton).not.toBeDisabled();
   });
