Testing: switch (#477)

pull/486/head
杨奕 2016-10-18 17:00:50 +08:00 committed by FuryBean
parent c7103edd65
commit 2ec517505b
3 changed files with 83 additions and 2 deletions

View File

@ -14,6 +14,7 @@
- 新增 Input 图标的点击事件 #444
- 修复 Loading 关闭后有几率滚动失效的问题
- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
- 修复 Switch 的 width 属性无效的问题
#### 非兼容性更新

View File

@ -1,7 +1,7 @@
<template>
<div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
<div class="el-switch__mask" v-show="disabled"></div>
<input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
<input class="el-switch__input" type="checkbox" :checked="value" :name="name" :disabled="disabled" style="display: none;">
<span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" ref="button"></span>
</span>
@ -75,7 +75,7 @@
},
data() {
return {
coreWidth: 0
coreWidth: this.width
};
},
computed: {

View File

@ -0,0 +1,80 @@
import { createTest, createVue } from '../util';
import Switch from 'packages/switch';
import Vue from 'vue';
describe('Switch', () => {
it('create', () => {
const vm = createTest(Switch, {
onText: 'on',
offText: 'off',
onColor: '#0f0',
offColor: '#f00',
width: 100
});
const core = vm.$el.querySelector('.el-switch__core');
expect(core.style.backgroundColor).to.equal('rgb(0, 255, 0)');
expect(core.style.width).to.equal('100px');
expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('on');
});
it('switch with icons', () => {
const vm = createTest(Switch, {
onIconClass: 'el-icon-check',
offIconClass: 'el-icon-close'
});
const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
expect(icon.classList.contains('el-icon-check')).to.true;
});
it('value correctly update', done => {
const vm = createVue({
template: `
<div>
<el-switch v-model="value"></el-switch>
</div>
`,
data() {
return {
value: true
};
}
}, true);
const core = vm.$el.querySelector('.el-switch__core');
const button = vm.$el.querySelector('.el-switch__button');
core.click();
Vue.nextTick(() => {
expect(vm.value).to.equal(false);
expect(getComputedStyle(core).backgroundColor).to.equal('rgb(192, 204, 218)');
expect(button.style.transform).to.equal('translate3d(2px, 2px, 0)');
core.click();
expect(vm.value).to.equal(true);
done();
});
});
it('disabled switch should not respond to user click', done => {
const vm = createVue({
template: `
<div>
<el-switch disabled v-model="value"></el-switch>
</div>
`,
data() {
return {
value: true
};
}
}, true);
vm.$el.querySelector('.el-switch__core').click();
Vue.nextTick(() => {
expect(vm.value).to.true;
done();
});
});
});