From 72d598d0abc6f7c2a71ace4d98e1f45a4733332c Mon Sep 17 00:00:00 2001
From: zazzaz <izazzaz@hotmail.com>
Date: Fri, 7 Aug 2020 16:44:59 +0800
Subject: [PATCH] fix: add radio

---
 packages/radio/__tests__/radio.spec.ts | 261 ++++++++++++++++++++++++-
 packages/radio/src/radio-button.vue    |  16 +-
 packages/radio/src/radio-group.vue     |  11 +-
 packages/radio/src/radio.vue           |  12 +-
 4 files changed, 272 insertions(+), 28 deletions(-)

diff --git a/packages/radio/__tests__/radio.spec.ts b/packages/radio/__tests__/radio.spec.ts
index 81790ce3c4..a158e09561 100644
--- a/packages/radio/__tests__/radio.spec.ts
+++ b/packages/radio/__tests__/radio.spec.ts
@@ -1,12 +1,17 @@
 import { mount } from '@vue/test-utils'
 import Radio from '../src/radio.vue'
+import RadioGroup from '../src/radio-group.vue'
+import RadioButton from '../src/radio-button.vue'
 
-const _mount = (template: string, data) => mount({
+const _mount = (template: string, data, otherObj?) => mount({
   components: {
     'el-radio': Radio,
+    'el-radio-group': RadioGroup,
+    'el-radio-button': RadioButton,
   },
   template,
   data,
+  ...otherObj,
 }, {
   global: {
     provide: {
@@ -24,7 +29,7 @@ describe('Radio', () => {
     expect(wrapper.classes()).toContain('is-checked')
   })
 
-  test('disabled', async() => {
+  test('disabled', async () => {
 
     const wrapper = _mount(`<el-radio
     v-model="radio"
@@ -33,11 +38,12 @@ describe('Radio', () => {
   >
   </el-radio>`, () => ({ radio: '' }))
     await wrapper.trigger('click')
-    expect((wrapper.vm as any).radio).toBe('')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toBe('')
     expect(wrapper.classes()).toContain('is-disabled')
   })
 
-  it('border', () => {
+  test('border', () => {
     const wrapper = _mount(`<el-radio
     v-model="radio"
     label="3"
@@ -46,4 +52,251 @@ describe('Radio', () => {
   </el-radio>`, () => ({ radio: '' }))
     expect(wrapper.classes()).toContain('is-bordered')
   })
+
+  test('disabled', async () => {
+    const wrapper = _mount(`<el-radio
+    v-model="radio"
+    label="3"
+    @change="handleChange"
+  >
+  </el-radio>`, () => ({
+      radio: '',
+      changeData: '',
+    }), {
+      methods: {
+        handleChange(val) {
+          this.changeData = val
+        },
+      },
+    })
+    const vm = wrapper.vm as any
+    await wrapper.trigger('click')
+    expect(vm.changeData).toEqual('3')
+  })
+
+  test('change event only triggers on user input', async () => {
+    const wrapper = _mount(`<el-radio
+    v-model="radio"
+    label="3"
+    @change="handleChange"
+  >
+  </el-radio>`, () => ({
+      radio: '',
+      changeData: '',
+    }), {
+      methods: {
+        handleChange(val) {
+          this.changeData = val
+        },
+      },
+    })
+    const vm = wrapper.vm as any
+    vm.radio = '3'
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(vm.changeData).toEqual('')
+    expect(vm.radio).toEqual('3')
+  })
+})
+
+describe('Radio group', () => {
+
+  it('create', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio">
+    <el-radio :label="3" ref="radio1">3</el-radio>
+    <el-radio :label="6" ref="radio2">6</el-radio>
+    <el-radio :label="9">9</el-radio>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+    const radio1 = wrapper.findComponent({ ref: 'radio1' })
+    expect(radio1.classes()).toContain('is-checked')
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    await radio2.trigger('click')
+    expect(radio2.classes()).toContain('is-checked')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toEqual(6)
+  })
+
+  it('disabled', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" disabled>
+    <el-radio :label="3" ref="radio1">3</el-radio>
+    <el-radio :label="6" ref="radio2">6</el-radio>
+    <el-radio :label="9">7</el-radio>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+
+    expect(wrapper.find('label.is-disabled').exists()).toBe(true)
+    const radio1 = wrapper.findComponent({ ref: 'radio1' })
+    expect(radio1.classes()).toContain('is-checked')
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    await radio2.trigger('click')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toEqual(3)
+    expect(radio1.classes()).toContain('is-checked')
+  })
+  it('change event', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" @change="onChange">
+    <el-radio :label="3">3</el-radio>
+    <el-radio :label="6" ref="radio2">6</el-radio>
+    <el-radio :label="9">9</el-radio>
+  </el-radio-group>`, () => ({
+      radio: 3,
+      data: 0,
+    }), {
+      methods: {
+        onChange(val) {
+          this.data = val
+        },
+      },
+    })
+
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    await radio2.trigger('click')
+    const vm = wrapper.vm as any
+    expect(vm.data).toEqual(6)
+  })
+  it('change event only triggers on user input', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" @change="onChange">
+    <el-radio :label="3">3</el-radio>
+    <el-radio :label="6" ref="radio2">6</el-radio>
+    <el-radio :label="9">9</el-radio>
+  </el-radio-group>`, () => ({
+      radio: 3,
+      data: 0,
+    }), {
+      methods: {
+        onChange(val) {
+          this.data = val
+        },
+      },
+    })
+    const vm = wrapper.vm as any
+    vm.radio = 6
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(vm.data).toEqual(0)
+  })
+  it('disabled when children is radio button', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" disabled>
+    <el-radio-button :label="3" ref="radio1">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+
+    const radio1 = wrapper.findComponent({ ref: 'radio1' })
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    expect(radio1.classes()).toContain('is-active')
+    expect(wrapper.findAll('.is-disabled').length).toBe(3)
+    await radio2.trigger('click')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toEqual(3)
+    expect(radio1.classes()).toContain('is-active')
+  })
+})
+
+describe('Radio Button', () => {
+  it('create', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio">
+    <el-radio-button :label="3" ref="radio1">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+    const radio1 = wrapper.findComponent({ ref: 'radio1' })
+    expect(radio1.classes()).toContain('is-active')
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    await radio2.trigger('click')
+    expect(radio2.classes()).toContain('is-active')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toEqual(6)
+  })
+  it('custom color', () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" fill="#000" text-color="#ff0">
+    <el-radio-button :label="3" ref="radio1">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+    const radio1 = wrapper.findComponent({ ref: 'radio1' })
+    expect(radio1.find('span').attributes('style')).toContain('background-color: rgb(0, 0, 0); border-color: #000; box-shadow: -1px 0 0 0 #000; color: rgb(255, 255, 0);')
+  })
+  it('change event', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" @change="onChange">
+    <el-radio-button :label="3">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      data: 0,
+      radio: 3,
+    }), {
+      methods: {
+        onChange(val) {
+          this.data = val
+        },
+      },
+    })
+    const radio2 = wrapper.findComponent({ ref: 'radio2' })
+    await radio2.trigger('click')
+    const vm = wrapper.vm as any
+    expect(vm.radio).toEqual(6)
+  })
+  it('change event only triggers on user input', async () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" @change="onChange">
+    <el-radio-button :label="3">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      data: 0,
+      radio: 3,
+    }), {
+      methods: {
+        onChange(val) {
+          this.data = val
+        },
+      },
+    })
+    const vm = wrapper.vm as any
+    vm.radio = 6
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(vm.data).toEqual(0)
+  })
+
+  it('size', () => {
+    const wrapper = _mount(`<el-radio-group v-model="radio" size="large">
+    <el-radio-button :label="3" ref="radio1">3</el-radio-button>
+    <el-radio-button :label="6" ref="radio2">6</el-radio-button>
+    <el-radio-button :label="9">9</el-radio-button>
+  </el-radio-group>`, () => ({
+      radio: 3,
+    }))
+    expect(wrapper.findAll('.el-radio-button--large').length).toBe(3)
+  })
+  // it('keyboard event', async () => {
+  //   const wrapper = _mount(` <el-radio-group v-model="radio">
+  //   <el-radio-button ref="radio1" :label="3">3</el-radio-button>
+  //   <el-radio-button ref="radio2" :label="6">6</el-radio-button>
+  //   <el-radio-button ref="radio3" :label="9">9</el-radio-button>
+  // </el-radio-group>`, () => ({
+  //     radio: 6,
+  //   }))
+  //   const radio1 = wrapper.findComponent({ ref: 'radio1' })
+  //   const radio2 = wrapper.findComponent({ ref: 'radio2' })
+  //   const radio3 = wrapper.findComponent({ ref: 'radio3' })
+  //   const vm = wrapper.vm as any
+  //   expect(vm.radio).toEqual(6)
+  //   radio2.trigger('keydown.left')
+  //   expect(vm.radio).toEqual(3)
+  //   radio1.trigger('keydown.left')
+  //   expect(vm.radio).toEqual(9)
+  //   radio3.trigger('keydown.right')
+  //   expect(vm.radio).toEqual(3)
+  //   radio1.trigger('keydown.right')
+  //   expect(vm.radio).toEqual(6)
+  //   radio1.trigger('keydown.enter')
+  //   expect(vm.radio).toEqual(6)
+  // })
 })
diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
index af28751a8f..2f4388f28f 100644
--- a/packages/radio/src/radio-button.vue
+++ b/packages/radio/src/radio-button.vue
@@ -2,7 +2,7 @@
   <label
     class="el-radio-button"
     :class="[
-      size ? 'el-radio-button--' + size : '',
+      size ? 'el-radio-button--' + size.value : '',
       { 'is-active': value === label },
       { 'is-disabled': isDisabled },
       { 'is-focus': focus }
@@ -21,7 +21,6 @@
       :name="name"
       :disabled="isDisabled"
       tabindex="-1"
-      @change="handleChange"
       @focus="focus = true"
       @blur="focus = false"
     >
@@ -47,10 +46,10 @@ export default {
     name: String,
   },
   setup(props, ctx) {
-    //todo: elFormItem elForm ELEMENT
+    //todo: ELEMENT
     const ELEMENT = {}
-    const elForm = {}
-    const elFormItem = {}
+    const elForm = inject('elForm')
+    const elFormItem = inject('elFormItem')
     const _radioGroup: any = inject('RadioGroup')
     const focus = ref(false)
     const isGroup = computed(() => _radioGroup && _radioGroup.name === 'ElRadioGroup')
@@ -83,12 +82,6 @@ export default {
       }
     })
 
-    const handleChange = () => {
-      nextTick(() => {
-        // this.dispatch('ElRadioGroup', 'handleChange', this.value);
-      })
-    }
-
     return {
       isGroup,
       size,
@@ -97,7 +90,6 @@ export default {
       value,
       focus,
       activeStyle,
-      handleChange,
     }
   },
 }
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 4413ca41b7..aafe80ce99 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -13,7 +13,7 @@
 import {
   nextTick,
   computed,
-  provide, getCurrentInstance, onMounted,
+  provide, getCurrentInstance, onMounted, inject,
 } from 'vue'
 
 const keyCode = Object.freeze({
@@ -37,12 +37,12 @@ export default {
     disabled: Boolean,
   },
 
-  emits: ['update:modelValue', 'change-value'],
+  emits: ['update:modelValue', 'change'],
 
   setup(props, ctx) {
     const instance = getCurrentInstance()
-    //todo: elFormItem elForm ELEMENT
-    const elFormItem = {}
+    //todo: ELEMENT
+    const elFormItem = inject('elFormItem')
     const ELEMENT = {}
     const _elFormItemSize = computed(() => {
       return (elFormItem || {} as any).elFormItemSize
@@ -67,13 +67,14 @@ export default {
     const changeEvent = value => {
       ctx.emit('update:modelValue', value)
       nextTick(() => {
-        ctx.emit('change-value', value)
+        ctx.emit('change', value)
       })
     }
 
     provide('RadioGroup', {
       name: 'ElRadioGroup',
       changeEvent: changeEvent,
+      radioGroupSize: radioGroupSize,
       ...props,
       modelValue,
     })
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 8c88a3550f..089083950c 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -60,14 +60,14 @@ export default defineComponent({
     size: String,
   },
 
-  emits: ['update:modelValue', 'change-value'],
+  emits: ['update:modelValue', 'change'],
 
   setup(props, ctx) {
     const instance = getCurrentInstance()
-    //todo: elFormItem elForm ELEMENT
-    const elForm = null
-    const elFormItem = null
+    //todo: ELEMENT
     const ELEMENT = null
+    const elForm = inject('elForm')
+    const elFormItem = inject('elFormItem')
     const _radioGroup : any = inject('RadioGroup') as any
     const focus = ref(false)
     const isGroup = computed(() => _radioGroup && _radioGroup.name === 'ElRadioGroup')
@@ -103,11 +103,9 @@ export default defineComponent({
       },
     })
 
-    // methods
     function handleChange() {
       nextTick(() => {
-        ctx.emit('change-value', model.value)
-        // isGroup.value && this.dispatch('ElRadioGroup', 'handleChange', model.value)
+        ctx.emit('change', model.value)
       })
     }