Skip to content

Commit 4e60734

Browse files
tangjinzhoutangjinzhou
committed
test: add table sorter & filter test
1 parent 3115538 commit 4e60734

File tree

6 files changed

+595
-9
lines changed

6 files changed

+595
-9
lines changed

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

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
1+
import Vue from 'vue'
2+
import { mount, render } from '@vue/test-utils'
3+
import Table from '..'
4+
5+
describe('Table.filter', () => {
6+
const filterFn = (value, record) => record.name.indexOf(value) !== -1
7+
const column = {
8+
title: 'Name',
9+
dataIndex: 'name',
10+
filters: [
11+
{ text: 'Boy', value: 'boy' },
12+
{ text: 'Girl', value: 'girl' },
13+
{
14+
text: 'Title',
15+
value: 'title',
16+
children: [
17+
{ text: 'Designer', value: 'designer' },
18+
{ text: 'Coder', value: 'coder' },
19+
],
20+
},
21+
],
22+
onFilter: filterFn,
23+
}
24+
25+
const data = [
26+
{ key: 0, name: 'Jack' },
27+
{ key: 1, name: 'Lucy' },
28+
{ key: 2, name: 'Tom' },
29+
{ key: 3, name: 'Jerry' },
30+
]
31+
32+
function getTableOptions (props = {}, listeners = {}) {
33+
return {
34+
propsData: {
35+
columns: [column],
36+
dataSource: data,
37+
pagination: false,
38+
...props,
39+
},
40+
listeners: {
41+
...listeners,
42+
},
43+
sync: false,
44+
}
45+
}
46+
47+
function renderedNames (wrapper) {
48+
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
49+
return row.props().record.name
50+
})
51+
}
52+
53+
it('renders filter correctly', (done) => {
54+
const wrapper = mount(Table, getTableOptions())
55+
Vue.nextTick(() => {
56+
expect(wrapper.html()).toMatchSnapshot()
57+
done()
58+
})
59+
})
60+
61+
it('renders menu correctly', (done) => {
62+
const wrapper = mount(Table, getTableOptions())
63+
Vue.nextTick(() => {
64+
const dropdownWrapper = wrapper.find({ name: 'Trigger' }).vm.renderComponent()
65+
expect(dropdownWrapper.$el.outerHTML).toMatchSnapshot()
66+
done()
67+
})
68+
})
69+
70+
it('renders radio filter correctly', (done) => {
71+
const wrapper = mount(Table, getTableOptions({
72+
columns: [{
73+
...column,
74+
filterMultiple: false,
75+
}],
76+
}))
77+
Vue.nextTick(() => {
78+
const dropdownWrapper = wrapper.find({ name: 'Trigger' }).vm.renderComponent()
79+
expect(dropdownWrapper.$el.outerHTML).toMatchSnapshot()
80+
done()
81+
})
82+
})
83+
84+
it('renders custom content correctly', (done) => {
85+
const wrapper = mount(Table, {
86+
...getTableOptions({
87+
columns: [{
88+
...column,
89+
slots: {
90+
filterDropdown: 'filterDropdown',
91+
},
92+
}],
93+
}),
94+
slots: {
95+
filterDropdown: `<div class='custom-filter-dropdown'>custom filter</div>`,
96+
},
97+
})
98+
99+
Vue.nextTick(() => {
100+
const dropdownWrapper = wrapper.find({ name: 'Trigger' }).vm.renderComponent()
101+
expect(dropdownWrapper.$el.outerHTML).toMatchSnapshot()
102+
done()
103+
})
104+
})
105+
// TODO
106+
// it('can be controlled by filterDropdownVisible', () => {
107+
// const wrapper = mount(Table, getTableOptions({
108+
// columns: [{
109+
// ...column,
110+
// filterDropdownVisible: true,
111+
// }],
112+
// }))
113+
114+
// let dropdown = wrapper.find('Dropdown').at(0)
115+
// expect(dropdown.props().visible).toBe(true)
116+
117+
// wrapper.setProps({
118+
// columns: [{
119+
// ...column,
120+
// filterDropdownVisible: false,
121+
// }],
122+
// })
123+
124+
// dropdown = wrapper.find('Dropdown').at(0)
125+
// expect(dropdown.props().visible).toBe(false)
126+
// })
127+
128+
// it('fires change event when visible change', () => {
129+
// const handleChange = jest.fn()
130+
// const wrapper = mount(Table, getTableOptions({
131+
// columns: [{
132+
// ...column,
133+
// onFilterDropdownVisibleChange: handleChange,
134+
// }],
135+
// }))
136+
137+
// wrapper.find('.ant-dropdown-trigger').at(0).trigger('click')
138+
139+
// expect(handleChange).toBeCalledWith(true)
140+
// })
141+
142+
// it('can be controlled by filteredValue', () => {
143+
// const wrapper = mount(Table, getTableOptions({
144+
// columns: [{
145+
// ...column,
146+
// filteredValue: ['Lucy'],
147+
// }],
148+
// }))
149+
150+
// expect(wrapper.find('tbody tr').length).toBe(1)
151+
// wrapper.setProps({
152+
// columns: [{
153+
// ...column,
154+
// filteredValue: [],
155+
// }],
156+
// })
157+
// expect(wrapper.find('tbody tr').length).toBe(4)
158+
// })
159+
160+
// it('can be controlled by filteredValue null', () => {
161+
// const wrapper = mount(Table, getTableOptions({
162+
// columns: [{
163+
// ...column,
164+
// filteredValue: ['Lucy'],
165+
// }],
166+
// }))
167+
168+
// expect(wrapper.find('tbody tr').length).toBe(1)
169+
// wrapper.setProps({
170+
// columns: [{
171+
// ...column,
172+
// filteredValue: null,
173+
// }],
174+
// })
175+
// expect(wrapper.find('tbody tr').length).toBe(4)
176+
// })
177+
178+
// it('fires change event', () => {
179+
// const handleChange = jest.fn()
180+
// const wrapper = mount(Table, getTableOptions({ onChange: handleChange }))
181+
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
182+
183+
// dropdownWrapper.find('MenuItem').at(0).trigger('click')
184+
// dropdownWrapper.find('.confirm').trigger('click')
185+
186+
// expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
187+
// })
188+
189+
// it('three levels menu', () => {
190+
// const filters = [
191+
// { text: 'Upper', value: 'Upper' },
192+
// { text: 'Lower', value: 'Lower' },
193+
// {
194+
// text: 'Level2',
195+
// value: 'Level2',
196+
// children: [
197+
// { text: 'Large', value: 'Large' },
198+
// { text: 'Small', value: 'Small' },
199+
// {
200+
// text: 'Level3',
201+
// value: 'Level3',
202+
// children: [
203+
// { text: 'Black', value: 'Black' },
204+
// { text: 'White', value: 'White' },
205+
// { text: 'Jack', value: 'Jack' },
206+
// ],
207+
// },
208+
// ],
209+
// },
210+
// ]
211+
// const wrapper = mount(Table, getTableOptions({
212+
// columns: [{
213+
// ...column,
214+
// filters,
215+
// }],
216+
// }))
217+
// jest.useFakeTimers()
218+
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
219+
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).trigger('mouseEnter')
220+
// jest.runAllTimers()
221+
// dropdownWrapper.update()
222+
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).trigger('mouseEnter')
223+
// jest.runAllTimers()
224+
// dropdownWrapper.update()
225+
// dropdownWrapper.find('MenuItem').last().trigger('click')
226+
// dropdownWrapper.find('.confirm').trigger('click')
227+
// wrapper.update()
228+
// expect(renderedNames(wrapper)).toEqual(['Jack'])
229+
// jest.useRealTimers()
230+
// })
231+
232+
// it('works with JSX in controlled mode', () => {
233+
// const { Column } = Table
234+
235+
// const App = {
236+
// data () {
237+
// return {
238+
// filters: {},
239+
// }
240+
// },
241+
// methods: {
242+
// handleChange (pagination, filters) {
243+
// this.setState({ filters })
244+
// },
245+
// },
246+
// render () {
247+
// return (
248+
// <Table dataSource={data} onChange={this.handleChange}>
249+
// <Column
250+
// title='name'
251+
// dataIndex='name'
252+
// key='name'
253+
// filters={[
254+
// { text: 'Jack', value: 'Jack' },
255+
// { text: 'Lucy', value: 'Lucy' },
256+
// ]}
257+
// filteredValue={this.state.filters.name}
258+
// onFilter={filterFn}
259+
// />
260+
// </Table>
261+
// )
262+
// },
263+
// }
264+
265+
// const wrapper = mount(App)
266+
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
267+
268+
// dropdownWrapper.find('MenuItem').at(0).trigger('click')
269+
// dropdownWrapper.find('.confirm').trigger('click')
270+
// wrapper.update()
271+
// expect(renderedNames(wrapper)).toEqual(['Jack'])
272+
273+
// dropdownWrapper.find('.clear').trigger('click')
274+
// wrapper.update()
275+
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
276+
// })
277+
278+
// it('works with grouping columns in controlled mode', () => {
279+
// const columns = [
280+
// {
281+
// title: 'group',
282+
// key: 'group',
283+
// children: [
284+
// {
285+
// title: 'Name',
286+
// dataIndex: 'name',
287+
// key: 'name',
288+
// filters: [
289+
// { text: 'Jack', value: 'Jack' },
290+
// { text: 'Lucy', value: 'Lucy' },
291+
// ],
292+
// onFilter: filterFn,
293+
// filteredValue: ['Jack'],
294+
// },
295+
// {
296+
// title: 'Age',
297+
// dataIndex: 'age',
298+
// key: 'age',
299+
// },
300+
// ],
301+
// },
302+
// ]
303+
// const testData = [
304+
// { key: 0, name: 'Jack', age: 11 },
305+
// { key: 1, name: 'Lucy', age: 20 },
306+
// { key: 2, name: 'Tom', age: 21 },
307+
// { key: 3, name: 'Jerry', age: 22 },
308+
// ]
309+
// const wrapper = mount(Table, {
310+
// columns,
311+
// dataSource: testData,
312+
// })
313+
314+
// expect(renderedNames(wrapper)).toEqual(['Jack'])
315+
// })
316+
317+
// it('confirm filter when dropdown hidden', () => {
318+
// const handleChange = jest.fn()
319+
// const wrapper = mount(Table, getTableOptions({
320+
// columns: [{
321+
// ...column,
322+
// filters: [
323+
// { text: 'Jack', value: 'Jack' },
324+
// { text: 'Lucy', value: 'Lucy' },
325+
// ],
326+
// }],
327+
328+
// }, { change: handleChange }))
329+
330+
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
331+
// wrapper.findAll('.ant-dropdown-menu-item').at(0).trigger('click')
332+
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
333+
334+
// expect(handleChange).toBeCalled()
335+
// })
336+
})

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,6 @@ describe('Table.pagination', () => {
3131
},
3232
sync: false,
3333
}
34-
// return {
35-
// render () {
36-
// return (
37-
// <Table
38-
// {...tableProps}
39-
// />
40-
// )
41-
// },
42-
// }
4334
}
4435

4536
function renderedNames (wrapper) {

0 commit comments

Comments
 (0)