Skip to content

Commit 6b47fae

Browse files
tangjinzhoutangjinzhou
committed
test: add table selectionbox test
1 parent e410dd4 commit 6b47fae

File tree

5 files changed

+250
-84
lines changed

5 files changed

+250
-84
lines changed

‎components/checkbox/Checkbox.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default {
1515
isGroup: Boolean,
1616
value: [String, Number, Boolean],
1717
name: String,
18+
id: String,
1819
indeterminate: Boolean,
1920
type: PropTypes.string.def('checkbox'),
2021
autoFocus: Boolean,
@@ -113,6 +114,7 @@ export default {
113114
checkboxClass, name, $slots, sChecked,
114115
onFocus,
115116
onBlur,
117+
id,
116118
} = this
117119
const {
118120
prefixCls,
@@ -136,7 +138,7 @@ export default {
136138
<span class={checkboxClass}>
137139
<input name={name} type='checkbox' disabled={disabled}
138140
class={`${prefixCls}-input`} checked={sChecked}
139-
onChange={onChange} ref='input'
141+
onChange={onChange} ref='input' id={id}
140142
onFocus={onFocus}
141143
onBlur={onBlur}
142144
/>

‎components/radio/Radio.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default {
1313
isGroup: Boolean,
1414
value: PropTypes.any,
1515
name: String,
16+
id: String,
1617
},
1718
model: {
1819
prop: 'checked',
@@ -87,13 +88,13 @@ export default {
8788
},
8889
},
8990
render () {
90-
const { classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
91+
const { id, classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
9192
return (
9293
<label class={classes}>
9394
<span class={checkboxClass}>
9495
<input name={name} type='radio' disabled={disabled}
9596
class={`${prefixCls}-input`} checked={stateChecked}
96-
onChange={handleChange}
97+
onChange={handleChange} id={id}
9798
/>
9899
<span class={`${prefixCls}-inner`} />
99100
</span>

‎components/table/__tests__/SelectionBox.test.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import Vue from 'vue'
2+
import { mount } from '@vue/test-utils'
3+
import createStore from '../createStore'
4+
import SelectionBox from '../SelectionBox'
5+
6+
const getDefaultStore = (selectedRowKeys) => {
7+
return createStore({
8+
selectedRowKeys: selectedRowKeys || [],
9+
selectionDirty: false,
10+
})
11+
}
12+
13+
describe('SelectionBox', () => {
14+
it('unchecked by selectedRowKeys ', () => {
15+
const wrapper = mount(SelectionBox, {
16+
propsData: {
17+
store: getDefaultStore(),
18+
rowIndex: '1',
19+
disabled: false,
20+
onChange: () => {},
21+
defaultSelection: [],
22+
},
23+
listeners: {
24+
change: () => {},
25+
},
26+
sync: false,
27+
})
28+
29+
expect(wrapper.vm.$data).toEqual({ checked: false })
30+
})
31+
32+
it('checked by selectedRowKeys ', () => {
33+
const wrapper = mount(SelectionBox, {
34+
propsData: {
35+
store: getDefaultStore(['1']),
36+
rowIndex: '1',
37+
disabled: false,
38+
onChange: () => {},
39+
defaultSelection: [],
40+
},
41+
listeners: {
42+
change: () => {},
43+
},
44+
sync: false,
45+
})
46+
47+
expect(wrapper.vm.$data).toEqual({ checked: true })
48+
})
49+
50+
it('checked by defaultSelection', () => {
51+
const wrapper = mount(SelectionBox, {
52+
propsData: {
53+
store: getDefaultStore(),
54+
rowIndex: '1',
55+
disabled: false,
56+
onChange: () => {},
57+
defaultSelection: ['1'],
58+
},
59+
listeners: {
60+
change: () => {},
61+
},
62+
sync: false,
63+
})
64+
65+
expect(wrapper.vm.$data).toEqual({ checked: true })
66+
})
67+
68+
it('checked when store change', () => {
69+
const store = getDefaultStore()
70+
const wrapper = mount(SelectionBox, {
71+
propsData: {
72+
store: store,
73+
rowIndex: '1',
74+
disabled: false,
75+
defaultSelection: [],
76+
},
77+
listeners: {
78+
change: () => {},
79+
},
80+
sync: false,
81+
})
82+
83+
store.setState({
84+
selectedRowKeys: ['1'],
85+
selectionDirty: true,
86+
})
87+
88+
expect(wrapper.vm.$data).toEqual({ checked: true })
89+
})
90+
91+
it('passes props to Checkbox', (done) => {
92+
const checkboxProps = {
93+
name: 'testName',
94+
id: 'testId',
95+
}
96+
const wrapper = mount(SelectionBox, {
97+
propsData: {
98+
store: getDefaultStore(),
99+
rowIndex: '1',
100+
disabled: false,
101+
defaultSelection: ['1'],
102+
...checkboxProps,
103+
},
104+
listeners: {
105+
change: () => {},
106+
},
107+
sync: false,
108+
})
109+
Vue.nextTick(() => {
110+
wrapper.findAll({ name: 'ACheckbox' }).wrappers.forEach((box) => {
111+
expect(box.props().name).toEqual(checkboxProps.name)
112+
expect(box.props().id).toEqual(checkboxProps.id)
113+
})
114+
done()
115+
})
116+
})
117+
118+
it('passes props to Radios', (done) => {
119+
const radioProps = {
120+
name: 'testName',
121+
id: 'testId',
122+
}
123+
const wrapper = mount(SelectionBox, {
124+
propsData: {
125+
store: getDefaultStore(),
126+
rowIndex: '1',
127+
disabled: false,
128+
defaultSelection: ['1'],
129+
type: 'radio',
130+
...radioProps,
131+
},
132+
listeners: {
133+
change: () => {},
134+
},
135+
sync: false,
136+
})
137+
Vue.nextTick(() => {
138+
wrapper.findAll({ name: 'ARadio' }).wrappers.forEach((radio) => {
139+
expect(radio.props().name).toEqual(radioProps.name)
140+
expect(radio.props().id).toEqual(radioProps.id)
141+
})
142+
done()
143+
})
144+
})
145+
})

‎components/table/__tests__/Table.filter.test.js

Lines changed: 98 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import { mount, render } from '@vue/test-utils'
2+
import { mount } from '@vue/test-utils'
33
import Table from '..'
44

55
function $$ (className) {
@@ -266,90 +266,107 @@ describe('Table.filter', () => {
266266
}, 1000)
267267
})
268268

269-
// it('works with JSX in controlled mode', () => {
270-
// const { Column } = Table
269+
it('works with JSX in controlled mode', (done) => {
270+
const { Column } = Table
271271

272-
// const App = {
273-
// data () {
274-
// return {
275-
// filters: {},
276-
// }
277-
// },
278-
// methods: {
279-
// handleChange (pagination, filters) {
280-
// this.setState({ filters })
281-
// },
282-
// },
283-
// render () {
284-
// return (
285-
// <Table dataSource={data} onChange={this.handleChange}>
286-
// <Column
287-
// title='name'
288-
// dataIndex='name'
289-
// key='name'
290-
// filters={[
291-
// { text: 'Jack', value: 'Jack' },
292-
// { text: 'Lucy', value: 'Lucy' },
293-
// ]}
294-
// filteredValue={this.state.filters.name}
295-
// onFilter={filterFn}
296-
// />
297-
// </Table>
298-
// )
299-
// },
300-
// }
301-
302-
// const wrapper = mount(App)
303-
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
304-
305-
// dropdownWrapper.find('MenuItem').at(0).trigger('click')
306-
// dropdownWrapper.find('.confirm').trigger('click')
307-
// wrapper.update()
308-
// expect(renderedNames(wrapper)).toEqual(['Jack'])
272+
const App = {
273+
data () {
274+
return {
275+
filters: {},
276+
}
277+
},
278+
methods: {
279+
handleChange (pagination, filters) {
280+
this.filters = filters
281+
},
282+
},
283+
render () {
284+
return (
285+
<Table dataSource={data} onChange={this.handleChange}>
286+
<Column
287+
title='name'
288+
dataIndex='name'
289+
key='name'
290+
filters={[
291+
{ text: 'Jack', value: 'Jack' },
292+
{ text: 'Lucy', value: 'Lucy' },
293+
]}
294+
filteredValue={this.filters.name}
295+
onFilter={filterFn}
296+
/>
297+
</Table>
298+
)
299+
},
300+
}
309301

310-
// dropdownWrapper.find('.clear').trigger('click')
311-
// wrapper.update()
312-
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
313-
// })
302+
const wrapper = mount(App, { sync: false })
303+
const dropdownWrapper = mount({
304+
render () {
305+
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
306+
},
307+
}, { sync: false, attachToDocument: true })
314308

315-
// it('works with grouping columns in controlled mode', () => {
316-
// const columns = [
317-
// {
318-
// title: 'group',
319-
// key: 'group',
320-
// children: [
321-
// {
322-
// title: 'Name',
323-
// dataIndex: 'name',
324-
// key: 'name',
325-
// filters: [
326-
// { text: 'Jack', value: 'Jack' },
327-
// { text: 'Lucy', value: 'Lucy' },
328-
// ],
329-
// onFilter: filterFn,
330-
// filteredValue: ['Jack'],
331-
// },
332-
// {
333-
// title: 'Age',
334-
// dataIndex: 'age',
335-
// key: 'age',
336-
// },
337-
// ],
338-
// },
339-
// ]
340-
// const testData = [
341-
// { key: 0, name: 'Jack', age: 11 },
342-
// { key: 1, name: 'Lucy', age: 20 },
343-
// { key: 2, name: 'Tom', age: 21 },
344-
// { key: 3, name: 'Jerry', age: 22 },
345-
// ]
346-
// const wrapper = mount(Table, {
347-
// columns,
348-
// dataSource: testData,
349-
// })
309+
new Promise((reslove) => {
310+
Vue.nextTick(() => {
311+
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
312+
dropdownWrapper.find('.confirm').trigger('click')
313+
reslove()
314+
})
315+
}).then(() => {
316+
expect(renderedNames(wrapper)).toEqual(['Jack'])
317+
dropdownWrapper.find('.clear').trigger('click')
318+
setTimeout(() => {
319+
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
320+
Promise.resolve()
321+
}, 0)
322+
}).finally(() => {
323+
done()
324+
})
325+
})
350326

351-
// expect(renderedNames(wrapper)).toEqual(['Jack'])
352-
// })
327+
it('works with grouping columns in controlled mode', (done) => {
328+
const columns = [
329+
{
330+
title: 'group',
331+
key: 'group',
332+
children: [
333+
{
334+
title: 'Name',
335+
dataIndex: 'name',
336+
key: 'name',
337+
filters: [
338+
{ text: 'Jack', value: 'Jack' },
339+
{ text: 'Lucy', value: 'Lucy' },
340+
],
341+
onFilter: filterFn,
342+
filteredValue: ['Jack'],
343+
},
344+
{
345+
title: 'Age',
346+
dataIndex: 'age',
347+
key: 'age',
348+
},
349+
],
350+
},
351+
]
352+
const testData = [
353+
{ key: 0, name: 'Jack', age: 11 },
354+
{ key: 1, name: 'Lucy', age: 20 },
355+
{ key: 2, name: 'Tom', age: 21 },
356+
{ key: 3, name: 'Jerry', age: 22 },
357+
]
358+
const wrapper = mount(Table, {
359+
propsData: {
360+
columns,
361+
dataSource: testData,
362+
},
363+
sync: false,
364+
})
365+
Vue.nextTick(() => {
366+
expect(renderedNames(wrapper)).toEqual(['Jack'])
367+
done()
368+
})
369+
})
353370

354371
// it('confirm filter when dropdown hidden', (done) => {
355372
// const handleChange = jest.fn()

‎components/table/interface.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ export const SelectionBoxProps = {
173173
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
174174
name: PropTypes.string,
175175
disabled: PropTypes.bool,
176+
id: PropTypes.string,
176177
// onChange: React.ChangeEventHandler<HTMLInputElement>;
177178
}
178179

0 commit comments

Comments
 (0)