From cd049aa2a10820ae319f30463b01f67a8ea4ef9a Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 17 Apr 2017 14:12:05 +0800 Subject: [PATCH] checkbox and radio unit test --- packages/checkbox/src/checkbox.vue | 4 +- test/unit/components/checkbox.vue | 29 +++++ test/unit/components/radio.vue | 24 +++++ test/unit/specs/checkbox.spec.js | 164 +++++++++++++++++++++-------- test/unit/specs/radio.spec.js | 139 ++++++++++++++++++++++++ 5 files changed, 315 insertions(+), 45 deletions(-) create mode 100644 test/unit/components/checkbox.vue create mode 100644 test/unit/components/radio.vue create mode 100644 test/unit/specs/radio.spec.js diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue index 736c5b72c..7f1fc385c 100644 --- a/packages/checkbox/src/checkbox.vue +++ b/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; } }, diff --git a/test/unit/components/checkbox.vue b/test/unit/components/checkbox.vue new file mode 100644 index 000000000..f43904b6a --- /dev/null +++ b/test/unit/components/checkbox.vue @@ -0,0 +1,29 @@ + + + diff --git a/test/unit/components/radio.vue b/test/unit/components/radio.vue new file mode 100644 index 000000000..780ac52fa --- /dev/null +++ b/test/unit/components/radio.vue @@ -0,0 +1,24 @@ + + + diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js index 7b0d4646e..455b0935d 100644 --- a/test/unit/specs/checkbox.spec.js +++ b/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; + }); +}); diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js new file mode 100644 index 000000000..0e926c2a0 --- /dev/null +++ b/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'); + }); +});