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

245 lines
7.7 KiB
JavaScript

import { mount } from '@vue/test-utils';
import Table from '..';
import Vue from 'vue';
import { asyncExpect } from '@/tests/utils';
describe('Table.pagination', () => {
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
];
const data = [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
];
const pagination = { class: 'my-page', pageSize: 2 };
function getTableOptions(props = {}, listeners = {}) {
return {
propsData: {
columns,
dataSource: data,
pagination,
...props,
},
listeners: {
...listeners,
},
sync: false,
};
}
function renderedNames(wrapper) {
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
return row.props().record.name;
});
}
it('renders pagination correctly', done => {
const wrapper = mount(Table, getTableOptions());
Vue.nextTick(() => {
expect(wrapper.html()).toMatchSnapshot();
done();
});
});
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', async () => {
const wrapper = mount(
Table,
getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true } }),
);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
});
});
it('paginate data', done => {
const wrapper = mount(Table, getTableOptions());
Vue.nextTick(() => {
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
const pager = wrapper.findAll({ name: 'Pager' });
pager.at(pager.length - 1).trigger('click');
Vue.nextTick(() => {
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
done();
});
});
});
it('repaginates when pageSize change', () => {
const wrapper = mount(Table, getTableOptions());
wrapper.setProps({ pagination: { pageSize: 1 } });
Vue.nextTick(() => {
expect(renderedNames(wrapper)).toEqual(['Jack']);
});
});
it('fires change event', done => {
const handleChange = jest.fn();
const handlePaginationChange = jest.fn();
const noop = () => {};
const wrapper = mount(
Table,
getTableOptions(
{
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
},
{ change: handleChange },
),
);
Vue.nextTick(() => {
const pager = wrapper.findAll({ name: 'Pager' });
pager.at(pager.length - 1).trigger('click');
expect(handleChange).toBeCalledWith(
{
class: 'my-page',
current: 2,
pageSize: 2,
},
{},
{},
{
currentDataSource: [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
],
},
);
expect(handlePaginationChange).toBeCalledWith(2, 2);
done();
});
});
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/dVeNoP?editors=001
it('should have pager when change pagination from false to undefined', done => {
const wrapper = mount(Table, getTableOptions({ pagination: false }));
Vue.nextTick(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: undefined });
Vue.nextTick(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.findAll('.ant-pagination-item-active')).toHaveLength(1);
done();
});
});
});
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/pWVRJV?editors=001
it('should display pagination as prop pagination change between true and false', async () => {
const wrapper = mount(Table, getTableOptions());
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2);
wrapper.setProps({ pagination: false });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2);
wrapper.find('.ant-pagination-item-2').trigger('click');
});
await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: true });
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1); // pageSize will be 10
expect(renderedNames(wrapper)).toHaveLength(4);
});
});
// https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', done => {
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 1 } }));
Vue.nextTick(() => {
wrapper.find('.ant-pagination-item-3').trigger('click');
wrapper.setProps({ dataSource: [data[0]] });
Vue.nextTick(() => {
expect(wrapper.find('.ant-pagination-item-1').classes()).toContain(
'ant-pagination-item-active',
);
done();
});
});
});
it('specify the position of pagination', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' } }));
await asyncExpect(() => {
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
expect(
wrapper
.findAll('.ant-spin-container > *')
.at(0)
.findAll('.ant-pagination'),
).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'bottom' } });
}, 0);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
expect(
wrapper
.findAll('.ant-spin-container > *')
.at(1)
.findAll('.ant-pagination'),
).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'both' } });
}, 0);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3);
expect(
wrapper
.findAll('.ant-spin-container > *')
.at(0)
.findAll('.ant-pagination'),
).toHaveLength(1);
expect(
wrapper
.findAll('.ant-spin-container > *')
.at(2)
.findAll('.ant-pagination'),
).toHaveLength(1);
}, 0);
});
});