ant-design-vue/components/table/__tests__/Table.test.js
2019-01-12 12:46:29 +08:00

100 lines
2.2 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();
});
});
});