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",
});
});
});