149 lines
3.7 KiB
JavaScript
149 lines
3.7 KiB
JavaScript
import { mount } from '@vue/test-utils'
|
|
import { asyncExpect } from '@/tests/utils'
|
|
import Radio from '../Radio'
|
|
import RadioGroup from '../Group'
|
|
|
|
describe('Radio', () => {
|
|
function createRadioGroup (props, listeners = {}) {
|
|
return {
|
|
props: ['value'],
|
|
render () {
|
|
const groupProps = { ...props }
|
|
if (this.value !== undefined) {
|
|
groupProps.value = this.value
|
|
}
|
|
return (
|
|
<RadioGroup
|
|
ref='radioGroup'
|
|
{...{ props: groupProps, on: listeners }}
|
|
>
|
|
<Radio value='A'>A</Radio>
|
|
<Radio value='B'>B</Radio>
|
|
<Radio value='C'>C</Radio>
|
|
</RadioGroup>
|
|
)
|
|
},
|
|
}
|
|
}
|
|
|
|
function createRadioGroupByOption () {
|
|
const options = [
|
|
{ label: 'A', value: 'A' },
|
|
{ label: 'B', value: 'B' },
|
|
{ label: 'C', value: 'C' },
|
|
]
|
|
return {
|
|
render () {
|
|
return (
|
|
<RadioGroup
|
|
options={options}
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
}
|
|
|
|
it('responses hover events', () => {
|
|
const onMouseEnter = jest.fn()
|
|
const onMouseLeave = jest.fn()
|
|
|
|
const wrapper = mount({
|
|
render () {
|
|
return (
|
|
<RadioGroup
|
|
onMouseenter={onMouseEnter}
|
|
onMouseleave={onMouseLeave}
|
|
>
|
|
<Radio />
|
|
</RadioGroup>
|
|
)
|
|
},
|
|
})
|
|
|
|
wrapper.trigger('mouseenter')
|
|
expect(onMouseEnter).toHaveBeenCalled()
|
|
|
|
wrapper.trigger('mouseleave')
|
|
expect(onMouseLeave).toHaveBeenCalled()
|
|
})
|
|
|
|
it('fire change events when value changes', async () => {
|
|
const onChange = jest.fn()
|
|
const props = {}
|
|
const wrapper = mount(
|
|
createRadioGroup(props, {
|
|
change: onChange,
|
|
}),
|
|
{ sync: false }
|
|
)
|
|
let radios = null
|
|
await asyncExpect(() => {
|
|
radios = wrapper.findAll('input')
|
|
// uncontrolled component
|
|
wrapper.vm.$refs.radioGroup.stateValue = 'B'
|
|
// wrapper.setData({ value: 'B' })
|
|
radios.at(0).trigger('change')
|
|
expect(onChange.mock.calls.length).toBe(1)
|
|
})
|
|
await asyncExpect(() => {
|
|
expect(wrapper.html()).toMatchSnapshot()
|
|
})
|
|
await asyncExpect(() => {
|
|
// controlled component
|
|
wrapper.setProps({ value: 'A' })
|
|
radios.at(1).trigger('change')
|
|
expect(onChange.mock.calls.length).toBe(2)
|
|
})
|
|
await asyncExpect(() => {
|
|
expect(wrapper.html()).toMatchSnapshot()
|
|
})
|
|
})
|
|
|
|
// it('won\'t fire change events when value not changes', async () => {
|
|
// const onChange = jest.fn()
|
|
|
|
// const wrapper = mount(
|
|
// createRadioGroup({}, {
|
|
// change: onChange,
|
|
// }),
|
|
// { sync: false }
|
|
// )
|
|
// const radios = wrapper.findAll('input')
|
|
// await asyncExpect(() => {
|
|
// // uncontrolled component
|
|
// wrapper.vm.$refs.radioGroup.stateValue = 'B'
|
|
// radios.at(1).trigger('change')
|
|
// expect(onChange.mock.calls.length).toBe(0)
|
|
// })
|
|
|
|
// await asyncExpect(() => {
|
|
|
|
// }, 0)
|
|
|
|
// // // controlled component
|
|
// // wrapper.setProps({ value: 'A' })
|
|
// // radios.at(0).trigger('change')
|
|
// // expect(onChange.mock.calls.length).toBe(0)
|
|
// })
|
|
|
|
it('optional should correct render', () => {
|
|
const wrapper = mount(
|
|
createRadioGroupByOption()
|
|
)
|
|
const radios = wrapper.findAll('input')
|
|
|
|
expect(radios.length).toBe(3)
|
|
})
|
|
|
|
it('all children should have a name property', () => {
|
|
const GROUP_NAME = 'radiogroup'
|
|
const wrapper = mount(
|
|
createRadioGroup({ name: GROUP_NAME })
|
|
)
|
|
expect(wrapper.html()).toMatchSnapshot()
|
|
expect(wrapper.findAll('input[type="radio"]').wrappers.forEach((el) => {
|
|
expect(el.element.name).toEqual(GROUP_NAME)
|
|
}))
|
|
})
|
|
})
|