diff --git a/.babelrc b/.babelrc index aacdec8..0cdb83d 100644 --- a/.babelrc +++ b/.babelrc @@ -5,10 +5,7 @@ "test": { "plugins": [ ["istanbul", { - "exclude": [ - "**/*.spec.js", - ".tmp/**/*" - ] + "exclude": ["**/*.spec.js", ".tmp/**/*"] }] ] } diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c8c202c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 +max_line_length = 120 + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore index 1c2d4b5..5ecabd9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,6 @@ -test/coverage/ +__test__/coverage/ +node_modules/ dist/ +build/ +static/ +.tmp/ diff --git a/.eslintrc b/.eslintrc index 7a82b91..8472e20 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,9 +1,20 @@ { - "extends" : "eslint-config-availity/react", + "extends": "availity/browser", "rules": { - "semi" : [2, "always"], - "no-unused-vars": ["error", { "varsIgnorePattern": "^(unused|omit)" }], - "comma-dangle": [2, "always-multiline"] + "semi": [2, "always"], + "no-unused-vars": ["error", { + "varsIgnorePattern": "^(unused|omit)" + }], + "comma-dangle": [2, "always-multiline", { + "functions": "never" + }], + "no-unused-expressions": ["error", { + "allowShortCircuit": true + }], + "camelcase": ["warn", { + "properties": "never" + }], + "react/no-unused-state": "warn" }, "parserOptions": { "sourceType": "module", diff --git a/.gitignore b/.gitignore index 39290ff..92b0a17 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ /__test__/coverage -node_modules +node_modules/ /dist /build /lib -/.tmp \ No newline at end of file +/.nyc_output +/.tmp diff --git a/README.md b/README.md index e1bee3d..df7c5f2 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,6 @@ Easy to use React validation components compatible for reactstrap. - ## Installation Install `availity-reactstrap-validation` via NPM @@ -13,7 +12,7 @@ Install `availity-reactstrap-validation` via NPM npm install --save availity-reactstrap-validation ``` -If applicable, install a `Promise` polyfill. For example: +If applicable, install a `Promise` polyfill. For example: ```sh npm install es6-promise --save @@ -32,34 +31,35 @@ import { AvField } from 'availity-reactstrap-validation'; Install dependencies: ```sh -npm install +yarn install ``` Run examples at [http://localhost:8080/](http://localhost:8080/) with Webpack dev server: ```sh -npm start +yarn start ``` Run tests: ```sh -npm test +yarn test ``` Run tests & coverage report: ```sh -npm run test:coverage +yarn test:coverage ``` Watch tests: ```sh -npm run test:watch +yarn test:watch ``` ## Disclaimer + Open source software components distributed or made available in the Availity Materials are licensed to Company under the terms of the applicable open source license agreements, which may be found in text files included in the Availity Materials. ## LICENSE [MIT](LICENSE) diff --git a/__test__/.eslintrc b/__test__/.eslintrc index 849648f..6e3503d 100644 --- a/__test__/.eslintrc +++ b/__test__/.eslintrc @@ -1,21 +1,23 @@ { - "extends" : "eslint-config-availity/react", "env": { "mocha": true, "node": true }, "globals": { "sinon": true, - "expect": true + "expect": true, + "shallow": true, + "mount": true }, "rules": { - "semi" : [2, "always"], - "comma-dangle": [2, "always-multiline"] + "func-names": 0, + "no-unused-expressions": 0 }, - "parserOptions": { - "sourceType": "module", - "ecmaFeatures": { - "jsx": true + "settings": { + "import/resolver": { + "webpack": { + "config": "webpack.test.config.js" + } } } } diff --git a/__test__/.setup.js b/__test__/.setup.js index f83fe38..e731def 100644 --- a/__test__/.setup.js +++ b/__test__/.setup.js @@ -5,7 +5,10 @@ var sinon = require('sinon'); var sinonChai = require('sinon-chai'); var chaiAsPromised = require('chai-as-promised'); var chaiEnzyme = require('chai-enzyme'); +var enzyme = require('enzyme'); +var Adapter = require('enzyme-adapter-react-16'); +enzyme.configure({ adapter: new Adapter() }); var exposedProperties = ['window', 'navigator', 'document']; chai.use(sinonChai); @@ -13,16 +16,18 @@ chai.use(chaiAsPromised); chai.use(chaiEnzyme()); chai.config.includeStack = true; -global.expect = chai.expect; + global.AssertionError = chai.AssertionError; global.Assertion = chai.Assertion; global.assert = chai.assert; global.expect = chai.expect; global.sinon = sinon; -const { document } = new JSDOM('', { - url: 'http://localhost/' -}).window; +global.render = enzyme.render; +global.shallow = enzyme.shallow; +global.mount = enzyme.mount; + +const { document } = new JSDOM('', { url: 'http://localhost/' }).window; global.document = document; global.window = document.defaultView; Object.keys(document.defaultView).forEach(property => { @@ -33,5 +38,5 @@ Object.keys(document.defaultView).forEach(property => { }); global.navigator = { - userAgent: 'node.js' + userAgent: 'node.js', }; diff --git a/__test__/AvBaseInput.spec.js b/__test__/AvBaseInput.spec.js index 62cf054..2314b0e 100644 --- a/__test__/AvBaseInput.spec.js +++ b/__test__/AvBaseInput.spec.js @@ -1,6 +1,6 @@ import { AvBaseInput } from 'availity-reactstrap-validation'; -describe('BaseInput', function() { +describe('BaseInput', function () { let touched; let dirty; let bad; @@ -48,6 +48,7 @@ describe('BaseInput', function() { }; this.component = new AvBaseInput(this.props); this.component.context = this.context; + // eslint-disable-next-line no-multi-assign this.setStateSpy = this.component.setState = sinon.spy(); }); @@ -74,41 +75,41 @@ describe('BaseInput', function() { describe('component will mount', () => { it('should get the default value', () => { const spy = sinon.spy(this.component, 'getDefaultValue'); - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(spy).to.have.been.calledOnce; }); it('should set the value to the default value', () => { const defaultValue = 'some value'; this.component.props.defaultValue = defaultValue; - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(this.component.value).to.equal(defaultValue); }); it('should set the state value to the default value', () => { const defaultValue = 'some value'; this.component.props.defaultValue = defaultValue; - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(this.setStateSpy).to.have.been.calledWithMatch({ value: defaultValue }); }); it('should set the value to the value prop if provided', () => { const defaultValue = 'some value'; this.component.props.value = defaultValue; - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(this.component.value).to.equal(defaultValue); }); it('should set the state value to the value prop if provided', () => { const defaultValue = 'some value'; this.component.props.value = defaultValue; - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(this.setStateSpy).to.have.been.calledWithMatch({ value: defaultValue }); }); - it('should trigger validation', () => { - const spy = sinon.spy(this.component, 'validate'); - this.component.componentWillMount(); + it('should not trigger validation', () => { + const spy = sinon.spy(this.component, 'updateValidations'); + this.component.UNSAFE_componentWillMount(); expect(spy).to.have.been.calledOnce; }); }); @@ -117,7 +118,7 @@ describe('BaseInput', function() { it('should do nothing if the value has not changed', () => { this.props.value = 123; const spy = sinon.spy(this.component, 'validate'); - this.component.componentWillReceiveProps(this.props); + this.component.UNSAFE_componentWillReceiveProps(this.props); expect(this.setStateSpy).to.not.have.been.called; expect(spy).to.not.have.been.called; }); @@ -125,33 +126,34 @@ describe('BaseInput', function() { describe('when the value changed', () => { it('should set the value to the new value', () => { const newValue = 2342; - this.component.componentWillReceiveProps({ value: newValue }); + this.component.UNSAFE_componentWillReceiveProps({ value: newValue }); expect(this.component.value).to.equal(newValue); }); it('should set the state value to the default value', () => { const newValue = 2342; - this.component.componentWillReceiveProps({ value: newValue }); + this.component.UNSAFE_componentWillReceiveProps({ value: newValue }); expect(this.setStateSpy).to.have.been.calledWithMatch({ value: newValue }); }); it('should trigger validation', () => { const newValue = 2342; const spy = sinon.spy(this.component, 'validate'); - this.component.componentWillReceiveProps({ value: newValue }); + this.component._isMounted = true; + this.component.UNSAFE_componentWillReceiveProps({ value: newValue }); expect(spy).to.have.been.calledOnce; }); it('should reset the value if multiple has changed from false to true', () => { this.props.multiple = false; - this.component.componentWillReceiveProps({multiple: true}); + this.component.UNSAFE_componentWillReceiveProps({ multiple: true }); expect(this.component.value).to.be.empty; expect(this.component.state.value).to.be.empty; }); it('should reset the value if multiple has changed from true to false', () => { this.props.multiple = true; - this.component.componentWillReceiveProps({multiple: false}); + this.component.UNSAFE_componentWillReceiveProps({ multiple: false }); expect(this.component.value).to.equal(''); }); }); @@ -160,7 +162,7 @@ describe('BaseInput', function() { describe('when the checked prop changes', () => { it('should set the value to the trueValue when the next props checked prop is true', () => { this.props.checked = false; - this.component.componentWillReceiveProps({ + this.component.UNSAFE_componentWillReceiveProps({ type: 'checkbox', checked: true, trueValue: true, @@ -171,7 +173,7 @@ describe('BaseInput', function() { it('should set the value to the falseValue when the next props checked prop is false', () => { this.props.checked = true; - this.component.componentWillReceiveProps({ + this.component.UNSAFE_componentWillReceiveProps({ type: 'checkbox', checked: false, trueValue: true, @@ -182,7 +184,7 @@ describe('BaseInput', function() { it('should set the state to the new value', () => { this.props.checked = false; - this.component.componentWillReceiveProps({ + this.component.UNSAFE_componentWillReceiveProps({ type: 'checkbox', checked: true, trueValue: true, @@ -190,12 +192,10 @@ describe('BaseInput', function() { }); expect(this.setStateSpy).to.have.been.calledWithMatch({ value: this.props.trueValue }); }); - }); - describe('when the checked prop changes', () => { it('should not set the state', () => { this.props.checked = true; - this.component.componentWillReceiveProps({ + this.component.UNSAFE_componentWillReceiveProps({ type: 'checkbox', checked: true, trueValue: true, @@ -215,6 +215,7 @@ describe('BaseInput', function() { it('should trigger validation', () => { const spy = sinon.spy(this.component, 'validate'); + this.component._isMounted = true; this.component.updateValidations(); expect(spy).to.have.been.calledOnce; }); @@ -581,9 +582,16 @@ describe('BaseInput', function() { it('should give the selected options', () => { this.props.type = 'select'; this.props.multiple = true; - const event = { target: { options: [ { value: 'selected', selected: true }, { value: 'notSelected', selected: false } ] } }; + const event = { + target: { + options: [ + { value: 'selected', selected: true }, + { value: 'notSelected', selected: false }, + ], + }, + }; const result = this.component.getFieldValue(event); - expect(result).to.deep.equal([ 'selected' ]); + expect(result).to.deep.equal(['selected']); }); }); diff --git a/__test__/AvCheckbox.spec.js b/__test__/AvCheckbox.spec.js index 8e7e748..a9d71c0 100644 --- a/__test__/AvCheckbox.spec.js +++ b/__test__/AvCheckbox.spec.js @@ -1,5 +1,4 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvCheckbox } from 'availity-reactstrap-validation'; import { Input } from 'reactstrap'; @@ -28,21 +27,21 @@ describe('AvCheckbox', () => { }, FormCtrl: { inputs: {}, - getDefaultValue: ()=> {}, - getInputState: ()=> ({}), + getDefaultValue: () => {}, + getInputState: () => ({}), hasError: () => error, isDirty: () => dirty, isTouched: () => touched, isBad: () => bad, isDisabled: () => false, isReadOnly: () => false, - setDirty: ()=> {}, - setTouched: ()=> {}, - setBad: ()=> {}, - register: ()=> {}, - unregister: ()=> {}, - validate: ()=> {}, - getValidationEvent: ()=> {}, + setDirty: () => {}, + setTouched: () => {}, + setBad: () => {}, + register: () => {}, + unregister: () => {}, + validate: () => {}, + getValidationEvent: () => {}, validation: {}, parent: null, }, @@ -85,7 +84,7 @@ describe('AvCheckbox', () => { expect(wrapper.find(Input).hasClass('is-touched')).to.be.true; }); - it('should have "is-pristine" class when not dirty', () => { + it('should not have "is-pristine" class when dirty', () => { dirty = true; const wrapper = shallow(, options); diff --git a/__test__/AvCheckboxGroup.spec.js b/__test__/AvCheckboxGroup.spec.js index 671b506..0146b93 100644 --- a/__test__/AvCheckboxGroup.spec.js +++ b/__test__/AvCheckboxGroup.spec.js @@ -1,5 +1,4 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvCheckboxGroup, AvFeedback } from 'availity-reactstrap-validation'; let options; @@ -19,8 +18,8 @@ describe('AvCheckboxGroup', () => { context: { FormCtrl: { inputs: {}, - getDefaultValue: ()=> {}, - getInputState: ()=> ({}), + getDefaultValue: () => {}, + getInputState: () => ({}), hasError: () => error, isDirty: () => dirty, isTouched: () => touched, @@ -33,7 +32,7 @@ describe('AvCheckboxGroup', () => { register: sinon.spy(), unregister: sinon.spy(), validate: sinon.spy(), - getValidationEvent: ()=> {}, + getValidationEvent: () => {}, validation: {}, parent: null, }, @@ -61,14 +60,14 @@ describe('AvCheckboxGroup', () => { expect(instance.validations.required).to.be.undefined; }); - it('should return the set value', ()=> { + it('should return the set value', () => { const wrapper = shallow(, options); const component = wrapper.instance(); component.value = 'boop'; expect(component.getValue()).to.equal('boop'); }); - it('should unregister when unmounted', ()=> { + it('should unregister when unmounted', () => { const wrapper = shallow(, options); wrapper.unmount(); expect(options.context.FormCtrl.unregister).to.have.been.called; @@ -113,9 +112,7 @@ describe('AvCheckboxGroup', () => { it('should give default value from context', () => { const wrapper = shallow(, options); const component = wrapper.instance(); - component.context.FormCtrl.getDefaultValue = () => { - return 'jiri'; - }; + component.context.FormCtrl.getDefaultValue = () => 'jiri'; expect(component.getDefaultValue()).to.eql({key: 'defaultValue', value: 'jiri'}); }); @@ -171,16 +168,15 @@ describe('AvCheckboxGroup', () => { const spy = sinon.spy(); const wrapper = shallow(, options); const component = wrapper.instance(); - const event = {}; - component.getChildContext().Group.update(event, 'momo').then(() => { - expect(spy).to.have.been.calledWith(event, 'momo'); - }); + const event = { target: { checked: true } }; + return component + .getChildContext() + .Group.update(event, 'momo') + .then(() => expect(spy).to.have.been.calledWith(event, ['momo'])); }); it('should render validation message when sent', () => { - options.context.FormCtrl.getInputState = () => { - return {'errorMessage': 'WHAT ARE YOU DOING?!'}; - }; + options.context.FormCtrl.getInputState = () => ({ errorMessage: 'WHAT ARE YOU DOING?!' }); const wrapper = shallow(, options); expect(wrapper.find(AvFeedback).prop('children')).to.equal('WHAT ARE YOU DOING?!'); }); diff --git a/__test__/AvFeedback.spec.js b/__test__/AvFeedback.spec.js index bd49db0..da971ac 100644 --- a/__test__/AvFeedback.spec.js +++ b/__test__/AvFeedback.spec.js @@ -1,5 +1,4 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvFeedback } from 'availity-reactstrap-validation'; import { FormFeedback } from 'reactstrap'; diff --git a/__test__/AvField.spec.js b/__test__/AvField.spec.js index 7e3f3c3..6601304 100644 --- a/__test__/AvField.spec.js +++ b/__test__/AvField.spec.js @@ -1,11 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import { - AvFeedback, - AvField, - AvGroup, - AvInput, -} from 'availity-reactstrap-validation'; +import { AvFeedback, AvField, AvGroup, AvInput } from 'availity-reactstrap-validation'; import { Label, FormText, Col } from 'reactstrap'; let state = {}; @@ -19,11 +13,12 @@ const options = { const stdProps = { name: 'testing', label: 'Test Label' }; -describe('AvField', function() { +describe('AvField', () => { beforeEach(() => { state = {}; }); - describe('structure', () => { + + describe('structure', function () { describe('default', () => { describe('default', () => { beforeEach(() => { @@ -43,7 +38,7 @@ describe('AvField', function() { }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(2).type()).to.be.null; + expect(this.wrapper.childAt(2).exists()).to.be.false; }); }); @@ -70,25 +65,15 @@ describe('AvField', function() { }); it('should render an "AvInput" inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(0) - .type() - ).to.equal(AvInput); + expect(this.wrapper.childAt(1).childAt(0).type()).to.equal(AvInput); }); it('should not render any thing else inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(1) - .type() - ).to.be.null; + expect(this.wrapper.childAt(1).childAt(1).exists()).to.be.false; }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(2).type()).to.be.null; + expect(this.wrapper.childAt(2).exists()).to.be.false; }); }); }); @@ -117,7 +102,7 @@ describe('AvField', function() { }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(3).type()).to.be.null; + expect(this.wrapper.childAt(3).exists()).to.be.false; }); }); @@ -145,34 +130,19 @@ describe('AvField', function() { }); it('should render an "AvInput" inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(0) - .type() - ).to.equal(AvInput); + expect(this.wrapper.childAt(1).childAt(0).type()).to.equal(AvInput); }); it('should render an "AvFeedback" inside the Col after the AvInput', () => { - expect( - this.wrapper - .childAt(1) - .childAt(1) - .type() - ).to.equal(AvFeedback); + expect(this.wrapper.childAt(1).childAt(1).type()).to.equal(AvFeedback); }); it('should not render any thing else inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(2) - .type() - ).to.be.null; + expect(this.wrapper.childAt(1).childAt(2).exists()).to.be.false; }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(2).type()).to.be.null; + expect(this.wrapper.childAt(2).exists()).to.be.false; }); }); }); @@ -205,7 +175,7 @@ describe('AvField', function() { }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(3).type()).to.be.null; + expect(this.wrapper.childAt(3).exists()).to.be.false; }); }); @@ -232,34 +202,19 @@ describe('AvField', function() { }); it('should render an "AvInput" inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(0) - .type() - ).to.equal(AvInput); + expect(this.wrapper.childAt(1).childAt(0).type()).to.equal(AvInput); }); it('should render an "FormText" inside the Col after the AvInput', () => { - expect( - this.wrapper - .childAt(1) - .childAt(1) - .type() - ).to.equal(FormText); + expect(this.wrapper.childAt(1).childAt(1).type()).to.equal(FormText); }); it('should not render any thing else inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(2) - .type() - ).to.be.null; + expect(this.wrapper.childAt(1).childAt(2).exists()).to.be.false; }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(2).type()).to.be.null; + expect(this.wrapper.childAt(2).exists()).to.be.false; }); }); }); @@ -297,7 +252,7 @@ describe('AvField', function() { }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(4).type()).to.be.null; + expect(this.wrapper.childAt(4).exists()).to.be.false; }); }); @@ -325,43 +280,23 @@ describe('AvField', function() { }); it('should render an "AvInput" inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(0) - .type() - ).to.equal(AvInput); + expect(this.wrapper.childAt(1).childAt(0).type()).to.equal(AvInput); }); it('should render an "AvFeedback" inside the Col after the AvInput', () => { - expect( - this.wrapper - .childAt(1) - .childAt(1) - .type() - ).to.equal(AvFeedback); + expect(this.wrapper.childAt(1).childAt(1).type()).to.equal(AvFeedback); }); it('should render an "FormText" inside the Col after the AvInput', () => { - expect( - this.wrapper - .childAt(1) - .childAt(2) - .type() - ).to.equal(FormText); + expect(this.wrapper.childAt(1).childAt(2).type()).to.equal(FormText); }); it('should not render any thing else inside the Col', () => { - expect( - this.wrapper - .childAt(1) - .childAt(3) - .type() - ).to.be.null; + expect(this.wrapper.childAt(1).childAt(3).exists()).to.be.false; }); it('should not render any thing else', () => { - expect(this.wrapper.childAt(2).type()).to.be.null; + expect(this.wrapper.childAt(2).exists()).to.be.false; }); }); }); @@ -416,18 +351,12 @@ describe('AvField', function() { }); it('should use the "name" props as the "for" prop when id is not provided', () => { - const label = shallow( - Yo!, - options - ).childAt(0); + const label = shallow(Yo!, options).childAt(0); expect(label.prop('for')).to.equal(stdProps.name); }); it('should use the "label" prop as the children', () => { - const label = shallow( - Yo!, - options - ).childAt(0); + const label = shallow(Yo!, options).childAt(0); expect(label.prop('children')).to.equal(stdProps.label); }); @@ -547,10 +476,7 @@ describe('AvField', function() { }); it('should set id to value of name if id is not provided', () => { - const input = shallow( - Yo!, - options - ).childAt(1); + const input = shallow(Yo!, options).childAt(1); expect(input.prop('id')).to.equal(stdProps.name); }); diff --git a/__test__/AvForm.spec.js b/__test__/AvForm.spec.js index bf934e5..763af67 100644 --- a/__test__/AvForm.spec.js +++ b/__test__/AvForm.spec.js @@ -1,9 +1,9 @@ +/* eslint no-multi-assign: 0, promise/param-names: 0 */ import React from 'react'; -import {shallow} from 'enzyme'; -import {AvForm, AvValidator} from 'availity-reactstrap-validation'; -import {Form} from 'reactstrap'; +import { AvForm, AvValidator } from 'availity-reactstrap-validation'; +import { Form } from 'reactstrap'; -describe('AvForm', function () { +describe('AvForm', () => { it('should render a "Form" by default', () => { const wrapper = shallow(); expect(wrapper.type()).to.equal(Form); @@ -67,12 +67,12 @@ describe('AvForm', function () { expect(wrapper.hasClass('av-submitted')).to.be.true; }); - it('should allow additional classNames',() => { + it('should allow additional classNames', () => { const wrapper = shallow(); expect(wrapper.hasClass('yo')).to.be.true; }); - it('should allow additional props to be passed to the tag',() => { + it('should allow additional props to be passed to the tag', () => { const wrapper = shallow(); expect(wrapper.prop('inline')).to.be.true; }); @@ -103,7 +103,8 @@ describe('AvForm', function () { }); it('should not handle the event if the callback returns false', () => { - const wrapper = shallow( false} />); + const fn = () => false; + const wrapper = shallow(); const event = { type: 'keydown', which: 13, @@ -206,17 +207,17 @@ describe('AvForm', function () { it('should not care if no event is passed', () => { const wrapper = shallow(); - expect(wrapper.simulate.bind(wrapper,'submit')).to.not.throw(); + expect(wrapper.simulate.bind(wrapper, 'submit')).to.not.throw(); }); - it('should get all of the values', () =>{ + it('should get all of the values', () => { const wrapper = shallow(); const getValuesSpy = sinon.spy(wrapper.instance(), 'getValues'); wrapper.simulate('submit'); expect(getValuesSpy).to.have.been.calledOnce; }); - it('should pass the values to validateAll', () =>{ + it('should pass the values to validateAll', () => { const wrapper = shallow(); const instance = wrapper.instance(); instance._inputs.input = {getValue: () => 'value', setState: () => {}}; @@ -230,9 +231,9 @@ describe('AvForm', function () { const spy = sinon.spy(wrapper.instance(), 'setTouched'); const instance = wrapper.instance(); instance._inputs.input = {getValue: () => 'value', setState: () => {}}; - return instance.handleSubmit().then(() => { - expect(spy).to.have.been.calledWithMatch(Object.keys(instance._inputs)); - }); + return instance + .handleSubmit() + .then(() => expect(spy).to.have.been.calledWithMatch(Object.keys(instance._inputs))); }); it('should call the onSubmit callback from props with the event, errors, and values', () => { @@ -244,9 +245,9 @@ describe('AvForm', function () { instance._inputs.invalidInput = {getValue: () => '', setState: () => {}}; const errors = ['invalidInput']; instance.validateAll = sinon.stub().returns({isValid: false, errors}); - return instance.handleSubmit(event).then(() => { - expect(spy).to.have.been.calledWithMatch(event, errors, {input: 'value', invalidInput: ''}); - }); + return instance + .handleSubmit(event) + .then(() => expect(spy).to.have.been.calledWithMatch(event, errors, {input: 'value', invalidInput: ''})); }); it('should call the onValidSubmit callback from props with the event and values when form is valid', () => { @@ -259,7 +260,7 @@ describe('AvForm', function () { return instance.handleSubmit(event).then(() => { expect(spy).to.have.been.calledWithMatch(event, { input: 'value' }); - expect(invalidSpy).to.not.have.been.called; + return expect(invalidSpy).to.not.have.been.called; }); }); @@ -276,7 +277,7 @@ describe('AvForm', function () { return instance.handleSubmit(event).then(() => { expect(spy).to.not.have.been.called; - expect(invalidSpy).to.have.been.calledWithMatch(event, errors, { input: 'value', invalidInput: '' }); + return expect(invalidSpy).to.have.been.calledWithMatch(event, errors, { input: 'value', invalidInput: '' }); }); }); @@ -285,13 +286,11 @@ describe('AvForm', function () { const instance = wrapper.instance(); expect(wrapper.state('submitted')).to.be.false; - return instance.handleSubmit().then(() => { - expect(wrapper.state('submitted')).to.be.true; - }); + return instance.handleSubmit().then(() => expect(wrapper.state('submitted')).to.be.true); }); }); - describe('instance functions', () => { + describe('instance functions', function () { beforeEach(() => { this.wrapper = shallow(); this.instance = this.wrapper.instance(); @@ -379,17 +378,17 @@ describe('AvForm', function () { expect(this.instance.getValues()).to.be.an('object'); }); - it('should get the values from the registered inputs',() => { + it('should get the values from the registered inputs', () => { const name = 'nameValue'; const email = 'evan.sharp@availity.com'; const dateOfBirth = new Date(); const number = 4; - const inputs = this.instance._inputs = { - 'name': {getValue: sinon.stub().returns(name)}, - 'email': {getValue: sinon.stub().returns(email)}, - 'dateOfBirth': {getValue: sinon.stub().returns(dateOfBirth)}, - 'number': {getValue: sinon.stub().returns(number)}, - }; + const inputs = (this.instance._inputs = { + name: { getValue: sinon.stub().returns(name) }, + email: { getValue: sinon.stub().returns(email) }, + dateOfBirth: { getValue: sinon.stub().returns(dateOfBirth) }, + number: { getValue: sinon.stub().returns(number) }, + }); this.instance.getValues(); expect(inputs.name.getValue).to.have.been.calledOnce; expect(inputs.email.getValue).to.have.been.calledOnce; @@ -397,22 +396,22 @@ describe('AvForm', function () { expect(inputs.number.getValue).to.have.been.calledOnce; }); - it('should return the values for all of the registered fields',() => { + it('should return the values for all of the registered fields', () => { const name = 'nameValue'; const email = 'evan.sharp@availity.com'; const dateOfBirth = new Date(); const number = 4; this.instance._inputs = { - 'name': {getValue: () => name}, - 'email': {getValue: () => email}, - 'dateOfBirth': {getValue: () => dateOfBirth}, - 'number': {getValue: () => number}, + name: { getValue: () => name }, + email: { getValue: () => email }, + dateOfBirth: { getValue: () => dateOfBirth }, + number: { getValue: () => number }, }; const result = this.instance.getValues(); expect(result).to.deep.equal({name, email, dateOfBirth, number}); }); - it('should return the values in a shape based on dot notation',() => { + it('should return the values in a shape based on dot notation', () => { const first = 'first name'; const last = 'last name'; const email = 'evan.sharp@availity.com'; @@ -424,7 +423,11 @@ describe('AvForm', function () { 'going.real.deep.for.this.value': {getValue: () => realDeep}, }; const result = this.instance.getValues(); - expect(result).to.deep.equal({name:{first, last}, email, going:{real:{deep:{for:{this:{value:4}}}}}}); + expect(result).to.deep.equal({ + name: { first, last }, + email, + going: { real: { deep: { for: { this: { value: 4 } } } } }, + }); }); }); @@ -439,12 +442,12 @@ describe('AvForm', function () { describe('reset', () => { it('should trigger reset on each of the registered inputs', () => { - const inputs = this.instance._inputs = { + const inputs = (this.instance._inputs = { 'name.first': {reset: sinon.spy()}, 'name.last': {reset: sinon.spy()}, 'email': {reset: sinon.spy()}, 'going.real.deep.for.this.value': {reset: sinon.spy()}, - }; + }); this.instance.reset(); expect(inputs['name.first'].reset).to.have.been.calledOnce; expect(inputs['name.last'].reset).to.have.been.calledOnce; @@ -453,7 +456,7 @@ describe('AvForm', function () { }); }); - describe('validate input', ()=> { + describe('validate input', () => { it('should trigger validate one with the input and the values', () => { const values = {}; const inputName = 'myInput'; @@ -470,14 +473,14 @@ describe('AvForm', function () { beforeEach(() => { this.isTouchedSpy = sinon.stub(this.instance, 'isTouched').returns(false); }); - it('should not return an error',() => { + it('should not return an error', () => { const inputName = 'myInput'; const result = this.instance.getInputState(inputName); expect(this.isTouchedSpy).to.have.been.calledWith(inputName); expect(result).to.deep.equal({color: undefined, error: false, errorMessage: undefined}); }); - it('should not check for an error',() => { + it('should not check for an error', () => { const hasErrorSpy = sinon.spy(this.instance, 'hasError'); const inputName = 'myInput'; this.instance.getInputState(inputName); @@ -491,14 +494,14 @@ describe('AvForm', function () { sinon.stub(this.instance, 'isTouched').returns(true); }); - it('should check if the field has an error',() => { + it('should check if the field has an error', () => { const hasErrorSpy = sinon.stub(this.instance, 'hasError').returns(false); const inputName = 'myInput'; this.instance.getInputState(inputName); expect(hasErrorSpy).to.have.been.calledWith(inputName); }); - it('should not return an error when the field is has not error',() => { + it('should not return an error when the field is has not error', () => { sinon.stub(this.instance, 'hasError').returns(false); const inputName = 'myInput'; const result = this.instance.getInputState(inputName); @@ -528,21 +531,21 @@ describe('AvForm', function () { }); describe('the error message', () => { - it('should be a string',() => { + it('should be a string', () => { sinon.stub(this.instance, 'hasError').returns(true); const inputName = 'myInput'; const result = this.instance.getInputState(inputName); expect(result.errorMessage).to.be.a('string'); }); - it('should default to "This field is invalid"',() => { + it('should default to "This field is invalid"', () => { sinon.stub(this.instance, 'hasError').returns(true); const inputName = 'myInput'; const result = this.instance.getInputState(inputName); expect(result.errorMessage).to.equal('This field is invalid'); }); - it('should be the string returned from validation',() => { + it('should be the string returned from validation', () => { const message = 'my error message'; sinon.stub(this.instance, 'hasError').returns(true); const inputName = 'myInput'; @@ -557,12 +560,12 @@ describe('AvForm', function () { describe('has error', () => { describe('with a name argument', () => { - it('should be false if the input is not in the list',() => { + it('should be false if the input is not in the list', () => { const inputName = 'myInput'; expect(this.instance.hasError(inputName)).to.be.false; }); - it('should be true when the input is invalid',() => { + it('should be true when the input is invalid', () => { const inputName = 'myInput'; this.instance.state.invalidInputs[inputName] = true; expect(this.instance.hasError(inputName)).to.be.true; @@ -570,11 +573,11 @@ describe('AvForm', function () { }); describe('without a name argument', () => { - it('should return false when none of the inputs are invalid',() => { + it('should return false when none of the inputs are invalid', () => { expect(this.instance.hasError()).to.be.false; }); - it('should return true when any of the inputs are invalid',() => { + it('should return true when any of the inputs are invalid', () => { this.instance.state.invalidInputs.name2 = true; expect(this.instance.hasError()).to.be.true; }); @@ -583,12 +586,12 @@ describe('AvForm', function () { describe('is dirty', () => { describe('with a name argument', () => { - it('should be false if the input is not in the list',() => { + it('should be false if the input is not in the list', () => { const inputName = 'myInput'; expect(this.instance.isDirty(inputName)).to.be.false; }); - it('should be true when the input is dirty',() => { + it('should be true when the input is dirty', () => { const inputName = 'myInput'; this.instance.state.dirtyInputs[inputName] = true; expect(this.instance.isDirty(inputName)).to.be.true; @@ -596,11 +599,11 @@ describe('AvForm', function () { }); describe('without a name argument', () => { - it('should return false when none of the inputs are dirty',() => { + it('should return false when none of the inputs are dirty', () => { expect(this.instance.isDirty()).to.be.false; }); - it('should return true when any of the inputs are dirty',() => { + it('should return true when any of the inputs are dirty', () => { this.instance.state.dirtyInputs.name2 = true; expect(this.instance.isDirty()).to.be.true; }); @@ -609,12 +612,12 @@ describe('AvForm', function () { describe('is touched', () => { describe('with a name argument', () => { - it('should be false if the input is not in the list',() => { + it('should be false if the input is not in the list', () => { const inputName = 'myInput'; expect(this.instance.isTouched(inputName)).to.be.false; }); - it('should be true when the input has been touched',() => { + it('should be true when the input has been touched', () => { const inputName = 'myInput'; this.instance.state.touchedInputs[inputName] = true; expect(this.instance.isTouched(inputName)).to.be.true; @@ -622,11 +625,11 @@ describe('AvForm', function () { }); describe('without a name argument', () => { - it('should return false when none of the inputs have been touched',() => { + it('should return false when none of the inputs have been touched', () => { expect(this.instance.isTouched()).to.be.false; }); - it('should return true when any of the inputs have been touched',() => { + it('should return true when any of the inputs have been touched', () => { this.instance.state.touchedInputs.name2 = true; expect(this.instance.isTouched()).to.be.true; }); @@ -923,7 +926,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, true, undefined); - expect(result).to.be.false; + return expect(result).to.be.false; }); }); @@ -937,7 +940,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, true, errorMessage); - expect(result).to.be.false; + return expect(result).to.be.false; }); }); @@ -950,7 +953,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, false, undefined); - expect(result).to.be.true; + return expect(result).to.be.true; }); }); }); @@ -958,14 +961,14 @@ describe('AvForm', function () { describe('when validate is an object', () => { it('should call the validators with value and context', () => { const inputName = 'myInput'; - const validatorsSpy = this.instance._validators[inputName] = sinon.stub(); + const validatorsSpy = (this.instance._validators[inputName] = sinon.stub()); const input = {validations: {}}; const inputValue = 'some value'; const context = {[inputName]: inputValue}; this.instance._inputs = {[inputName]: input}; - return this.instance.validateOne(inputName, context).then(() => { - expect(validatorsSpy).to.have.been.calledWith(inputValue, context); - }); + return this.instance + .validateOne(inputName, context) + .then(() => expect(validatorsSpy).to.have.been.calledWith(inputValue, context)); }); it('should set error when the validators returns false', () => { @@ -978,7 +981,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, true, undefined); - expect(result).to.be.false; + return expect(result).to.be.false; }); }); @@ -993,7 +996,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, true, errorMessage); - expect(result).to.be.false; + return expect(result).to.be.false; }); }); @@ -1007,7 +1010,7 @@ describe('AvForm', function () { this.instance._inputs = {[inputName]: input}; return this.instance.validateOne(inputName, context).then(result => { expect(spy).to.have.been.calledWith(inputName, false, undefined); - expect(result).to.be.true; + return expect(result).to.be.true; }); }); }); @@ -1026,7 +1029,7 @@ describe('AvForm', function () { describe('validate all', () => { it('should return an object', () => { - return expect(this.instance.validateAll({})).to.eventually.be.an('object'); + expect(this.instance.validateAll({})).to.eventually.be.an('object'); }); it('should validate each registered input', () => { @@ -1037,14 +1040,14 @@ describe('AvForm', function () { expect(spy).to.have.been.calledThrice; expect(spy.firstCall).to.have.been.calledWith('input1', context); expect(spy.secondCall).to.have.been.calledWith('input2', context); - expect(spy.thirdCall).to.have.been.calledWith('input3', context); + return expect(spy.thirdCall).to.have.been.calledWith('input3', context); }); }); it('should indicate when a input has an error', () => { this.instance._inputs = {input1: {}, input2: {}, input3: {}}; const context = {input1: 'input1value', input2: 'input2value', input3: 'input3value'}; - sinon.stub(this.instance, 'validateOne').returns(false); + sinon.stub(this.instance, 'validateOne').returns(false); return expect(this.instance.validateAll(context)).to.eventually.have.property('isValid', false); }); @@ -1056,7 +1059,7 @@ describe('AvForm', function () { stub.returns(true); return this.instance.validateAll(context).then(result => { expect(result.errors).to.contain('input2'); - expect(result.errors).to.not.contain.any('input1', 'input3'); + return expect(result.errors).to.not.contain.any('input1', 'input3'); }); }); @@ -1081,20 +1084,20 @@ describe('AvForm', function () { expect(spy3).to.not.have.been.called; }); - it('should indicate a form level validation error when form is invalid',() => { + it('should indicate a form level validation error when form is invalid', () => { const spy1 = sinon.stub().returns(true); const spy2 = sinon.stub().returns(false); this.wrapper.setProps({validate: [spy1, spy2]}); const context = {}; - return expect(this.instance.validateAll(context)).to.eventually.deep.equal({isValid: false, errors:['*']}); + return expect(this.instance.validateAll(context)).to.eventually.deep.equal({isValid: false, errors: ['*']}); }); - it('should not indicate a form level validation error when form is valid',() => { + it('should not indicate a form level validation error when form is valid', () => { const spy1 = sinon.stub().returns(true); const spy2 = sinon.stub().returns(true); this.wrapper.setProps({validate: [spy1, spy2]}); const context = {}; - return expect(this.instance.validateAll(context)).to.eventually.deep.equal({isValid: true, errors:[]}); + return expect(this.instance.validateAll(context)).to.eventually.deep.equal({isValid: true, errors: []}); }); }); }); @@ -1104,7 +1107,7 @@ describe('AvForm', function () { expect(this.instance.compileValidationRules()).to.be.a('function'); }); - describe('the validation function',() => { + describe('the validation function', () => { it('should throw when the specific validation does not exist', () => { const input = {props: {name: 'myInput'}}; const rules = {myRuleDoesNotExist: true}; @@ -1126,22 +1129,21 @@ describe('AvForm', function () { const rules = {myFn: (...args) => spy(...args) || true}; const fn = this.instance.compileValidationRules(input, rules); - return expect(fn()).to.eventually.be.false.then(() => { - expect(spy).to.not.have.been.called; - }); + return expect(fn()).to.eventually.be.false.then(() => expect(spy).to.not.have.been.called); }); it('should be able to handle a returned promise', () => { let resolve; const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => { - return new Promise(r => { - resolve = r; - }); - }}; + const rules = { + myFn: () => + new Promise(r => { + resolve = r; + }), + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; resolve(true); return expect(result).to.be.fulfilled.and.eventually.be.true; }); @@ -1150,14 +1152,15 @@ describe('AvForm', function () { it('should be able to return true to invalid valid', () => { let resolve; const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => { - return new Promise(r => { - resolve = r; - }); - }}; + const rules = { + myFn: () => + new Promise(r => { + resolve = r; + }), + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; resolve(true); return expect(result).to.be.fulfilled.and.eventually.be.true; }); @@ -1165,14 +1168,15 @@ describe('AvForm', function () { it('should be able to return false to indicate invalud', () => { let resolve; const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => { - return new Promise(r => { - resolve = r; - }); - }}; + const rules = { + myFn: () => + new Promise(r => { + resolve = r; + }), + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; resolve(false); return expect(result).to.be.fulfilled.and.eventually.be.false; }); @@ -1180,15 +1184,16 @@ describe('AvForm', function () { it('should be able to return a string error message', () => { let resolve; const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => { - return new Promise(r => { - resolve = r; - }); - }}; + const rules = { + myFn: () => + new Promise(r => { + resolve = r; + }), + }; const errorMessage = 'my error message'; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; resolve(errorMessage); return expect(result).to.be.fulfilled.and.eventually.be.equal(errorMessage); }); @@ -1198,12 +1203,14 @@ describe('AvForm', function () { it('should be able to use a callback', () => { let callback; const input = {props: {name: 'myInput'}}; - const rules = {myFn: (value, ctx, input, cb) => { - callback = cb; - }}; + const rules = { + myFn: (_value, _ctx, _input, cb) => { + callback = cb; + }, + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; callback(true); return expect(result).to.be.fulfilled.and.eventually.be.true; }); @@ -1212,12 +1219,14 @@ describe('AvForm', function () { it('should be able to return true to invalid valid', () => { let callback; const input = {props: {name: 'myInput'}}; - const rules = {myFn: (value, ctx, input, cb) => { - callback = cb; - }}; + const rules = { + myFn: (_value, _ctx, _input, cb) => { + callback = cb; + }, + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; callback(true); return expect(result).to.be.fulfilled.and.eventually.be.true; }); @@ -1225,12 +1234,14 @@ describe('AvForm', function () { it('should be able to return false to indicate invalud', () => { let callback; const input = {props: {name: 'myInput'}}; - const rules = {myFn: (value, ctx, input, cb) => { - callback = cb; - }}; + const rules = { + myFn: (_value, _ctx, _input, cb) => { + callback = cb; + }, + }; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; callback(false); return expect(result).to.be.fulfilled.and.eventually.be.false; }); @@ -1238,19 +1249,21 @@ describe('AvForm', function () { it('should be able to return a string error message', () => { let callback; const input = {props: {name: 'myInput'}}; - const rules = {myFn: (value, ctx, input, cb) => { - callback = cb; - }}; + const rules = { + myFn: (_value, _ctx, _input, cb) => { + callback = cb; + }, + }; const errorMessage = 'my error message'; const fn = this.instance.compileValidationRules(input, rules); const result = fn(); - expect(result).to.not.be.fulfilled; + // expect(result).to.not.be.fulfilled; callback(errorMessage); return expect(result).to.be.fulfilled.and.eventually.be.equal(errorMessage); }); }); - describe('when validate prop object has a function', ()=> { + describe('when validate prop object has a function', () => { it('should call the validation function', () => { const input = {props: {name: 'myInput'}}; const spy = sinon.spy(); @@ -1258,9 +1271,9 @@ describe('AvForm', function () { const fn = this.instance.compileValidationRules(input, rules); const value = 'myvalue'; const context = {}; - return fn(value, context).then(() => { - expect(spy).to.have.been.calledWith(value, context, input); - }); + return fn(value, context).then(() => + expect(spy).to.have.been.calledWith(value, context, input) + ); }); it('should return false when the function returns false and no message is not supplied', () => { @@ -1331,7 +1344,7 @@ describe('AvForm', function () { }); }); - describe('when validate prop object has a validation key', ()=> { + describe('when validate prop object has a validation key', () => { before(() => { this.minStub = sinon.stub(AvValidator, 'min').returns(false); this.maxStub = sinon.stub(AvValidator, 'max').returns(true); @@ -1350,9 +1363,9 @@ describe('AvForm', function () { const fn = this.instance.compileValidationRules(input, rules); const value = 'myvalue'; const context = {}; - return fn(value, context).then(() => { - expect(this.minStub).to.have.been.calledWith(value, context, rules.min, input); - }); + return fn(value, context).then(() => + expect(this.minStub).to.have.been.calledWith(value, context, rules.min, input) + ); }); it('should return false when the function returns false and no message is not supplied', () => { @@ -1435,7 +1448,7 @@ describe('AvForm', function () { it('should return true if all of the validations pass', () => { const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => true, max: {value:12}}; + const rules = {myFn: () => true, max: {value: 12}}; const fn = this.instance.compileValidationRules(input, rules); const value = 'myvalue'; const context = {}; @@ -1445,7 +1458,7 @@ describe('AvForm', function () { it('should return false is any of the validations fail', () => { const input = {props: {name: 'myInput'}}; - const rules = {myFn: () => false, max: {value:12}, min: {value: 6}}; + const rules = {myFn: () => false, max: {value: 12}, min: {value: 6}}; const fn = this.instance.compileValidationRules(input, rules); const value = 'myvalue'; const context = {}; @@ -1456,7 +1469,7 @@ describe('AvForm', function () { }); }); - describe('get default value',() => { + describe('get default value', () => { it('should get the input out of the model from props', () => { const model = {something: {deep: {like: 'this'}}}; this.wrapper.setProps({model}); diff --git a/__test__/AvGroup.spec.js b/__test__/AvGroup.spec.js index e521480..05b15d8 100644 --- a/__test__/AvGroup.spec.js +++ b/__test__/AvGroup.spec.js @@ -1,11 +1,10 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; import { AvGroup } from 'availity-reactstrap-validation'; import { FormGroup } from 'reactstrap'; -describe('AvGroup', function() { +describe('AvGroup', function () { beforeEach(() => { - this.inputState = {color:'danger'}; + this.inputState = {color: 'danger'}; this.props = { name: 'fieldName', }; @@ -45,9 +44,9 @@ describe('AvGroup', function() { it('should intercept an input registration', () => { const wrapper = mount(Yo!, this.options); - expect(wrapper.node.FormCtrl.register).to.not.equal(this.registerSpy); - const input = {props: this.props}; - wrapper.node.FormCtrl.register(input); + expect(wrapper.instance().FormCtrl.register).to.not.equal(this.registerSpy); + const input = {props: this.props}; + wrapper.instance().FormCtrl.register(input); expect(wrapper.state('input')).to.equal(input); expect(this.registerSpy).to.have.been.calledWith(input); }); diff --git a/__test__/AvInput.spec.js b/__test__/AvInput.spec.js index 5836844..c2882ed 100644 --- a/__test__/AvInput.spec.js +++ b/__test__/AvInput.spec.js @@ -1,5 +1,4 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvInput } from 'availity-reactstrap-validation'; import { Input } from 'reactstrap'; @@ -20,21 +19,21 @@ describe('AvInput', () => { context: { FormCtrl: { inputs: {}, - getDefaultValue: ()=> {}, - getInputState: ()=> {}, + getDefaultValue: () => {}, + getInputState: () => {}, hasError: () => error, isDirty: () => dirty, isTouched: () => touched, isBad: () => bad, isDisabled: () => false, isReadOnly: () => false, - setDirty: ()=> {}, - setTouched: ()=> {}, - setBad: ()=> {}, - register: ()=> {}, - unregister: ()=> {}, - validate: ()=> {}, - validationEvent: ()=> {}, + setDirty: () => {}, + setTouched: () => {}, + setBad: () => {}, + register: () => {}, + unregister: () => {}, + validate: () => {}, + validationEvent: () => {}, parent: null, }, }, @@ -81,7 +80,7 @@ describe('AvInput', () => { expect(wrapper.hasClass('is-touched')).to.be.true; }); - it('should have "is-pristine" class when not dirty', () => { + it('should not have "is-pristine" class when dirty', () => { dirty = true; const wrapper = shallow(, options); @@ -98,7 +97,7 @@ describe('AvInput', () => { expect(wrapper.hasClass('is-invalid')).to.be.true; }); - it('should not have "is-bad-input" class when the input is not "bad"', () => { + it('should have "is-bad-input" class when the input is "bad"', () => { bad = true; const wrapper = shallow(, options); diff --git a/__test__/AvInputContainer.spec.js b/__test__/AvInputContainer.spec.js index 60215f9..e94c548 100644 --- a/__test__/AvInputContainer.spec.js +++ b/__test__/AvInputContainer.spec.js @@ -1,6 +1,6 @@ import { AvInputContainer } from 'availity-reactstrap-validation'; -describe('BaseInput', function() { +describe('BaseInput', function () { beforeEach(() => { this.inputs = {}; this.updaters = {}; @@ -11,7 +11,7 @@ describe('BaseInput', function() { describe('component will mount', () => { it('should get the default value', () => { - this.component.componentWillMount(); + this.component.UNSAFE_componentWillMount(); expect(this.component._inputs).to.eql({}); }); }); @@ -26,15 +26,11 @@ describe('BaseInput', function() { }); it('should throw if the input does not have props', () => { - expect(this.component.registerInput.bind(this.component, {})).to.throw( - 'no "name" prop' - ); + expect(this.component.registerInput.bind(this.component, {})).to.throw('no "name" prop'); }); it('should throw if the input is undefined', () => { - expect(this.component.registerInput.bind(this.component)).to.throw( - 'no "name" prop' - ); + expect(this.component.registerInput.bind(this.component)).to.throw('no "name" prop'); }); describe('other input types', () => { diff --git a/__test__/AvRadio.spec.js b/__test__/AvRadio.spec.js index 94e69f4..2906ad3 100644 --- a/__test__/AvRadio.spec.js +++ b/__test__/AvRadio.spec.js @@ -1,7 +1,6 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvRadio } from 'availity-reactstrap-validation'; -import { Input, Label, FormGroup } from 'reactstrap'; +import { Input } from 'reactstrap'; let options; let props; @@ -28,21 +27,21 @@ describe('AvRadio', () => { }, FormCtrl: { inputs: {}, - getDefaultValue: ()=> {}, - getInputState: ()=> ({}), + getDefaultValue: () => {}, + getInputState: () => ({}), hasError: () => error, isDirty: () => dirty, isTouched: () => touched, isBad: () => bad, isDisabled: () => false, isReadOnly: () => false, - setDirty: ()=> {}, - setTouched: ()=> {}, - setBad: ()=> {}, - register: ()=> {}, - unregister: ()=> {}, - validate: ()=> {}, - getValidationEvent: ()=> {}, + setDirty: () => {}, + setTouched: () => {}, + setBad: () => {}, + register: () => {}, + unregister: () => {}, + validate: () => {}, + getValidationEvent: () => {}, validation: {}, parent: null, }, @@ -85,7 +84,7 @@ describe('AvRadio', () => { expect(wrapper.find(Input).hasClass('is-touched')).to.be.true; }); - it('should have "is-pristine" class when not dirty', () => { + it('should not have "is-pristine" class when dirty', () => { dirty = true; const wrapper = shallow(, options); diff --git a/__test__/AvRadioGroup.spec.js b/__test__/AvRadioGroup.spec.js index db4a1ca..b857f42 100644 --- a/__test__/AvRadioGroup.spec.js +++ b/__test__/AvRadioGroup.spec.js @@ -1,7 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { AvRadioGroup, AvFeedback } from 'availity-reactstrap-validation'; -import { FormGroup } from 'reactstrap'; let options; @@ -20,8 +18,8 @@ describe('AvRadioGroup', () => { context: { FormCtrl: { inputs: {}, - getDefaultValue: ()=> {}, - getInputState: ()=> ({}), + getDefaultValue: () => {}, + getInputState: () => ({}), hasError: () => error, isDirty: () => dirty, isTouched: () => touched, @@ -34,7 +32,7 @@ describe('AvRadioGroup', () => { register: sinon.spy(), unregister: sinon.spy(), validate: sinon.spy(), - getValidationEvent: ()=> {}, + getValidationEvent: () => {}, validation: {}, parent: null, }, @@ -62,14 +60,14 @@ describe('AvRadioGroup', () => { expect(instance.validations.required).to.be.undefined; }); - it('should return the set value', ()=> { + it('should return the set value', () => { const wrapper = shallow(, options); const component = wrapper.instance(); component.value = 'boop'; expect(component.getValue()).to.equal('boop'); }); - it('should unregister when unmounted', ()=> { + it('should unregister when unmounted', () => { const wrapper = shallow(, options); wrapper.unmount(); expect(options.context.FormCtrl.unregister).to.have.been.called; @@ -114,9 +112,7 @@ describe('AvRadioGroup', () => { it('should give default value from context', () => { const wrapper = shallow(, options); const component = wrapper.instance(); - component.context.FormCtrl.getDefaultValue = () => { - return 'jiri'; - }; + component.context.FormCtrl.getDefaultValue = () => 'jiri'; expect(component.getDefaultValue()).to.eql({key: 'defaultValue', value: 'jiri'}); }); @@ -173,15 +169,14 @@ describe('AvRadioGroup', () => { const wrapper = shallow(, options); const component = wrapper.instance(); const event = {}; - component.getChildContext().Group.update(event, 'momo').then(() => { - expect(spy).to.have.been.calledWith(event, 'momo'); - }); + return component + .getChildContext() + .Group.update(event, 'momo') + .then(() => expect(spy).to.have.been.calledWith(event, 'momo')); }); it('should render validation message when sent', () => { - options.context.FormCtrl.getInputState = () => { - return {'errorMessage': 'WHAT ARE YOU DOING?!'}; - }; + options.context.FormCtrl.getInputState = () => ({ errorMessage: 'WHAT ARE YOU DOING?!' }); const wrapper = shallow(, options); expect(wrapper.find(AvFeedback).prop('children')).to.equal('WHAT ARE YOU DOING?!'); }); diff --git a/__test__/AvValidator.dateRange.spec.js b/__test__/AvValidator.dateRange.spec.js index 6eb0d7e..02d0929 100644 --- a/__test__/AvValidator.dateRange.spec.js +++ b/__test__/AvValidator.dateRange.spec.js @@ -1,9 +1,10 @@ +/* eslint comma-dangle: [2, "only-multiline"] */ import moment from 'moment'; -import {AvValidator} from 'availity-reactstrap-validation'; -import {inputTypeOverride} from 'availity-reactstrap-validation/AvValidator/utils'; +import { AvValidator } from 'availity-reactstrap-validation'; +import { inputTypeOverride } from 'availity-reactstrap-validation/AvValidator/utils'; const fn = AvValidator.dateRange; -const input = {props: {type: 'text'}}; +const input = { props: { type: 'text' } }; const context = {}; let date0; let date1; @@ -22,101 +23,180 @@ describe('Date Range Validation', () => { describe('error message', () => { it('should allow the error message to be overridden', () => { - expect(fn('abc 123', context, {errorMessage: 'Custom'}, input)).to.equal('Custom'); + expect(fn('abc 123', context, { errorMessage: 'Custom' }, input)).to.equal('Custom'); }); it('should use the custom format in the default message', () => { - expect(fn('abc 123', context, { - format: 'YYYY-MM-DD', - displayFormat: 'YYYY-MM-DD', - start: {value: '2014-10-12'}, - end: {value: '2015-10-12'} - }, input)).to.equal('Date must be between 2014-10-12 and 2015-10-12'); + expect( + fn( + 'abc 123', + context, + { + format: 'YYYY-MM-DD', + displayFormat: 'YYYY-MM-DD', + start: { value: '2014-10-12' }, + end: { value: '2015-10-12' }, + }, + input + ) + ).to.equal('Date must be between 2014-10-12 and 2015-10-12'); }); it('should use the default format in the default message', () => { - expect(fn('abc 123', context, { - format: 'YYYY-MM-DD', - start: {value: '2014-10-12'}, - end: {value: '2015-10-12'} - }, input)).to.equal('Date must be between 10/12/2014 and 10/12/2015'); + expect( + fn( + 'abc 123', + context, + { + format: 'YYYY-MM-DD', + start: { value: '2014-10-12' }, + end: { value: '2015-10-12' }, + }, + input + ) + ).to.equal('Date must be between 10/12/2014 and 10/12/2015'); }); }); describe('with units', () => { it('should return true when date is within range of the current date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should return true when date is the same as the start date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: 0, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: 0, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should return true when date is the same as the end date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: -1, units: 'day'}, - end: {value: 0, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: -1, units: 'day' }, + end: { value: 0, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should return an error message when date is not within range of the current date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: -5, units: 'day'}, - end: {value: -1, units: 'day'} - }, input)).to.equal(`Date must be between ${date1.add(-5, 'day').format('MM/DD/YYYY')} and ${date2.add(-1, 'day').format('MM/DD/YYYY')}`); + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: -5, units: 'day' }, + end: { value: -1, units: 'day' }, + }, + input + ) + ).to.equal( + `Date must be between ${date1.add(-5, 'day').format('MM/DD/YYYY')} and ${date2.add(-1, 'day').format('MM/DD/YYYY')}` + ); }); }); describe('without units', () => { it('should return true when date is within range of the current date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: date1.add(-1, 'day').format('YYYY-MM-DD')}, - end: {value: date2.add(1, 'day').format('YYYY-MM-DD')} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: date1.add(-1, 'day').format('YYYY-MM-DD') }, + end: { value: date2.add(1, 'day').format('YYYY-MM-DD') }, + }, + input + ) + ).to.be.true; }); it('should return true when date is the same as the start date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: date1.format('YYYY-MM-DD')}, - end: {value: date2.add(1, 'day').format('YYYY-MM-DD')} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: date1.format('YYYY-MM-DD') }, + end: { value: date2.add(1, 'day').format('YYYY-MM-DD') }, + }, + input + ) + ).to.be.true; }); it('should return true when date is the same as the end date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: date1.add(-1, 'day').format('YYYY-MM-DD')}, - end: {value: date2.format('YYYY-MM-DD')} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: date1.add(-1, 'day').format('YYYY-MM-DD') }, + end: { value: date2.format('YYYY-MM-DD') }, + }, + input + ) + ).to.be.true; }); it('should return an error message when date is not within range of the current date', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: date1.add(-5, 'day').format('YYYY-MM-DD')}, - end: {value: date2.add(-1, 'day').format('YYYY-MM-DD')} - }, input)).to.equal(`Date must be between ${date1.format('MM/DD/YYYY')} and ${date2.format('MM/DD/YYYY')}`); + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: date1.add(-5, 'day').format('YYYY-MM-DD') }, + end: { value: date2.add(-1, 'day').format('YYYY-MM-DD') }, + }, + input + ) + ).to.equal(`Date must be between ${date1.format('MM/DD/YYYY')} and ${date2.format('MM/DD/YYYY')}`); }); it('should allow the start and end formats to be different than the user format', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - format: 'YYYY-MM-DD', - start: {value: date1.add(-5, 'day').format('DD-MM-YYYY'), format: 'DD-MM-YYYY'}, - end: {value: date2.add(-1, 'day').format('YYYY/MM/DD'), format: 'YYYY/MM/DD'} - }, input)).to.equal(`Date must be between ${date1.format('MM/DD/YYYY')} and ${date2.format('MM/DD/YYYY')}`); + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + format: 'YYYY-MM-DD', + start: { value: date1.add(-5, 'day').format('DD-MM-YYYY'), format: 'DD-MM-YYYY' }, + end: { value: date2.add(-1, 'day').format('YYYY/MM/DD'), format: 'YYYY/MM/DD' }, + }, + input + ) + ).to.equal(`Date must be between ${date1.format('MM/DD/YYYY')} and ${date2.format('MM/DD/YYYY')}`); }); }); @@ -126,25 +206,46 @@ describe('Date Range Validation', () => { }); it('should accept MM/DD/YYYY by default', () => { - expect(fn(date0.format('MM/DD/YYYY'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('MM/DD/YYYY'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should accept YYYY-MM-DD by default', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should allow the format to be overridden', () => { - expect(fn(date0.format('DD-MM-YYYY'), context, { - format: 'DD-MM-YYYY', - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('DD-MM-YYYY'), + context, + { + format: 'DD-MM-YYYY', + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); }); @@ -156,25 +257,46 @@ describe('Date Range Validation', () => { }); it('should accept MM/DD/YYYY by default', () => { - expect(fn(date0.format('MM/DD/YYYY'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('MM/DD/YYYY'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should accept YYYY-MM-DD by default', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should allow the format to be overridden', () => { - expect(fn(date0.format('DD-MM-YYYY'), context, { - format: 'DD-MM-YYYY', - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('DD-MM-YYYY'), + context, + { + format: 'DD-MM-YYYY', + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); }); @@ -185,25 +307,46 @@ describe('Date Range Validation', () => { }); it('should accept YYYY-MM-DD by default', () => { - expect(fn(date0.format('YYYY-MM-DD'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('YYYY-MM-DD'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should accept MM/DD/YYYY by default', () => { - expect(fn(date0.format('MM/DD/YYYY'), context, { - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('MM/DD/YYYY'), + context, + { + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); it('should allow the format to be overridden', () => { - expect(fn(date0.format('DD-MM-YYYY'), context, { - format: 'DD-MM-YYYY', - start: {value: -1, units: 'day'}, - end: {value: 1, units: 'day'} - }, input)).to.be.true; + expect( + fn( + date0.format('DD-MM-YYYY'), + context, + { + format: 'DD-MM-YYYY', + start: { value: -1, units: 'day' }, + end: { value: 1, units: 'day' }, + }, + input + ) + ).to.be.true; }); }); }); diff --git a/__test__/AvValidator.match.spec.js b/__test__/AvValidator.match.spec.js index e6215ae..20f7368 100644 --- a/__test__/AvValidator.match.spec.js +++ b/__test__/AvValidator.match.spec.js @@ -3,11 +3,11 @@ import {AvValidator} from 'availity-reactstrap-validation'; const fn = AvValidator.match; const now = new Date(); const context = { - field1: "", - field2: "something", + field1: '', + field2: 'something', field3: now, field4: 4, - field5: {value: "something"}, + field5: {value: 'something'}, }; describe('Match Validation', () => { diff --git a/__test__/AvValidator.pattern.spec.js b/__test__/AvValidator.pattern.spec.js index 089430b..e6341f9 100644 --- a/__test__/AvValidator.pattern.spec.js +++ b/__test__/AvValidator.pattern.spec.js @@ -27,9 +27,9 @@ describe('Pattern Validation', () => { }); it('should accept and array of regex to match at least one of', () => { - expect(fn('3.4', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\.\\d\.\\d$/']})).to.be.true; - expect(fn('3.4', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\.\\d\.\\d$/']})).to.be.true; - expect(fn('3.4.5', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\.\\d\.\\d$/']})).to.be.true; - expect(fn('3.a.b', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\.\\d\.\\d$/']})).to.be.false; + expect(fn('3.4', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\\.\\d\\.\\d$/']})).to.be.true; + expect(fn('3.4', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\\.\\d\\.\\d$/']})).to.be.true; + expect(fn('3.4.5', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\\.\\d\\.\\d$/']})).to.be.true; + expect(fn('3.a.b', undefined, {value: ['^\\d$', /^\d\.\d$/, '/^\\d\\.\\d\\.\\d$/']})).to.be.false; }); }); diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json new file mode 100644 index 0000000..07c03b1 --- /dev/null +++ b/docs/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "rules": { + "import/no-webpack-loader-syntax": 0, + "react/prop-types": [2, { + "ignore": ["children", "className"] + }], + "react/no-unescaped-entities": [2, { + "forbid": [">", "}"] + }] + }, + "settings": { + "import/resolver": { + "webpack": { + "config": "webpack.dev.config.js" + } + } + } +} diff --git a/docs/lib/Components/CheckboxPage.js b/docs/lib/Components/CheckboxPage.js index 4f70c93..398b594 100644 --- a/docs/lib/Components/CheckboxPage.js +++ b/docs/lib/Components/CheckboxPage.js @@ -1,80 +1,76 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ +/* eslint import/first: 0, import/newline-after-import: 0 */ import React from 'react'; import { PrismCode } from 'react-prism'; import Helmet from 'react-helmet'; import CheckboxExample from '../examples/Checkbox'; -const CheckboxExampleSource = require('!!raw!../examples/Checkbox.js'); +const CheckboxExampleSource = require('!!raw-loader!../examples/Checkbox.js'); import CheckboxTrueValueExample from '../examples/CheckboxTrueValue'; -const CheckboxTrueValueExampleSource = require('!!raw!../examples/CheckboxTrueValue.js'); +const CheckboxTrueValueExampleSource = require('!!raw-loader!../examples/CheckboxTrueValue.js'); import CheckboxFalseValueExample from '../examples/CheckboxFalseValue'; -const CheckboxFalseValueExampleSource = require('!!raw!../examples/CheckboxFalseValue.js'); +const CheckboxFalseValueExampleSource = require('!!raw-loader!../examples/CheckboxFalseValue.js'); import CheckboxDefaultExample from '../examples/CheckboxDefault'; -const CheckboxDefaultExampleSource = require('!!raw!../examples/CheckboxDefault.js'); +const CheckboxDefaultExampleSource = require('!!raw-loader!../examples/CheckboxDefault.js'); -export default class CheckboxPage extends React.Component { - render() { - return ( -
- -

Checkboxes

-

- Checkboxes are slightly special as the user cannot define a value, but only check and uncheck the box. - There are special props, trueValue and falseValue which allow you to determine what - the value returned will be when the box is check or not checked respectfully. trueValue will - default to true and falseValue will default to false. -

-
- -
-
-          
-            {CheckboxExampleSource}
-          
-        
+export default () => ( +
+ +

Checkboxes

+

+ Checkboxes are slightly special as the user cannot define a value, but only check and uncheck the box. + There are special props, trueValue and falseValue which allow you to determine what + the value returned will be when the box is check or not checked respectfully. trueValue will + default to true and falseValue will default to false. +

+
+ +
+
+      
+        {CheckboxExampleSource}
+      
+    
-

True Value

-

- Checking the boxes and submitting the form, you will see the value passed is the trueValue for - the checkbox; true by default. -

-
- -
-
-          
-            {CheckboxTrueValueExampleSource}
-          
-        
+

True Value

+

+ Checking the boxes and submitting the form, you will see the value passed is the trueValue for + the checkbox; true by default. +

+
+ +
+
+      
+        {CheckboxTrueValueExampleSource}
+      
+    
-

False Value

-

- Leaving the boxes unchecked and submitting the form, you will see the value passed is the - falseValue for the checkbox; false by default. -

-
- -
-
-          
-            {CheckboxFalseValueExampleSource}
-          
-        
+

False Value

+

+ Leaving the boxes unchecked and submitting the form, you will see the value passed + is the falseValue for the checkbox; false by default. +

+
+ +
+
+      
+        {CheckboxFalseValueExampleSource}
+      
+    
-

Model Default Values

-

- Using the model prop on the form, you can indicate if the checkboxes should be checked or unchecked when - initialized by providing the trueValue or falseValue in the model prop on the form. -

-
- -
-
-          
-            {CheckboxDefaultExampleSource}
-          
-        
-
- ); - } -} +

Model Default Values

+

+ Using the model prop on the form, you can indicate if the checkboxes should be checked or unchecked when + initialized by providing the trueValue or falseValue in the model prop on the form. +

+
+ +
+
+      
+        {CheckboxDefaultExampleSource}
+      
+    
+
+); diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js index 3d9b8ef..0d0f4dc 100644 --- a/docs/lib/Components/FormPage.js +++ b/docs/lib/Components/FormPage.js @@ -1,85 +1,84 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ +/* eslint import/first: 0, import/newline-after-import: 0 */ import React from 'react'; import { PrismCode } from 'react-prism'; import Helmet from 'react-helmet'; import FormExample from '../examples/Form'; -const FormExampleSource = require('!!raw!../examples/Form.js'); +const FormExampleSource = require('!!raw-loader!../examples/Form.js'); import FormOnSubmitExample from '../examples/FormOnSubmit'; -const FormOnSubmitExampleSource = require('!!raw!../examples/FormOnSubmit.js'); +const FormOnSubmitExampleSource = require('!!raw-loader!../examples/FormOnSubmit.js'); import FormOnValidSubmitExample from '../examples/FormOnValidSubmit'; -const FormOnValidSubmitExampleSource = require('!!raw!../examples/FormOnValidSubmit.js'); +const FormOnValidSubmitExampleSource = require('!!raw-loader!../examples/FormOnValidSubmit.js'); import FormOnInvalidSubmitExample from '../examples/FormOnInvalidSubmit'; -const FormOnInvalidSubmitExampleSource = require('!!raw!../examples/FormOnInvalidSubmit.js'); +const FormOnInvalidSubmitExampleSource = require('!!raw-loader!../examples/FormOnInvalidSubmit.js'); import FormModelExample from '../examples/FormModel'; -const FormModelExampleSource = require('!!raw!../examples/FormModel.js'); +const FormModelExampleSource = require('!!raw-loader!../examples/FormModel.js'); -export default class FormPage extends React.Component { - render() { - return ( -
- -

AvForm

-

The AvForm component wraps reactstrap's form to add context that the other Av components know about to help share validation state

-
- -
-
-          
-            {FormExampleSource}
-          
-        
+export default () => ( +
+ +

AvForm

+

+ The AvForm component wraps reactstrap's form to add context that the other Av components know about to help share + validation state +

+
+ +
+
+      
+        {FormExampleSource}
+      
+    
-

OnSubmit

-

This callback is called with every submission of the form

-
- -
-
-          
-            {FormOnSubmitExampleSource}
-          
-        
+

OnSubmit

+

This callback is called with every submission of the form

+
+ +
+
+      
+        {FormOnSubmitExampleSource}
+      
+    
-

OnValidSubmit

-

This callback is called only when every field is valid when submitted

-
- -
-
-          
-            {FormOnValidSubmitExampleSource}
-          
-        
+

OnValidSubmit

+

This callback is called only when every field is valid when submitted

+
+ +
+
+      
+        {FormOnValidSubmitExampleSource}
+      
+    
-

OnInvalidSubmit

-

This callback is called only when any field is invalid when submitted

-
- -
-
-          
-            {FormOnInvalidSubmitExampleSource}
-          
-        
+

OnInvalidSubmit

+

This callback is called only when any field is invalid when submitted

+
+ +
+
+      
+        {FormOnInvalidSubmitExampleSource}
+      
+    
-

Model (Easy default values)

-

- Pass an object in which the keys correspond to the name props of the form's input to set their initial value. - Nested objects can be accessed via dot notation. Individual array indexes can be accessed via bracket notation. - The values object returned to the various submissions handlers will reflex the object shape. - Behind the scenes, lodash's get and set are being used, - look at lodash's documentation to learn more about how to access complex data in the model. -

-
- -
-
-          
-            {FormModelExampleSource}
-          
-        
-
- ); - } -} +

Model (Easy default values)

+

+ Pass an object in which the keys correspond to the name props of the form's input to set their initial value. + Nested objects can be accessed via dot notation. Individual array indexes can be accessed via bracket notation. + The values object returned to the various submissions handlers will reflex the object shape. Behind the scenes, + lodash's get and set are + being used, look at lodash's documentation to learn more about how to access complex data in the model. +

+
+ +
+
+      
+        {FormModelExampleSource}
+      
+    
+
+); diff --git a/docs/lib/Components/ValidatorsPage.js b/docs/lib/Components/ValidatorsPage.js index 2ec9f99..2ba74bd 100644 --- a/docs/lib/Components/ValidatorsPage.js +++ b/docs/lib/Components/ValidatorsPage.js @@ -1,246 +1,242 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ +/* eslint import/first: 0, import/newline-after-import: 0 */ import React from 'react'; import { PrismCode } from 'react-prism'; import Helmet from 'react-helmet'; -import ValidationCustomMessageExample from '../examples/ValidationCustomMessage.js'; -const ValidationCustomMessageExampleSource = require('!!raw!../examples/ValidationCustomMessage.js'); +import ValidationCustomMessageExample from '../examples/ValidationCustomMessage'; +const ValidationCustomMessageExampleSource = require('!!raw-loader!../examples/ValidationCustomMessage.js'); import ValidationDateExample from '../examples/ValidationDate'; -const ValidationDateExampleSource = require('!!raw!../examples/ValidationDate.js'); +const ValidationDateExampleSource = require('!!raw-loader!../examples/ValidationDate.js'); import ValidationDateRangeExample from '../examples/ValidationDateRange'; -const ValidationDateRangeExampleSource = require('!!raw!../examples/ValidationDateRange.js'); +const ValidationDateRangeExampleSource = require('!!raw-loader!../examples/ValidationDateRange.js'); import ValidationDateTimeExample from '../examples/ValidationDateTime'; -const ValidationDateTimeExampleSource = require('!!raw!../examples/ValidationDateTime.js'); +const ValidationDateTimeExampleSource = require('!!raw-loader!../examples/ValidationDateTime.js'); import ValidationEmailExample from '../examples/ValidationEmail'; -const ValidationEmailExampleSource = require('!!raw!../examples/ValidationEmail.js'); +const ValidationEmailExampleSource = require('!!raw-loader!../examples/ValidationEmail.js'); import ValidationMatchExample from '../examples/ValidationMatch'; -const ValidationMatchExampleSource = require('!!raw!../examples/ValidationMatch.js'); +const ValidationMatchExampleSource = require('!!raw-loader!../examples/ValidationMatch.js'); import ValidationMaxExample from '../examples/ValidationMax'; -const ValidationMaxExampleSource = require('!!raw!../examples/ValidationMax.js'); +const ValidationMaxExampleSource = require('!!raw-loader!../examples/ValidationMax.js'); import ValidationMaxLengthExample from '../examples/ValidationMaxLength'; -const ValidationMaxLengthExampleSource = require('!!raw!../examples/ValidationMaxLength.js'); +const ValidationMaxLengthExampleSource = require('!!raw-loader!../examples/ValidationMaxLength.js'); import ValidationMaxCheckedExample from '../examples/ValidationMaxChecked'; -const ValidationMaxCheckedExampleSource = require('!!raw!../examples/ValidationMaxChecked.js'); +const ValidationMaxCheckedExampleSource = require('!!raw-loader!../examples/ValidationMaxChecked.js'); import ValidationMinExample from '../examples/ValidationMin'; -const ValidationMinExampleSource = require('!!raw!../examples/ValidationMin.js'); +const ValidationMinExampleSource = require('!!raw-loader!../examples/ValidationMin.js'); import ValidationMinLengthExample from '../examples/ValidationMinLength'; -const ValidationMinLengthExampleSource = require('!!raw!../examples/ValidationMinLength.js'); +const ValidationMinLengthExampleSource = require('!!raw-loader!../examples/ValidationMinLength.js'); import ValidationMinCheckedExample from '../examples/ValidationMinChecked'; -const ValidationMinCheckedExampleSource = require('!!raw!../examples/ValidationMinChecked.js'); +const ValidationMinCheckedExampleSource = require('!!raw-loader!../examples/ValidationMinChecked.js'); import ValidationNpiExample from '../examples/ValidationNpi'; -const ValidationNpiExampleSource = require('!!raw!../examples/ValidationNpi.js'); +const ValidationNpiExampleSource = require('!!raw-loader!../examples/ValidationNpi.js'); import ValidationNumberExample from '../examples/ValidationNumber'; -const ValidationNumberExampleSource = require('!!raw!../examples/ValidationNumber.js'); +const ValidationNumberExampleSource = require('!!raw-loader!../examples/ValidationNumber.js'); import ValidationPatternExample from '../examples/ValidationPattern'; -const ValidationPatternExampleSource = require('!!raw!../examples/ValidationPattern.js'); +const ValidationPatternExampleSource = require('!!raw-loader!../examples/ValidationPattern.js'); import ValidationPhoneExample from '../examples/ValidationPhone'; -const ValidationPhoneExampleSource = require('!!raw!../examples/ValidationPhone.js'); +const ValidationPhoneExampleSource = require('!!raw-loader!../examples/ValidationPhone.js'); import ValidationRequiredExample from '../examples/ValidationRequired'; -const ValidationRequiredExampleSource = require('!!raw!../examples/ValidationRequired.js'); +const ValidationRequiredExampleSource = require('!!raw-loader!../examples/ValidationRequired.js'); import ValidationStepExample from '../examples/ValidationStep'; -const ValidationStepExampleSource = require('!!raw!../examples/ValidationStep.js'); +const ValidationStepExampleSource = require('!!raw-loader!../examples/ValidationStep.js'); import ValidationAsyncExample from '../examples/ValidationAsync'; -const ValidationAsyncExampleSource = require('!!raw!../examples/ValidationAsync.js'); - -export default class FormPage extends React.Component { - render() { - return ( -
- -

Validations

-
-

Custom error messages

-
- -
-
-          
-            {ValidationCustomMessageExampleSource}
-          
-        
- -

Date

-
- -
-
-          
-            {ValidationDateExampleSource}
-          
-        
- -

DateRange

-
- -
-
-          
-            {ValidationDateRangeExampleSource}
-          
-        
- -

DateTime

-
- -
-
-          
-            {ValidationDateTimeExampleSource}
-          
-        
- -

Email

-
- -
-
-          
-            {ValidationEmailExampleSource}
-          
-        
- -

Match

-
- -
-
-          
-            {ValidationMatchExampleSource}
-          
-        
- -

Max

-
- -
-
-          
-            {ValidationMaxExampleSource}
-          
-        
- -

MaxLength

-
- -
-
-          
-            {ValidationMaxLengthExampleSource}
-          
-        
- -

MaxChecked

-
- -
-
-          
-            {ValidationMaxCheckedExampleSource}
-          
-        
- -

Min

-
- -
-
-          
-            {ValidationMinExampleSource}
-          
-        
- -

MinLength

-
- -
-
-          
-            {ValidationMinLengthExampleSource}
-          
-        
- -

MinChecked

-
- -
-
-          
-            {ValidationMinCheckedExampleSource}
-          
-        
- -

Npi

-
- -
-
-          
-            {ValidationNpiExampleSource}
-          
-        
- -

Number

-
- -
-
-          
-            {ValidationNumberExampleSource}
-          
-        
- -

Pattern

-
- -
-
-          
-            {ValidationPatternExampleSource}
-          
-        
- -

Phone

-

Note: Validates against NANP

-
- -
-
-          
-            {ValidationPhoneExampleSource}
-          
-        
- -

Required

-
- -
-
-          
-            {ValidationRequiredExampleSource}
-          
-        
- -

Step

-

Note: Only works only with input type of numbers

-
- -
-
-          
-            {ValidationStepExampleSource}
-          
-        
- -

Custom / Async

-
- -
-
-          
-            {ValidationAsyncExampleSource}
-          
-        
-
- ); - } -} +const ValidationAsyncExampleSource = require('!!raw-loader!../examples/ValidationAsync.js'); + +export default () => ( +
+ +

Validations

+
+

Custom error messages

+
+ +
+
+      
+        {ValidationCustomMessageExampleSource}
+      
+    
+ +

Date

+
+ +
+
+      
+        {ValidationDateExampleSource}
+      
+    
+ +

DateRange

+
+ +
+
+      
+        {ValidationDateRangeExampleSource}
+      
+    
+ +

DateTime

+
+ +
+
+      
+        {ValidationDateTimeExampleSource}
+      
+    
+ +

Email

+
+ +
+
+      
+        {ValidationEmailExampleSource}
+      
+    
+ +

Match

+
+ +
+
+      
+        {ValidationMatchExampleSource}
+      
+    
+ +

Max

+
+ +
+
+      
+        {ValidationMaxExampleSource}
+      
+    
+ +

MaxLength

+
+ +
+
+      
+        {ValidationMaxLengthExampleSource}
+      
+    
+ +

MaxChecked

+
+ +
+
+      
+        {ValidationMaxCheckedExampleSource}
+      
+    
+ +

Min

+
+ +
+
+      
+        {ValidationMinExampleSource}
+      
+    
+ +

MinLength

+
+ +
+
+      
+        {ValidationMinLengthExampleSource}
+      
+    
+ +

MinChecked

+
+ +
+
+      
+        {ValidationMinCheckedExampleSource}
+      
+    
+ +

Npi

+
+ +
+
+      
+        {ValidationNpiExampleSource}
+      
+    
+ +

Number

+
+ +
+
+      
+        {ValidationNumberExampleSource}
+      
+    
+ +

Pattern

+
+ +
+
+      
+        {ValidationPatternExampleSource}
+      
+    
+ +

Phone

+

Note: Validates against NANP

+
+ +
+
+      
+        {ValidationPhoneExampleSource}
+      
+    
+ +

Required

+
+ +
+
+      
+        {ValidationRequiredExampleSource}
+      
+    
+ +

Step

+

Note: Only works only with input type of numbers

+
+ +
+
+      
+        {ValidationStepExampleSource}
+      
+    
+ +

Custom / Async

+
+ +
+
+      
+        {ValidationAsyncExampleSource}
+      
+    
+
+); diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js index ad2d7ad..7eac837 100644 --- a/docs/lib/Components/index.js +++ b/docs/lib/Components/index.js @@ -1,60 +1,56 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap'; -const ComponentLink = (props) => { - return ( - - - {props.item.name} - - - ); -}; +const ComponentLink = ({ item }) => ( + + + {item.name} + + +); +ComponentLink.propTypes = { + item: PropTypes.shape({ + to: PropTypes.string, + name: PropTypes.string, + }).isRequired, +}; -class Components extends React.Component { - constructor(props) { - super(props); +const navItems = [ + { + name: 'AvForm', + to: '/components/avform/', + }, + { + name: 'Validators', + to: '/components/validators/', + }, + { + name: 'Checkboxes', + to: '/components/checkboxes/', + }, +]; - this.state = { - navItems: [ - { - name: 'AvForm', - to: '/components/avform/', - }, - { - name: 'Validators', - to: '/components/validators/', - }, - { - name: 'Checkboxes', - to: '/components/checkboxes/', - }, - ], - }; - } - render() { - return ( - - - -
-
Components
- -
- - - {this.props.children} - -
-
- ); - } -} +const Components = ({ children }) => ( + + + +
+
Components
+ +
+ + + {children} + +
+
+); export default Components; diff --git a/docs/lib/Home/index.js b/docs/lib/Home/index.js index 19122fb..31c160d 100644 --- a/docs/lib/Home/index.js +++ b/docs/lib/Home/index.js @@ -3,57 +3,63 @@ import { PrismCode } from 'react-prism'; import { Jumbotron, Button, Container, Row, Col } from 'reactstrap'; import { Link } from 'react-router'; import Example from '../examples/import-basic'; +import Logo from '../UI/Logo'; -const importBasic = require('!!raw!../examples/import-basic.js'); +const importBasic = require('!!raw-loader!../examples/import-basic.js'); -export default () => { - return ( -
- - - - -

- -

-

Availity reactstrap Validation

-

- Easy to use form validation for reactstrap -

-

- - -

- -
-
-
+export default () => ( +
+ - - -

Installation

-
-

NPM

-

Install reactstrap and peer dependencies via NPM

-
-              npm install --save availity-reactstrap-validation react react-dom
-            
-

ES6 - import the components you need

-
- -
-
-              
-                {importBasic}
-              
-            
-

About the Project

-
-

This library contains helper components that extend the form capabilities provided by reactstrap. The library does not depend on jQuery or Bootstrap javascript, only reactstrap.

-

Use the form and input components provided by this library directly instead of the ones provided by reactstrap. You can use the components provided by reactstrap in conjunction with the components this library provides without an problem, but validation will not work for those particular components.

- -
+

+ +

+

Availity reactstrap Validation

+

+ Easy to use form validation for reactstrap +

+

+ + +

-
- ); -}; + + + + +

Installation

+
+

NPM

+

Install reactstrap and peer dependencies via NPM

+
+            
+              npm install --save availity-reactstrap-validation react react-dom
+            
+          
+

ES6 - import the components you need

+
+ +
+
+            
+              {importBasic}
+            
+          
+

About the Project

+
+

+ This library contains helper components that extend the form capabilities provided by reactstrap. + The library does not depend on jQuery or Bootstrap javascript, only reactstrap. +

+

+ Use the form and input components provided by this library directly instead of the ones provided by + reactstrap. You can use the components provided by reactstrap in conjunction with the components this + library provides without an problem, but validation will not work for those particular components. +

+ +
+
+
+); diff --git a/docs/lib/NotFound/index.js b/docs/lib/NotFound/index.js index 86dd213..cf72913 100644 --- a/docs/lib/NotFound/index.js +++ b/docs/lib/NotFound/index.js @@ -1,31 +1,27 @@ import React from 'react'; -import { Button, Container, Row, Col } from 'reactstrap'; +import { Jumbotron, Button, Container } from 'reactstrap'; import { Link } from 'react-router'; import Helmet from 'react-helmet'; +import Logo from '../UI/Logo'; -export default () => { - return ( -
- -
- - - -

- -

-

404 - Not Found

-

- Can't find what you're looking for? Open up an issue. -

-

- - -

- -
-
-
-
- ); -}; +export default () => ( +
+ + + +

+ +

+

404 - Not Found

+

+ Can't find what you're looking + for? Open up an issue. +

+

+ + +

+
+
+
+); diff --git a/docs/lib/UI/Footer.js b/docs/lib/UI/Footer.js index 4e59203..c6fab40 100644 --- a/docs/lib/UI/Footer.js +++ b/docs/lib/UI/Footer.js @@ -1,21 +1,27 @@ +/* eslint jsx-a11y/iframe-has-title: 0 */ import React from 'react'; -import { Container, Row, Col } from 'reactstrap'; +import { Container } from 'reactstrap'; -export default () => { - return ( -
- - - -

- © 2016 - present Availity - {' '} -