Merge pull request #479 from QingWei-Li/test/date-picker

DatePicker: add test

.babelrc

@@ -1,5 +1,4 @@
 {
   "presets": [["es2015", { "loose": true }]],
-  "plugins": ["transform-vue-jsx"],
-  "comments": false
+  "plugins": ["transform-vue-jsx"]
 }

.travis.yml

@@ -15,6 +15,6 @@ before_install:
   - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then wget https://github.com/Medium/phantomjs/releases/download/v$PHANTOMJS_VERSION/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -O $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2; fi"
   - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs; fi"
   - "phantomjs --version"
-script:
-  - "make dist"
-  - "npm t"
+
+after_success:
+  - cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls

examples/docs/zh-cn/date-picker.md

@@ -4,12 +4,12 @@
       return {
         pickerOptions0: {
           disabledDate(time) {
-            return time < Date.now();
+            return time.getTime() < Date.now() - 8.64e7;
           }
         },
         pickerOptions1: {
           disabledDate(time) {
-            return time < Date.now();
+            return time.getTime() < Date.now() - 8.64e7;
           },
           shortcuts: [{
             text: '今天',
@@ -133,7 +133,7 @@
       return {
         pickerOptions0: {
           disabledDate(time) {
-            return time < Date.now();
+            return time.getTime() < Date.now() - 8.64e7;
           }
         },
         pickerOptions1: {
@@ -276,7 +276,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 只读 | boolean | — | false |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/datetime/week | date |
+| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 |picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |

examples/docs/zh-cn/datetime-picker.md

@@ -232,10 +232,10 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 只读 | boolean | — | false |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/datetime/week | date |
+| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
-|picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

package.json

@@ -58,6 +58,7 @@
     "cooking": "^1.1.0",
     "cooking-lint": "^0.1.3",
     "cooking-vue2": "^0.1.4",
+    "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "css-loader": "^0.24.0",
     "extract-text-webpack-plugin": "^1.0.1",

packages/date-picker/src/basic/time-spinner.vue

@@ -46,7 +46,7 @@
   </div>
 </template>
 
-<script type="text/ecmascript-6">
+<script type="text/babel">
   import { getRangeHours } from '../util';
 
   export default {
@@ -115,13 +115,6 @@
     },
 
     methods: {
-      focusEditor(type) {
-        const editor = this.$refs[type + 'Editor'];
-        if (editor) {
-          editor.focus();
-        }
-      },
-
       handleClick(type, value, disabled) {
         if (value.disabled) {
           return;

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

@@ -353,6 +353,7 @@
         year: null,
         month: null,
         week: null,
+        showWeekNumber: false,
         timePickerVisible: false,
         width: 0
       };

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

@@ -166,10 +166,6 @@
       ajustScrollTop() {
         this.$refs.minSpinner.ajustScrollTop();
         this.$refs.maxSpinner.ajustScrollTop();
-      },
-
-      focusEditor(val) {
-        return this.$refs.minSpinner.focusEditor(val);
       }
     },
 

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

@@ -133,10 +133,6 @@
         this.$emit('pick', date, visible, first);
       },
 
-      focusEditor(val) {
-        return this.$refs.spinner.focusEditor(val);
-      },
-
       ajustScrollTop() {
         return this.$refs.spinner.ajustScrollTop();
       }

packages/date-picker/src/picker.vue

@@ -484,9 +484,6 @@ export default {
       }
 
       this.$nextTick(() => {
-        if (this.type.indexOf('time') !== -1) {
-          this.picker.focusEditor && this.picker.focusEditor('hours');
-        }
         this.picker.ajustScrollTop && this.picker.ajustScrollTop();
       });
     }

packages/date-picker/src/picker/date-picker.js

@@ -15,8 +15,10 @@ export default {
   name: 'ElDatePicker',
 
   props: {
-    type: String,
-    default: 'date'
+    type: {
+      type: String,
+      default: 'date'
+    }
   },
 
   created() {

packages/theme-default/package.json

@@ -4,7 +4,8 @@
   "description": "Element component default theme.",
   "main": "lib/index.css",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "scripts": {
     "build": "postcss -c postcss.conf.js"

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

@@ -0,0 +1,222 @@
+import { createTest, createVue } from '../util';
+import DatePicker from 'packages/date-picker';
+
+describe('DatePicker', () => {
+  it('create', () => {
+    const vm = createTest(DatePicker, {
+      readonly: true,
+      placeholder: '23333',
+      format: 'HH-mm-ss'
+    });
+    const input = vm.$el.querySelector('input');
+
+    expect(input.getAttribute('placeholder')).to.equal('23333');
+    expect(input.getAttribute('readonly')).to.equal('readonly');
+  });
+
+  it('select date', done => {
+    const vm = createVue({
+      template: `
+        <el-date-picker ref="compo" v-model="value"></el-date-picker>
+      `,
+      data() {
+        return { value: '' };
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+    const date = new Date();
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      const $el = vm.$refs.compo.picker.$el;
+      const spans = $el.querySelectorAll('.el-date-picker__header-label');
+      const arrowLeftElm = $el.querySelector('.el-date-picker__prev-btn.el-icon-arrow-left');
+      const arrowRightElm = $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right');
+
+      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
+      arrowLeftElm.click();
+      arrowLeftElm.click();
+      arrowLeftElm.click();
+      arrowLeftElm.click();
+      arrowLeftElm.click();
+
+      // click 3
+      arrowRightElm.click();
+      arrowRightElm.click();
+      arrowRightElm.click();
+      setTimeout(_ => {
+        expect(spans[0].textContent).to.include(date.getFullYear() - 1);
+        expect(spans[1].textContent).to.include(date.getMonth() - 1);
+        $el.querySelector('td.available').click();
+        vm.$nextTick(_ => {
+          expect(vm.value).to.exist;
+        });
+        done();
+      }, 150);
+    }, 150);
+  });
+
+  it('type:month', done => {
+    const vm = createTest(DatePicker, {
+      type: 'month'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      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);
+  });
+
+  it('type:year', done => {
+    const vm = createTest(DatePicker, {
+      type: 'year'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    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();
+      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);
+  });
+
+  it('type:datetime', done => {
+    const vm = createTest(DatePicker, {
+      type: 'datetime'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelector('.el-time-panel')).to.ok;
+      done();
+    }, 150);
+  });
+
+  it('type:week', done => {
+    const vm = createTest(DatePicker, {
+      type: 'week'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelector('.is-week-mode')).to.be.ok;
+      done();
+    }, 150);
+  });
+
+  it('type:daterange', done => {
+    const vm = createTest(DatePicker, {
+      type: 'daterange'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+
+      expect(Array.prototype.slice.call(panels)).to.length(2);
+
+      panels[0].querySelector('td.available').click();
+      setTimeout(_ => {
+        panels[1].querySelector('td.available').click();
+
+        const { minDate, maxDate } = vm.picker;
+        expect(minDate).to.exist;
+        expect(maxDate).to.exist;
+        expect(maxDate > minDate).to.true;
+        done();
+      }, 150);
+    }, 150);
+  });
+
+  it('type:datetimerange', done => {
+    const vm = createTest(DatePicker, {
+      type: 'datetimerange'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2);
+      done();
+    }, 150);
+  });
+
+  it('picker-options:shortcuts', done => {
+    const vm = createTest(DatePicker, {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }
+        ]
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelector('.el-picker-panel__shortcut').textContent).to.be.equal('今天');
+      expect(vm.picker.$el.querySelector('.el-picker-panel__sidebar')).to.be.ok;
+      done();
+    }, 150);
+  });
+
+  it('picker-options:disabledDate', done => {
+    const vm = createTest(DatePicker, {
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 8.64e7;
+        }
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelector('.disabled')).to.be.ok;
+      done();
+    }, 150);
+  });
+});

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

@@ -85,7 +85,6 @@ describe('TimePicker', () => {
 
     input.blur();
     input.focus();
-    input.blur();
 
     setTimeout(_ => {
       const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
@@ -94,8 +93,9 @@ describe('TimePicker', () => {
         .call(hoursElm.querySelectorAll('.disabled'))
         .map(node => Number(node.textContent));
 
+      hoursElm.querySelectorAll('.disabled')[0].click();
       expect(disabledHours).to.not.include.members([18, 19, 20]);
       done();
-    }, 500);
+    }, 150);
   });
 });