From 956f7f4cdf2374fce16dad497f1e06850560df8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sat, 26 Aug 2017 09:10:38 +0800 Subject: [PATCH] DatetimePicker: improve test coverage --- packages/datetime-picker/index.vue | 3 + test/unit/index.js | 3 + test/unit/specs/datetime-picker.spec.js | 122 +++++++++++++++++++++--- test/unit/utils.js | 2 +- 4 files changed, 116 insertions(+), 14 deletions(-) diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue index c89cc77ff..b0fc50386 100644 --- a/packages/datetime-picker/index.vue +++ b/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]); diff --git a/test/unit/index.js b/test/unit/index.js index 998623e9d..9f20bac30 100644 --- a/test/unit/index.js +++ b/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) { diff --git a/test/unit/specs/datetime-picker.spec.js b/test/unit/specs/datetime-picker.spec.js index 4b8e37329..edc003faf 100644 --- a/test/unit/specs/datetime-picker.spec.js +++ b/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); }); }); diff --git a/test/unit/utils.js b/test/unit/utils.js index 262356ed2..7e866d70d 100644 --- a/test/unit/utils.js +++ b/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');