checkbox and radio unit test

packages/checkbox/src/checkbox.vue

@@ -79,8 +79,6 @@ export default {
     isChecked() {
       if ({}.toString.call(this.currentValue) === '[object Boolean]') {
         return this.currentValue;
-      } else if (Array.isArray(this.currentValue)) {
-        return this.currentValue.indexOf(this.name) > -1;
       }
     },
 
@@ -89,7 +87,7 @@ export default {
      */
     isDisabled() {
       return this.isGroup && this.parentGroup
-          ? this.parentGroup.disabled || this.disabled
+          ? this.parentGroup.disabled
           : this.disabled;
     }
   },

test/unit/components/checkbox.vue

@@ -0,0 +1,29 @@
+<template>
+  <zan-checkbox-group v-model="result">
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</template>
+
+<script>
+import Checkbox from 'packages/checkbox';
+import CheckboxGroup from 'packages/checkbox-group';
+
+export default {
+  components: {
+    'zan-checkbox': Checkbox,
+    'zan-checkbox-group': CheckboxGroup
+  },
+
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c',
+        'd'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>

test/unit/components/radio.vue

@@ -0,0 +1,24 @@
+<template>
+  <zan-radio-group v-model="radio">
+    <zan-radio name="1">单选框1</zan-radio>
+    <zan-radio name="2">单选框2</zan-radio>
+  </zan-radio-group>
+</template>
+  
+<script>
+import Radio from 'packages/radio';
+import RadioGroup from 'packages/radio-group';
+
+export default {
+  components: {
+    'zan-radio': Radio,
+    'zan-radio-group': RadioGroup
+  },
+
+  data() {
+    return {
+      radio: '1'
+    };
+  }
+};
+</script>

test/unit/specs/checkbox.spec.js

@@ -1,51 +1,131 @@
-// import Checkbox from 'packages/checkbox';
-// import CheckboxGroup from 'packages/checkbox-group';
-// import { mount } from 'avoriaz';
+import { mount } from 'avoriaz';
+import Checkbox from 'packages/checkbox';
+import CheckboxTestComponent from '../components/checkbox';
 
-// describe('Checkbox', () => {
-//   let wrapper;
-//   afterEach(() => {
-//     wrapper && wrapper.destroy();
-//   });
+describe('CheckboxGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
 
-//   it('create a checkbox', () => {
-//     wrapper = mount(Checkbox, {
-//       propsData: {}
-//     });
+  it('create a checkbox-group', () => {
+    wrapper = mount(CheckboxTestComponent);
 
-//     expect(wrapper.hasClass('zan-checkbox')).to.be.true;
-//   });
-// });
+    expect(wrapper.hasClass('zan-checkbox-group')).to.be.true;
 
-// describe('CheckboxGroup', () => {
-//   let wrapper;
-//   afterEach(() => {
-//     wrapper && wrapper.destroy();
-//   });
+    expect(wrapper.vNode.child.value.length).to.equal(2);
+    expect(wrapper.vNode.child.disabled).to.be.false;
+  });
 
-//   it('create a checkbox-group', () => {
-//     wrapper = mount(CheckboxGroup, {
-//       propsData: {}
-//     });
+  it('emit a change event', (done) => {
+    wrapper = mount(CheckboxTestComponent);
 
-//     expect(wrapper.hasClass('zan-checkbox-group')).to.be.true;
-//   });
+    expect(wrapper.vNode.child.value.length).to.equal(2);
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
-//   // it('emit a change event', () => {
-//   //   wrapper = mount(CheckboxGroup, {
-//   //     propsData: {
-//   //       value: false
-//   //     }
-//   //   });
+    wrapper.setData({
+      'result': ['a']
+    });
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vNode.child.value.length).to.equal(1);
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
 
-//   //   const eventStub = sinon.stub(wrapper.vm, '$emit');
+  it('click on checked checkbox', (done) => {
+    wrapper = mount(CheckboxTestComponent);
 
-//   //   wrapper.vm.value = true;
-//   //   wrapper.update();
-//   //   Vue.nextTick(() => {
-//   //     expect(eventStub.calledOnce).to.be.true;
-//   //     expect(eventStub.calledWith('change'));
-//   //     done();
-//   //   });
-//   // });
-// });
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const firstCheckboxLabel = wrapper.find('.zan-checkbox')[0].find('.zan-checkbox__label')[0];
+    firstCheckboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on unchecked checkbox', (done) => {
+    wrapper = mount(CheckboxTestComponent);
+
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const lastCheckboxLabel = wrapper.find('.zan-checkbox')[3].find('.zan-checkbox__label')[0];
+    lastCheckboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});
+
+describe('Checkbox', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a checkbox', () => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
+    expect(wrapper.instance().currentValue).to.be.false;
+    expect(wrapper.instance().isDisabled).to.be.false;
+    expect(wrapper.instance().isChecked).to.be.false;
+  });
+
+  it('click on a checkbox', (done) => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const checkboxLabel = wrapper.find('.zan-checkbox__label')[0];
+    checkboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on a disabled checkbox', () => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
+    expect(wrapper.hasClass('zan-checkbox--disabled')).to.be.true;
+    expect(wrapper.instance().currentValue).to.be.false;
+    expect(wrapper.instance().isDisabled).to.be.true;
+
+    const checkboxLabel = wrapper.find('.zan-checkbox__label')[0];
+    checkboxLabel.simulate('click');
+
+    expect(wrapper.instance().currentValue).to.be.false;
+  });
+});

test/unit/specs/radio.spec.js

@@ -0,0 +1,139 @@
+import { mount } from 'avoriaz';
+import Radio from 'packages/radio';
+import RadioTestComponent from '../components/radio';
+
+describe('RadioGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a radio-group', () => {
+    wrapper = mount(RadioTestComponent);
+
+    expect(wrapper.hasClass('zan-radio-group')).to.be.true;
+
+    expect(wrapper.vNode.child.value).to.equal('1');
+    expect(wrapper.vNode.child.disabled).to.be.false;
+  });
+
+  it('emit a change event', (done) => {
+    wrapper = mount(RadioTestComponent);
+
+    expect(wrapper.vNode.child.value).to.equal('1');
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    wrapper.setData({
+      'radio': '2'
+    });
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vNode.child.value).to.equal('2');
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('click on unchecked radio', (done) => {
+    wrapper = mount(RadioTestComponent);
+
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const uncheckedRadioLabel = wrapper.find('.zan-radio')[1].find('.zan-radio__label')[0];
+    uncheckedRadioLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});
+
+describe('Radio', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a radio', () => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    expect(wrapper.hasClass('zan-radio--disabled')).to.be.false;
+    expect(wrapper.instance().currentValue).to.equal('1');
+    expect(wrapper.instance().isDisabled).to.be.false;
+  });
+
+  it('click on a radio', (done) => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    wrapper.simulate('click');
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('click'));
+      done();
+    });
+  });
+
+  it('click on a radio label', (done) => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const checkboxLabel = wrapper.find('.zan-radio__label')[0];
+    checkboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on a disabled radio', () => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '2',
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    expect(wrapper.hasClass('zan-radio--disabled')).to.be.true;
+    expect(wrapper.instance().currentValue).to.equal('1');
+    expect(wrapper.instance().isDisabled).to.be.true;
+
+    const checkboxLabel = wrapper.find('.zan-radio__label')[0];
+    checkboxLabel.simulate('click');
+
+    expect(wrapper.instance().currentValue).to.equal('1');
+  });
+});