Aswathy/testing the form

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 (
-      <form className="contacts_form">
+      <form className="contacts_form" aria-label="form">
         <div className="border">
           <div>
             <div>
@@ -170,7 +170,7 @@ class validationInReact extends React.Component {
               name="mobile"
               value={fields.mobile}
               onChange={(event) => this.handleUserInput(event)}
-              placeholder="mobile"
+              placeholder="Mobile"
             />
             <div>
               <span className="text-danger">{errors.mobile}</span>
@@ -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"
             />
             <div>
               <span className="text-danger">{errors.confirmPassword}</span>

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(<App />);
+    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(<App />);
+    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, "[email protected]");
+    userEvent.type(mobile, "918086278687");
+    userEvent.type(password, "abc123");
+    userEvent.type(confirm_password, "abc123");
+
+    expect(first_name).toHaveDisplayValue("aswathy");
+    expect(email_address).toHaveDisplayValue("[email protected]");
+    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(<App />);
+    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(<App />);
+    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(<App />);
+    expect(screen.getByRole("form")).toHaveClass("contacts_form");
   });
 
   it("Check that the labels of the form have a content", () => {
-    expect(true).toBe(true);
+    render(<App />);
+    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(<App />);
+    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(<App />);
+    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, "[email protected]");
+    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(<App />);
+    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(<App />);
+    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();
   });
 });