From 12e5e933879b7c25b19cdfcd3009d1fcd51ceb72 Mon Sep 17 00:00:00 2001
From: Herrington Darkholme
 <2883231+HerringtonDarkholme@users.noreply.github.com>
Date: Sun, 30 Aug 2020 22:13:35 +0800
Subject: [PATCH] fix(checkbox): fix test cases in checkbox

---
 packages/checkbox/__tests__/checkbox.spec.ts | 174 +++++++------------
 packages/checkbox/src/checkbox-button.vue    |   1 +
 packages/checkbox/src/checkbox.vue           |  41 +++--
 3 files changed, 85 insertions(+), 131 deletions(-)

diff --git a/packages/checkbox/__tests__/checkbox.spec.ts b/packages/checkbox/__tests__/checkbox.spec.ts
index a989ef2d4e4e3..3742a7a6ff49b 100644
--- a/packages/checkbox/__tests__/checkbox.spec.ts
+++ b/packages/checkbox/__tests__/checkbox.spec.ts
@@ -1,9 +1,10 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import Checkbox from '../src/checkbox.vue'
 import CheckboxButton from '../src/checkbox-button.vue'
 import CheckboxGroup from '../src/checkbox-group.vue'
 
-const _mount = <T={data: any; checkList: [];}>(template: string, data, otherObj?) => mount<T>({
+const _mount = <D>(template: string, data: () => D, otherObj?: Record<string, unknown>) => mount<D>({
   components: {
     'el-checkbox': Checkbox,
     'el-checkbox-group': CheckboxGroup,
@@ -23,42 +24,37 @@ const _mount = <T={data: any; checkList: [];}>(template: string, data, otherObj?
 })
 
 describe('Checkbox', () => {
-  test('create', async done => {
+  test('create', async () => {
     const wrapper = _mount('<el-checkbox v-model="checkbox" label="a"/>', () => ({ checkbox: false }))
-    const vm = wrapper.vm
     expect(wrapper.classes()).toContain('el-checkbox')
     await wrapper.trigger('click')
-    vm.$nextTick(async () => {
-      expect(wrapper.classes()).toContain('is-checked')
-      await wrapper.trigger('click')
-      expect(wrapper.classes('is-checked')).toBe(false)
-      done()
-    })
+    expect(wrapper.classes()).toContain('is-checked')
+    await wrapper.trigger('click')
+    expect(wrapper.classes('is-checked')).toBe(false)
+  })
+
+  test('no v-model', async () => {
+    const wrapper = _mount('<el-checkbox label="a"/>', () => ({ checkbox: false }))
+    expect(wrapper.classes('is-checked')).toBe(false)
   })
 
-  test('disabled', async done => {
+  test('disabled', async () => {
     const wrapper = _mount('<el-checkbox v-model="checkbox" disabled label="a"/>', () => ({ checkbox: false }))
-    const vm = wrapper.vm
     expect(wrapper.classes()).toContain('is-disabled')
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect(wrapper.classes()).toContain('is-disabled')
-      done()
-    })
+    expect(wrapper.classes()).toContain('is-disabled')
   })
 
-  test('change event', async done => {
+  test('change event', async () => {
     const wrapper = _mount(
-      `
-      <el-checkbox v-model="checked" @change="onChange" />
-      `,
+      `<el-checkbox v-model="checked" @change="onChange" />`,
       () => ({
-        data: '',
+        data: null,
         checked: false,
       }),
       {
         methods: {
-          onChange(val) {
+          onChange(val: boolean) {
             this.data = val
           },
         },
@@ -66,15 +62,11 @@ describe('Checkbox', () => {
     )
 
     const vm = wrapper.vm
-
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect(vm.data).toBe(true)
-      done()
-    })
+    expect(vm.data).toBe(true)
   })
 
-  test('checkbox group', async done => {
+  test('checkbox group', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group v-model="checkList">
@@ -89,20 +81,15 @@ describe('Checkbox', () => {
     const vm = wrapper.vm
     expect(vm.checkList.length).toBe(0)
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(async () => {
-      expect(vm.checkList.length).toBe(1)
-      expect(vm.checkList).toContain('a')
-      await wrapper.findComponent({ ref: 'b' }).trigger('click')
-      vm.$nextTick(() => {
-        expect(vm.checkList.length).toBe(2)
-        expect(vm.checkList).toContain('a')
-        expect(vm.checkList).toContain('b')
-        done()
-      })
-    })
+    expect(vm.checkList.length).toBe(1)
+    expect(vm.checkList).toContain('a')
+    await wrapper.findComponent({ ref: 'b' }).trigger('click')
+    expect(vm.checkList.length).toBe(2)
+    expect(vm.checkList).toContain('a')
+    expect(vm.checkList).toContain('b')
   })
 
-  test('checkbox group change', async done => {
+  test('checkbox group change', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group v-model="checkList" @change="onChange">
@@ -110,10 +97,10 @@ describe('Checkbox', () => {
         <el-checkbox label="b" ref="b"></el-checkbox>
       </el-checkbox-group>
       `,
-      () => ({ checkList: [] }),
+      () => ({ checkList: [], data: null }),
       {
         methods: {
-          onChange(val) {
+          onChange(val: string[]) {
             this.data = val
           },
         },
@@ -121,14 +108,12 @@ describe('Checkbox', () => {
     )
     const vm = wrapper.vm
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(() => {
-      expect(vm.data.length).toBe(1)
-      expect(vm.data).toEqual(['a'])
-      done()
-    })
+    await nextTick()
+    expect(vm.data.length).toBe(1)
+    expect(vm.data).toEqual(['a'])
   })
 
-  test('nested group', async done => {
+  test('nested group', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group v-model="checkList">
@@ -145,13 +130,10 @@ describe('Checkbox', () => {
     const vm = wrapper.vm
     expect(vm.checkList.length).toBe(0)
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(() => {
-      expect(vm.checkList).toEqual(['a'])
-      done()
-    })
+    expect(vm.checkList).toEqual(['a'])
   })
 
-  test('true false lable', async done => {
+  test('true false lable', async () => {
     const wrapper = _mount(
       `<el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>`,
       () => ({
@@ -160,10 +142,7 @@ describe('Checkbox', () => {
     )
     const vm = wrapper.vm
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect((vm as any).checked).toBe(3)
-      done()
-    })
+    expect(vm.checked).toBe(3)
   })
 
   test('check', () => {
@@ -187,31 +166,23 @@ describe('Checkbox', () => {
 })
 
 describe('check-button', () => {
-  test('create', async done => {
+  test('create', async () => {
     const wrapper = _mount('<el-checkbox-button v-model="checkbox" label="a"/>', () => ({ checkbox: false }))
-    const vm = wrapper.vm
     expect(wrapper.classes()).toContain('el-checkbox-button')
     await wrapper.trigger('click')
-    vm.$nextTick(async () => {
-      expect(wrapper.classes()).toContain('is-checked')
-      await wrapper.trigger('click')
-      expect(wrapper.classes('is-checked')).toBe(false)
-      done()
-    })
+    expect(wrapper.classes()).toContain('is-checked')
+    await wrapper.trigger('click')
+    expect(wrapper.classes('is-checked')).toBe(false)
   })
 
-  test('disabled', async done => {
+  test('disabled', async () => {
     const wrapper = _mount('<el-checkbox-button v-model="checkbox" disabled label="a"/>', () => ({ checkbox: false }))
-    const vm = wrapper.vm
     expect(wrapper.classes()).toContain('is-disabled')
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect(wrapper.classes()).toContain('is-disabled')
-      done()
-    })
+    expect(wrapper.classes()).toContain('is-disabled')
   })
 
-  test('change event', async done => {
+  test('change event', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-button v-model="checked" @change="onChange" />
@@ -222,7 +193,7 @@ describe('check-button', () => {
       }),
       {
         methods: {
-          onChange(val) {
+          onChange(val: boolean) {
             this.data = val
           },
         },
@@ -231,13 +202,10 @@ describe('check-button', () => {
 
     const vm = wrapper.vm
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect(vm.data).toBe(true)
-      done()
-    })
+    expect(vm.data).toBe(true)
   })
 
-  test('button group change', async done => {
+  test('button group change', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group v-model="checkList" @change="onChange">
@@ -248,12 +216,12 @@ describe('check-button', () => {
       </el-checkbox-group>
       `,
       () => ({
-        data: '',
+        data: null,
         checkList: [],
       }),
       {
         methods: {
-          onChange(val) {
+          onChange(val: string[]) {
             this.data = val
           },
         },
@@ -261,14 +229,11 @@ describe('check-button', () => {
     )
     const vm = wrapper.vm
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(async () => {
-      expect(vm.data).toEqual(['a'])
-      await wrapper.findComponent({ ref: 'b' }).trigger('click')
-      vm.$nextTick(() => {
-        expect(vm.data).toEqual(['a', 'b'])
-        done()
-      })
-    })
+    await nextTick() // await change event
+    expect(vm.data).toEqual(['a'])
+    await wrapper.findComponent({ ref: 'b' }).trigger('click')
+    await nextTick() // await change event
+    expect(vm.data).toEqual(['a', 'b'])
   })
 
   test('button group props', () => {
@@ -289,7 +254,7 @@ describe('check-button', () => {
     expect((vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style.borderColor).toEqual('#ff0000')
   })
 
-  test('button group min and max', async done => {
+  test('button group min and max', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group
@@ -314,21 +279,16 @@ describe('check-button', () => {
     vm.$nextTick(async () => {
       expect(vm.checkList.length).toBe(1)
       await wrapper.findComponent({ ref: 'b' }).trigger('click')
-      vm.$nextTick(async () => {
-        expect(vm.checkList.length).toBe(2)
-        await wrapper.findComponent({ ref: 'c' }).trigger('click')
-        vm.$nextTick(() => {
-          expect(vm.checkList.length).toBe(2)
-          expect(vm.checkList).toEqual(['a', 'b'])
-          expect((wrapper.findComponent({ ref: 'c' }).vm as any).isDisabled).toBe(true)
-          expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(true)
-          done()
-        })
-      })
+      expect(vm.checkList.length).toBe(2)
+      await wrapper.findComponent({ ref: 'c' }).trigger('click')
+      expect(vm.checkList.length).toBe(2)
+      expect(vm.checkList).toEqual(['a', 'b'])
+      expect((wrapper.findComponent({ ref: 'c' }).vm as any).isDisabled).toBe(true)
+      expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(true)
     })
   })
 
-  test('nested group', async done => {
+  test('nested group', async () => {
     const wrapper = _mount(
       `
       <el-checkbox-group v-model="checkList">
@@ -345,13 +305,10 @@ describe('check-button', () => {
     const vm = wrapper.vm
     expect(vm.checkList.length).toBe(0)
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(() => {
-      expect(vm.checkList).toEqual(['a'])
-      done()
-    })
+    expect(vm.checkList).toEqual(['a'])
   })
 
-  test('true false lable', async done => {
+  test('true false lable', async () => {
     const wrapper = _mount(
       `<el-checkbox-button true-label="a" :false-label="3" v-model="checked" />`,
       () => ({
@@ -360,10 +317,7 @@ describe('check-button', () => {
     )
     const vm = wrapper.vm
     await wrapper.trigger('click')
-    vm.$nextTick(() => {
-      expect((vm as any).checked).toBe(3)
-      done()
-    })
+    expect(vm.checked).toBe(3)
   })
 
   test('check', () => {
@@ -380,7 +334,7 @@ describe('check-button', () => {
         checked: false,
         checklist: [],
       }),
-    ) as any
+    )
     expect(wrapper.vm.checked).toBe(true)
     expect(wrapper.vm.checklist).toEqual(['a'])
   })
diff --git a/packages/checkbox/src/checkbox-button.vue b/packages/checkbox/src/checkbox-button.vue
index 44943cf35086e..55484031a6fe7 100644
--- a/packages/checkbox/src/checkbox-button.vue
+++ b/packages/checkbox/src/checkbox-button.vue
@@ -14,6 +14,7 @@
     <input
       v-if="trueLabel || falseLabel"
       v-model="model"
+      :checked="isChecked"
       class="el-checkbox-button__original"
       type="checkbox"
       :name="name"
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 7c59ab27e46e8..15b43729490b0 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -25,6 +25,7 @@
       <input
         v-if="trueLabel || falseLabel"
         v-model="model"
+        :checked="isChecked"
         class="el-checkbox__original"
         type="checkbox"
         :aria-hidden="indeterminate ? 'true' : 'false'"
@@ -111,19 +112,18 @@ export default defineComponent({
   setup(props, { emit }) {
     const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
     const instance = getCurrentInstance()
-    const selfModel = ref(false)
+    const selfModel = ref<unknown>(false)
     const focus = ref(false)
     const isLimitExceeded = ref(false)
     const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
-    const model = computed({
+    const model = computed<unknown>({
       get() {
-        return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
+        return isGroup.value
+          ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel.value
       },
-
-      set(val: any) {
-        if (isGroup.value) {
+      set(val: unknown) {
+        if (isGroup.value && Array.isArray(val)) {
           isLimitExceeded.value = false
-
           if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
             isLimitExceeded.value = true
           }
@@ -139,12 +139,13 @@ export default defineComponent({
       },
     })
     const isChecked = computed(() => {
-      if (Object.prototype.toString.call(model.value) === '[object Boolean]') {
-        return model.value
-      } else if (Array.isArray(model.value)) {
-        return model.value.includes(props.label)
-      } else if (model.value !== null && model.value !== undefined) {
-        return model.value === props.trueLabel
+      const value = model.value
+      if (Object.prototype.toString.call(value) === '[object Boolean]') {
+        return Boolean(value)
+      } else if (Array.isArray(value)) {
+        return value.includes(props.label)
+      } else if (value !== null && value !== undefined) {
+        return value === props.trueLabel
       }
     })
     const isLimitDisabled = computed(() => {
@@ -176,16 +177,14 @@ export default defineComponent({
       }
     }
 
-    function handleChange(e: UIEvent) {
+    function handleChange(e: InputEvent) {
       if (isLimitExceeded.value) return
-      let value = ref(undefined)
-      if ((e.target as HTMLInputElement).checked) {
-        value.value = props.trueLabel === undefined ? true : props.trueLabel
-      } else {
-        value.value = props.falseLabel === undefined ? false : props.falseLabel
-      }
+      const target = e.target as HTMLInputElement
+      const value = target.checked
+        ? props.trueLabel ?? true
+        : props.falseLabel ?? false
 
-      emit('change', value.value, e)
+      emit('change', value, e)
       /**
        * to discuss does it is useful
        */