手机端样式细节调整，补充测试用例 (#3)

* unit test

* picker and dialog unit tes

* fix:quantity and loading

test/unit/specs/actionsheet.spec.js

@@ -75,6 +75,9 @@ describe('ActionSheet', () => {
             callback: () => {
               called = true;
             }
+          },
+          {
+            name: '微信'
           }
         ]
       }
@@ -83,6 +86,9 @@ describe('ActionSheet', () => {
     const actionItem = wrapper.find('.van-actionsheet__item')[0];
     actionItem.simulate('click');
     expect(called).to.be.true;
+
+    const secondActionItem = wrapper.find('.van-actionsheet__item')[1];
+    secondActionItem.simulate('click');
   });
 
   it('create actionsheet with cancel button', () => {

test/unit/specs/button.spec.js

@@ -1,5 +1,5 @@
 import Button from 'packages/button';
-import ZanLoading from 'packages/loading';
+import VanLoading from 'packages/loading';
 import { mount } from 'avoriaz';
 
 describe('Button', () => {
@@ -122,7 +122,7 @@ describe('Button', () => {
         loading: true
       }
     });
-    const loading = wrapper.find(ZanLoading)[0];
+    const loading = wrapper.find(VanLoading)[0];
 
     expect(wrapper.hasClass('van-button')).to.be.true;
     expect(loading.isVueComponent).to.be.true;
@@ -132,4 +132,19 @@ describe('Button', () => {
 
     expect(eventStub.called).to.be.false;
   });
+
+  it('create a primary loading button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        type: 'primary',
+        loading: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--primary')).to.be.true;
+
+    const loading = wrapper.find(VanLoading)[0];
+    expect(loading.isVueComponent).to.be.true;
+  });
 });

test/unit/specs/checkbox.spec.js

@@ -77,15 +77,36 @@ describe('Checkbox', () => {
   it('create a checkbox', () => {
     wrapper = mount(Checkbox, {
       propsData: {
-        value: false,
+        value: true,
         disabled: false
       }
     });
 
     expect(wrapper.hasClass('van-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;
+    expect(wrapper.vm.currentValue).to.be.true;
+    expect(wrapper.vm.isDisabled).to.be.false;
+    expect(wrapper.vm.isChecked).to.be.true;
+  });
+
+  it('create a not boolean value checkbox', (done) => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: 'test',
+        name: 'test'
+      }
+    });
+
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
+    expect(wrapper.vm.currentValue).to.equal('test');
+    expect(wrapper.vm.isDisabled).to.be.false;
+    expect(wrapper.vm.isChecked).to.be.true;
+
+    wrapper.vm.value = null;
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentValue).to.equal(null);
+      done();
+    });
   });
 
   it('click on a checkbox', (done) => {
@@ -120,12 +141,12 @@ describe('Checkbox', () => {
 
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
     expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
-    expect(wrapper.instance().currentValue).to.be.false;
-    expect(wrapper.instance().isDisabled).to.be.true;
+    expect(wrapper.vm.currentValue).to.be.false;
+    expect(wrapper.vm.isDisabled).to.be.true;
 
     const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
     checkboxLabel.simulate('click');
 
-    expect(wrapper.instance().currentValue).to.be.false;
+    expect(wrapper.vm.currentValue).to.be.false;
   });
 });

test/unit/specs/dialog.spec.js

@@ -0,0 +1,27 @@
+// import Dialog from 'packages/dialog';
+import DialogComponent from 'packages/dialog/src/dialog.vue';
+import { mount } from 'avoriaz';
+
+describe('Dialog', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a dialog component', () => {
+    let called = false;
+    wrapper = mount(DialogComponent);
+    wrapper.vm.callback = () => {
+      called = true;
+    };
+
+    expect(wrapper.hasClass('van-dialog-wrapper')).to.be.true;
+    expect(wrapper.data().confirmButtonText).to.equal('确认');
+
+    const confirmBtn = wrapper.find('.van-dialog__confirm')[0];
+    confirmBtn.simulate('click');
+
+    expect(wrapper.vm.value).to.be.false;
+    expect(called).to.be.true;
+  });
+});

test/unit/specs/pciker.spec.js

@@ -1,12 +1,113 @@
 import Picker from 'packages/picker';
+import PickerColumn from 'packages/picker/src/picker-column';
 import { mount } from 'avoriaz';
 
+const pickerColumns = [
+  {
+    values: ['vip', 'normal'],
+    className: 'column1'
+  },
+  {
+    values: ['1990', '1991', '1992', '1993', '1994', '1995'],
+    className: 'column2'
+  }
+];
+
 describe('Picker', () => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
 
+  it('create picker', () => {
+    wrapper = mount(Picker, {
+      propsData: {
+        columns: pickerColumns
+      }
+    });
+
+    expect(wrapper.hasClass('van-picker')).to.be.true;
+    expect(wrapper.contains('.van-picker__columns--2')).to.be.true;
+
+    expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
+    expect(wrapper.vm.getValues().length).to.equal(2);
+  });
+
+  it('set picker values', () => {
+    wrapper = mount(Picker, {
+      propsData: {
+        columns: pickerColumns
+      }
+    });
+
+    expect(wrapper.contains('.van-picker__columns--2')).to.be.true;
+    expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
+    expect(wrapper.vm.getColumnValues(1).length).to.equal(6);
+
+    expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
+    expect(wrapper.vm.getColumnValue(1)).to.equal('1990');
+
+    wrapper.vm.setColumnValue(0, 'normal');
+    expect(wrapper.vm.getColumnValue(0)).to.equal('normal');
+
+    wrapper.vm.setColumnValue(1, '1991');
+    expect(wrapper.vm.getColumnValue(1)).to.equal('1991');
+
+    wrapper.vm.setColumnValues(0, ['vip', 'normal', 'other']);
+    expect(wrapper.vm.getColumnValues(0).length).to.equal(3);
+
+    expect(wrapper.vm.getValues().length).to.equal(2);
+    wrapper.vm.setValues(['vip', '1992']);
+    expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
+    expect(wrapper.vm.getColumnValue(1)).to.equal('1992');
+  });
+
+  it('create a invalid columns picker', () => {
+    wrapper = mount(Picker, {
+      propsData: {
+        columns: undefined
+      }
+    });
+
+    expect(wrapper.hasClass('van-picker')).to.be.true;
+    expect(wrapper.vm.values.length).to.equal(0);
+  });
+
+  it('set invalid index columns', () => {
+    wrapper = mount(Picker, {
+      propsData: {
+        columns: pickerColumns
+      }
+    });
+
+    expect(wrapper.vm.getColumnValues(3)).to.equal(undefined);
+    wrapper.vm.setColumnValues(3, [1, 2]);
+    expect(wrapper.vm.getColumnValues(3)).to.equal(undefined);
+
+    expect(wrapper.vm.getColumnValue(3)).to.equal(undefined);
+    wrapper.vm.setColumnValue(3, 3);
+    expect(wrapper.vm.getColumnValue(3)).to.equal(undefined);
+  });
+
+  it('emit a change event when column change', (done) => {
+    wrapper = mount(Picker, {
+      propsData: {
+        columns: pickerColumns
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    const firstColumn = wrapper.find(PickerColumn)[0];
+    firstColumn.vm.currentValue = 'normal';
+
+    firstColumn.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
   it('create a empty picker and emit a cencel event', (done) => {
     wrapper = mount(Picker, {
       propsData: {
@@ -16,7 +117,7 @@ describe('Picker', () => {
 
     expect(wrapper.hasClass('van-picker')).to.be.true;
     expect(wrapper.contains('.van-picker__toolbar')).to.be.true;
-    expect(wrapper.computed().values().length).to.equal(0);
+    expect(wrapper.vm.values.length).to.equal(0);
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     const cancelBtn = wrapper.find('.van-picker__cancel')[0];
@@ -50,3 +151,49 @@ describe('Picker', () => {
     });
   });
 });
+
+describe('PickerColumn', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a picker-column', () => {
+    wrapper = mount(PickerColumn);
+
+    expect(wrapper.hasClass('van-picker-column')).to.be.true;
+    expect(wrapper.vm.values.length).to.equal(0);
+  });
+
+  it('change picker-column values', (done) => {
+    wrapper = mount(PickerColumn);
+
+    expect(wrapper.hasClass('van-picker-column')).to.be.true;
+    expect(wrapper.vm.values.length).to.equal(0);
+
+    wrapper.vm.values = [1, 2];
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.values.length).to.equal(2);
+      expect(wrapper.vm.currentValues.length).to.equal(2);
+      done();
+    });
+  });
+
+  it('create a picker with values', (done) => {
+    wrapper = mount(PickerColumn, {
+      propsData: {
+        values: [1, 2]
+      }
+    });
+
+    expect(wrapper.vm.values.length).to.equal(2);
+    wrapper.vm.currentValues = [2, 3];
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.values.length).to.equal(2);
+      expect(wrapper.vm.currentValue).to.equal(2);
+      done();
+    });
+  });
+});

test/unit/specs/popup.spec.js

@@ -46,4 +46,15 @@ describe('Popup', () => {
 
     expect(wrapper.data().currentValue).to.be.true;
   });
+
+  it('create a popup-fade transition popup', () => {
+    wrapper = mount(Popup, {
+      propsData: {
+        transition: 'popup-fade'
+      }
+    });
+
+    expect(wrapper.hasClass('van-popup')).to.be.true;
+    expect(wrapper.instance().currentTransition).to.equal('popup-fade');
+  });
 });

test/unit/specs/quantity.spec.js

@@ -88,9 +88,13 @@ describe('Quantity', () => {
     });
 
     expect(wrapper.hasClass('van-quantity')).to.be.true;
+    expect(wrapper.vm.currentValue).to.equal(30);
     const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    wrapper.vm.value = 30;
     wrapper.update();
     wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentValue).to.equal(30);
       expect(eventStub.calledWith('input'));
       done();
     });