test: update table test
tjz
parent
ec1999dea4
commit
7ed6885ec6
|
|
@ -132,9 +132,12 @@ describe('Table.rowSelection', () => {
|
||||||
// https://github.com/ant-design/ant-design/issues/4020
|
// https://github.com/ant-design/ant-design/issues/4020
|
||||||
it('handles defaultChecked', async () => {
|
it('handles defaultChecked', async () => {
|
||||||
const rowSelection = {
|
const rowSelection = {
|
||||||
getCheckboxProps: record => ({
|
getCheckboxProps: record => {
|
||||||
defaultChecked: record.key === 0,
|
return {
|
||||||
}),
|
props: {
|
||||||
|
defaultChecked: record.key === 0,
|
||||||
|
}}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
||||||
|
|
@ -145,13 +148,13 @@ describe('Table.rowSelection', () => {
|
||||||
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false)
|
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false)
|
||||||
checkboxs.at(2).element.checked = true
|
checkboxs.at(2).element.checked = true
|
||||||
checkboxs.at(2).trigger('change')
|
checkboxs.at(2).trigger('change')
|
||||||
})
|
}, 0)
|
||||||
|
|
||||||
await asyncExpect(() => {
|
await asyncExpect(() => {
|
||||||
const checkboxs = wrapper.findAll('input')
|
const checkboxs = wrapper.findAll('input')
|
||||||
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
|
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
|
||||||
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true)
|
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true)
|
||||||
})
|
}, 1000)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('can be controlled', async () => {
|
it('can be controlled', async () => {
|
||||||
|
|
@ -268,133 +271,146 @@ describe('Table.rowSelection', () => {
|
||||||
expect(handleSelectInvert).toBeCalledWith([1, 2, 3])
|
expect(handleSelectInvert).toBeCalledWith([1, 2, 3])
|
||||||
})
|
})
|
||||||
|
|
||||||
// it('fires selection event', () => {
|
it('fires selection event', () => {
|
||||||
// const handleSelectOdd = jest.fn()
|
const handleSelectOdd = jest.fn()
|
||||||
// const handleSelectEven = jest.fn()
|
const handleSelectEven = jest.fn()
|
||||||
// const rowSelection = {
|
const rowSelection = {
|
||||||
// selections: [{
|
selections: [{
|
||||||
// key: 'odd',
|
key: 'odd',
|
||||||
// text: '奇数项',
|
text: '奇数项',
|
||||||
// onSelect: handleSelectOdd,
|
onSelect: handleSelectOdd,
|
||||||
// }, {
|
}, {
|
||||||
// key: 'even',
|
key: 'even',
|
||||||
// text: '偶数项',
|
text: '偶数项',
|
||||||
// onSelect: handleSelectEven,
|
onSelect: handleSelectEven,
|
||||||
// }],
|
}],
|
||||||
// }
|
}
|
||||||
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
||||||
|
|
||||||
// const dropdownWrapper = mount({
|
const dropdownWrapper = mount({
|
||||||
// render () {
|
render () {
|
||||||
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||||
// },
|
},
|
||||||
// })
|
}, { sync: false })
|
||||||
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(4)
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(4)
|
||||||
|
|
||||||
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(2).trigger('click')
|
dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(2).trigger('click')
|
||||||
// expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
|
expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
|
||||||
|
|
||||||
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(3).trigger('click')
|
dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(3).trigger('click')
|
||||||
// expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
|
expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
|
||||||
// })
|
})
|
||||||
|
|
||||||
// it('could hide default selection options', () => {
|
it('could hide default selection options', () => {
|
||||||
// const rowSelection = {
|
const rowSelection = {
|
||||||
// hideDefaultSelections: true,
|
hideDefaultSelections: true,
|
||||||
// selections: [{
|
selections: [{
|
||||||
// key: 'odd',
|
key: 'odd',
|
||||||
// text: '奇数项',
|
text: '奇数项',
|
||||||
// }, {
|
}, {
|
||||||
// key: 'even',
|
key: 'even',
|
||||||
// text: '偶数项',
|
text: '偶数项',
|
||||||
// }],
|
}],
|
||||||
// }
|
}
|
||||||
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
||||||
// const dropdownWrapper = mount({
|
const dropdownWrapper = mount({
|
||||||
// render () {
|
render () {
|
||||||
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||||
// },
|
},
|
||||||
// })
|
}, { sync: false })
|
||||||
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2)
|
||||||
// })
|
})
|
||||||
|
|
||||||
// it('handle custom selection onSelect correctly when hide default selection options', () => {
|
it('handle custom selection onSelect correctly when hide default selection options', () => {
|
||||||
// const handleSelectOdd = jest.fn()
|
const handleSelectOdd = jest.fn()
|
||||||
// const handleSelectEven = jest.fn()
|
const handleSelectEven = jest.fn()
|
||||||
// const rowSelection = {
|
const rowSelection = {
|
||||||
// hideDefaultSelections: true,
|
hideDefaultSelections: true,
|
||||||
// selections: [{
|
selections: [{
|
||||||
// key: 'odd',
|
key: 'odd',
|
||||||
// text: '奇数项',
|
text: '奇数项',
|
||||||
// onSelect: handleSelectOdd,
|
onSelect: handleSelectOdd,
|
||||||
// }, {
|
}, {
|
||||||
// key: 'even',
|
key: 'even',
|
||||||
// text: '偶数项',
|
text: '偶数项',
|
||||||
// onSelect: handleSelectEven,
|
onSelect: handleSelectEven,
|
||||||
// }],
|
}],
|
||||||
// }
|
}
|
||||||
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
||||||
|
|
||||||
// const dropdownWrapper = mount({
|
const dropdownWrapper = mount({
|
||||||
// render () {
|
render () {
|
||||||
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||||
// },
|
},
|
||||||
// })
|
}, { sync: false })
|
||||||
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2)
|
||||||
|
|
||||||
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(0).trigger('click')
|
dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(0).trigger('click')
|
||||||
// expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
|
expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
|
||||||
|
|
||||||
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(1).trigger('click')
|
dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(1).trigger('click')
|
||||||
// expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
|
expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
|
||||||
// })
|
})
|
||||||
|
|
||||||
// // https://github.com/ant-design/ant-design/issues/4245
|
// https:// github.com/ant-design/ant-design/issues/4245
|
||||||
// it('handles disabled checkbox correctly when dataSource changes', () => {
|
it('handles disabled checkbox correctly when dataSource changes', async () => {
|
||||||
// const rowSelection = {
|
const rowSelection = {
|
||||||
// getCheckboxProps: record => ({ disabled: record.disabled }),
|
getCheckboxProps: record => {
|
||||||
// }
|
return { props: { disabled: record.disabled }}
|
||||||
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
},
|
||||||
// const newData = [
|
}
|
||||||
// { key: 0, name: 'Jack', disabled: true },
|
const wrapper = mount(Table, getTableOptions({ rowSelection }))
|
||||||
// { key: 1, name: 'Lucy', disabled: true },
|
const newData = [
|
||||||
// ]
|
{ key: 7, name: 'Jack', disabled: true },
|
||||||
// wrapper.setProps({ dataSource: newData })
|
{ key: 8, name: 'Lucy', disabled: true },
|
||||||
// wrapper.find('input').forEach((checkbox) => {
|
]
|
||||||
// expect(checkbox.props().disabled).toBe(true)
|
await asyncExpect(() => {
|
||||||
// })
|
wrapper.setProps({ dataSource: newData })
|
||||||
// })
|
})
|
||||||
|
await asyncExpect(() => {
|
||||||
|
wrapper.findAll('input').wrappers.forEach((checkbox) => {
|
||||||
|
expect(checkbox.vnode.data.attrs.disabled).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// // https://github.com/ant-design/ant-design/issues/4779
|
// https://github.com/ant-design/ant-design/issues/4779
|
||||||
// it('should not switch pagination when select record', () => {
|
it('should not switch pagination when select record', async () => {
|
||||||
// const newData = []
|
const newData = []
|
||||||
// for (let i = 0; i < 20; i += 1) {
|
for (let i = 0; i < 20; i += 1) {
|
||||||
// newData.push({
|
newData.push({
|
||||||
// key: i.toString(),
|
key: i.toString(),
|
||||||
// name: i.toString(),
|
name: i.toString(),
|
||||||
// })
|
})
|
||||||
// }
|
}
|
||||||
// const wrapper = mount(Table, getTableOptions({
|
const wrapper = mount(Table, getTableOptions({
|
||||||
// rowSelection: {},
|
rowSelection: {},
|
||||||
// dataSource: newData,
|
dataSource: newData,
|
||||||
// }))
|
}))
|
||||||
// wrapper.find('Pager').last().trigger('click') // switch to second page
|
const pager = wrapper.findAll({ name: 'Pager' })
|
||||||
// wrapper.find('input').first().trigger('change', { target: { checked: true }})
|
pager.at(pager.length - 1).trigger('click') // switch to second page
|
||||||
// wrapper.update()
|
wrapper.findAll('input').at(0).element.checked = true
|
||||||
// expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
|
wrapper.findAll('input').at(0).trigger('change')
|
||||||
// })
|
await asyncExpect(() => {
|
||||||
|
expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// it('highlight selected row', () => {
|
it('highlight selected row', async () => {
|
||||||
// const wrapper = mount(Table, getTableOptions())
|
const wrapper = mount(Table, getTableOptions())
|
||||||
// wrapper.find('input').at(1).trigger('change', { target: { checked: true }})
|
wrapper.findAll('input').at(1).element.checked = true
|
||||||
// expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true)
|
wrapper.findAll('input').at(1).trigger('change')
|
||||||
// })
|
await asyncExpect(() => {
|
||||||
|
expect(wrapper.findAll('tbody tr').at(0).classes()).toContain('ant-table-row-selected')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// it('fix selection column on the left', () => {
|
it('fix selection column on the left', async () => {
|
||||||
// const wrapper = mount(Table, getTableOptions({
|
const wrapper = mount(Table, getTableOptions({
|
||||||
// rowSelection: { fixed: true },
|
rowSelection: { fixed: true },
|
||||||
// }))
|
}))
|
||||||
|
await asyncExpect(() => {
|
||||||
// expect(wrapper).toMatchSnapshot()
|
expect(wrapper.html()).toMatchSnapshot()
|
||||||
// })
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,117 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||||
|
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-large ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col><col></colgroup><thead class="ant-table-thead"><tr><th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th key="name" class=""><span>Name</span></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="ant-table-tbody">
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||||
|
<!---->Jack</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||||
|
<!---->Lucy</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||||
|
<!---->Tom</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||||
|
<!---->Jerry</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-table-fixed-left">
|
||||||
|
<!---->
|
||||||
|
<div class="ant-table-body-outer">
|
||||||
|
<div class="ant-table-body-inner">
|
||||||
|
<table class="ant-table-fixed">
|
||||||
|
<colgroup>
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead class="ant-table-thead">
|
||||||
|
<tr>
|
||||||
|
<th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="ant-table-tbody">
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-table-row ant-table-row-level-0">
|
||||||
|
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
|
||||||
|
<li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
|
||||||
|
<a class="ant-pagination-item-link"></a>
|
||||||
|
</li>
|
||||||
|
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
|
||||||
|
<a>1</a>
|
||||||
|
</li>
|
||||||
|
<li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
|
||||||
|
<a class="ant-pagination-item-link"></a>
|
||||||
|
</li>
|
||||||
|
<!---->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Table.rowSelection render with default selection correctly 1`] = `
|
exports[`Table.rowSelection render with default selection correctly 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
|
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue