From 7bc214ce2f4945c97b502a2ca9cb8de588a47065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Fri, 21 Oct 2016 14:56:14 +0800 Subject: [PATCH] Slider: improve test (#554) --- packages/slider/src/main.vue | 2 +- test/unit/specs/slider.spec.js | 36 +++++++++++++++++++++++++--------- test/unit/util.js | 7 +++++-- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue index d5569af23..4deb36a22 100644 --- a/packages/slider/src/main.vue +++ b/packages/slider/src/main.vue @@ -4,7 +4,7 @@ v-model="inputValue" v-if="showInput" class="el-slider__input" - @keyup.native="onInputChange()" + @keyup.native="onInputChange" ref="input" :step="step" :min="min" diff --git a/test/unit/specs/slider.spec.js b/test/unit/specs/slider.spec.js index 2968044bb..80c04c7a2 100644 --- a/test/unit/specs/slider.spec.js +++ b/test/unit/specs/slider.spec.js @@ -1,6 +1,5 @@ -import { createTest, createVue } from '../util'; +import { createTest, createVue, triggerEvent } from '../util'; import Slider from 'packages/slider'; -import Vue from 'vue'; describe('Slider', () => { it('create', () => { @@ -26,10 +25,10 @@ describe('Slider', () => { }, true); setTimeout(() => { vm.value = 40; - Vue.nextTick(() => { + vm.$nextTick(() => { expect(vm.value).to.equal(50); vm.value = 120; - Vue.nextTick(() => { + vm.$nextTick(() => { expect(vm.value).to.equal(100); done(); }); @@ -38,12 +37,30 @@ describe('Slider', () => { }); it('show tooltip', () => { - const vm = createTest(Slider); + const vm = createVue({ + template: ` +
+ + +
+ `, + + data() { + return { + value: 0 + }; + } + }, true); + const slider = vm.$children[0]; const popup = vm.$el.querySelector('.el-slider__pop'); - vm.onDragStart({ clientX: 0 }); - expect(getComputedStyle(popup).display).to.not.equal('none'); - vm.onDragEnd(); - expect(popup.style.display).to.equal('none'); + slider.onDragStart({ clientX: 0 }); + vm.$nextTick(() => { + expect(popup.style.display).to.not.equal('none'); + slider.onDragEnd(); + setTimeout(() => { + expect(popup.style.display).to.equal('none'); + }, 350); + }); }); it('drag', done => { @@ -109,6 +126,7 @@ describe('Slider', () => { } }, true); setTimeout(() => { + triggerEvent(vm.$el.querySelector('.el-input-number'), 'keyup'); const inputNumber = vm.$el.querySelector('.el-input-number').__vue__; inputNumber.currentValue = 40; setTimeout(() => { diff --git a/test/unit/util.js b/test/unit/util.js index 5e9a4be49..a71b47740 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -49,13 +49,16 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) { /** * 触发一个事件 - * mouseenter, mouseleave, mouseover 等 + * mouseenter, mouseleave, mouseover, keyup 等 * @param {Element} elm * @param {EventName} name * @param {options} opts */ exports.triggerEvent = function(elm, name, opts) { - const evt = document.createEvent('MouseEvents'); + const isMouseEvent = /^mouse/.test(name); + const isKeyEvent = /^key/.test(name); + if (!isMouseEvent && !isKeyEvent) return; + const evt = document.createEvent(isMouseEvent ? 'MouseEvents' : 'KeyboardEvent'); evt.initEvent(name, ...opts); elm.dispatchEvent