130 lines
2.9 KiB
JavaScript
130 lines
2.9 KiB
JavaScript
import { shallowMount as shallow, mount } from '@vue/test-utils';
|
|
import Table from '..';
|
|
import * as Vue from 'vue';
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
import { sleep } from '../../../tests/utils';
|
|
|
|
const { Column, ColumnGroup } = Table;
|
|
|
|
describe('Table', () => {
|
|
mountTest(Table);
|
|
const data = [
|
|
{
|
|
key: '1',
|
|
firstName: 'John',
|
|
lastName: 'Brown',
|
|
age: 32,
|
|
},
|
|
{
|
|
key: '2',
|
|
firstName: 'Jim',
|
|
lastName: 'Green',
|
|
age: 42,
|
|
},
|
|
];
|
|
|
|
it('renders JSX correctly', done => {
|
|
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', async () => {
|
|
const columns = [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
dataIndex: 'name',
|
|
},
|
|
];
|
|
const wrapper = shallow(Table, {
|
|
props: {
|
|
columns,
|
|
},
|
|
sync: false,
|
|
});
|
|
const newColumns = [
|
|
{
|
|
title: 'Title',
|
|
key: 'title',
|
|
dataIndex: 'title',
|
|
},
|
|
];
|
|
wrapper.setProps({ columns: newColumns });
|
|
await sleep();
|
|
expect(wrapper.vm.columns).toStrictEqual(newColumns);
|
|
});
|
|
|
|
it('loading with Spin', async () => {
|
|
const loading = {
|
|
spinning: false,
|
|
delay: 500,
|
|
};
|
|
const wrapper = mount(Table, {
|
|
props: {
|
|
loading,
|
|
},
|
|
sync: false,
|
|
});
|
|
await sleep();
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(0);
|
|
expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('');
|
|
|
|
loading.spinning = true;
|
|
wrapper.setProps({ loading: { ...loading } });
|
|
await sleep();
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(0);
|
|
|
|
await sleep(500);
|
|
expect(wrapper.findAll('.ant-spin')).toHaveLength(1);
|
|
});
|
|
|
|
it('align column should not override cell style', done => {
|
|
const columns = [
|
|
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
align: 'center',
|
|
customCell: () => {
|
|
return {
|
|
style: {
|
|
color: 'red',
|
|
},
|
|
};
|
|
},
|
|
},
|
|
];
|
|
const wrapper = mount(Table, {
|
|
props: {
|
|
columns,
|
|
dataSource: data,
|
|
},
|
|
sync: false,
|
|
});
|
|
Vue.nextTick(() => {
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
done();
|
|
});
|
|
});
|
|
});
|