github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

DatePicker: improve test (#659)

pull/671/head
cinwell.li 2016-10-26 22:56:51 +08:00 committed by FuryBean
parent 32d3ad53dd
commit 8783c3e95d
4 changed files with 502 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
packages/date-picker/src/panel/date-range.vue
View File

@ -24,7 +24,7 @@
<input
placeholder="开始日期"
class="el-date-range-picker__editor"
v-model.lazy="leftVisibleDate"
:value="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
</span>
@ -32,7 +32,7 @@
<input
placeholder="开始时间"
class="el-date-range-picker__editor"
v-model.lazy="leftVisibleTime"
:value="leftVisibleTime"
@focus="leftTimePickerVisible = !leftTimePickerVisible"
@change="handleTimeChange($event, 'min')"/>
<time-picker
@ -51,7 +51,7 @@
ref="leftInput"
placeholder="结束日期"
class="el-date-range-picker__editor"
v-model.lazy="rightVisibleDate"
:value="rightVisibleDate"
:readonly="!minDate"
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
@ -61,7 +61,7 @@
ref="rightInput"
placeholder="结束时间"
class="el-date-range-picker__editor"
v-model.lazy="rightVisibleTime"
:value="rightVisibleTime"
@focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
@ -177,7 +177,7 @@
},
rightVisibleDate() {
return formatDate(this.maxDate);
return formatDate(this.maxDate || this.minDate);
},
leftVisibleTime() {
@ -188,60 +188,6 @@
return formatDate(this.maxDate, 'HH:mm:ss');
},
leftHours: {
get() {
return this.date.getHours();
},
set(hours) {
this.date.setHours(hours);
}
},
leftMinutes: {
get() {
return this.date.getMinutes();
},
set(minutes) {
this.date.setMinutes(minutes);
}
},
leftSeconds: {
get() {
return this.date.getSeconds();
},
set(seconds) {
this.date.setSeconds(seconds);
}
},
rightHours: {
get() {
return this.rightDate.getHours();
},
set(hours) {
this.rightDate.setHours(hours);
}
},
rightMinutes: {
get() {
return this.rightDate.getMinutes();
},
set(minutes) {
this.rightDate.setMinutes(minutes);
}
},
rightSeconds: {
get() {
return this.rightDate.getSeconds();
},
set(seconds) {
this.rightDate.setSeconds(seconds);
}
},
rightDate() {
const newDate = new Date(this.date);
const month = newDate.getMonth();
@ -396,6 +342,10 @@
this.maxDate = new Date(target.getTime());
}
}
const l2r = type === 'min' ? 'left' : 'right';
this.$refs[l2r + 'timepicker'].value = target;
this[l2r + 'TimePickerVisible'] = false;
}
},

66
packages/date-picker/src/panel/date.vue
View File

@ -111,7 +111,7 @@
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.now') }}</a>
@click="changeToNow">{{ $t('datepicker.now') }}</a>
<button
type="button"
class="el-picker-panel__btn"
@ -127,6 +127,7 @@
export default {
watch: {
showTime(val) {
/* istanbul ignore if */
if (!val) return;
this.$nextTick(_ => {
const inputElm = this.$refs.input;
@ -156,6 +157,7 @@
selectionMode(newVal) {
if (newVal === 'month') {
/* istanbul ignore next */
if (this.currentView !== 'year' || this.currentView !== 'month') {
this.currentView = 'month';
}
@ -163,6 +165,7 @@
},
date(newVal) {
/* istanbul ignore next */
if (!this.year) {
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
@ -187,13 +190,14 @@
this.currentView = 'year';
},
handleLabelClick() {
if (this.currentView === 'date') {
this.showMonthPicker();
} else if (this.currentView === 'month') {
this.showYearPicker();
}
},
// XXX: 没用到
// handleLabelClick() {
// if (this.currentView === 'date') {
// this.showMonthPicker();
// } else if (this.currentView === 'month') {
// this.showYearPicker();
// }
// },
prevMonth() {
this.month--;
@ -301,7 +305,7 @@
this.resetDate();
},
changeToToday() {
changeToNow() {
this.date.setTime(+new Date());
this.$emit('pick', new Date(this.date.getTime()));
this.resetDate();
@ -416,50 +420,6 @@
return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation;
}
return this.year + ' ' + yearTranslation;
},
hours: {
get() {
return this.date.getHours();
},
set(hours) {
this.date.setHours(hours);
}
},
minutes: {
get() {
return this.date.getMinutes();
},
set(minutes) {
this.date.setMinutes(minutes);
}
},
seconds: {
get() {
return this.date.getSeconds();
},
set(seconds) {
this.date.setSeconds(seconds);
}
},
timeText() {
const hours = this.hours;
const minutes = this.minutes;
return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
},
label() {
const year = this.year;
const month = this.month + 1;
if (this.currentView === 'date') {
return year + ' / ' + month;
}
return year;
}
}
};

6
packages/date-picker/src/picker.vue
View File

@ -20,7 +20,7 @@
v-model.lazy="visualValue" />
<span
@click="togglePicker"
@click="pickerVisible = !pickerVisible"
class="el-date-editor__trigger el-icon"
:class="[triggerClass]"
v-if="haveTrigger">
@ -353,10 +353,6 @@ export default {
}
},
togglePicker() {
!this.pickerVisible ? this.showPicker() : this.hidePicker();
},
hidePicker() {
if (this.picker) {
this.picker.resetView && this.picker.resetView();

547
test/unit/specs/date-picker.spec.js
View File

@ -1,6 +1,8 @@
import { createTest, createVue } from '../util';
import { createTest, createVue, destroyVM, triggerEvent } from '../util';
import DatePicker from 'packages/date-picker';
const DELAY = 10;
describe('DatePicker', () => {
it('create', () => {
const vm = createTest(DatePicker, {
@ -38,14 +40,12 @@ describe('DatePicker', () => {
expect(spans[0].textContent).to.include(date.getFullYear());
expect(spans[1].textContent).to.include(date.getMonth() + 1);
$el.querySelector('.el-date-picker__prev-btn.el-icon-d-arrow-left').click();
// click 5
let count = 5;
let count = 20;
while (--count) {
arrowLeftElm.click();
}
// click 3
count = 3;
count = 18;
while (--count) {
arrowRightElm.click();
}
@ -57,8 +57,59 @@ describe('DatePicker', () => {
expect(vm.value).to.exist;
});
done();
}, 150);
}, 150);
}, DELAY);
}, DELAY);
});
describe('keydown', () => {
let vm, input;
let keyDown = function(el, keyCode) {
const evt = document.createEvent('Events');
evt.initEvent('keydown', true, true);
evt.keyCode = keyCode;
el.dispatchEvent(evt);
};
beforeEach(done => {
vm = createTest(DatePicker, true);
input = vm.$el.querySelector('input');
input.blur();
input.focus();
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('tab', () => {
keyDown(input, 9);
expect(vm.pickerVisible).to.false;
});
it('enter', () => {
input.value = '2000-10-1';
keyDown(input, 13);
expect(vm.pickerVisible).to.false;
expect(vm.picker.value.getFullYear()).to.equal(2000);
expect(vm.picker.value.getMonth()).to.equal(9);
expect(vm.picker.value.getDate()).to.equal(1);
});
it('left', () => {
input.value = '2000-10-1';
keyDown(input, 13);
input.focus();
keyDown(input, 37);
expect(input.selectionStart > 0).to.true;
});
it('right', () => {
input.value = '2000-10-1';
keyDown(input, 13);
input.focus();
keyDown(input, 39);
expect(input.selectionStart > 0).to.true;
});
});
it('type:month', done => {
@ -74,11 +125,9 @@ describe('DatePicker', () => {
expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.empty;
expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.be.equal('none');
vm.picker.$el.querySelector('.el-month-table a.cell').click();
setTimeout(_ => {
expect(vm.picker.$el.style.display).to.be.equal('none');
done();
}, 500);
}, 150);
expect(vm.pickerVisible).to.false;
done();
}, DELAY);
});
it('type:year', done => {
@ -93,45 +142,162 @@ describe('DatePicker', () => {
setTimeout(_ => {
expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.empty;
expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.equal('none');
vm.picker.$el.querySelector('.el-icon-d-arrow-left').click();
vm.picker.$el.querySelector('.el-icon-d-arrow-right').click();
const leftBtn = vm.picker.$el.querySelector('.el-icon-d-arrow-left');
const rightBtn = vm.picker.$el.querySelector('.el-icon-d-arrow-right');
let count = 20;
while (--count) {
leftBtn.click();
}
count = 18;
while (--count) {
rightBtn.click();
}
vm.picker.$el.querySelector('.el-year-table a.cell').click();
setTimeout(_ => {
expect(vm.picker.$el.style.display).to.be.equal('none');
expect(vm.picker.date).to.exist;
done();
}, 500);
}, 150);
expect(vm.pickerVisible).to.false;
done();
}, DELAY);
});
it('type:datetime', done => {
const vm = createTest(DatePicker, {
type: 'datetime'
}, true);
const input = vm.$el.querySelector('input');
describe('type:datetime', () => {
let vm;
beforeEach(done => {
vm = createTest(DatePicker, {
type: 'datetime'
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
input.blur();
input.focus();
setTimeout(_ => {
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('create', () => {
expect(vm.picker.$el.querySelector('.el-time-panel')).to.ok;
done();
}, 150);
});
it('click now button', done => {
const date = new Date(1999, 10, 10, 10, 10);
vm.picker.date = new Date(date);
vm.picker.$el.querySelector('.el-picker-panel__link-btn').click();
setTimeout(_ => {
expect(vm.picker.date > date).to.true;
done();
}, DELAY);
});
it('click timepicker', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
input.blur();
input.focus();
input.blur();
setTimeout(_ => {
expect(vm.picker.$el.querySelector('.el-time-panel')).to.have.deep.property('style.display').to.equal('');
done();
}, 400);
});
it('input timepicker', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
input.value = '20:30:33';
triggerEvent(input, 'change');
setTimeout(_ => {
expect(vm.picker.date.getHours()).to.equal(20);
expect(vm.picker.date.getMinutes()).to.equal(30);
expect(vm.picker.date.getSeconds()).to.equal(33);
done();
}, DELAY);
});
it('input date', done => {
const input = vm.picker.$el.querySelector('.el-date-picker__editor-wrap input');
input.value = '2017-2-2';
triggerEvent(input, 'change');
setTimeout(_ => {
expect(vm.picker.date.getFullYear()).to.equal(2017);
expect(vm.picker.date.getMonth()).to.equal(1);
expect(vm.picker.date.getDate()).to.equal(2);
done();
}, DELAY);
});
it('select time', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
input.blur();
input.focus();
input.blur();
setTimeout(_ => {
const button = vm.picker.$el.querySelector('.el-time-panel .confirm');
button.click();
setTimeout(_ => {
expect(input.value).to.exist;
done();
}, DELAY);
}, DELAY);
});
});
it('type:week', done => {
const vm = createTest(DatePicker, {
type: 'week'
}, true);
const input = vm.$el.querySelector('input');
describe('type:week', () => {
let vm;
input.blur();
input.focus();
beforeEach(done => {
vm = createTest(DatePicker, {
type: 'week'
}, true);
const input = vm.$el.querySelector('input');
setTimeout(_ => {
input.blur();
input.focus();
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('create', () => {
expect(vm.picker.$el.querySelector('.is-week-mode')).to.be.ok;
done();
}, 150);
});
it('click cell', done => {
vm.picker.$el.querySelector('.el-date-table__row .available').click();
setTimeout(_ => {
expect(vm.picker.week).to.exist;
done();
}, DELAY);
});
it('click year label', () => {
vm.picker.$el.querySelector('.el-date-picker__header-label').click();
expect(vm.picker.currentView).to.equal('year');
});
it('click month label', () => {
vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
expect(vm.picker.currentView).to.equal('month');
});
it('select month', done => {
vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
setTimeout(_ => {
vm.picker.$el.querySelector('.el-month-table .cell').click();
setTimeout(_ => {
expect(vm.picker.$el.querySelector('.el-date-table.is-week-mode').style.display).to.equal('');
done();
}, DELAY);
}, DELAY);
});
});
it('type:daterange', done => {
@ -157,32 +323,244 @@ describe('DatePicker', () => {
expect(maxDate).to.exist;
expect(maxDate > minDate).to.true;
done();
}, 150);
}, 150);
}, DELAY);
}, DELAY);
});
it('type:datetimerange', done => {
const vm = createTest(DatePicker, {
type: 'datetimerange'
}, true);
const input = vm.$el.querySelector('input');
describe('type:datetimerange', () => {
let vm;
beforeEach(done => {
vm = createTest(DatePicker, {
type: 'datetimerange',
value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
input.blur();
input.focus();
setTimeout(_ => {
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('create', () => {
expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2);
done();
}, 150);
});
it('click timepicker', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
input.blur();
input.focus();
input.blur();
setTimeout(_ => {
expect(vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel')).to.have.deep.property('style.display').to.equal('');
done();
}, 400);
});
it('click timepicker in right', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
input.blur();
input.focus();
input.blur();
setTimeout(_ => {
expect(vm.picker.$el.querySelectorAll('.el-date-range-picker__time-picker-wrap .el-time-panel')[1]).to.have.deep.property('style.display').to.equal('');
done();
}, 400);
});
it('input timepicker', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
input.value = '10:22:14';
triggerEvent(input, 'change');
setTimeout(_ => {
expect(vm.picker.minDate.getHours()).to.equal(10);
expect(vm.picker.minDate.getMinutes()).to.equal(22);
expect(vm.picker.minDate.getSeconds()).to.equal(14);
done();
}, DELAY);
});
it('input timepicker in right', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
input.value = '10:22:14';
triggerEvent(input, 'change');
setTimeout(_ => {
expect(vm.picker.maxDate.getHours()).to.equal(10);
expect(vm.picker.maxDate.getMinutes()).to.equal(22);
expect(vm.picker.maxDate.getSeconds()).to.equal(14);
done();
}, DELAY);
});
it('select daterange', done => {
const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
const leftCell = pickers[0].querySelector('td.available');
const rightCell = pickers[1].querySelector('td.available');
triggerEvent(leftCell, 'mousemove', true);
triggerEvent(leftCell, 'click', true);
setTimeout(_ => {
triggerEvent(rightCell, 'mousemove', true);
triggerEvent(rightCell, 'click', true);
setTimeout(_ => {
const { minDate, maxDate } = vm.picker;
expect(maxDate - minDate).to.equal(2678400000); // one month
done();
}, DELAY);
}, DELAY);
});
it('prev/next month button', done => {
const leftBtn = vm.picker.$el.querySelector('.is-left .el-icon-arrow-left');
const rightBtn = vm.picker.$el.querySelector('.is-right .el-icon-arrow-right');
const left = vm.picker.$el.querySelector('.is-left .el-date-range-picker__header');
const right = vm.picker.$el.querySelector('.is-right .el-date-range-picker__header');
const leftText = left.textContent.match(/\d+/g);
const rightText = right.textContent.match(/\d+/g);
let count = 20;
while (--count) {
leftBtn.click();
}
count = 18;
while (--count) {
rightBtn.click();
}
setTimeout(_ => {
const newLeft = left.textContent.match(/\d+/g);
const newRight = right.textContent.match(/\d+/g);
expect(leftText[1] - newLeft[1]).to.equal(2);
expect(leftText[0] - newLeft[0]).to.equal(0);
expect(rightText[1] - newRight[1]).to.equal(2);
expect(rightText[0] - newRight[0]).to.equal(0);
done();
}, DELAY);
});
it('prev/next year button', done => {
const leftBtn = vm.picker.$el.querySelector('.is-left .el-icon-d-arrow-left');
const rightBtn = vm.picker.$el.querySelector('.is-right .el-icon-d-arrow-right');
const left = vm.picker.$el.querySelector('.is-left .el-date-range-picker__header');
const right = vm.picker.$el.querySelector('.is-right .el-date-range-picker__header');
const leftText = left.textContent.match(/\d+/g);
const rightText = right.textContent.match(/\d+/g);
let count = 20;
while (--count) {
leftBtn.click();
}
count = 18;
while (--count) {
rightBtn.click();
}
setTimeout(_ => {
const newLeft = left.textContent.match(/\d+/g);
const newRight = right.textContent.match(/\d+/g);
expect(leftText[1] - newLeft[1]).to.equal(0);
expect(leftText[0] - newLeft[0]).to.equal(2);
expect(rightText[1] - newRight[1]).to.equal(0);
expect(rightText[0] - newRight[0]).to.equal(2);
done();
}, DELAY);
});
it('input date', done => {
const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');
const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
const leftCell = pickers[0].querySelector('td.available');
const rightCell = pickers[1].querySelector('td.available');
triggerEvent(leftCell, 'mousemove', true);
triggerEvent(leftCell, 'click', true);
setTimeout(_ => {
triggerEvent(rightCell, 'mousemove', true);
triggerEvent(rightCell, 'click', true);
setTimeout(_ => {
triggerEvent(input, 'input');
input.value = '1989-6-4';
triggerEvent(input, 'change');
setTimeout(_ => {
const minDate = vm.picker.minDate;
expect(minDate.getFullYear()).to.equal(1989);
expect(minDate.getMonth()).to.equal(5);
expect(minDate.getDate()).to.equal(4);
done();
}, DELAY);
}, DELAY);
}, DELAY);
});
it('input date when minDate > maxDate', done => {
const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');
const input2 = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[2];
const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
const leftCell = pickers[0].querySelector('td.available');
const rightCell = pickers[1].querySelector('td.available');
triggerEvent(leftCell, 'mousemove', true);
triggerEvent(leftCell, 'click', true);
setTimeout(_ => {
triggerEvent(rightCell, 'mousemove', true);
triggerEvent(rightCell, 'click', true);
setTimeout(_ => {
triggerEvent(input2, 'input');
input2.value = '1988-6-4';
triggerEvent(input2, 'change');
setTimeout(_ => {
triggerEvent(input, 'input');
input.value = '1989-6-4';
triggerEvent(input, 'change');
setTimeout(_ => {
expect(vm.picker.maxDate > vm.picker.minDate).to.true;
done();
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
});
it('select time', done => {
const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
input.blur();
input.focus();
input.blur();
setTimeout(_ => {
const button = vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel .confirm');
button.click();
setTimeout(_ => {
expect(input.value).to.exist;
done();
}, DELAY);
}, DELAY);
});
});
it('picker-options:shortcuts', done => {
let test;
const vm = createTest(DatePicker, {
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
test = true;
picker.$emit('pick', new Date());
}
}
@ -195,28 +573,61 @@ describe('DatePicker', () => {
input.focus();
setTimeout(_ => {
expect(vm.picker.$el.querySelector('.el-picker-panel__shortcut').textContent).to.be.equal('今天');
const shortcut = vm.picker.$el.querySelector('.el-picker-panel__shortcut');
expect(shortcut.textContent).to.be.equal('今天');
expect(vm.picker.$el.querySelector('.el-picker-panel__sidebar')).to.be.ok;
done();
}, 150);
shortcut.click();
setTimeout(_ => {
expect(test).to.true;
done();
}, DELAY);
}, DELAY);
});
it('picker-options:disabledDate', done => {
const vm = createTest(DatePicker, {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
describe('picker-options:disabledDate', () => {
let vm;
beforeEach(done => {
vm = createTest(DatePicker, {
value: new Date(),
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}, true);
const input = vm.$el.querySelector('input');
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
input.blur();
input.focus();
setTimeout(_ => {
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('create', () => {
expect(vm.picker.$el.querySelector('.disabled')).to.be.ok;
done();
}, 150);
});
it('set disabled value', done => {
const date = new Date(1999, 10, 10, 10, 10, 10);
vm.picker.value = date;
setTimeout(_ => {
expect(vm.picker.date > date).to.true;
done();
}, DELAY);
});
it('set value', done => {
const date = new Date(3000, 10, 10, 10, 10, 10);
vm.picker.value = date;
setTimeout(_ => {
expect(vm.picker.date === date).to.true;
done();
}, DELAY);
});
});
});