Migrate InteractiveAuthDialog-test.tsx to react-testing-library (#10134)

Author: weeman1337

test/components/views/dialogs/InteractiveAuthDialog-test.tsx

@@ -16,9 +16,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog";
 import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
@@ -33,7 +32,10 @@ describe("InteractiveAuthDialog", function () {
         makeRequest: jest.fn().mockResolvedValue(undefined),
         onFinished: jest.fn(),
     };
-    const getComponent = (props = {}) => mount(<InteractiveAuthDialog {...defaultProps} {...props} />);
+
+    const renderComponent = (props = {}) => render(<InteractiveAuthDialog {...defaultProps} {...props} />);
+    const getPasswordField = () => screen.getByLabelText("Password");
+    const getSubmitButton = () => screen.getByRole("button", { name: "Continue" });
 
     beforeEach(function () {
         jest.clearAllMocks();
@@ -44,8 +46,6 @@ describe("InteractiveAuthDialog", function () {
         unmockClientPeg();
     });
 
-    const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('[type="submit"]').at(0);
-
     it("Should successfully complete a password flow", async () => {
         const onFinished = jest.fn();
         const makeRequest = jest.fn().mockResolvedValue({ a: 1 });
@@ -56,31 +56,24 @@ describe("InteractiveAuthDialog", function () {
             flows: [{ stages: ["m.login.password"] }],
         };
 
-        const wrapper = getComponent({ makeRequest, onFinished, authData });
+        renderComponent({ makeRequest, onFinished, authData });
 
-        const passwordNode = wrapper.find('input[type="password"]').at(0);
-        const submitNode = getSubmitButton(wrapper);
+        const passwordField = getPasswordField();
+        const submitButton = getSubmitButton();
 
-        const formNode = wrapper.find("form").at(0);
-        expect(passwordNode).toBeTruthy();
-        expect(submitNode).toBeTruthy();
+        expect(passwordField).toBeTruthy();
+        expect(submitButton).toBeTruthy();
 
         // submit should be disabled
-        expect(submitNode.props().disabled).toBe(true);
+        expect(submitButton).toBeDisabled();
 
         // put something in the password box
-        act(() => {
-            passwordNode.simulate("change", { target: { value: "s3kr3t" } });
-            wrapper.setProps({});
-        });
+        await userEvent.type(passwordField, "s3kr3t");
 
-        expect(wrapper.find('input[type="password"]').at(0).props().value).toEqual("s3kr3t");
-        expect(getSubmitButton(wrapper).props().disabled).toBe(false);
+        expect(submitButton).not.toBeDisabled();
 
         // hit enter; that should trigger a request
-        act(() => {
-            formNode.simulate("submit");
-        });
+        await userEvent.click(submitButton);
 
         // wait for auth request to resolve
         await flushPromises();