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 more table filter test

pull/29/head
tjz 2018-05-31 22:53:14 +08:00
parent 1fc1100a22
commit 539d838607
1 changed files with 155 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
components/table/__tests__/Table.filter.test.js
View File

@ -2,6 +2,10 @@ import Vue from 'vue'
import { mount, render } from '@vue/test-utils' import { mount, render } from '@vue/test-utils'
import Table from '..' import Table from '..'
function $$ (className) {
return document.body.querySelectorAll(className)
}
describe('Table.filter', () => { describe('Table.filter', () => {
const filterFn = (value, record) => record.name.indexOf(value) !== -1 const filterFn = (value, record) => record.name.indexOf(value) !== -1
const column = { const column = {
@ -115,131 +119,152 @@ describe('Table.filter', () => {
}) })
}) })
// TODO // TODO
// it('can be controlled by filterDropdownVisible', () => { it('can be controlled by filterDropdownVisible', (done) => {
// const wrapper = mount(Table, getTableOptions({ const wrapper = mount(Table, getTableOptions({
// columns: [{ columns: [{
// ...column, ...column,
// filterDropdownVisible: true, filterDropdownVisible: true,
// }], }],
// })) }))
// let dropdown = wrapper.find('Dropdown').at(0) let dropdown = wrapper.find({ name: 'ADropdown' })
// expect(dropdown.props().visible).toBe(true) expect(dropdown.props().visible).toBe(true)
// wrapper.setProps({ wrapper.setProps({
// columns: [{ columns: [{
// ...column, ...column,
// filterDropdownVisible: false, filterDropdownVisible: false,
// }], }],
// }) })
Vue.nextTick(() => {
dropdown = wrapper.find({ name: 'ADropdown' })
expect(dropdown.props().visible).toBe(false)
done()
})
})
// dropdown = wrapper.find('Dropdown').at(0) it('fires change event when visible change', () => {
// expect(dropdown.props().visible).toBe(false) const handleChange = jest.fn()
// }) const wrapper = mount(Table, getTableOptions({
columns: [{
...column,
onFilterDropdownVisibleChange: handleChange,
}],
}))
// it('fires change event when visible change', () => { wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
// const handleChange = jest.fn()
// const wrapper = mount(Table, getTableOptions({
// columns: [{
// ...column,
// onFilterDropdownVisibleChange: handleChange,
// }],
// }))
// wrapper.find('.ant-dropdown-trigger').at(0).trigger('click') expect(handleChange).toBeCalledWith(true)
})
// expect(handleChange).toBeCalledWith(true) it('can be controlled by filteredValue', (done) => {
// }) const wrapper = mount(Table, getTableOptions({
columns: [{
...column,
filteredValue: ['Lucy'],
}],
}))
// it('can be controlled by filteredValue', () => { expect(wrapper.findAll('tbody tr').length).toBe(1)
// const wrapper = mount(Table, getTableOptions({ wrapper.setProps({
// columns: [{ columns: [{
// ...column, ...column,
// filteredValue: ['Lucy'], filteredValue: [],
// }], }],
// })) })
Vue.nextTick(() => {
expect(wrapper.findAll('tbody tr').length).toBe(4)
done()
})
})
// expect(wrapper.find('tbody tr').length).toBe(1) it('can be controlled by filteredValue null', (done) => {
// wrapper.setProps({ const wrapper = mount(Table, getTableOptions({
// columns: [{ columns: [{
// ...column, ...column,
// filteredValue: [], filteredValue: ['Lucy'],
// }], }],
// }) }))
// expect(wrapper.find('tbody tr').length).toBe(4)
// })
// it('can be controlled by filteredValue null', () => { expect(wrapper.findAll('tbody tr').length).toBe(1)
// const wrapper = mount(Table, getTableOptions({ wrapper.setProps({
// columns: [{ columns: [{
// ...column, ...column,
// filteredValue: ['Lucy'], filteredValue: null,
// }], }],
// })) })
Vue.nextTick(() => {
expect(wrapper.findAll('tbody tr').length).toBe(4)
done()
})
})
// expect(wrapper.find('tbody tr').length).toBe(1) it('fires change event', (done) => {
// wrapper.setProps({ const handleChange = jest.fn()
// columns: [{ const wrapper = mount(Table, getTableOptions({}, { change: handleChange }))
// ...column, const dropdownWrapper = mount({
// filteredValue: null, render () {
// }], return wrapper.find({ name: 'Trigger' }).vm.getComponent()
// }) },
// expect(wrapper.find('tbody tr').length).toBe(4) }, { sync: false })
// }) new Promise((reslove) => {
Vue.nextTick(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
reslove()
})
}).then(() => {
Vue.nextTick(() => {
expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
Promise.resolve()
})
}).finally(() => {
done()
})
})
// it('fires change event', () => { it('three levels menu', (done) => {
// const handleChange = jest.fn() const filters = [
// const wrapper = mount(Table, getTableOptions({ onChange: handleChange })) { text: 'Upper', value: 'Upper' },
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()) { text: 'Lower', value: 'Lower' },
{
// dropdownWrapper.find('MenuItem').at(0).trigger('click') text: 'Level2',
// dropdownWrapper.find('.confirm').trigger('click') value: 'Level2',
children: [
// expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {}) { text: 'Large', value: 'Large' },
// }) { text: 'Small', value: 'Small' },
{
// it('three levels menu', () => { text: 'Level3',
// const filters = [ value: 'Level3',
// { text: 'Upper', value: 'Upper' }, children: [
// { text: 'Lower', value: 'Lower' }, { text: 'Black', value: 'Black' },
// { { text: 'White', value: 'White' },
// text: 'Level2', { text: 'Jack', value: 'Jack' },
// value: 'Level2', ],
// children: [ },
// { text: 'Large', value: 'Large' }, ],
// { text: 'Small', value: 'Small' }, },
// { ]
// text: 'Level3', const wrapper = mount(Table, getTableOptions({
// value: 'Level3', columns: [{
// children: [ ...column,
// { text: 'Black', value: 'Black' }, filters,
// { text: 'White', value: 'White' }, }],
// { text: 'Jack', value: 'Jack' }, }))
// ], // jest.useFakeTimers()
// }, const dropdownWrapper = mount({
// ], render () {
// }, return wrapper.find({ name: 'Trigger' }).vm.getComponent()
// ] },
// const wrapper = mount(Table, getTableOptions({ }, { sync: false, attachToDocument: true })
// columns: [{ dropdownWrapper.findAll('.ant-dropdown-menu-submenu-title').at(0).trigger('mouseenter')
// ...column, // jest.runAllTimers()
// filters, // dropdownWrapper.update()
// }], setTimeout(() => {
// })) expect($$('.ant-dropdown-menu-submenu-title')).toHaveLength(2)
// jest.useFakeTimers() done()
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()) }, 1000)
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).trigger('mouseEnter') })
// jest.runAllTimers()
// dropdownWrapper.update()
// dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).trigger('mouseEnter')
// jest.runAllTimers()
// dropdownWrapper.update()
// dropdownWrapper.find('MenuItem').last().trigger('click')
// dropdownWrapper.find('.confirm').trigger('click')
// wrapper.update()
// expect(renderedNames(wrapper)).toEqual(['Jack'])
// jest.useRealTimers()
// })
// it('works with JSX in controlled mode', () => { // it('works with JSX in controlled mode', () => {
// const { Column } = Table // const { Column } = Table
@ -326,23 +351,22 @@ describe('Table.filter', () => {
// expect(renderedNames(wrapper)).toEqual(['Jack']) // expect(renderedNames(wrapper)).toEqual(['Jack'])
// }) // })
// it('confirm filter when dropdown hidden', () => { // it('confirm filter when dropdown hidden', (done) => {
// const handleChange = jest.fn() // const handleChange = jest.fn()
// const wrapper = mount(Table, getTableOptions({ // const wrapper = mount(Table, { ...getTableOptions({
// columns: [{ // columns: [{
// ...column, // ...column,
// filters: [ // filters: [
// { text: 'Jack', value: 'Jack' }, // { text: 'Jack', value: 'Jack' },
// { text: 'Lucy', value: 'Lucy' }, // { text: 'Lucy', value: 'Lucy' },
// ], // ],
// }], // }],
// }, { change: handleChange }), attachToDocument: true })
// }, { change: handleChange })) // wrapper.find('.ant-dropdown-trigger').first().simulate('click')
// wrapper.find('.ant-dropdown-menu-item').first().simulate('click')
// wrapper.find('.ant-dropdown-trigger').first().simulate('click')
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click') // expect(handleChange).toBeCalled()
// wrapper.findAll('.ant-dropdown-menu-item').at(0).trigger('click') // })
// wrapper.findAll('.ant-dropdown-trigger').at(0).trigger('click')
// expect(handleChange).toBeCalled()
// })
}) })