mirror of https://github.com/ElemeFE/element
Testing: switch (#477)
parent
c7103edd65
commit
2ec517505b
|
@ -14,6 +14,7 @@
|
|||
- 新增 Input 图标的点击事件 #444
|
||||
- 修复 Loading 关闭后有几率滚动失效的问题
|
||||
- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
|
||||
- 修复 Switch 的 width 属性无效的问题
|
||||
|
||||
#### 非兼容性更新
|
||||
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue