PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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 { 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();