Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into feature/use-field-array-support-multiple-r…
…emove-index
- Loading branch information
Showing
46 changed files
with
689 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from 'react'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import Joi from '@hapi/joi'; | ||
|
|
||
| let renderCounter = 0; | ||
|
|
||
| const validationSchema = Joi.object({ | ||
| firstName: Joi.string().required(), | ||
| lastName: Joi.string() | ||
| .max(5) | ||
| .required(), | ||
| min: Joi.number() | ||
| .min(10) | ||
| .required(), | ||
| max: Joi.number() | ||
| .max(20) | ||
| .required(), | ||
| minDate: Joi.date().min('2019-08-01'), | ||
| maxDate: Joi.date().max('2019-08-01'), | ||
| minLength: Joi.string().min(2), | ||
| minRequiredLength: Joi.string().required(), | ||
| selectNumber: Joi.string().required(), | ||
| pattern: Joi.string().required(), | ||
| radio: Joi.string().required(), | ||
| checkbox: Joi.required(), | ||
| }); | ||
|
|
||
| const validationResolver = (data: any) => { | ||
| const { error, value: values } = validationSchema.validate(data, { | ||
| abortEarly: false, | ||
| }); | ||
|
|
||
| return { | ||
| values: error ? {} : values, | ||
| errors: error | ||
| ? error.details.reduce((previous, currentError) => { | ||
| return { | ||
| ...previous, | ||
| [currentError.path[0]]: currentError, | ||
| }; | ||
| }, {}) | ||
| : {}, | ||
| }; | ||
| }; | ||
|
|
||
| const BasicSchemaValidation: React.FC = (props: any) => { | ||
| const { register, handleSubmit, errors } = useForm<{ | ||
| firstName: string; | ||
| lastName: string; | ||
| min: string; | ||
| max: string; | ||
| minDate: string; | ||
| maxDate: string; | ||
| minLength: string; | ||
| minRequiredLength: string; | ||
| selectNumber: string; | ||
| pattern: string; | ||
| radio: string; | ||
| checkbox: string; | ||
| multiple: string; | ||
| validate: string; | ||
| }>({ | ||
| validationResolver, | ||
| mode: props.match.params.mode, | ||
| }); | ||
| const onSubmit = () => {}; | ||
|
|
||
| renderCounter++; | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <input name="firstName" ref={register} placeholder="firstName" /> | ||
| {errors.firstName && <p>firstName error</p>} | ||
| <input name="lastName" ref={register} placeholder="lastName" /> | ||
| {errors.lastName && <p>lastName error</p>} | ||
| <input type="number" name="min" ref={register} placeholder="min" /> | ||
| {errors.min && <p>min error</p>} | ||
| <input type="number" name="max" ref={register} placeholder="max" /> | ||
| {errors.max && <p>max error</p>} | ||
| <input type="date" name="minDate" ref={register} placeholder="minDate" /> | ||
| {errors.minDate && <p>minDate error</p>} | ||
| <input type="date" name="maxDate" ref={register} placeholder="maxDate" /> | ||
| {errors.maxDate && <p>maxDate error</p>} | ||
| <input name="minLength" ref={register} placeholder="minLength" /> | ||
| {errors.minLength && <p>minLength error</p>} | ||
| <input | ||
| name="minRequiredLength" | ||
| ref={register} | ||
| placeholder="minRequiredLength" | ||
| /> | ||
| {errors.minRequiredLength && <p>minRequiredLength error</p>} | ||
| <select name="selectNumber" ref={register}> | ||
| <option value="">Select</option> | ||
| <option value={1}>1</option> | ||
| <option value={2}>1</option> | ||
| </select> | ||
| {errors.selectNumber && <p>selectNumber error</p>} | ||
| <input name="pattern" ref={register} placeholder="pattern" /> | ||
| {errors.pattern && <p>pattern error</p>} | ||
| Radio1 | ||
| <input type="radio" name="radio" ref={register} value="1" /> | ||
| Radio2 | ||
| <input type="radio" name="radio" ref={register} value="2" /> | ||
| Radio3 | ||
| <input type="radio" name="radio" ref={register} value="3" /> | ||
| {errors.radio && <p>radio error</p>} | ||
| <input type="checkbox" name="checkbox" ref={register} /> | ||
| {errors.checkbox && <p>checkbox error</p>} | ||
| <button>Submit</button> | ||
| <div id="renderCount">{renderCounter}</div> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default BasicSchemaValidation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| context('customSchemaValidation form validation', () => { | ||
| it('should validate the form with onSubmit mode', () => { | ||
| cy.visit('http://localhost:3000/customSchemaValidation/onSubmit'); | ||
| cy.get('button').click(); | ||
|
|
||
| cy.focused().should('have.attr', 'name', 'firstName'); | ||
|
|
||
| cy.get('input[name="firstName"] + p').contains('firstName error'); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('select[name="selectNumber"] + p').contains('selectNumber error'); | ||
| cy.get('input[name="minRequiredLength"] + p').contains( | ||
| 'minRequiredLength error', | ||
| ); | ||
| cy.get('input[name="radio"] + p').contains('radio error'); | ||
|
|
||
| cy.get('input[name="firstName"]').type('bill'); | ||
| cy.get('input[name="lastName"]').type('luo123456'); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('select[name="selectNumber"]').select('1'); | ||
| cy.get('input[name="pattern"]').type('luo'); | ||
| cy.get('input[name="min"]').type('1'); | ||
| cy.get('input[name="max"]').type('21'); | ||
| cy.get('input[name="minDate"]').type('2019-07-30'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-02'); | ||
| cy.get('input[name="lastName"]') | ||
| .clear() | ||
| .type('luo'); | ||
| cy.get('input[name="minLength"]').type('2'); | ||
| cy.get('input[name="minLength"] + p').contains('minLength error'); | ||
| cy.get('input[name="min"] + p').contains('min error'); | ||
| cy.get('input[name="max"] + p').contains('max error'); | ||
| cy.get('input[name="minDate"] + p').contains('minDate error'); | ||
| cy.get('input[name="maxDate"] + p').contains('maxDate error'); | ||
|
|
||
| cy.get('input[name="pattern"]').type('23'); | ||
| cy.get('input[name="minLength"]').type('bi'); | ||
| cy.get('input[name="minRequiredLength"]').type('bi'); | ||
| cy.get('input[name="radio"]').check('1'); | ||
| cy.get('input[name="min"]') | ||
| .clear() | ||
| .type('11'); | ||
| cy.get('input[name="max"]') | ||
| .clear() | ||
| .type('19'); | ||
| cy.get('input[name="minDate"]').type('2019-08-01'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-01'); | ||
| cy.get('input[name="checkbox"]').check(); | ||
|
|
||
| cy.get('p').should('have.length', 0); | ||
| cy.get('#renderCount').contains('25'); | ||
| }); | ||
|
|
||
| it('should validate the form with onBlur mode', () => { | ||
| cy.visit('http://localhost:3000/customSchemaValidation/onBlur'); | ||
|
|
||
| cy.get('input[name="firstName"]').focus(); | ||
| cy.get('input[name="firstName"]').blur(); | ||
| cy.get('input[name="firstName"] + p').contains('firstName error'); | ||
| cy.get('input[name="firstName"]').type('bill'); | ||
| cy.get('input[name="lastName"]').focus(); | ||
| cy.get('input[name="lastName"]').blur(); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('input[name="lastName"]').type('luo123456'); | ||
| cy.get('input[name="lastName"]').blur(); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('select[name="selectNumber"]').focus(); | ||
| cy.get('select[name="selectNumber"]').blur(); | ||
| cy.get('select[name="selectNumber"] + p').contains('selectNumber error'); | ||
| cy.get('select[name="selectNumber"]').select('1'); | ||
| cy.get('input[name="pattern"]').type('luo'); | ||
| cy.get('input[name="min"]').type('1'); | ||
| cy.get('input[name="max"]').type('21'); | ||
| cy.get('input[name="minDate"]').type('2019-07-30'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-02'); | ||
| cy.get('input[name="lastName"]') | ||
| .clear() | ||
| .type('luo'); | ||
| cy.get('input[name="minLength"]').type('2'); | ||
| cy.get('input[name="minLength"]').blur(); | ||
|
|
||
| cy.get('input[name="minLength"] + p').contains('minLength error'); | ||
| cy.get('input[name="min"] + p').contains('min error'); | ||
| cy.get('input[name="max"] + p').contains('max error'); | ||
| cy.get('input[name="minDate"] + p').contains('minDate error'); | ||
| cy.get('input[name="maxDate"] + p').contains('maxDate error'); | ||
|
|
||
| cy.get('input[name="pattern"]').type('23'); | ||
| cy.get('input[name="minLength"]').type('bi'); | ||
| cy.get('input[name="minRequiredLength"]').type('bi'); | ||
| cy.get('input[name="radio"]') | ||
| .first() | ||
| .focus(); | ||
| cy.get('input[name="radio"]') | ||
| .first() | ||
| .blur(); | ||
| cy.get('input[name="radio"] + p').contains('radio error'); | ||
| cy.get('input[name="radio"]').check('1'); | ||
| cy.get('input[name="min"]') | ||
| .clear() | ||
| .type('11'); | ||
| cy.get('input[name="max"]') | ||
| .clear() | ||
| .type('19'); | ||
| cy.get('input[name="minDate"]').type('2019-08-01'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-01'); | ||
| cy.get('input[name="checkbox"]').check(); | ||
|
|
||
| cy.get('p').should('have.length', 0); | ||
| cy.get('#renderCount').contains('27'); | ||
| }); | ||
|
|
||
| it('should validate the form with onChange mode', () => { | ||
| cy.visit('http://localhost:3000/customSchemaValidation/onChange'); | ||
|
|
||
| cy.get('input[name="firstName"]').type('bill'); | ||
| cy.get('input[name="lastName"]').focus(); | ||
| cy.get('input[name="lastName"]').type('luo123456'); | ||
| cy.get('input[name="lastName"]').clear(); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('input[name="lastName"]').type('luo123456'); | ||
| cy.get('input[name="lastName"] + p').contains('lastName error'); | ||
| cy.get('select[name="selectNumber"]').select(''); | ||
| cy.get('select[name="selectNumber"] + p').contains('selectNumber error'); | ||
| cy.get('select[name="selectNumber"]').select('1'); | ||
| cy.get('input[name="pattern"]').type('luo'); | ||
| cy.get('input[name="min"]').type('1'); | ||
| cy.get('input[name="max"]').type('21'); | ||
| cy.get('input[name="minDate"]').type('2019-07-30'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-02'); | ||
| cy.get('input[name="lastName"]') | ||
| .clear() | ||
| .type('luo'); | ||
| cy.get('input[name="minLength"]').type('2'); | ||
|
|
||
| cy.get('input[name="minLength"] + p').contains('minLength error'); | ||
| cy.get('input[name="min"] + p').contains('min error'); | ||
| cy.get('input[name="max"] + p').contains('max error'); | ||
| cy.get('input[name="minDate"] + p').contains('minDate error'); | ||
| cy.get('input[name="maxDate"] + p').contains('maxDate error'); | ||
|
|
||
| cy.get('input[name="pattern"]').type('23'); | ||
| cy.get('input[name="minLength"]').type('bi'); | ||
| cy.get('input[name="minRequiredLength"]').type('bi'); | ||
| cy.get('input[name="radio"]') | ||
| .first() | ||
| .focus(); | ||
| cy.get('input[name="radio"]').check('1'); | ||
| cy.get('input[name="min"]') | ||
| .clear() | ||
| .type('11'); | ||
| cy.get('input[name="max"]') | ||
| .clear() | ||
| .type('19'); | ||
| cy.get('input[name="minDate"]').type('2019-08-01'); | ||
| cy.get('input[name="maxDate"]').type('2019-08-01'); | ||
| cy.get('input[name="checkbox"]').check(); | ||
|
|
||
| cy.get('p').should('have.length', 0); | ||
| cy.get('#renderCount').contains('29'); | ||
| }); | ||
| }); |
Oops, something went wrong.