DatePicker: improve test (#659)

packages/date-picker/src/panel/date-range.vue

@@ -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;
         }
       },
 

packages/date-picker/src/panel/date.vue

@@ -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;
       }
     }
   };

packages/date-picker/src/picker.vue

@@ -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();

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

-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);
+    });
   });
 });