feat(AvCheckboxGroup): add support for checkbox groups

__test__/AvCheckbox.spec.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AvCheckbox } from 'availity-reactstrap-validation';
+import { Input } from 'reactstrap';
+
+let options;
+let props;
+let inputState;
+let component;
+
+describe('AvCheckbox', () => {
+  let touched;
+  let dirty;
+  let bad;
+  let error;
+
+  beforeEach(() => {
+    touched = false;
+    dirty = false;
+    bad = false;
+    error = false;
+    options = {
+      context: {
+        Group: {
+          getProps: () => ({
+            name: 'test',
+          }),
+        },
+        FormCtrl: {
+          inputs: {},
+          getDefaultValue: ()=> {},
+          getInputState: ()=> ({}),
+          hasError: () => error,
+          isDirty: () => dirty,
+          isTouched: () => touched,
+          isBad: () => bad,
+          isDisabled: () => false,
+          isReadOnly: () => false,
+          setDirty: ()=> {},
+          setTouched: ()=> {},
+          setBad: ()=> {},
+          register: ()=> {},
+          unregister: ()=> {},
+          validate: ()=> {},
+          getValidationEvent: ()=> {},
+          validation: {},
+          parent: null,
+        },
+      },
+    };
+  });
+
+  it('should render a reactstrap Input', () => {
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.type()).to.not.be.undefined;
+  });
+
+  it('should have "is-untouched" class when untouched', () => {
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('is-untouched')).to.be.true;
+    expect(wrapper.find(Input).hasClass('is-touched')).to.be.false;
+  });
+
+  it('should have "is-pristine" class when not dirty', () => {
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('is-pristine')).to.be.true;
+    expect(wrapper.find(Input).hasClass('is-dirty')).to.be.false;
+  });
+
+  it('should have "av-valid" not "is-invalid" class when valid', () => {
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('av-valid')).to.be.true;
+    expect(wrapper.find(Input).hasClass('is-invalid')).to.be.false;
+  });
+
+  it('should have "is-touched" class when touched', () => {
+    touched = true;
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('is-untouched')).to.be.false;
+    expect(wrapper.find(Input).hasClass('is-touched')).to.be.true;
+  });
+
+  it('should have "is-pristine" class when not dirty', () => {
+    dirty = true;
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('is-pristine')).to.be.false;
+    expect(wrapper.find(Input).hasClass('is-dirty')).to.be.true;
+  });
+
+  it('should have "is-invalid" not "av-valid" class when invalid and touched', () => {
+    error = true;
+    touched = true;
+    const wrapper = shallow(<AvCheckbox name="yo" />, options);
+
+    expect(wrapper.find(Input).hasClass('av-valid')).to.be.false;
+    expect(wrapper.find(Input).hasClass('is-invalid')).to.be.true;
+  });
+
+  it('should toString the value to add it to the DOM via Input', () => {
+    const wrapper = shallow(<AvCheckbox name="yo" value="yes" />, options);
+    expect(wrapper.find(Input).prop('value')).to.eql('yes');
+  });
+
+  describe('on change handler', () => {
+    beforeEach(() => {
+      touched = false;
+      dirty = false;
+      bad = false;
+      error = false;
+      inputState = 'danger';
+      props = {
+        name: 'fieldName',
+        value: 'testValue',
+      };
+      options = {
+        context: {
+          Group: {
+            getProps: () => ({
+              name: 'test',
+            }),
+            update: sinon.spy(),
+          },
+          FormCtrl: {
+            inputs: {},
+            getDefaultValue: sinon.spy(),
+            getInputState: sinon.stub().returns(inputState),
+            hasError: () => error,
+            isDirty: () => dirty,
+            isTouched: () => touched,
+            isBad: () => bad,
+            setDirty: sinon.spy(),
+            setTouched: sinon.spy(),
+            setBad: sinon.spy(),
+            register: sinon.spy(),
+            unregister: sinon.spy(),
+            validate: sinon.spy(),
+            getValidationEvent: () => 'formCtrlValidationEvent',
+            validation: {},
+            parent: null,
+          },
+        },
+      };
+
+      component = new AvCheckbox(props);
+      component.context = options.context;
+    });
+
+    it('should update group value on change', () => {
+      const event = {};
+      component.onChangeHandler(event);
+      expect(options.context.Group.update).to.have.been.calledWith(event, props.value);
+    });
+
+    it('should run props on change if it\'s there', () => {
+      props.onChange = sinon.spy();
+      component.onChangeHandler();
+      expect(props.onChange).to.have.been.called;
+    });
+  });
+
+});

__test__/AvCheckboxGroup.spec.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AvCheckboxGroup, AvFeedback } from 'availity-reactstrap-validation';
+
+let options;
+
+describe('AvCheckboxGroup', () => {
+  let touched;
+  let dirty;
+  let bad;
+  let error;
+
+  beforeEach(() => {
+    touched = false;
+    dirty = false;
+    bad = false;
+    error = false;
+    options = {
+      context: {
+        FormCtrl: {
+          inputs: {},
+          getDefaultValue: ()=> {},
+          getInputState: ()=> ({}),
+          hasError: () => error,
+          isDirty: () => dirty,
+          isTouched: () => touched,
+          isBad: () => bad,
+          isDisabled: () => false,
+          isReadOnly: () => false,
+          setDirty: sinon.spy(),
+          setTouched: sinon.spy(),
+          setBad: sinon.spy(),
+          register: sinon.spy(),
+          unregister: sinon.spy(),
+          validate: sinon.spy(),
+          getValidationEvent: ()=> {},
+          validation: {},
+          parent: null,
+        },
+      },
+    };
+  });
+
+  it('should render a reactstrap Input', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+
+    expect(wrapper.type()).to.not.eql(undefined);
+  });
+
+  it('should register a validation', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" required />, options);
+    const instance = wrapper.instance();
+    expect(instance.validations.required.value).to.be.true;
+  });
+
+  it('should register then remove a disabled validation', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" required />, options);
+    const instance = wrapper.instance();
+    expect(instance.validations.required.value).to.be.true;
+    wrapper.setProps({required: false});
+    expect(instance.validations.required).to.be.undefined;
+  });
+
+  it('should return the set value', ()=> {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    const component = wrapper.instance();
+    component.value = 'boop';
+    expect(component.getValue()).to.equal('boop');
+  });
+
+  it('should unregister when unmounted', ()=> {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    wrapper.unmount();
+    expect(options.context.FormCtrl.unregister).to.have.been.called;
+  });
+
+  it('should give default value from value prop', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" value="momo;jojo;bobo" />, options);
+    const component = wrapper.instance();
+    expect(component.value).to.eql('momo;jojo;bobo');
+  });
+
+  it('should give default value from defaultValue prop when there is no value prop', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" defaultValue="momo" />, options);
+    const component = wrapper.instance();
+    expect(component.value).to.eql('momo');
+  });
+
+  it('should update the value when the value prop changes', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" defaultValue="momo" />, options);
+    const component = wrapper.instance();
+    expect(component.getValue()).to.equal('momo');
+    wrapper.setProps({value: 'yoyo'});
+    expect(component.getValue()).to.equal('yoyo');
+  });
+
+  it('should update the validations when the props change', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" defaultValue="momo" />, options);
+    const component = wrapper.instance();
+    const spy = sinon.spy(component, 'updateValidations');
+    wrapper.setProps({required: true});
+    expect(spy).to.have.been.called;
+  });
+
+  it('should not update the validations when the props did not change', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" defaultValue="momo" />, options);
+    const component = wrapper.instance();
+    const spy = sinon.spy(component, 'updateValidations');
+    wrapper.setProps({defaultValue: 'momo'});
+    expect(spy).to.not.have.been.called;
+  });
+
+  it('should give default value from context', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    const component = wrapper.instance();
+    component.context.FormCtrl.getDefaultValue = () => {
+      return 'jiri';
+    };
+    expect(component.getDefaultValue()).to.eql({key: 'defaultValue', value: 'jiri'});
+  });
+
+  it('should give default fallback when no one set up their stuff', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    const component = wrapper.instance();
+    expect(component.getDefaultValue()).to.eql({key: 'defaultValue', value: []});
+  });
+
+  it('should reset properly', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="test" defaultValue="momo" />, options);
+    const component = wrapper.instance();
+    component.setState = sinon.spy();
+    component.reset();
+    expect(component.value).to.equal('momo');
+    expect(component.setState).to.have.been.calledWith({value: 'momo'});
+    expect(options.context.FormCtrl.setDirty).to.have.been.calledWith('test', false);
+    expect(options.context.FormCtrl.setTouched).to.have.been.calledWith('test', false);
+    expect(options.context.FormCtrl.setBad).to.have.been.calledWith('test', false);
+    expect(options.context.FormCtrl.validate).to.have.been.calledWith('test');
+  });
+
+  it('should reset properly and call props reset', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(<AvCheckboxGroup defaultValue="momo" name="test" onReset={spy} />, options);
+    const component = wrapper.instance();
+    component.reset();
+    expect(spy).to.have.been.calledWith('momo');
+  });
+
+  it('should disconnect child context from form registration and validation', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    const component = wrapper.instance();
+    options.context.FormCtrl.register.reset();
+    options.context.FormCtrl.validate.reset();
+    component.getChildContext().FormCtrl.register('charmander');
+    component.getChildContext().FormCtrl.validate('squirtle');
+    expect(options.context.FormCtrl.register).to.not.have.been.called;
+    expect(options.context.FormCtrl.validate).to.not.have.been.called;
+  });
+
+  it('should update the group via child context', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    const component = wrapper.instance();
+    component.setState = sinon.spy();
+    component.getChildContext().Group.update({ target: { checked: true } }, 'momo');
+    expect(component.value).to.deep.equal(['momo']);
+    expect(component.setState).to.have.been.calledWith({value: ['momo']});
+    expect(options.context.FormCtrl.validate).to.have.been.called;
+  });
+
+  it('should trigger the change callback when the value is updated', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(<AvCheckboxGroup name="yo" onChange={spy} />, options);
+    const component = wrapper.instance();
+    const event = {};
+    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?!'};
+    };
+    const wrapper = shallow(<AvCheckboxGroup name="yo" />, options);
+    expect(wrapper.find(AvFeedback).prop('children')).to.equal('WHAT ARE YOU DOING?!');
+  });
+
+  it('should show a legend if we defined a label', () => {
+    const wrapper = shallow(<AvCheckboxGroup name="yo" label="test" />, options);
+    expect(wrapper.contains(<legend>test</legend>)).to.be.true;
+  });
+});

__test__/AvValidator.max.spec.js

@@ -7,6 +7,11 @@ describe('Max Validation', () => {
     expect(fn('')).to.be.true;
   });
 
+  it('should accept input array as an alias for maxChecked', () => {
+    expect(fn(undefined, undefined, {value: 1}, {value: ['a', 'b']})).to.be.false;
+    expect(fn(undefined, undefined, {value: 2}, {value: ['a']})).to.be.true;
+  });
+
   it('should return true if the value is less than the constraint', () => {
     expect(fn(1, undefined, {value: 5})).to.be.true;
   });