mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
chore(test): rewritten change password form test using rtl (#4269)
This commit is contained in:
Tharun Rajendran
GitHub
parent
163ddb8b20
commit
d1a717fef0
@ -1,111 +1,157 @@
|
||||
import React from "react";
|
||||
import { mount } from "enzyme";
|
||||
import { noop } from "lodash";
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import ChangePasswordForm from "components/forms/ChangePasswordForm";
|
||||
import helpers from "test/helpers";
|
||||
|
||||
const { fillInFormInput, itBehavesLikeAFormInputElement } = helpers;
|
||||
|
||||
describe("ChangePasswordForm - component", () => {
|
||||
const props = {
|
||||
handleSubmit: jest.fn(),
|
||||
onCancel: jest.fn(),
|
||||
};
|
||||
it("has the correct fields", () => {
|
||||
const form = mount(
|
||||
<ChangePasswordForm handleSubmit={noop} onCancel={noop} />
|
||||
);
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
|
||||
itBehavesLikeAFormInputElement(form, "old_password");
|
||||
itBehavesLikeAFormInputElement(form, "new_password");
|
||||
itBehavesLikeAFormInputElement(form, "new_password_confirmation");
|
||||
expect(screen.getByLabelText("Original password")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("New password")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByLabelText("New password confirmation")
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Change password" })
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the password fields as HTML password fields", () => {
|
||||
const form = mount(
|
||||
<ChangePasswordForm handleSubmit={noop} onCancel={noop} />
|
||||
);
|
||||
const passwordField = form.find('input[name="old_password"]');
|
||||
const newPasswordField = form.find('input[name="new_password"]');
|
||||
const newPasswordConfirmationField = form.find(
|
||||
'input[name="new_password_confirmation"]'
|
||||
);
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
|
||||
expect(passwordField.prop("type")).toEqual("password");
|
||||
expect(newPasswordField.prop("type")).toEqual("password");
|
||||
expect(newPasswordConfirmationField.prop("type")).toEqual("password");
|
||||
expect(screen.getByLabelText("Original password")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
expect(screen.getByLabelText("New password")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
expect(screen.getByLabelText("New password confirmation")).toHaveAttribute(
|
||||
"type",
|
||||
"password"
|
||||
);
|
||||
});
|
||||
|
||||
it("calls the handleSubmit props with form data", () => {
|
||||
const handleSubmitSpy = jest.fn();
|
||||
const form = mount(
|
||||
<ChangePasswordForm handleSubmit={handleSubmitSpy} onCancel={noop} />
|
||||
).find("form");
|
||||
const expectedFormData = {
|
||||
old_password: "p@ssw0rd",
|
||||
new_password: "p@ssw0rd1",
|
||||
new_password_confirmation: "p@ssw0rd1",
|
||||
};
|
||||
const passwordInput = form.find({ name: "old_password" }).find("input");
|
||||
const newPasswordInput = form.find({ name: "new_password" }).find("input");
|
||||
const newPasswordConfirmationInput = form
|
||||
.find({ name: "new_password_confirmation" })
|
||||
.find("input");
|
||||
it("should trigger validation for all fields", async () => {
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
|
||||
fillInFormInput(passwordInput, expectedFormData.old_password);
|
||||
fillInFormInput(newPasswordInput, expectedFormData.new_password);
|
||||
fillInFormInput(
|
||||
newPasswordConfirmationInput,
|
||||
expectedFormData.new_password_confirmation
|
||||
);
|
||||
|
||||
form.simulate("submit");
|
||||
|
||||
expect(handleSubmitSpy).toHaveBeenCalledWith(expectedFormData);
|
||||
// when
|
||||
fireEvent.click(screen.getByRole("button", { name: "Change password" }));
|
||||
// then
|
||||
expect(props.handleSubmit).not.toHaveBeenCalled();
|
||||
expect(
|
||||
await screen.findByText("Password must be present")
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
await screen.findByText("New password must be present")
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
await screen.findByText("New password confirmation must be present")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls the onCancel prop when CANCEL is clicked", () => {
|
||||
const onCancelSpy = jest.fn();
|
||||
const form = mount(
|
||||
<ChangePasswordForm handleSubmit={noop} onCancel={onCancelSpy} />
|
||||
).find("form");
|
||||
const cancelBtn = form
|
||||
.find("Button")
|
||||
.findWhere((n) => n.prop("children") === "Cancel")
|
||||
.find("button");
|
||||
|
||||
cancelBtn.simulate("click");
|
||||
|
||||
expect(onCancelSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not submit when the new password is invalid", () => {
|
||||
const handleSubmitSpy = jest.fn();
|
||||
const component = mount(
|
||||
<ChangePasswordForm handleSubmit={handleSubmitSpy} onCancel={noop} />
|
||||
);
|
||||
const form = component.find("form");
|
||||
it("does not submit when the new password is invalid", async () => {
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
const expectedFormData = {
|
||||
old_password: "p@ssw0rd",
|
||||
new_password: "new_password",
|
||||
new_password_confirmation: "new_password",
|
||||
};
|
||||
const passwordInput = form.find({ name: "old_password" }).find("input");
|
||||
const newPasswordInput = form.find({ name: "new_password" }).find("input");
|
||||
const newPasswordConfirmationInput = form
|
||||
.find({ name: "new_password_confirmation" })
|
||||
.find("input");
|
||||
|
||||
fillInFormInput(passwordInput, expectedFormData.old_password);
|
||||
fillInFormInput(newPasswordInput, expectedFormData.new_password);
|
||||
fillInFormInput(
|
||||
newPasswordConfirmationInput,
|
||||
// when
|
||||
userEvent.type(
|
||||
screen.getByLabelText("Original password"),
|
||||
expectedFormData.old_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password"),
|
||||
expectedFormData.new_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password confirmation"),
|
||||
expectedFormData.new_password_confirmation
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Change password" }));
|
||||
// then
|
||||
expect(props.handleSubmit).not.toHaveBeenCalled();
|
||||
expect(
|
||||
await screen.findByText("Password must meet the criteria below")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
form.simulate("submit");
|
||||
it("does not submit when new confirm password is not matching with new password", async () => {
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
const expectedFormData = {
|
||||
old_password: "p@ssw0rd",
|
||||
new_password: "new_password",
|
||||
new_password_confirmation: "new_password_1",
|
||||
};
|
||||
|
||||
expect(handleSubmitSpy).not.toHaveBeenCalled();
|
||||
// when
|
||||
userEvent.type(
|
||||
screen.getByLabelText("Original password"),
|
||||
expectedFormData.old_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password"),
|
||||
expectedFormData.new_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password confirmation"),
|
||||
expectedFormData.new_password_confirmation
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Change password" }));
|
||||
// then
|
||||
expect(props.handleSubmit).not.toHaveBeenCalled();
|
||||
expect(
|
||||
await screen.findByText(
|
||||
"New password confirmation does not match new password"
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(component.state("errors")).toMatchObject({
|
||||
new_password: "Password must meet the criteria below",
|
||||
});
|
||||
it("calls the handleSubmit props with form data", () => {
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
|
||||
const expectedFormData = {
|
||||
old_password: "p@ssw0rd",
|
||||
new_password: "p@ssw0rd1",
|
||||
new_password_confirmation: "p@ssw0rd1",
|
||||
};
|
||||
|
||||
// when
|
||||
userEvent.type(
|
||||
screen.getByLabelText("Original password"),
|
||||
expectedFormData.old_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password"),
|
||||
expectedFormData.new_password
|
||||
);
|
||||
userEvent.type(
|
||||
screen.getByLabelText("New password confirmation"),
|
||||
expectedFormData.new_password_confirmation
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Change password" }));
|
||||
// then
|
||||
expect(props.handleSubmit).toHaveBeenCalledWith(expectedFormData);
|
||||
});
|
||||
|
||||
it("calls the onCancel prop when CANCEL is clicked", () => {
|
||||
render(<ChangePasswordForm {...props} />);
|
||||
|
||||
// when
|
||||
fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
// then
|
||||
expect(props.onCancel).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user