Merge pull request #458 from QingWei-Li/test/time-picker

TimePicker: add unit test

.eslintignore

@@ -3,3 +3,4 @@ fecha.js
 release.sh
 node_modules
 lib
+coverage

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

@@ -142,7 +142,8 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 只读 | boolean | — | false |
 | placeholder | 占位内容 | string | — | — |
-| format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
+| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
+| value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |
 | align | 对齐方式 | string | left, center, right | left |
 | picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object | — | {} |
 

package.json

@@ -19,7 +19,7 @@
     "pub:all": "npm run dist:all && lerna publish",
     "build:utils": "babel src/utils --out-dir lib/utils",
     "clean": "rimraf lib && rimraf packages/*/lib",
-    "lint": "eslint src/**/*.js test/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet",
+    "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
     "test:watch": "karma start test/unit/karma.conf.js",
     "test": "karma start test/unit/karma.conf.js --single-run"
   },

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

@@ -1,6 +1,5 @@
 <template>
   <div class="el-time-spinner">
-    {{hours}}
     <div
       @mouseenter="emitSelectRange('hours')"
       @mousewheel="handleScroll('hour')"

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

@@ -0,0 +1,101 @@
+import { createTest } from '../util';
+import TimePicker from 'packages/time-picker';
+import Vue from 'vue';
+
+describe('TimePicker', () => {
+  it('create', () => {
+    const vm = createTest(TimePicker, {
+      placeholder: 'test',
+      readonly: true
+    });
+    expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
+    expect(vm.$el.querySelector('input').getAttribute('readonly')).to.ok;
+  });
+
+  it('format', () => {
+    const vm = createTest(TimePicker, {
+      format: 'HH-mm-ss',
+      value: new Date(2016, 9, 10, 18, 40)
+    });
+    expect(vm.$el.querySelector('input').value).to.equal('18-40-00');
+  });
+
+  it('default value', done => {
+    const vm = createTest(TimePicker, {
+      value: new Date(2016, 9, 10, 18, 40)
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    Vue.nextTick(_ => {
+      const times = vm.picker.$el.querySelectorAll('.active');
+
+      expect(times[0].textContent).to.equal('18');
+      expect(times[1].textContent).to.equal('40');
+      expect(times[2].textContent).to.equal('0');
+      done();
+    });
+  });
+
+  it('select time', done => {
+    const vm = createTest(TimePicker, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    Vue.nextTick(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursElm = list[0];
+      const minutesElm = list[1];
+      const secondsElm = list[2];
+      const hourElm = hoursElm.querySelectorAll('.el-time-spinner__item')[4];
+      const minuteElm = minutesElm.querySelectorAll('.el-time-spinner__item')[36];
+      const secondElm = secondsElm.querySelectorAll('.el-time-spinner__item')[20];
+
+      hourElm.click();
+      minuteElm.click();
+      secondElm.click();
+
+      Vue.nextTick(_ => {
+        const date = vm.picker.currentDate;
+
+        expect(hourElm.classList.contains('active')).to.true;
+        expect(minuteElm.classList.contains('active')).to.true;
+        expect(secondElm.classList.contains('active')).to.true;
+        expect(date.getHours()).to.equal(4);
+        expect(date.getMinutes()).to.equal(36);
+        expect(date.getSeconds()).to.equal(20);
+        done();
+      });
+    });
+  });
+
+  it('selectableRange', done => {
+    const vm = createTest(TimePicker, {
+      pickerOptions: {
+        selectableRange: '18:30:00 - 20:30:00'
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursElm = list[0];
+      const disabledHours = [].slice
+        .call(hoursElm.querySelectorAll('.disabled'))
+        .map(node => Number(node.textContent));
+
+      expect(disabledHours).to.not.include.members([18, 19, 20]);
+      done();
+    }, 500);
+  });
+});

test/unit/util.js

@@ -16,12 +16,16 @@ const createElm = function() {
 
 /**
  * 创建一个 Vue 的实例对象
- * @param  {Object}  Compo   组件配置
+ * @param  {Object|String}  Compo   组件配置，可直接传 template
  * @param  {Boolean=false} mounted 是否添加到 DOM 上
  * @return {Object} vm
  */
 exports.createVue = function(Compo, mounted = false) {
   const elm = createElm();
+
+  if (Object.prototype.toString.call(Compo) === '[object String]') {
+    Compo = { template: Compo };
+  }
   return new Vue(Compo).$mount(mounted === false ? null : elm);
 };
 
@@ -34,6 +38,10 @@ exports.createVue = function(Compo, mounted = false) {
  * @return {Object} vm
  */
 exports.createTest = function(Compo, propsData = {}, mounted = false) {
+  if (propsData === true || propsData === false) {
+    mounted = propsData;
+    propsData = {};
+  }
   const elm = createElm();
   const Ctor = Vue.extend(Compo);
   return new Ctor({ propsData }).$mount(mounted === false ? null : elm);