Testing: switch

CHANGELOG.md

@@ -12,6 +12,7 @@
 - 修复 Autocomplete 的弹出框不会消失 #439
 - 修复 DatePicker 弹出框样式溢出边框 #318
 - 新增 Input 图标的点击事件 #444
+- 修复 Switch 的 width 属性无效的问题
 
 #### 非兼容性更新
 

packages/switch/src/component.vue

@@ -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: {

test/unit/specs/switch.spec.js

@@ -0,0 +1,81 @@
+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 input = vm.$el.querySelector('input');
+    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();
+    });
+  });
+});