From 41b92f63d40d2f0922df79ac05d77def4e9ef7dd Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 3 Jan 2023 09:44:18 +0400 Subject: [PATCH] testing the form --- src/ValidationInReact.js | 22 ++++----- src/__tests__/Tasks.test.js | 99 ++++++++++++++++++++++++++++++++----- 2 files changed, 98 insertions(+), 23 deletions(-) diff --git a/src/ValidationInReact.js b/src/ValidationInReact.js index 683f478..42dfba2 100644 --- a/src/ValidationInReact.js +++ b/src/ValidationInReact.js @@ -3,7 +3,7 @@ import React from "react"; const options = [ { value: "chocolate", label: "Chocolate" }, { value: "strawberry", label: "Strawberry" }, - { value: "vanilla", label: "Vanilla" } + { value: "vanilla", label: "Vanilla" }, ]; class validationInReact extends React.Component { @@ -15,15 +15,15 @@ class validationInReact extends React.Component { email: "", password: "", confirmPassword: "", - mobile: "" + mobile: "", }, errors: { firstName: "", email: "", password: "", mobile: "", - confirmPassword: "" - } + confirmPassword: "", + }, }; } @@ -86,12 +86,12 @@ class validationInReact extends React.Component { this.setState({ errors: { ...this.state.errors, - [e.target.name]: this.validate(e.target.name, e.target.value) + [e.target.name]: this.validate(e.target.name, e.target.value), }, fields: { ...this.state.fields, - [e.target.name]: e.target.value - } + [e.target.name]: e.target.value, + }, }); }; @@ -114,7 +114,7 @@ class validationInReact extends React.Component { firstName: fields.firstName, email: fields.email, password: fields.password, - mobile: fields.mobile + mobile: fields.mobile, }; window.alert("subit success", JSON.stringify(data)); } @@ -124,7 +124,7 @@ class validationInReact extends React.Component { const { fields, errors } = this.state; return ( -
+
@@ -170,7 +170,7 @@ class validationInReact extends React.Component { name="mobile" value={fields.mobile} onChange={(event) => this.handleUserInput(event)} - placeholder="mobile" + placeholder="Mobile" />
{errors.mobile} @@ -196,7 +196,7 @@ class validationInReact extends React.Component { name="confirmPassword" value={fields.confirmPassword} onChange={(event) => this.handleUserInput(event)} - placeholder="confirm Password" + placeholder="Confirm Password" />
{errors.confirmPassword} diff --git a/src/__tests__/Tasks.test.js b/src/__tests__/Tasks.test.js index 4aa712e..fa33518 100644 --- a/src/__tests__/Tasks.test.js +++ b/src/__tests__/Tasks.test.js @@ -1,47 +1,122 @@ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import "@testing-library/jest-dom"; import App from "../App"; describe("Tasks", () => { it("Select the option and check that option 'male' was selected", () => { - expect(true).toBe(true); + render(); + userEvent.selectOptions(screen.getByRole("combobox"), "male"); + expect(screen.getByRole("option", { name: "male" }).selected).toBe(true); }); it("Check that the user has filled the form except of gender select", () => { - expect(true).toBe(true); + render(); + const first_name = screen.getByPlaceholderText("First Name"); + const email_address = screen.getByPlaceholderText("Email Address"); + const mobile = screen.getByPlaceholderText("Mobile"); + const password = screen.getByPlaceholderText("Password"); + const confirm_password = screen.getByPlaceholderText("Confirm Password"); + + userEvent.type(first_name, "aswathy"); + userEvent.type(email_address, "aswathymenon4@gmail.com"); + userEvent.type(mobile, "918086278687"); + userEvent.type(password, "abc123"); + userEvent.type(confirm_password, "abc123"); + + expect(first_name).toHaveDisplayValue("aswathy"); + expect(email_address).toHaveDisplayValue("aswathymenon4@gmail.com"); + expect(mobile).toHaveDisplayValue("918086278687"); + expect(password).toHaveDisplayValue("abc123"); + expect(confirm_password).toHaveDisplayValue("abc123"); + expect(screen.getByRole("combobox")).toHaveDisplayValue("select"); + expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled(); }); it("Check that the field 'First Name' was focused and filled with min 2 letters", () => { - expect(true).toBe(true); + render(); + userEvent.type(screen.getByPlaceholderText(/First Name/i), "aswathy"); + expect(screen.getByPlaceholderText(/First Name/i)).toHaveFocus(); + expect( + screen.getByPlaceholderText(/First Name/i).value.length + ).toBeGreaterThanOrEqual(2); }); it("Check that the button submit was clicked", () => { - expect(true).toBe(true); + render(); + const submit_button = screen.getByRole("button", { name: "Submit" }); + userEvent.click(submit_button); + expect(screen.getByText("First name is Required")).toBeInTheDocument(); + expect(submit_button).toBeDisabled(); }); it("Check that the form has a class", () => { - expect(true).toBe(true); + render(); + expect(screen.getByRole("form")).toHaveClass("contacts_form"); }); it("Check that the labels of the form have a content", () => { - expect(true).toBe(true); + render(); + expect(screen.getByText("Choose a gender:")).toBeInTheDocument(); + expect(screen.getByText("First name:")).toBeInTheDocument(); + expect(screen.getByText("Email:")).toBeInTheDocument(); + expect(screen.getByText("Mobile:")).toBeInTheDocument(); + expect(screen.getByText("Mobile:")).toBeInTheDocument(); + expect(screen.getByText("Password:")).toBeInTheDocument(); + expect(screen.getByText("Confirm Password:")).toBeInTheDocument(); }); it("Check that the user can open a list of the gender and doesn't choose anything", () => { - expect(true).toBe(true); + render(); + userEvent.click(screen.getByRole("combobox")); + expect(screen.getByRole("option", { name: "select" }).selected).toBe(true); }); - it("Check that the user can't to submit until fields will be correct filled", () => { - expect(true).toBe(true); + it("Check that the user can't to submit until fields will be correct filled", async () => { + render(); + const first_name_input = screen.getByPlaceholderText("First Name"); + const email_address_input = screen.getByPlaceholderText("Email Address"); + const mobile_input = screen.getByPlaceholderText("Mobile"); + const password_input = screen.getByPlaceholderText("Password"); + const confirm_password_input = + screen.getByPlaceholderText("Confirm Password"); + + await userEvent.selectOptions(screen.getByRole("combobox"), "male"); + await userEvent.type(first_name_input, "aswathy"); + await userEvent.type(email_address_input, "aswathymenon4@gmail.com"); + await userEvent.type(mobile_input, "7896537890"); + await userEvent.type(password_input, "Abcd1234"); + await userEvent.type(confirm_password_input, "Abcd123"); + + expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled(); + + await userEvent.type(confirm_password_input, "4"); + + expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled(); }); it("Check that the field 'Email' should have correct validation, haven't error message", () => { - expect(true).toBe(true); + render(); + const button = screen.getByRole("button", { name: "Submit" }); + userEvent.click(button); + expect(screen.getByText("Email is Required")).toBeInTheDocument(); + userEvent.type(screen.getByPlaceholderText("Email Address"), "aswathy"); + expect(screen.getByText("Enter a valid email address")).toBeInTheDocument(); }); it("Check that all fields on the first render should be empty", () => { - expect(true).toBe(true); + render(); + const first_name = screen.getByPlaceholderText("First Name"); + const email = screen.getByPlaceholderText("Email Address"); + const mobile = screen.getByPlaceholderText("Mobile"); + const password = screen.getByPlaceholderText("Password"); + const confirm_password = screen.getByPlaceholderText("Confirm Password"); + + expect(first_name).toBeEmptyDOMElement(); + expect(email).toBeEmptyDOMElement(); + expect(mobile).toBeEmptyDOMElement(); + expect(password).toBeEmptyDOMElement(); + expect(confirm_password).toBeEmptyDOMElement(); }); });