github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update table test

Browse Source
pull/77/merge
tjz 7 years ago
parent ec1999dea4
commit 7ed6885ec6
2 changed files with 262 additions and 134 deletions
Show Stats Download Patch File Download Diff File

284
components/table/__tests__/Table.rowSelection.test.js
Unescape View File

@ -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(() => {
// // https://github.com/ant-design/ant-design/issues/4779 wrapper.findAll('input').wrappers.forEach((checkbox) => {
// it('should not switch pagination when select record', () => { expect(checkbox.vnode.data.attrs.disabled).toBe(true)
// const newData = [] })
// for (let i = 0; i < 20; i += 1) { })
// newData.push({ })
// key: i.toString(),
// name: i.toString(), // https://github.com/ant-design/ant-design/issues/4779
// }) it('should not switch pagination when select record', async () => {
// } const newData = []
// const wrapper = mount(Table, getTableOptions({ for (let i = 0; i < 20; i += 1) {
// rowSelection: {}, newData.push({
// dataSource: newData, key: i.toString(),
// })) name: i.toString(),
// wrapper.find('Pager').last().trigger('click') // switch to second page })
// wrapper.find('input').first().trigger('change', { target: { checked: true }}) }
// wrapper.update() const wrapper = mount(Table, getTableOptions({
// expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19']) rowSelection: {},
// }) dataSource: newData,
}))
// it('highlight selected row', () => { const pager = wrapper.findAll({ name: 'Pager' })
// const wrapper = mount(Table, getTableOptions()) pager.at(pager.length - 1).trigger('click') // switch to second page
// wrapper.find('input').at(1).trigger('change', { target: { checked: true }}) wrapper.findAll('input').at(0).element.checked = true
// expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true) wrapper.findAll('input').at(0).trigger('change')
// }) await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
// it('fix selection column on the left', () => { })
// const wrapper = mount(Table, getTableOptions({ })
// rowSelection: { fixed: true },
// })) it('highlight selected row', async () => {
const wrapper = mount(Table, getTableOptions())
// expect(wrapper).toMatchSnapshot() wrapper.findAll('input').at(1).element.checked = 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', async () => {
const wrapper = mount(Table, getTableOptions({
rowSelection: { fixed: true },
}))
await asyncExpect(() => {
expect(wrapper.html()).toMatchSnapshot()
})
})
}) })

112
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
Unescape View File

@ -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;">

Write Preview
Loading…
Cancel
Save