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

test: update table test

pull/77/merge
tjz 7 years ago
parent
9b7f5c2f81
commit
62b698c007
3 changed files with 420 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      components/anchor/__tests__/Anchor.test.js
  2. 400
      components/table/__tests__/Table.rowSelection.test.js
  3. 16
      components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

6
components/anchor/__tests__/Anchor.test.js
Unescape View File

@ -18,8 +18,10 @@ describe('Anchor Render', () => {
Vue.nextTick(() => {
wrapper.find('a[href="#API"]').trigger('click')
wrapper.vm.$refs.anchor.handleScroll()
expect(wrapper.vm.$refs.anchor.$data.activeLink).not.toBe(null)
done()
setTimeout(() => {
expect(wrapper.vm.$refs.anchor.$data.activeLink).not.toBe(null)
done()
}, 1000)
})
})

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

@ -0,0 +1,400 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Table from '..'
describe('Table.rowSelection', () => {
const columns = [{
title: 'Name',
dataIndex: 'name',
}]
const data = [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
]
function getTableOptions (props = {}, listeners = {}) {
return {
propsData: {
columns,
dataSource: data,
rowSelection: {},
...props,
},
listeners: {
...listeners,
},
sync: false,
attachedToDocument: true,
}
}
function renderedNames (wrapper) {
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
return row.props().record.name
})
}
function getStore (wrapper) {
return wrapper.vm._vnode.componentInstance.store
}
it('select by checkbox', async () => {
const wrapper = mount(Table, getTableOptions())
const checkboxes = wrapper.findAll('input')
const checkboxAll = checkboxes.at(0)
checkboxAll.element.checked = true
checkboxAll.trigger('change')
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [0, 1, 2, 3],
selectionDirty: true,
})
})
checkboxes.at(1).element.checked = false
checkboxes.at(1).trigger('change')
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [1, 2, 3],
selectionDirty: true,
})
})
checkboxes.at(1).element.checked = true
checkboxes.at(1).trigger('change')
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [1, 2, 3, 0],
selectionDirty: true,
})
})
})
it('select by radio', async () => {
const wrapper = mount(Table, getTableOptions({ rowSelection: { type: 'radio' }}))
const radios = wrapper.findAll('input')
expect(radios.length).toBe(4)
radios.at(0).element.checked = true
radios.at(0).trigger('change')
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [0],
selectionDirty: true,
})
})
radios.at(radios.length - 1).element.checked = true
radios.at(radios.length - 1).trigger('change')
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [3],
selectionDirty: true,
})
})
})
it('pass getCheckboxProps to checkbox', () => {
const rowSelection = {
getCheckboxProps: record => ({ props: {
disabled: record.name === 'Lucy',
name: record.name,
}}),
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const checkboxes = wrapper.findAll('input').wrappers
expect(checkboxes[1].vnode.data.attrs.disabled).toBe(false)
expect(checkboxes[1].vnode.data.attrs.name).toEqual(data[0].name)
expect(checkboxes[2].vnode.data.attrs.disabled).toBe(true)
expect(checkboxes[2].vnode.data.attrs.name).toEqual(data[1].name)
})
it('works with pagination', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 2 }}))
const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' })
const pagers = wrapper.findAll({ name: 'Pager' })
checkboxAll.find('input').element.checked = true
checkboxAll.find('input').trigger('change')
await asyncExpect(() => {
expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false })
})
pagers.at(1).trigger('click')
await asyncExpect(() => {
expect(checkboxAll.vm.$data).toEqual({ checked: false, indeterminate: false })
})
pagers.at(0).trigger('click')
await asyncExpect(() => {
expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false })
})
})
// https://github.com/ant-design/ant-design/issues/4020
it('handles defaultChecked', async () => {
const rowSelection = {
getCheckboxProps: record => ({
defaultChecked: record.key === 0,
}),
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
await asyncExpect(() => {
const checkboxs = wrapper.findAll('input')
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false)
checkboxs.at(2).element.checked = true
checkboxs.at(2).trigger('change')
})
await asyncExpect(() => {
const checkboxs = wrapper.findAll('input')
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true)
})
})
it('can be controlled', async () => {
const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] }}))
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [0],
selectionDirty: false,
})
wrapper.setProps({ rowSelection: { selectedRowKeys: [1] }})
await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({
selectedRowKeys: [1],
selectionDirty: false,
})
})
})
it('fires change & select events', async () => {
const handleChange = jest.fn()
const handleSelect = jest.fn()
const rowSelection = {
onChange: handleChange,
onSelect: handleSelect,
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const checkboxs = wrapper.findAll('input')
checkboxs.at(checkboxs.length - 1).element.checked = true
checkboxs.at(checkboxs.length - 1).trigger('change')
await asyncExpect(() => {
expect(handleChange).toBeCalledWith([3], [{ key: 3, name: 'Jerry' }])
expect(handleSelect.mock.calls.length).toBe(1)
expect(handleSelect.mock.calls[0][0]).toEqual({ key: 3, name: 'Jerry' })
expect(handleSelect.mock.calls[0][1]).toEqual(true)
expect(handleSelect.mock.calls[0][2]).toEqual([{ key: 3, name: 'Jerry' }])
})
})
it('fires selectAll event', async () => {
const handleSelectAll = jest.fn()
const rowSelection = {
onSelectAll: handleSelectAll,
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const checkboxs = wrapper.findAll('input')
checkboxs.at(0).element.checked = true
checkboxs.at(0).trigger('change')
await asyncExpect(() => {
expect(handleSelectAll).toBeCalledWith(true, data, data)
})
checkboxs.at(0).element.checked = false
checkboxs.at(0).trigger('change')
await asyncExpect(() => {
expect(handleSelectAll).toBeCalledWith(false, [], data)
})
})
it('render with default selection correctly', async () => {
const rowSelection = {
selections: true,
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
await asyncExpect(() => {
expect(dropdownWrapper.html()).toMatchSnapshot()
})
await asyncExpect(() => {
})
})
it('click select all selection', () => {
const handleSelectAll = jest.fn()
const rowSelection = {
onSelectAll: handleSelectAll,
selections: true,
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(0).trigger('click')
expect(handleSelectAll).toBeCalledWith(true, data, data)
})
it('fires selectInvert event', () => {
const handleSelectInvert = jest.fn()
const rowSelection = {
onSelectInvert: handleSelectInvert,
selections: true,
}
const wrapper = mount(Table, getTableOptions({ rowSelection }))
const checkboxes = wrapper.findAll('input')
checkboxes.at(1).element.checked = true
checkboxes.at(1).trigger('change')
const dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
const div = dropdownWrapper.findAll('.ant-dropdown-menu-item > div')
div.at(div.length - 1).trigger('click')
expect(handleSelectInvert).toBeCalledWith([1, 2, 3])
})
// it('fires selection event', () => {
// const handleSelectOdd = jest.fn()
// const handleSelectEven = jest.fn()
// const rowSelection = {
// selections: [{
// key: 'odd',
// text: '奇数项',
// onSelect: handleSelectOdd,
// }, {
// key: 'even',
// text: '偶数项',
// onSelect: handleSelectEven,
// }],
// }
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
// const dropdownWrapper = mount({
// render () {
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
// },
// })
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(4)
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(2).trigger('click')
// expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(3).trigger('click')
// expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
// })
// it('could hide default selection options', () => {
// const rowSelection = {
// hideDefaultSelections: true,
// selections: [{
// key: 'odd',
// text: '奇数项',
// }, {
// key: 'even',
// text: '偶数项',
// }],
// }
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
// const dropdownWrapper = mount({
// render () {
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
// },
// })
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
// })
// it('handle custom selection onSelect correctly when hide default selection options', () => {
// const handleSelectOdd = jest.fn()
// const handleSelectEven = jest.fn()
// const rowSelection = {
// hideDefaultSelections: true,
// selections: [{
// key: 'odd',
// text: '奇数项',
// onSelect: handleSelectOdd,
// }, {
// key: 'even',
// text: '偶数项',
// onSelect: handleSelectEven,
// }],
// }
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
// const dropdownWrapper = mount({
// render () {
// return wrapper.find({ name: 'Trigger' }).vm.getComponent()
// },
// })
// expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(0).trigger('click')
// expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
// dropdownWrapper.find('.ant-dropdown-menu-item > div').at(1).trigger('click')
// expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
// })
// // https://github.com/ant-design/ant-design/issues/4245
// it('handles disabled checkbox correctly when dataSource changes', () => {
// const rowSelection = {
// getCheckboxProps: record => ({ disabled: record.disabled }),
// }
// const wrapper = mount(Table, getTableOptions({ rowSelection }))
// const newData = [
// { key: 0, name: 'Jack', disabled: true },
// { key: 1, name: 'Lucy', disabled: true },
// ]
// wrapper.setProps({ dataSource: newData })
// wrapper.find('input').forEach((checkbox) => {
// expect(checkbox.props().disabled).toBe(true)
// })
// })
// // https://github.com/ant-design/ant-design/issues/4779
// it('should not switch pagination when select record', () => {
// const newData = []
// for (let i = 0; i < 20; i += 1) {
// newData.push({
// key: i.toString(),
// name: i.toString(),
// })
// }
// const wrapper = mount(Table, getTableOptions({
// rowSelection: {},
// dataSource: newData,
// }))
// wrapper.find('Pager').last().trigger('click') // switch to second page
// wrapper.find('input').first().trigger('change', { target: { checked: true }})
// wrapper.update()
// expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
// })
// it('highlight selected row', () => {
// const wrapper = mount(Table, getTableOptions())
// wrapper.find('input').at(1).trigger('change', { target: { checked: true }})
// expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true)
// })
// it('fix selection column on the left', () => {
// const wrapper = mount(Table, getTableOptions({
// rowSelection: { fixed: true },
// }))
// expect(wrapper).toMatchSnapshot()
// })
})

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

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table.rowSelection render with default selection correctly 1`] = `
<div>
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
<ul class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content" role="menu" aria-activedescendant="" tabindex="0">
<li role="menuitem" class="ant-dropdown-menu-item">
<div>Select current page</div>
</li>
<li role="menuitem" class="ant-dropdown-menu-item">
<div>Invert current page</div>
</li>
</ul>
</div>
</div>
`;
Write Preview
Loading…
Cancel
Save