mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
fix: add radio
This commit is contained in:
zazzaz
jeremywu
parent
4decbd7fe2
commit
72d598d0ab
@ -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)
|
||||
// })
|
||||
})
|
||||
|
||||
@ -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,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -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,
|
||||
})
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user