DatetimePicker: improve test coverage

packages/datetime-picker/index.vue

@@ -270,6 +270,9 @@ export default {
       });
     },
     setColumnByValues(values) {
+      if (!this.$refs.picker) {
+        return;
+      }
       const setColumnValue = this.$refs.picker.setColumnValue;
       if (this.type === 'time') {
         setColumnValue(0, values[0]);

test/unit/index.js

@@ -1,5 +1,8 @@
 require('packages/vant-css/src/index.css');
 
+// hack for test touch event
+window.ontouchstart = {};
+
 // 读取配置文件，判断运行单个测试文件还是所有测试文件
 const testsReq = require.context('./specs', true, /\.spec$/);
 if (process.env.TEST_FILE) {

test/unit/specs/datetime-picker.spec.js

@@ -1,5 +1,20 @@
 import DatetimePicker from 'packages/datetime-picker';
 import { mount } from 'avoriaz';
+import { triggerTouch } from '../utils';
+
+const dragHelper = (el, position) => {
+  triggerTouch(el, 'touchstart', 0, 0);
+  triggerTouch(el, 'touchmove', 0, position / 4);
+  triggerTouch(el, 'touchmove', 0, position / 3);
+  triggerTouch(el, 'touchmove', 0, position / 2);
+  triggerTouch(el, 'touchmove', 0, position);
+  triggerTouch(el, 'touchend', 0, position);
+};
+
+const testTime = '10:00';
+const testDate = new Date('2017/03/10 10:00');
+const minDate = new Date('2000/01/01 00:00');
+const maxDate = new Date('3000/01/01 00:00');
 
 describe('DatetimePicker', () => {
   let wrapper;
@@ -7,36 +22,117 @@ describe('DatetimePicker', () => {
     wrapper && wrapper.destroy();
   });
 
-  it('create a datetime picker', () => {
-    const date = new Date();
+  it('create a time picker', () => {
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
-        type: 'datetime',
-        value: date
+        type: 'time',
+        value: testTime
       }
     });
-    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+    expect(wrapper.vm.innerValue).to.equal(testTime);
   });
 
   it('create a date picker', () => {
-    const date = new Date();
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
         type: 'date',
-        value: date
+        value: testDate
       }
     });
-    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+    expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
   });
 
-  it('create a time picker', () => {
-    const time = '10:00';
+  it('create a datetime picker', () => {
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
-        type: 'time',
-        value: time
+        type: 'datetime',
+        value: testDate
       }
     });
-    expect(wrapper.data().innerValue).to.equal(time);
+    expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
+  });
+
+  it('drag time picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'time',
+        value: testTime
+      }
+    });
+
+    const [hour, minute] = wrapper.find('.van-picker-column-wrapper');
+    dragHelper(hour, -50);
+    dragHelper(minute, -50);
+
+    setTimeout(() => {
+      expect(wrapper.vm.innerValue).to.equal('5:05');
+      done();
+    }, 10);
+  });
+
+  it('drag date picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'date',
+        value: testDate,
+        minDate,
+        maxDate
+      }
+    });
+
+    setTimeout(() => {
+      const [year, month, day] = wrapper.find('.van-picker-column-wrapper');
+      dragHelper(year, -50);
+      dragHelper(month, -50);
+      dragHelper(day, -50);
+      setTimeout(() => {
+        const newYear = wrapper.vm.innerValue.getFullYear();
+        const newMonth = wrapper.vm.innerValue.getMonth() + 1;
+        const newDay = wrapper.vm.innerValue.getDate();
+        expect(newYear).to.equal(2022);
+        expect(newMonth).to.equal(8);
+        expect(newDay).to.equal(15);
+        done();
+      }, 10);
+    }, 10);
+  });
+
+  it('drag datetime picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'datetime',
+        value: testDate,
+        minDate,
+        maxDate
+      }
+    });
+
+    setTimeout(() => {
+      const [year, month, day, hour, minute] = wrapper.find('.van-picker-column-wrapper');
+      dragHelper(year, -50);
+      dragHelper(month, -50);
+      dragHelper(day, -50);
+      dragHelper(hour, -50);
+      dragHelper(minute, -50);
+      setTimeout(() => {
+        const newYear = wrapper.vm.innerValue.getFullYear();
+        const newMonth = wrapper.vm.innerValue.getMonth() + 1;
+        const newDay = wrapper.vm.innerValue.getDate();
+        const newHour = wrapper.vm.innerValue.getHours();
+        const newMinute = wrapper.vm.innerValue.getMinutes();
+        expect(newYear).to.equal(2022);
+        expect(newMonth).to.equal(8);
+        expect(newDay).to.equal(15);
+        expect(newHour).to.equal(15);
+        expect(newMinute).to.equal(5);
+        done();
+      }, 10);
+    }, 10);
   });
 });

test/unit/utils.js

@@ -62,7 +62,7 @@ export function triggerTouch(wrapper, eventName, x, y) {
     radiusX: 2.5,
     radiusY: 2.5,
     rotationAngle: 10,
-    force: 0.5,
+    force: 0.5
   };
 
   const event = document.createEvent('CustomEvent');