Merge pull request #12 from gokulakannant/develop

Develop

Author: gokulakannant

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist
 Documentation
 example/package-lock.json
+example/yarn.lock

README.md

@@ -7,7 +7,7 @@
 A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) approach for validation.
 
 * [Supported Rules](https://www.npmjs.com/package/validatorjs#available-rules) (It is supports all validatorjs rules)
-* [Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html)
+* [Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)
 * [Demo](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
 
 ## Why use react-form-input-validation?
@@ -36,7 +36,7 @@ Using [yarn](https://yarnpkg.com/en/) as your package manager.
 
 ## Usage
 
-A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html).
+A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/classes/reactforminputvalidation.html).
 
 ```js
 import React from "react";
@@ -170,7 +170,7 @@ The input types button, submit, reset, hidden are exceptional from the above lis
 
 ## Versions
 
-Latest Version: 2.0.1. For more versions refer [VERSIONS.md](VERSIONS.md).
+Latest Version: 2.0.2. For more versions refer [VERSIONS.md](VERSIONS.md).
 
 ## Changelog
 

VERSIONS.md

@@ -10,7 +10,7 @@ The most recent version is recommended in production.
 |--------|---------|--------|
 |v2.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.1)|
 |v2.0.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.0)|
-|v1.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)|             |
+|v1.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v1.0.1/index.html)|             |
 
 ## Versioning strategy
 

example/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

example/cypress.json

@@ -0,0 +1 @@
+{}

example/cypress/integration/form.spec.js

@@ -0,0 +1,194 @@
+describe('The Home Page', function() {
+    it('Successfull rendering', function() {
+      cy.visit('http://localhost:3000/')
+    })
+
+    it('Check Submit Button', function() {
+        cy.visit('http://localhost:3000/')
+        cy.contains('Submit Booking').click()
+      });
+  });
+
+describe("Test blur events", () => {
+    it('Successfull rendering', function() {
+        cy.visit('http://localhost:3000/')
+    })
+
+    it("Customer Name blur (Text field)", () => {
+        cy.get('input[name=customer_name]').focus().blur();
+        cy.contains("The Customer Name field is required.")
+    });
+
+    it("Phone number blur (Text field)", () => {
+        cy.get('input[name=phone_number]').focus().blur();
+        cy.contains("The phone number field is required.");
+    });
+
+    it("Email address blur (Text field)", () => {
+        cy.get('input[name=email_address]').focus().blur();
+        cy.contains("The email address field is required.");
+    });
+
+    it("Pickup Date blur (Date field)", () => {
+        cy.get('input[name=pickup_time]').focus().blur();
+        cy.contains("The pickup time field is required.");
+    });
+
+    it("Pickup Place blur (Dropdown)", () => {
+        cy.get('select[name=pickup_place]').focus().blur();
+        cy.contains("The pickup place field is required.");
+    });
+
+    it("Drop Place blur (Combo box)", () => {
+        cy.get('input[name=dropoff_place]').focus().blur();
+        cy.contains("The dropoff place field is required.");
+    });
+
+    it("Special instructions blur (Textarea)", () => {
+        cy.get('textarea').focus().blur();
+        cy.contains("The comments field is required.");
+    });
+});
+
+describe("Test change event", () => {
+    it('Successfull rendering', function() {
+        cy.visit('http://localhost:3000/')
+    });
+
+    it("Customer Name change event (Text field)", () => {
+        cy.get('input[name=customer_name]').focus().blur();
+        cy.get('input[name=customer_name]').type("gokulakannan").blur();
+        cy.contains("The Customer Name field is required.").should('not.exist');
+    });
+
+    it("Phone number change (Text field)", () => {
+        cy.get('input[name=phone_number]').focus().blur();
+        cy.get('input[name=phone_number]').type(9876543210).blur();
+        cy.contains("The phone number field is required.").should('not.exist');
+    });
+
+    it("Email address blur (Text field)", () => {
+        cy.get('input[name=email_address]').focus().blur();
+        cy.get('input[name=email_address]').type("[email protected]").blur();
+        cy.contains("The email address field is required.").should('not.exist');
+    });
+
+    it("Pickup Date blur (Date field)", () => {
+        cy.get('input[name=pickup_time]').focus().blur();
+        cy.get('input[name=pickup_time]').type("2019-11-27").blur();
+        cy.contains("The pickup time field is required.").should('not.exist');
+    });
+
+    it("Pickup Place blur (Dropdown)", () => {
+        cy.get('select[name=pickup_place]').focus().blur();
+        cy.get('select[name=pickup_place]').select('town_hall');
+        // cy.contains("The pickup place field is required.").should('not.exist');
+    });
+
+    it("Drop Place blur (Combo box)", () => {
+        cy.get('input[name=dropoff_place]').focus().blur();
+        cy.get('input[name=dropoff_place]').type("Airport").blur();
+        cy.contains("The dropoff place field is required.").should('not.exist');
+    });
+
+    it("Special instructions blur (Textarea)", () => {
+        cy.get('textarea').focus().blur();
+        cy.get('textarea').type("Use react form input validator for testing").blur();
+        cy.contains("The comments field is required.").should('not.exist');
+    });
+});
+
+describe("Fill form fields", () => {
+    it('Successfull rendering', function() {
+        cy.visit('http://localhost:3000/')
+    });
+
+    it("Type customer name (Text field)", () => {
+        cy.get('input[name=customer_name]').type("gokulakannan").blur();
+    });
+
+    it("Type phone number (Text field)", () => {
+        cy.get('input[name=phone_number]').type(9876543210).blur();
+    });
+
+    it("Type email address (Text field)", () => {
+        cy.get('input[name=email_address]').type("[email protected]").blur();
+    });
+
+    it("Select Taxi (Radio button)", () => {
+        cy.get('[type="radio"]').first().check()
+    });
+
+    it("Check extras (Checkbox)", () => {
+        cy.get('[type="checkbox"]').check(['baby', 'wheelchair'])
+    });
+
+    it("Select pickup Date (Date field)", () => {
+        cy.get('input[name=pickup_time]').type("2019-11-27").blur();
+    });
+
+    it("Select pickup Place (Dropdown)", () => {
+        cy.get('select[name=pickup_place]').select('town_hall')
+    });
+
+    it("Choose drop Place (Combo box)", () => {
+        cy.get('input[name=dropoff_place]').type("Airport").blur();
+    });
+
+    it("Type Special instructions (Textarea)", () => {
+        cy.get('textarea').type("Use react form input validator for testing").blur();
+        cy.contains("The comments field is required.").should('not.exist');
+    });
+});
+
+describe("Test validation rules in form fields", () => {
+    beforeEach("Render home page", () => {
+        cy.visit('http://localhost:3000/');
+    })
+    describe("Customer name (required)", () => {
+        it("Empty fields should display error message", () => {
+            cy.get('input[name=customer_name]').focus().blur();
+            cy.contains("The Customer Name field is required.");
+        });
+
+        it("Valid data should not display error message", () => {
+            cy.get('input[name=customer_name]').focus().blur();
+            cy.get('input[name=customer_name]').type("gokulakannan").blur();
+            cy.contains("The Customer Name field is required.").should('not.exist');
+        });
+    });
+
+    describe("Phone number (numeric, min, max)", () => {
+        it("Invalid alphabet phone number should display error message", () => {
+            cy.get('input[name=phone_number]').type("test").blur();
+            cy.contains("The phone number must be a number.");
+        });
+
+        it("Min length phone number should display error message", () => {
+            cy.get('input[name=phone_number]').type(321).blur();
+            cy.contains("The phone number field must be between 10 and 12 digits.");
+        });
+
+        it("Max length phone number should display error message", () => {
+            cy.get('input[name=phone_number]').type(321).blur();
+            cy.contains("The phone number field must be between 10 and 12 digits.");
+        });
+
+        it("Valid phone number should not display error message", () => {
+            cy.get('input[name=phone_number]').type(9876543210).blur();
+            cy.contains("The phone number must be a number.").should('not.exist');
+        });
+    });
+
+    describe("Email address (email)", () => {
+        it("Invalid email address should display error message", () => {
+            cy.get('input[name=email_address]').type("test").blur();
+            cy.contains("The email address format is invalid.");
+        });
+
+        it("Valid email address should not display error message", () => {
+            cy.get('input[name=email_address]').type("[email protected]").blur();
+            cy.contains("The email address format is invalid.").should('not.exist');
+        });
+    });
+})

example/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

example/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

example/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')