ant-design-vue/components/table/__tests__/Table.test.js

103 lines
2.3 KiB
JavaScript
Raw Normal View History

2018-05-26 22:48:16 +08:00
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()
})
})
})