Skip to content

Commit 5192859

Browse files
tangjinzhoutangjinzhou
committed
test: add radio & tabs tests
1 parent 00f2054 commit 5192859

File tree

6 files changed

+290
-0
lines changed

6 files changed

+290
-0
lines changed

‎components/radio/__tests__/__snapshots__/group.test.js.snap

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Radio all children should have a name property 1`] = `
4+
<div class="ant-radio-group ant-radio-group-default">
5+
<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>
6+
<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>
7+
<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>
8+
</div>
9+
`;
10+
11+
exports[`Radio fire change events when value changes 1`] = `
12+
<div class="ant-radio-group ant-radio-group-default">
13+
<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>
14+
<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>
15+
<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>
16+
</div>
17+
`;
18+
19+
exports[`Radio fire change events when value changes 2`] = `
20+
<div class="ant-radio-group ant-radio-group-default">
21+
<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>
22+
<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>
23+
<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>
24+
</div>
25+
`;

‎components/radio/__tests__/__snapshots__/radio.test.js.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
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>`;

‎components/radio/__tests__/group.test.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { mount } from '@vue/test-utils'
2+
import { asyncExpect } from '@/tests/utils'
3+
import Radio from '../radio'
4+
import RadioGroup from '../group'
5+
6+
describe('Radio', () => {
7+
function createRadioGroup (props, listeners = {}) {
8+
return {
9+
props: ['value'],
10+
render () {
11+
const groupProps = { ...props }
12+
if (this.value !== undefined) {
13+
groupProps.value = this.value
14+
}
15+
return (
16+
<RadioGroup
17+
ref='radioGroup'
18+
{...{ props: groupProps, on: listeners }}
19+
>
20+
<Radio value='A'>A</Radio>
21+
<Radio value='B'>B</Radio>
22+
<Radio value='C'>C</Radio>
23+
</RadioGroup>
24+
)
25+
},
26+
}
27+
}
28+
29+
function createRadioGroupByOption () {
30+
const options = [
31+
{ label: 'A', value: 'A' },
32+
{ label: 'B', value: 'B' },
33+
{ label: 'C', value: 'C' },
34+
]
35+
return {
36+
render () {
37+
return (
38+
<RadioGroup
39+
options={options}
40+
/>
41+
)
42+
},
43+
}
44+
}
45+
46+
it('responses hover events', () => {
47+
const onMouseEnter = jest.fn()
48+
const onMouseLeave = jest.fn()
49+
50+
const wrapper = mount({
51+
render () {
52+
return (
53+
<RadioGroup
54+
onMouseenter={onMouseEnter}
55+
onMouseleave={onMouseLeave}
56+
>
57+
<Radio />
58+
</RadioGroup>
59+
)
60+
},
61+
})
62+
63+
wrapper.trigger('mouseenter')
64+
expect(onMouseEnter).toHaveBeenCalled()
65+
66+
wrapper.trigger('mouseleave')
67+
expect(onMouseLeave).toHaveBeenCalled()
68+
})
69+
70+
it('fire change events when value changes', async () => {
71+
const onChange = jest.fn()
72+
const props = {}
73+
const wrapper = mount(
74+
createRadioGroup(props, {
75+
change: onChange,
76+
}),
77+
{ sync: false }
78+
)
79+
let radios = null
80+
await asyncExpect(() => {
81+
radios = wrapper.findAll('input')
82+
// uncontrolled component
83+
wrapper.vm.$refs.radioGroup.stateValue = 'B'
84+
// wrapper.setData({ value: 'B' })
85+
radios.at(0).trigger('change')
86+
expect(onChange.mock.calls.length).toBe(1)
87+
})
88+
await asyncExpect(() => {
89+
expect(wrapper.html()).toMatchSnapshot()
90+
})
91+
await asyncExpect(() => {
92+
// controlled component
93+
wrapper.setProps({ value: 'A' })
94+
radios.at(1).trigger('change')
95+
expect(onChange.mock.calls.length).toBe(2)
96+
})
97+
await asyncExpect(() => {
98+
expect(wrapper.html()).toMatchSnapshot()
99+
})
100+
})
101+
102+
// it('won\'t fire change events when value not changes', async () => {
103+
// const onChange = jest.fn()
104+
105+
// const wrapper = mount(
106+
// createRadioGroup({}, {
107+
// change: onChange,
108+
// }),
109+
// { sync: false }
110+
// )
111+
// const radios = wrapper.findAll('input')
112+
// await asyncExpect(() => {
113+
// // uncontrolled component
114+
// wrapper.vm.$refs.radioGroup.stateValue = 'B'
115+
// radios.at(1).trigger('change')
116+
// expect(onChange.mock.calls.length).toBe(0)
117+
// })
118+
119+
// await asyncExpect(() => {
120+
121+
// }, 0)
122+
123+
// // // controlled component
124+
// // wrapper.setProps({ value: 'A' })
125+
// // radios.at(0).trigger('change')
126+
// // expect(onChange.mock.calls.length).toBe(0)
127+
// })
128+
129+
it('optional should correct render', () => {
130+
const wrapper = mount(
131+
createRadioGroupByOption()
132+
)
133+
const radios = wrapper.findAll('input')
134+
135+
expect(radios.length).toBe(3)
136+
})
137+
138+
it('all children should have a name property', () => {
139+
const GROUP_NAME = 'radiogroup'
140+
const wrapper = mount(
141+
createRadioGroup({ name: GROUP_NAME })
142+
)
143+
expect(wrapper.html()).toMatchSnapshot()
144+
expect(wrapper.findAll('input[type="radio"]').wrappers.forEach((el) => {
145+
expect(el.element.name).toEqual(GROUP_NAME)
146+
}))
147+
})
148+
})

‎components/radio/__tests__/radio.test.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { mount } from '@vue/test-utils'
2+
import { asyncExpect } from '@/tests/utils'
3+
import Radio from '../radio'
4+
import focusTest from '../../../tests/shared/focusTest'
5+
6+
describe('Radio', () => {
7+
focusTest(Radio)
8+
9+
it('should render correctly', () => {
10+
const wrapper = mount({
11+
render () {
12+
return <Radio class='customized'>Test</Radio>
13+
},
14+
})
15+
expect(wrapper.html()).toMatchSnapshot()
16+
})
17+
18+
it('responses hover events', async () => {
19+
const onMouseEnter = jest.fn()
20+
const onMouseLeave = jest.fn()
21+
22+
const wrapper = mount({
23+
render () {
24+
return <Radio
25+
onMouseenter={onMouseEnter}
26+
onMouseleave={onMouseLeave}
27+
/>
28+
},
29+
}, { sync: false })
30+
await asyncExpect(() => {
31+
wrapper.trigger('mouseenter')
32+
})
33+
await asyncExpect(() => {
34+
expect(onMouseEnter).toHaveBeenCalled()
35+
})
36+
wrapper.trigger('mouseleave')
37+
await asyncExpect(() => {
38+
expect(onMouseLeave).toHaveBeenCalled()
39+
})
40+
})
41+
})

‎components/tabs/__tests__/__snapshots__/index.test.js.snap

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Tabs tabPosition remove card 1`] = `
4+
<div class="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line no-flex">
5+
<div role="tablist" tabindex="0" class="ant-tabs-bar">
6+
<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>
7+
<div
8+
class="ant-tabs-nav-wrap">
9+
<div class="ant-tabs-nav-scroll">
10+
<div class="ant-tabs-nav ant-tabs-nav-animated">
11+
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
12+
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">foo</div>
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="ant-tabs-extra-content">xxx</div>
18+
</div>
19+
<div class="ant-tabs-content ant-tabs-content-animated" style="margin-top: 0%;">
20+
<div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">foo</div>
21+
</div>
22+
</div>
23+
`;

‎components/tabs/__tests__/index.test.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { mount } from '@vue/test-utils'
2+
import { asyncExpect } from '@/tests/utils'
3+
import Tabs from '..'
4+
5+
const { TabPane } = Tabs
6+
7+
describe('Tabs', () => {
8+
describe('editable-card', () => {
9+
let handleEdit
10+
let wrapper
11+
12+
beforeEach(() => {
13+
handleEdit = jest.fn()
14+
wrapper = mount({
15+
render () {
16+
return (
17+
<Tabs type='editable-card' onEdit={handleEdit}>
18+
<TabPane tab='foo' key='1'>foo</TabPane>
19+
</Tabs>
20+
)
21+
},
22+
})
23+
})
24+
25+
it('add card', () => {
26+
wrapper.find('.ant-tabs-new-tab').trigger('click')
27+
expect(handleEdit.mock.calls[0][1]).toBe('add')
28+
})
29+
30+
it('remove card', () => {
31+
wrapper.find('.anticon-close').trigger('click')
32+
expect(handleEdit).toBeCalledWith('1', 'remove')
33+
})
34+
})
35+
36+
describe('tabPosition', () => {
37+
it('remove card', () => {
38+
const wrapper = mount({
39+
render () {
40+
return (
41+
<Tabs tabPosition='left' tabBarExtraContent='xxx'>
42+
<TabPane tab='foo' key='1'>foo</TabPane>
43+
</Tabs>
44+
)
45+
},
46+
})
47+
expect(wrapper.html()).toMatchSnapshot()
48+
})
49+
})
50+
})

0 commit comments

Comments
 (0)