chore(test): rewritten registration form page's test using rtl (#5013)
This commit is contained in:
Tharun Rajendran
@@ -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(<AdminDetails handleSubmit={noop} />);
|
||||
const onSubmitSpy = jest.fn();
|
||||
it("renders", () => {
|
||||
render(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
|
||||
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(<AdminDetails handleSubmit={onSubmitSpy} currentPage />);
|
||||
|
||||
// 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(<AdminDetails handleSubmit={onSubmitSpy} currentPage />);
|
||||
|
||||
// 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(<AdminDetails handleSubmit={onSubmitSpy} currentPage />);
|
||||
// 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(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
const htmlForm = form.find("form");
|
||||
it("validates the password field", () => {
|
||||
render(<AdminDetails handleSubmit={onSubmitSpy} currentPage />);
|
||||
// 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(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
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(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
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(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
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(<AdminDetails handleSubmit={onSubmitSpy} />);
|
||||
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(<AdminDetails handleSubmit={onSubmitSpy} currentPage />);
|
||||
// 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",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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(<FleetDetails handleSubmit={noop} />);
|
||||
const fleetWebAddressField = form.find({ name: "server_url" });
|
||||
const handleSubmitSpy = jest.fn();
|
||||
it("renders", () => {
|
||||
render(<FleetDetails handleSubmit={handleSubmitSpy} />);
|
||||
|
||||
expect(fleetWebAddressField.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("updates state when the field changes", () => {
|
||||
const form = mount(<FleetDetails handleSubmit={noop} />);
|
||||
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(<FleetDetails handleSubmit={handleSubmitSpy} />);
|
||||
const htmlForm = form.find("form");
|
||||
it("validates the presence of the fleet web address field", () => {
|
||||
render(<FleetDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
|
||||
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(<FleetDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
// 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(<FleetDetails handleSubmit={handleSubmitSpy} />);
|
||||
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(<FleetDetails handleSubmit={handleSubmitSpy} />);
|
||||
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(<FleetDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
// 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",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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(<OrgDetails handleSubmit={noop} />);
|
||||
const orgNameField = form.find({ name: "org_name" });
|
||||
const handleSubmitSpy = jest.fn();
|
||||
it("renders", () => {
|
||||
render(<OrgDetails handleSubmit={handleSubmitSpy} />);
|
||||
|
||||
expect(orgNameField.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("updates state when the field changes", () => {
|
||||
const form = mount(<OrgDetails handleSubmit={noop} />);
|
||||
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(<OrgDetails handleSubmit={noop} />);
|
||||
const orgLogoField = form.find({ name: "org_logo_url" });
|
||||
|
||||
expect(orgLogoField.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("updates state when the field changes", () => {
|
||||
const form = mount(<OrgDetails handleSubmit={noop} />);
|
||||
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(<OrgDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
// 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(<OrgDetails handleSubmit={handleSubmitSpy} />);
|
||||
const htmlForm = form.find("form");
|
||||
it("validates the logo url field starts with https://", () => {
|
||||
render(<OrgDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
// 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(<OrgDetails handleSubmit={handleSubmitSpy} />);
|
||||
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(<OrgDetails handleSubmit={handleSubmitSpy} />);
|
||||
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(<OrgDetails handleSubmit={handleSubmitSpy} currentPage />);
|
||||
// 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",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user