github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: add radio & tabs tests

Browse Source
pull/77/merge
tjz 7 years ago
parent 90634d19b3
commit 9f307fd25d
6 changed files with 290 additions and 0 deletions
Show Stats Download Patch File Download Diff File

25
components/radio/__tests__/__snapshots__/group.test.js.snap
Unescape View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio all children should have a name property 1`] = `
<div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
</div>
`;
exports[`Radio fire change events when value changes 1`] = `
<div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
</div>
`;
exports[`Radio fire change events when value changes 2`] = `
<div class="ant-radio-group ant-radio-group-default">
<label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
</div>
`;

3
components/radio/__tests__/__snapshots__/radio.test.js.snap
Unescape View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio should render correctly 1`] = `<label class="ant-radio-wrapper customized"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Test</span></label>`;

148
components/radio/__tests__/group.test.js
Unescape View File

@ -0,0 +1,148 @@
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)
}))
})
})

41
components/radio/__tests__/radio.test.js
Unescape View File

@ -0,0 +1,41 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Radio from '../radio'
import focusTest from '../../../tests/shared/focusTest'
describe('Radio', () => {
focusTest(Radio)
it('should render correctly', () => {
const wrapper = mount({
render () {
return <Radio class='customized'>Test</Radio>
},
})
expect(wrapper.html()).toMatchSnapshot()
})
it('responses hover events', async () => {
const onMouseEnter = jest.fn()
const onMouseLeave = jest.fn()
const wrapper = mount({
render () {
return <Radio
onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave}
/>
},
}, { sync: false })
await asyncExpect(() => {
wrapper.trigger('mouseenter')
})
await asyncExpect(() => {
expect(onMouseEnter).toHaveBeenCalled()
})
wrapper.trigger('mouseleave')
await asyncExpect(() => {
expect(onMouseLeave).toHaveBeenCalled()
})
})
})

23
components/tabs/__tests__/__snapshots__/index.test.js.snap
Unescape View File

@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tabs tabPosition remove card 1`] = `
<div class="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line no-flex">
<div role="tablist" tabindex="0" class="ant-tabs-bar">
<div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
<div
class="ant-tabs-nav-wrap">
<div class="ant-tabs-nav-scroll">
<div class="ant-tabs-nav ant-tabs-nav-animated">
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">foo</div>
</div>
</div>
</div>
</div>
<div class="ant-tabs-extra-content">xxx</div>
</div>
<div class="ant-tabs-content ant-tabs-content-animated" style="margin-top: 0%;">
<div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">foo</div>
</div>
</div>
`;

50
components/tabs/__tests__/index.test.js
Unescape View File

@ -0,0 +1,50 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Tabs from '..'
const { TabPane } = Tabs
describe('Tabs', () => {
describe('editable-card', () => {
let handleEdit
let wrapper
beforeEach(() => {
handleEdit = jest.fn()
wrapper = mount({
render () {
return (
<Tabs type='editable-card' onEdit={handleEdit}>
<TabPane tab='foo' key='1'>foo</TabPane>
</Tabs>
)
},
})
})
it('add card', () => {
wrapper.find('.ant-tabs-new-tab').trigger('click')
expect(handleEdit.mock.calls[0][1]).toBe('add')
})
it('remove card', () => {
wrapper.find('.anticon-close').trigger('click')
expect(handleEdit).toBeCalledWith('1', 'remove')
})
})
describe('tabPosition', () => {
it('remove card', () => {
const wrapper = mount({
render () {
return (
<Tabs tabPosition='left' tabBarExtraContent='xxx'>
<TabPane tab='foo' key='1'>foo</TabPane>
</Tabs>
)
},
})
expect(wrapper.html()).toMatchSnapshot()
})
})
})
Write Preview
Loading…
Cancel
Save