add checkbox test

ElemeFE · Oct 20, 2016 · e70457c · e70457c
1 parent 39d90d0
commit e70457c
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 9 deletions.
diff --git a/examples/docs/zh-cn/checkbox.md b/examples/docs/zh-cn/checkbox.md
@@ -41,7 +41,7 @@
 ```html
 <template>
   <!-- `checked` 为 true 或 false -->
-  <el-checkbox class="checkbox" v-model="checked" checked>备选项</el-checkbox>
+  <el-checkbox v-model="checked" checked>备选项</el-checkbox>
 </template>
 <script>
   export default {
@@ -63,8 +63,8 @@
 
 ```html
 <template>
-  <el-checkbox class="checkbox" v-model="checked1" disabled>备选项1</el-checkbox>
-  <el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
+  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
+  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
 </template>
 <script>
   export default {
@@ -88,11 +88,11 @@
 ```html
 <template>
   <el-checkbox-group v-model="checkList">
-    <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
-    <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
-    <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
-    <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
-    <el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
+    <el-checkbox label="复选框 A"></el-checkbox>
+    <el-checkbox label="复选框 B"></el-checkbox>
+    <el-checkbox label="复选框 C"></el-checkbox>
+    <el-checkbox label="禁用" disabled></el-checkbox>
+    <el-checkbox label="选中且禁用" disabled></el-checkbox>
   </el-checkbox-group>
 </template>
 
@@ -117,7 +117,6 @@
 ```html
 <template>
   <el-checkbox
-    class="checkbox"
     v-model="isValid"
     true-label="可用"
     false-label="不可用">

diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
@@ -0,0 +1,103 @@
+import { createVue } from '../util';
+
+describe('Checkbox', () => {
+  it('create', done => {
+    const vm = createVue({
+      template: `
+        <el-checkbox v-model="checked">
+        </el-checkbox>
+      `,
+      data() {
+        return {
+          checked: false
+        };
+      }
+    }, true);
+    let checkboxElm = vm.$el;
+    expect(checkboxElm.classList.contains('el-checkbox')).to.be.true;
+    checkboxElm.click();
+    vm.$nextTick(_ => {
+      expect(checkboxElm.querySelector('.is-checked')).to.be.ok;
+      done();
+    });
+  });
+  it('disabled', () => {
+    const vm = createVue({
+      template: `
+        <el-checkbox
+          v-model="checked"
+          disabled
+        >
+        </el-checkbox>
+      `,
+      data() {
+        return {
+          checked: false
+        };
+      }
+    }, true);
+    let checkboxElm = vm.$el;
+    expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;
+  });
+  it('checkbox group', done => {
+    const vm = createVue({
+      template: `
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox label="a" ref="a"></el-checkbox>
+          <el-checkbox label="b" ref="b"></el-checkbox>
+          <el-checkbox label="c" ref="c"></el-checkbox>
+          <el-checkbox label="d" ref="d"></el-checkbox>
+        </el-checkbox-group>
+      `,
+      data() {
+        return {
+          checkList: []
+        };
+      }
+    }, true);
+    // let checkboxGroup = vm.$el;
+    expect(vm.checkList.length === 0).to.be.true;
+    vm.$refs.a.$el.click();
+    vm.$nextTick(_ => {
+      expect(vm.checkList.indexOf('a') !== -1).to.be.true;
+      done();
+    });
+  });
+  it('true false label', done => {
+    const vm = createVue({
+      template: `
+        <el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>
+      `,
+      data() {
+        return {
+          checked: 'a'
+        };
+      }
+    }, true);
+    vm.$el.click();
+    vm.$nextTick(_ => {
+      expect(vm.checked === 3).to.be.true;
+      done();
+    });
+  });
+  it('checked', () => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-checkbox v-model="checked" checked></el-checkbox>
+          <el-checkbox-group v-model="checklist">
+            <el-checkbox checked label="a"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+      `,
+      data() {
+        return {
+          checked: false,
+          checklist: []
+        };
+      }
+    }, true);
+    expect(vm.checked).to.be.true;
+    expect(vm.checklist.indexOf('a') !== -1).to.be.true;
+  });
+});