Skip to content

Commit e410dd4

Browse files
tangjinzhoutangjinzhou
committed
test: add more table filter test
1 parent ab00840 commit e410dd4

File tree

1 file changed

+157
-133
lines changed

1 file changed

+157
-133
lines changed

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

Lines changed: 157 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import Vue from 'vue'
22
import { mount, render } from '@vue/test-utils'
33
import Table from '..'
44

5+
function $$ (className) {
6+
return document.body.querySelectorAll(className)
7+
}
8+
59
describe('Table.filter', () => {
610
const filterFn = (value, record) => record.name.indexOf(value) !== -1
711
const column = {
@@ -115,131 +119,152 @@ describe('Table.filter', () => {
115119
})
116120
})
117121
// TODO
118-
// it('can be controlled by filterDropdownVisible', () => {
119-
// const wrapper = mount(Table, getTableOptions({
120-
// columns: [{
121-
// ...column,
122-
// filterDropdownVisible: true,
123-
// }],
124-
// }))
125-
126-
// let dropdown = wrapper.find('Dropdown').at(0)
127-
// expect(dropdown.props().visible).toBe(true)
128-
129-
// wrapper.setProps({
130-
// columns: [{
131-
// ...column,
132-
// filterDropdownVisible: false,
133-
// }],
134-
// })
135-
136-
// dropdown = wrapper.find('Dropdown').at(0)
137-
// expect(dropdown.props().visible).toBe(false)
138-
// })
122+
it('can be controlled by filterDropdownVisible', (done) => {
123+
const wrapper = mount(Table, getTableOptions({
124+
columns: [{
125+
...column,
126+
filterDropdownVisible: true,
127+
}],
128+
}))
139129

140-
// it('fires change event when visible change', () => {
141-
// const handleChange = jest.fn()
142-
// const wrapper = mount(Table, getTableOptions({
143-
// columns: [{
144-
// ...column,
145-
// onFilterDropdownVisibleChange: handleChange,
146-
// }],
147-
// }))
130+
let dropdown = wrapper.find({ name: 'ADropdown' })
131+
expect(dropdown.props().visible).toBe(true)
148132

149-
// wrapper.find('.ant-dropdown-trigger').at(0).trigger('click')
133+
wrapper.setProps({
134+
columns: [{
135+
...column,
136+
filterDropdownVisible: false,
137+
}],
138+
})
139+
Vue.nextTick(() => {
140+
dropdown = wrapper.find({ name: 'ADropdown' })
141+
expect(dropdown.props().visible).toBe(false)
142+
done()
143+
})
144+
})
150145

151-
// expect(handleChange).toBeCalledWith(true)
152-
// })
146+
it('fires change event when visible change', () => {
147+
const handleChange = jest.fn()
148+
const wrapper = mount(Table, getTableOptions({
149+
columns: [{
150+
...column,
151+
onFilterDropdownVisibleChange: handleChange,
152+
}],
153+
}))
153154

154-
// it('can be controlled by filteredValue', () => {
155-
// const wrapper = mount(Table, getTableOptions({
156-
// columns: [{
157-
// ...column,
158-
// filteredValue: ['Lucy'],
159-
// }],
160-
// }))
155+
wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
161156

162-
// expect(wrapper.find('tbody tr').length).toBe(1)
163-
// wrapper.setProps({
164-
// columns: [{
165-
// ...column,
166-
// filteredValue: [],
167-
// }],
168-
// })
169-
// expect(wrapper.find('tbody tr').length).toBe(4)
170-
// })
157+
expect(handleChange).toBeCalledWith(true)
158+
})
171159

172-
// it('can be controlled by filteredValue null', () => {
173-
// const wrapper = mount(Table, getTableOptions({
174-
// columns: [{
175-
// ...column,
176-
// filteredValue: ['Lucy'],
177-
// }],
178-
// }))
160+
it('can be controlled by filteredValue', (done) => {
161+
const wrapper = mount(Table, getTableOptions({
162+
columns: [{
163+
...column,
164+
filteredValue: ['Lucy'],
165+
}],
166+
}))
179167

180-
// expect(wrapper.find('tbody tr').length).toBe(1)
181-
// wrapper.setProps({
182-
// columns: [{
183-
// ...column,
184-
// filteredValue: null,
185-
// }],
186-
// })
187-
// expect(wrapper.find('tbody tr').length).toBe(4)
188-
// })
168+
expect(wrapper.findAll('tbody tr').length).toBe(1)
169+
wrapper.setProps({
170+
columns: [{
171+
...column,
172+
filteredValue: [],
173+
}],
174+
})
175+
Vue.nextTick(() => {
176+
expect(wrapper.findAll('tbody tr').length).toBe(4)
177+
done()
178+
})
179+
})
189180

190-
// it('fires change event', () => {
191-
// const handleChange = jest.fn()
192-
// const wrapper = mount(Table, getTableOptions({ onChange: handleChange }))
193-
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
181+
it('can be controlled by filteredValue null', (done) => {
182+
const wrapper = mount(Table, getTableOptions({
183+
columns: [{
184+
...column,
185+
filteredValue: ['Lucy'],
186+
}],
187+
}))
194188

195-
// dropdownWrapper.find('MenuItem').at(0).trigger('click')
196-
// dropdownWrapper.find('.confirm').trigger('click')
189+
expect(wrapper.findAll('tbody tr').length).toBe(1)
190+
wrapper.setProps({
191+
columns: [{
192+
...column,
193+
filteredValue: null,
194+
}],
195+
})
196+
Vue.nextTick(() => {
197+
expect(wrapper.findAll('tbody tr').length).toBe(4)
198+
done()
199+
})
200+
})
197201

198-
// expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
199-
// })
202+
it('fires change event', (done) => {
203+
const handleChange = jest.fn()
204+
const wrapper = mount(Table, getTableOptions({}, { change: handleChange }))
205+
const dropdownWrapper = mount({
206+
render () {
207+
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
208+
},
209+
}, { sync: false })
210+
new Promise((reslove) => {
211+
Vue.nextTick(() => {
212+
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
213+
dropdownWrapper.find('.confirm').trigger('click')
214+
reslove()
215+
})
216+
}).then(() => {
217+
Vue.nextTick(() => {
218+
expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
219+
Promise.resolve()
220+
})
221+
}).finally(() => {
222+
done()
223+
})
224+
})
200225

201-
// it('three levels menu', () => {
202-
// const filters = [
203-
// { text: 'Upper', value: 'Upper' },
204-
// { text: 'Lower', value: 'Lower' },
205-
// {
206-
// text: 'Level2',
207-
// value: 'Level2',
208-
// children: [
209-
// { text: 'Large', value: 'Large' },
210-
// { text: 'Small', value: 'Small' },
211-
// {
212-
// text: 'Level3',
213-
// value: 'Level3',
214-
// children: [
215-
// { text: 'Black', value: 'Black' },
216-
// { text: 'White', value: 'White' },
217-
// { text: 'Jack', value: 'Jack' },
218-
// ],
219-
// },
220-
// ],
221-
// },
222-
// ]
223-
// const wrapper = mount(Table, getTableOptions({
224-
// columns: [{
225-
// ...column,
226-
// filters,
227-
// }],
228-
// }))
229-
// jest.useFakeTimers()
230-
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
231-
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).trigger('mouseEnter')
232-
// jest.runAllTimers()
233-
// dropdownWrapper.update()
234-
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).trigger('mouseEnter')
235-
// jest.runAllTimers()
236-
// dropdownWrapper.update()
237-
// dropdownWrapper.find('MenuItem').last().trigger('click')
238-
// dropdownWrapper.find('.confirm').trigger('click')
239-
// wrapper.update()
240-
// expect(renderedNames(wrapper)).toEqual(['Jack'])
241-
// jest.useRealTimers()
242-
// })
226+
it('three levels menu', (done) => {
227+
const filters = [
228+
{ text: 'Upper', value: 'Upper' },
229+
{ text: 'Lower', value: 'Lower' },
230+
{
231+
text: 'Level2',
232+
value: 'Level2',
233+
children: [
234+
{ text: 'Large', value: 'Large' },
235+
{ text: 'Small', value: 'Small' },
236+
{
237+
text: 'Level3',
238+
value: 'Level3',
239+
children: [
240+
{ text: 'Black', value: 'Black' },
241+
{ text: 'White', value: 'White' },
242+
{ text: 'Jack', value: 'Jack' },
243+
],
244+
},
245+
],
246+
},
247+
]
248+
const wrapper = mount(Table, getTableOptions({
249+
columns: [{
250+
...column,
251+
filters,
252+
}],
253+
}))
254+
// jest.useFakeTimers()
255+
const dropdownWrapper = mount({
256+
render () {
257+
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
258+
},
259+
}, { sync: false, attachToDocument: true })
260+
dropdownWrapper.findAll('.ant-dropdown-menu-submenu-title').at(0).trigger('mouseenter')
261+
// jest.runAllTimers()
262+
// dropdownWrapper.update()
263+
setTimeout(() => {
264+
expect($$('.ant-dropdown-menu-submenu-title')).toHaveLength(2)
265+
done()
266+
}, 1000)
267+
})
243268

244269
// it('works with JSX in controlled mode', () => {
245270
// const { Column } = Table
@@ -326,23 +351,22 @@ describe('Table.filter', () => {
326351
// expect(renderedNames(wrapper)).toEqual(['Jack'])
327352
// })
328353

329-
// it('confirm filter when dropdown hidden', () => {
330-
// const handleChange = jest.fn()
331-
// const wrapper = mount(Table, getTableOptions({
332-
// columns: [{
333-
// ...column,
334-
// filters: [
335-
// { text: 'Jack', value: 'Jack' },
336-
// { text: 'Lucy', value: 'Lucy' },
337-
// ],
338-
// }],
339-
340-
// }, { change: handleChange }))
341-
342-
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
343-
// wrapper.findAll('.ant-dropdown-menu-item').at(0).trigger('click')
344-
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
345-
346-
// expect(handleChange).toBeCalled()
347-
// })
354+
// it('confirm filter when dropdown hidden', (done) => {
355+
// const handleChange = jest.fn()
356+
// const wrapper = mount(Table, { ...getTableOptions({
357+
// columns: [{
358+
// ...column,
359+
// filters: [
360+
// { text: 'Jack', value: 'Jack' },
361+
// { text: 'Lucy', value: 'Lucy' },
362+
// ],
363+
// }],
364+
// }, { change: handleChange }), attachToDocument: true })
365+
366+
// wrapper.find('.ant-dropdown-trigger').first().simulate('click')
367+
// wrapper.find('.ant-dropdown-menu-item').first().simulate('click')
368+
// wrapper.find('.ant-dropdown-trigger').first().simulate('click')
369+
370+
// expect(handleChange).toBeCalled()
371+
// })
348372
})

0 commit comments

Comments
 (0)