From d1a717fef05ba6e3f2663ce2ee0d55f59175994c Mon Sep 17 00:00:00 2001 From: Tharun Rajendran Date: Fri, 18 Feb 2022 02:34:25 +0530 Subject: [PATCH] chore(test): rewritten change password form test using rtl (#4269) --- .../ChangePasswordForm.tests.jsx | 210 +++++++++++------- 1 file changed, 128 insertions(+), 82 deletions(-) diff --git a/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx b/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx index 967583b12..7c40d5232 100644 --- a/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx +++ b/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx @@ -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( - - ); + render(); - 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( - - ); - 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(); - 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( - - ).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(); - 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( - - ).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( - - ); - const form = component.find("form"); + it("does not submit when the new password is invalid", async () => { + render(); 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(); + 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(); + + 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(); + + // when + fireEvent.click(screen.getByRole("button", { name: "Cancel" })); + // then + expect(props.onCancel).toHaveBeenCalled(); }); });