TimeSelect: add testcase of setting default value (#454)

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

@@ -127,7 +127,7 @@
   export default {
     data() {
       return {
-        value1: '',
+        value1: '14:30',
         value2: new Date(2016, 9, 10, 18, 40),
         value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',

package.json

@@ -33,6 +33,7 @@
     "vue",
     "components"
   ],
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/elemefe/element/issues"
   },

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

@@ -9,9 +9,7 @@
           v-for="item in items"
           :class="{ selected: value === item.value, disabled: item.disabled }"
           :disabled="item.disabled"
-          @click="handleClick(item)">
+          @click="handleClick(item)">{{ item.value }}</div>
-          {{ item.value }}
-        </div>
       </div>
     </div>
   </transition>

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

@@ -12,9 +12,11 @@ describe('TimeSelect', () => {
       },
       placeholder: 'test'
     }, true);
-    vm.$el.querySelector('input').blur();
+    const input = vm.$el.querySelector('input');
-    vm.$el.querySelector('input').focus();
+
-    vm.$el.querySelector('input').blur();
+    input.blur();
+    input.focus();
+    input.blur();
 
     Vue.nextTick(_ => {
       expect(vm.picker.start).to.equal('08:30');
@@ -25,7 +27,7 @@ describe('TimeSelect', () => {
     });
   });
 
-  it('click time', done => {
+  it('select time', done => {
     const vm = createVue({
       template: `
         <div>
@@ -40,15 +42,16 @@ describe('TimeSelect', () => {
         };
       }
     }, true);
+    const input = vm.$el.querySelector('input');
 
-    vm.$el.querySelector('input').blur();
+    input.blur();
-    vm.$el.querySelector('input').focus();
+    input.focus();
-    vm.$el.querySelector('input').blur();
+    input.blur();
 
     Vue.nextTick(_ => {
       const items = vm.$refs.compo.picker.$el.querySelectorAll('.time-select-item');
       const target = items[4];
-      const time = target.textContent.trim();
+      const time = target.textContent;
 
       target.click();
       Vue.nextTick(_ => {
@@ -57,4 +60,22 @@ describe('TimeSelect', () => {
       });
     });
   });
+
+  it('set default value', done => {
+    const vm = createTest(TimeSelect, {
+      value: '14:30'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      expect(input.value).to.equal('14:30');
+      expect(vm.picker.$el.querySelector('.selected')).to.be.ok;
+      expect(vm.picker.$el.querySelector('.selected').textContent).to.equal('14:30');
+      done();
+    }, 500);
+  });
 });