import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { EVENT_CODE } from '@element-plus/constants'
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, otherObj?) =>
mount({
components: {
'el-radio': Radio,
'el-radio-group': RadioGroup,
'el-radio-button': RadioButton,
},
template,
data,
...otherObj,
})
describe('Radio', () => {
test('create', async () => {
const wrapper = _mount(
`
`,
() => ({ radio: '' })
)
expect(wrapper.classes()).toContain('el-radio')
await wrapper.trigger('click')
expect(wrapper.classes()).toContain('is-checked')
})
test('disabled', async () => {
const wrapper = _mount(
`
`,
() => ({ radio: '' })
)
await wrapper.trigger('click')
const vm = wrapper.vm as any
expect(vm.radio).toBe('')
expect(wrapper.classes()).toContain('is-disabled')
})
test('border', () => {
const wrapper = _mount(
`
`,
() => ({ radio: '' })
)
expect(wrapper.classes()).toContain('is-bordered')
})
test('disabled', async () => {
const wrapper = _mount(
`
`,
() => ({
radio: '',
changeData: '',
}),
{
methods: {
handleChange(val) {
this.changeData = val
},
},
}
)
const vm = wrapper.vm as any
await wrapper.trigger('click')
await nextTick()
expect(vm.changeData).toEqual('3')
})
test('change event only triggers on user input', async () => {
const wrapper = _mount(
`
`,
() => ({
radio: '',
changeData: '',
}),
{
methods: {
handleChange(val) {
this.changeData = val
},
},
}
)
const vm = wrapper.vm as any
vm.radio = '3'
await nextTick()
expect(vm.changeData).toEqual('')
expect(vm.radio).toEqual('3')
})
})
describe('Radio group', () => {
it('create', async () => {
const wrapper = _mount(
`
3
6
9
`,
() => ({
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(
`
3
6
7
`,
() => ({
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(
`
3
6
9
`,
() => ({
radio: 3,
data: 0,
}),
{
methods: {
onChange(val) {
this.data = val
},
},
}
)
const radio2 = wrapper.findComponent({ ref: 'radio2' })
await radio2.trigger('click')
await nextTick()
const vm = wrapper.vm as any
expect(vm.data).toEqual(6)
})
it('change event only triggers on user input', async () => {
const wrapper = _mount(
`
3
6
9
`,
() => ({
radio: 3,
data: 0,
}),
{
methods: {
onChange(val) {
this.data = val
},
},
}
)
const vm = wrapper.vm as any
vm.radio = 6
await nextTick()
expect(vm.data).toEqual(0)
})
it('disabled when children is radio button', async () => {
const wrapper = _mount(
`
3
6
9
`,
() => ({
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(
`
3
6
9
`,
() => ({
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(
`
3
6
9
`,
() => ({
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(
`
3
6
9
`,
() => ({
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(
`
3
6
9
`,
() => ({
data: 0,
radio: 3,
}),
{
methods: {
onChange(val) {
this.data = val
},
},
}
)
const vm = wrapper.vm as any
vm.radio = 6
await nextTick()
expect(vm.data).toEqual(0)
})
it('size', () => {
const wrapper = _mount(
`
3
6
9
`,
() => ({
radio: 3,
})
)
expect(wrapper.findAll('.el-radio-button--large').length).toBe(3)
})
it('keyboard event', async () => {
const wrapper = _mount(
`
3
6
9
`,
() => ({
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', {
code: EVENT_CODE.left,
})
expect(vm.radio).toEqual(3)
radio1.trigger('keydown', {
code: EVENT_CODE.left,
})
expect(vm.radio).toEqual(9)
await nextTick()
radio3.trigger('keydown', {
code: EVENT_CODE.right,
})
expect(vm.radio).toEqual(3)
radio1.trigger('keydown', {
code: EVENT_CODE.right,
})
expect(vm.radio).toEqual(6)
await nextTick()
radio1.trigger('keydown', {
code: EVENT_CODE.enter,
})
expect(vm.radio).toEqual(6)
})
})