diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index 41b2371..3e066da 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -1,4 +1,4 @@ -import { createVue, destroyVM } from '../util'; +import { createVue, destroyVM, stringToDate } from '../util'; describe('DatePicker.vue', () => { let vm; @@ -25,4 +25,112 @@ describe('DatePicker.vue', () => { done(); }); }); + + it('should create a DatePicker component of type="datetimerange"', done => { + vm = createVue(` + + `); + const picker = vm.$children[0]; + expect(picker.$children.length).to.equal(2); + expect(Array.isArray(picker.currentValue)).to.equal(true); + done(); + }); + + it('should create a datetimerange component and pick 2 dates in the current month', done => { + vm = createVue(` + + `); + + const picker = vm.$children[0]; + picker.handleIconClick(); + vm.$nextTick(() => { + const displayField = vm.$el.querySelector('.ivu-input'); + const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell'); + const lastMonthClass = 'ivu-date-picker-cells-cell-prev-month'; + const firstDayInMonthIndex = [...clickableCells].findIndex(cell => !cell.classList.contains(lastMonthClass)); + + clickableCells[firstDayInMonthIndex].firstElementChild.click(); + vm.$nextTick(() => { + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click(); + vm.$nextTick(() => { + const dayOne = new Date(); + dayOne.setDate(1); + dayOne.setHours(0, 0, 0, 0); + const dayFive = new Date(dayOne.getTime()); + dayFive.setDate(5); + dayFive.setHours(0, 0, 0, 0); + + // check pickers internal value + const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects + expect(Math.abs(dayOne - startInternalValue)).to.equal(0); + expect(Math.abs(dayFive - endInternalValue)).to.equal(0); + + // check pickers display value + const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects + expect(Math.abs(dayOne - startDisplayValue)).to.equal(0); + expect(Math.abs(dayFive - endDisplayValue)).to.equal(0); + + done(); + }); + }); + }); + }); + + it('should have same behavior after a reset as before the reset', done => { + vm = createVue(` + + `); + + const picker = vm.$children[0]; + picker.handleIconClick(); + vm.$nextTick(() => { + const displayField = vm.$el.querySelector('.ivu-input'); + const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell'); + const lastMonthClass = 'ivu-date-picker-cells-cell-prev-month'; + const firstDayInMonthIndex = [...clickableCells].findIndex(cell => !cell.classList.contains(lastMonthClass)); + + // choose first date + clickableCells[firstDayInMonthIndex].firstElementChild.click(); + vm.$nextTick(() => { + // choose second date + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click(); + vm.$nextTick(() => { + // cache first values + const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects + const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects + + // clear picker + picker.handleClear(); + vm.$nextTick(() => { + // it should be closed by now + expect(picker.visible).to.equal(false); + // open picker again + picker.handleIconClick(); + + vm.$nextTick(() => { + expect(picker.visible).to.equal(true); + expect(JSON.stringify(picker.currentValue)).to.equal('[null,null]'); + expect(displayField.value).to.equal(''); + + clickableCells[firstDayInMonthIndex].firstElementChild.click(); + vm.$nextTick(() => { + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click(); + vm.$nextTick(() => { + // recheck internal values + expect(Math.abs(picker.currentValue[0] - startInternalValue)).to.equal(0); + expect(Math.abs(picker.currentValue[1] - endInternalValue)).to.equal(0); + // recheck display value + const [_startDisplayValue, _endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects + expect(Math.abs(_startDisplayValue - startDisplayValue)).to.equal(0); + expect(Math.abs(_endDisplayValue - endDisplayValue)).to.equal(0); + + done(); + }); + }); + }); + }); + }); + }); + }); + }); }); diff --git a/test/unit/util.js b/test/unit/util.js index 47cd331..42f0a9a 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -58,6 +58,16 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) { }; /** + * Transform Date string (yyyy-mm-dd hh:mm:ss) to Date object + * @param {String} + */ +exports.stringToDate = function(str) { + const parts = str.split(/[^\d]/).filter(Boolean); + parts[1] = parts[1] - 1; + return new Date(...parts); +}; + +/** * 触发一个事件 * mouseenter, mouseleave, mouseover, keyup, change, click 等 * @param {Element} elm -- libgit2 0.21.4