diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.tests.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.tests.jsx index 7673a4f7b5..f66b901618 100644 --- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.tests.jsx +++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.tests.jsx @@ -1,125 +1,101 @@ 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 AdminDetails from "components/forms/RegistrationForm/AdminDetails"; -import { fillInFormInput, itBehavesLikeAFormInputElement } from "test/helpers"; describe("AdminDetails - form", () => { - let form = mount(); + const onSubmitSpy = jest.fn(); + it("renders", () => { + render(); - describe("full name input", () => { - it("renders an input field", () => { - itBehavesLikeAFormInputElement(form, "name"); - }); + expect(screen.getByPlaceholderText("Password")).toBeInTheDocument(); + expect(screen.getByPlaceholderText("Confirm password")).toBeInTheDocument(); + expect( + screen.getByRole("textbox", { name: "Full name" }) + ).toBeInTheDocument(); + expect(screen.getByRole("textbox", { name: "Email" })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument(); }); - describe("password input", () => { - it("renders an input field", () => { - itBehavesLikeAFormInputElement(form, "password"); - }); + it("validates missing fields", () => { + render(); + + // when + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(onSubmitSpy).not.toHaveBeenCalled(); + expect(screen.getByText("Email must be present")).toBeInTheDocument(); + expect(screen.getByText("Password must be present")).toBeInTheDocument(); + expect( + screen.getByText("Password confirmation must be present") + ).toBeInTheDocument(); + expect(screen.getByText("Full name must be present")).toBeInTheDocument(); }); - describe("password confirmation input", () => { - it("renders an input field", () => { - itBehavesLikeAFormInputElement(form, "password_confirmation"); - }); + it("validates the email field", () => { + render(); + + // when + userEvent.type( + screen.getByRole("textbox", { name: "Email" }), + "invalid-email" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(onSubmitSpy).not.toHaveBeenCalled(); + expect(screen.getByText("Email must be a valid email")).toBeInTheDocument(); }); - describe("email input", () => { - it("renders an input field", () => { - itBehavesLikeAFormInputElement(form, "email"); - }); + it("validates the password fields match", () => { + render(); + // when + userEvent.type(screen.getByPlaceholderText("Password"), "p@ssw0rd"); + userEvent.type( + screen.getByPlaceholderText("Confirm password"), + "password123" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(onSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Password confirmation does not match password") + ).toBeInTheDocument(); }); - describe("submitting the form", () => { - it("validates missing fields", () => { - const onSubmitSpy = jest.fn(); - form = mount(); - const htmlForm = form.find("form"); + it("validates the password field", () => { + render(); + // when + userEvent.type(screen.getByPlaceholderText("Password"), "passw0rd"); + userEvent.type(screen.getByPlaceholderText("Confirm password"), "passw0rd"); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(onSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Password must meet the criteria below") + ).toBeInTheDocument(); + }); - htmlForm.simulate("submit"); - - expect(onSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - email: "Email must be present", - password: "Password must be present", - password_confirmation: "Password confirmation must be present", - name: "Full name must be present", - }); - }); - - it("validates the email field", () => { - const onSubmitSpy = jest.fn(); - form = mount(); - const emailField = form.find({ name: "email" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(emailField, "invalid-email"); - htmlForm.simulate("submit"); - - expect(onSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - email: "Email must be a valid email", - }); - }); - - it("validates the password fields match", () => { - const onSubmitSpy = jest.fn(); - form = mount(); - const passwordConfirmationField = form - .find({ name: "password_confirmation" }) - .find("input"); - const passwordField = form.find({ name: "password" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(passwordField, "p@ssw0rd"); - fillInFormInput(passwordConfirmationField, "password123"); - htmlForm.simulate("submit"); - - expect(onSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - password_confirmation: "Password confirmation does not match password", - }); - }); - - it("validates the password field", () => { - const onSubmitSpy = jest.fn(); - form = mount(); - const passwordConfirmationField = form - .find({ name: "password_confirmation" }) - .find("input"); - const passwordField = form.find({ name: "password" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(passwordField, "passw0rd"); - fillInFormInput(passwordConfirmationField, "passw0rd"); - htmlForm.simulate("submit"); - - expect(onSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - password: "Password must meet the criteria below", - }); - }); - - it("submits the form when valid", () => { - const onSubmitSpy = jest.fn(); - form = mount(); - const emailField = form.find({ name: "email" }).find("input"); - const passwordConfirmationField = form - .find({ name: "password_confirmation" }) - .find("input"); - const passwordField = form.find({ name: "password" }).find("input"); - const nameField = form.find({ name: "name" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(emailField, "hi@gnar.dog"); - fillInFormInput(passwordField, "p@ssw0rd"); - fillInFormInput(passwordConfirmationField, "p@ssw0rd"); - fillInFormInput(nameField, "Gnar Dog"); - htmlForm.simulate("submit"); - - expect(onSubmitSpy).toHaveBeenCalled(); + it("submits the form when valid", () => { + render(); + // when + userEvent.type( + screen.getByRole("textbox", { name: "Email" }), + "hi@gnar.dog" + ); + userEvent.type(screen.getByPlaceholderText("Password"), "p@ssw0rd"); + userEvent.type(screen.getByPlaceholderText("Confirm password"), "p@ssw0rd"); + userEvent.type( + screen.getByRole("textbox", { name: "Full name" }), + "Gnar Dog" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(onSubmitSpy).toHaveBeenCalledWith({ + email: "hi@gnar.dog", + name: "Gnar Dog", + password: "p@ssw0rd", + password_confirmation: "p@ssw0rd", }); }); }); diff --git a/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx index 9b8d479538..5073fefed0 100644 --- a/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx +++ b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx @@ -1,76 +1,58 @@ 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 FleetDetails from "components/forms/RegistrationForm/FleetDetails"; -import { fillInFormInput } from "test/helpers"; describe("FleetDetails - form", () => { - describe("fleet web address input", () => { - it("renders an input field", () => { - const form = mount(); - const fleetWebAddressField = form.find({ name: "server_url" }); + const handleSubmitSpy = jest.fn(); + it("renders", () => { + render(); - expect(fleetWebAddressField.length).toBeGreaterThan(0); - }); - - it("updates state when the field changes", () => { - const form = mount(); - const serverAddressField = form - .find({ name: "server_url" }) - .find("input"); - - fillInFormInput(serverAddressField, "https://gnar.Fleet.co"); - - expect(form.state().formData).toMatchObject({ - server_url: "https://gnar.Fleet.co", - }); - }); + expect( + screen.getByRole("textbox", { name: "Fleet web address" }) + ).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument(); }); - describe("submitting the form", () => { - it("validates the presence of the fleet web address field", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const htmlForm = form.find("form"); + it("validates the presence of the fleet web address field", () => { + render(); - htmlForm.simulate("submit"); + // when + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Fleet web address must be completed") + ).toBeInTheDocument(); + }); - expect(handleSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - server_url: "Fleet web address must be completed", - }); - }); + it("validates the fleet web address field starts with https://", () => { + render(); + // when + userEvent.type( + screen.getByRole("textbox", { name: "Fleet web address" }), + "http://gnar.Fleet.co" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Fleet web address must start with https://") + ).toBeInTheDocument(); + }); - it("validates the fleet web address field starts with https://", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const fleetWebAddressField = form - .find({ name: "server_url" }) - .find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(fleetWebAddressField, "http://gnar.Fleet.co"); - htmlForm.simulate("submit"); - - expect(handleSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - server_url: "Fleet web address must start with https://", - }); - }); - - it("submits the form when valid", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const fleetWebAddressField = form - .find({ name: "server_url" }) - .find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(fleetWebAddressField, "https://gnar.Fleet.co"); - htmlForm.simulate("submit"); - - expect(handleSubmitSpy).toHaveBeenCalled(); + it("submits the form when valid", () => { + render(); + // when + userEvent.type( + screen.getByRole("textbox", { name: "Fleet web address" }), + "https://gnar.Fleet.co" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).toHaveBeenCalledWith({ + server_url: "https://gnar.Fleet.co", }); }); }); diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.tests.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.tests.jsx index 07cd481358..169596b862 100644 --- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.tests.jsx +++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.tests.jsx @@ -1,91 +1,62 @@ import React from "react"; -import { mount } from "enzyme"; -import { noop } from "lodash"; +import { fireEvent, render, screen } from "@testing-library/react"; import OrgDetails from "components/forms/RegistrationForm/OrgDetails"; -import { fillInFormInput } from "test/helpers"; +import userEvent from "@testing-library/user-event"; describe("OrgDetails - form", () => { - describe("organization name input", () => { - it("renders an input field", () => { - const form = mount(); - const orgNameField = form.find({ name: "org_name" }); + const handleSubmitSpy = jest.fn(); + it("renders", () => { + render(); - expect(orgNameField.length).toBeGreaterThan(0); - }); - - it("updates state when the field changes", () => { - const form = mount(); - const orgNameField = form.find({ name: "org_name" }).find("input"); - - fillInFormInput(orgNameField, "The Gnar Co"); - - expect(form.state().formData).toMatchObject({ org_name: "The Gnar Co" }); - }); + expect( + screen.getByRole("textbox", { name: "Organization name" }) + ).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument(); }); - describe("organization logo URL input", () => { - it("renders an input field", () => { - const form = mount(); - const orgLogoField = form.find({ name: "org_logo_url" }); - - expect(orgLogoField.length).toBeGreaterThan(0); - }); - - it("updates state when the field changes", () => { - const form = mount(); - const orgLogoField = form.find({ name: "org_logo_url" }).find("input"); - - fillInFormInput(orgLogoField, "http://www.thegnar.co/logo.png"); - - expect(form.state().formData).toMatchObject({ - org_logo_url: "http://www.thegnar.co/logo.png", - }); - }); + it("validates presence of org_name field", () => { + render(); + // when + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Organization name must be present") + ).toBeInTheDocument(); }); - describe("submitting the form", () => { - it("validates presence of org_name field", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const htmlForm = form.find("form"); + it("validates the logo url field starts with https://", () => { + render(); + // when + userEvent.type( + screen.getByRole("textbox", { name: "Organization logo URL (optional)" }), + "http://www.thegnar.co/logo.png" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).not.toHaveBeenCalled(); + expect( + screen.getByText("Organization logo URL must start with https://") + ).toBeInTheDocument(); + }); - htmlForm.simulate("submit"); - - expect(handleSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - org_name: "Organization name must be present", - }); - }); - - it("validates the logo url field starts with https://", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const orgLogoField = form.find({ name: "org_logo_url" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(orgLogoField, "http://www.thegnar.co/logo.png"); - htmlForm.simulate("submit"); - - expect(handleSubmitSpy).not.toHaveBeenCalled(); - expect(form.state().errors).toMatchObject({ - org_logo_url: "Organization logo URL must start with https://", - }); - }); - - it("submits the form when valid", () => { - const handleSubmitSpy = jest.fn(); - const form = mount(); - const orgLogoField = form.find({ name: "org_logo_url" }).find("input"); - const orgNameField = form.find({ name: "org_name" }).find("input"); - const htmlForm = form.find("form"); - - fillInFormInput(orgLogoField, "https://www.thegnar.co/logo.png"); - fillInFormInput(orgNameField, "The Gnar Co"); - - htmlForm.simulate("submit"); - - expect(handleSubmitSpy).toHaveBeenCalled(); + it("submits the form when valid", () => { + render(); + // when + userEvent.type( + screen.getByRole("textbox", { name: "Organization logo URL (optional)" }), + "https://www.thegnar.co/logo.png" + ); + userEvent.type( + screen.getByRole("textbox", { name: "Organization name" }), + "The Gnar Co" + ); + fireEvent.click(screen.getByRole("button", { name: "Next" })); + // then + expect(handleSubmitSpy).toHaveBeenCalledWith({ + org_logo_url: "https://www.thegnar.co/logo.png", + org_name: "The Gnar Co", }); }); });