103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
|
import { shallowMount as shallow, mount } from '@vue/test-utils'
|
||
|
|
import Table from '..'
|
||
|
|
import Vue from 'vue'
|
||
|
|
|
||
|
|
const { Column, ColumnGroup } = Table
|
||
|
|
|
||
|
|
describe('Table', () => {
|
||
|
|
it('renders JSX correctly', (done) => {
|
||
|
|
const data = [{
|
||
|
|
key: '1',
|
||
|
|
firstName: 'John',
|
||
|
|
lastName: 'Brown',
|
||
|
|
age: 32,
|
||
|
|
}, {
|
||
|
|
key: '2',
|
||
|
|
firstName: 'Jim',
|
||
|
|
lastName: 'Green',
|
||
|
|
age: 42,
|
||
|
|
}]
|
||
|
|
|
||
|
|
const wrapper = mount({
|
||
|
|
render () {
|
||
|
|
return (
|
||
|
|
<Table dataSource={data} pagination={false}>
|
||
|
|
<ColumnGroup title='Name'>
|
||
|
|
<Column
|
||
|
|
title='First Name'
|
||
|
|
dataIndex='firstName'
|
||
|
|
key='firstName'
|
||
|
|
/>
|
||
|
|
<Column
|
||
|
|
title='Last Name'
|
||
|
|
dataIndex='lastName'
|
||
|
|
key='lastName'
|
||
|
|
/>
|
||
|
|
</ColumnGroup>
|
||
|
|
<Column
|
||
|
|
title='Age'
|
||
|
|
dataIndex='age'
|
||
|
|
key='age'
|
||
|
|
/>
|
||
|
|
</Table>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}, { sync: false }
|
||
|
|
)
|
||
|
|
|
||
|
|
Vue.nextTick(() => {
|
||
|
|
expect(wrapper.html()).toMatchSnapshot()
|
||
|
|
done()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
it('updates columns when receiving props', (done) => {
|
||
|
|
const columns = [{
|
||
|
|
title: 'Name',
|
||
|
|
key: 'name',
|
||
|
|
dataIndex: 'name',
|
||
|
|
}]
|
||
|
|
const wrapper = shallow(Table, {
|
||
|
|
propsData: {
|
||
|
|
columns,
|
||
|
|
},
|
||
|
|
sync: false,
|
||
|
|
})
|
||
|
|
const newColumns = [{
|
||
|
|
title: 'Title',
|
||
|
|
key: 'title',
|
||
|
|
dataIndex: 'title',
|
||
|
|
}]
|
||
|
|
wrapper.setProps({ columns: newColumns })
|
||
|
|
Vue.nextTick(() => {
|
||
|
|
expect(wrapper.vm.columns).toBe(newColumns)
|
||
|
|
done()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
it('loading with Spin', (done) => {
|
||
|
|
const loading = {
|
||
|
|
spinning: false,
|
||
|
|
delay: 500,
|
||
|
|
}
|
||
|
|
const wrapper = mount(Table, {
|
||
|
|
propsData: {
|
||
|
|
loading,
|
||
|
|
},
|
||
|
|
sync: false,
|
||
|
|
})
|
||
|
|
Vue.nextTick(async () => {
|
||
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
|
||
|
|
expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('')
|
||
|
|
|
||
|
|
loading.spinning = true
|
||
|
|
wrapper.setProps({ loading })
|
||
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
|
||
|
|
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(1)
|
||
|
|
done()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|