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

* unit test

* picker and dialog unit tes

* fix:quantity and loading

docs/examples-dist/quantity.vue

@@ -7,7 +7,7 @@
 
               </example-block><example-block title="高级用法">
                 <van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
-<p class="curr-quantity">当前值：{{ quantity2 }}</p>
+<p class="curr-quantity">当前值：{{ quantity2 || 9 }}</p>
 
               </example-block></section></template>
 <style>

docs/examples-docs/quantity.md

@@ -83,7 +83,7 @@ export default {
 :::demo 高级用法
 ```html
 <van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
-<p class="curr-quantity">当前值：{{ quantity2 }}</p>
+<p class="curr-quantity">当前值：{{ quantity2 || 9 }}</p>
 ```
 :::
 

docs/src/ExamplesApp.vue

@@ -83,6 +83,10 @@ export default {
     height: 100%;
   }
 
+  body {
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  }
+
   .examples-container {
     height: 100%;
     overflow: auto;
@@ -117,6 +121,7 @@ export default {
 
   .demo-sub-title {
     font-size: 14px;
+    font-weight: normal;
     color: #999;
     padding: 30px 15px 10px;
   }

docs/src/components/demo-list.vue

@@ -44,6 +44,7 @@ export default {
     .zanui-desc {
       text-align: center;
       font-weight: normal;
+      user-select: none;
     }
 
     .zanui-title {

packages/checkbox/src/checkbox.vue

@@ -56,12 +56,14 @@ export default {
         if (this.isGroup && this.parentGroup) {
           const parentValue = this.parentGroup.value.slice();
           if (val) {
+            /* istanbul ignore else */
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
               this.parentGroup.$emit('input', parentValue);
             }
           } else {
             const index = parentValue.indexOf(this.name);
+            /* istanbul ignore else */
             if (index !== -1) {
               parentValue.splice(index, 1);
               this.parentGroup.$emit('input', parentValue);
@@ -77,8 +79,11 @@ export default {
      * `checkbox`是否被选中
      */
     isChecked() {
-      if ({}.toString.call(this.currentValue) === '[object Boolean]') {
+      const currentValue = this.currentValue;
-        return this.currentValue;
+      if ({}.toString.call(currentValue) === '[object Boolean]') {
+        return currentValue;
+      } else if (currentValue !== null && currentValue !== undefined) {
+        return currentValue === this.name;
       }
     },
 

packages/picker/src/picker.vue

@@ -13,7 +13,7 @@
         :values="item.values"
         :class-name="item.className"
         :itemHeight="itemHeight"
-        :visible-item-count="visibleItemCount"
+        :visible-item-count="visibileColumnCount"
         :value-key="valueKey"
         @columnChange="columnValueChange(index)">
       </picker-column>

packages/quantity/src/quantity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-quantity">
+  <div class="van-quantity" :class="{ 'van-quantity--disabled': disabled }">
     <button
       @click="handleChange('minus')"
       class="van-quantity__stepper van-quantity__minus"

packages/vant-css/src/quantity.css

@@ -4,6 +4,14 @@
   @b quantity {
     font-size: 0;
 
+    @m disabled {
+      .van-quantity__input,
+      .van-quantity__minus,
+      .van-quantity__plus {
+        border-color: #e8e8e8;
+      }
+    }
+
     @e stepper {
       width: 40px;
       height: 30px;

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.vm.currentValue).to.be.true;
-    expect(wrapper.instance().isDisabled).to.be.false;
+    expect(wrapper.vm.isDisabled).to.be.false;
-    expect(wrapper.instance().isChecked).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.vm.currentValue).to.be.false;
-    expect(wrapper.instance().isDisabled).to.be.true;
+    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();
     });