imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Michael Weimann 2023-02-10 14:00:02 +01:00 • committed by GitHub
parent e810a20551
commit bb4b07fdc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

37
test/components/views/dialogs/InteractiveAuthDialog-test.tsx
View file

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