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

292 lines
9.6 KiB
JavaScript
Raw Normal View History

2016-12-14 14:48:09 +08:00
import React from 'react';
import { render, mount } from 'enzyme';
2016-12-14 15:38:26 +08:00
import Table from '..';
2016-12-14 14:48:09 +08:00
describe('Table.pagination', () => {
2018-12-07 16:17:45 +08:00
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
];
2016-12-14 14:48:09 +08:00
const data = [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
];
const pagination = { className: 'my-page', pageSize: 2 };
2016-12-14 14:48:09 +08:00
function createTable(props) {
2018-12-07 16:17:45 +08:00
return <Table columns={columns} dataSource={data} pagination={pagination} {...props} />;
2016-12-14 14:48:09 +08:00
}
function renderedNames(wrapper) {
return wrapper.find('TableRow').map(row => row.props().record.name);
}
it('renders pagination correctly', () => {
const wrapper = render(createTable());
2017-04-02 18:09:23 +08:00
expect(wrapper).toMatchSnapshot();
2016-12-14 14:48:09 +08:00
});
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
const wrapper = mount(createTable({ pagination: { pageSize: 3, hideOnSinglePage: true } }));
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
});
it('should use pageSize when defaultPageSize and pageSize are both specified', () => {
const wrapper = mount(createTable({ pagination: { pageSize: 3, defaultPageSize: 4 } }));
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
});
2016-12-14 14:48:09 +08:00
it('paginate data', () => {
const wrapper = mount(createTable());
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
2018-12-07 16:17:45 +08:00
wrapper
.find('Pager')
.last()
.simulate('click');
2016-12-14 14:48:09 +08:00
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
});
it('repaginates when pageSize change', () => {
const wrapper = mount(createTable());
wrapper.setProps({ pagination: { pageSize: 1 } });
expect(renderedNames(wrapper)).toEqual(['Jack']);
});
it('should accept pagination size', () => {
const wrapper = mount(
createTable({
pagination: { size: 'small' },
}),
);
expect(wrapper.find('.ant-pagination.mini')).toHaveLength(1);
});
// TODO
it('should scroll to first row when page change', () => {
const wrapper = mount(createTable({ scroll: { y: 20 } }));
wrapper
.find('Pager')
.last()
.simulate('click');
});
2016-12-14 14:48:09 +08:00
it('fires change event', () => {
const handleChange = jest.fn();
const handlePaginationChange = jest.fn();
2016-12-14 14:48:09 +08:00
const noop = () => {};
2018-12-07 16:17:45 +08:00
const wrapper = mount(
createTable({
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
onChange: handleChange,
}),
);
2016-12-14 14:48:09 +08:00
2018-12-07 16:17:45 +08:00
wrapper
.find('Pager')
.last()
.simulate('click');
2016-12-14 14:48:09 +08:00
expect(handleChange).toHaveBeenCalledWith(
2016-12-14 14:48:09 +08:00
{
className: 'my-page',
2016-12-14 14:48:09 +08:00
current: 2,
pageSize: 2,
},
{},
{},
{
currentDataSource: [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
],
},
2016-12-14 14:48:09 +08:00
);
expect(handlePaginationChange).toHaveBeenCalledWith(2, 2);
2016-12-14 14:48:09 +08:00
});
// https://github.com/ant-design/ant-design/issues/4532
2017-10-10 11:35:34 +08:00
// https://codepen.io/afc163/pen/dVeNoP?editors=001
2017-02-07 21:21:51 +08:00
it('should have pager when change pagination from false to undefined', () => {
const wrapper = mount(createTable({ pagination: false }));
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: undefined });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item-active')).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/issues/4532
2017-10-10 11:35:34 +08:00
// https://codepen.io/afc163/pen/pWVRJV?editors=001
it('should display pagination as prop pagination change between true and false', () => {
const wrapper = mount(createTable());
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination });
2017-09-20 16:26:18 +08:00
wrapper.update();
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.find('.ant-pagination-item-2').simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: true });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(1); // pageSize will be 10
2017-01-09 21:06:04 +08:00
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
});
// https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', () => {
const wrapper = mount(createTable({ pagination: { pageSize: 1 } }));
wrapper.find('.ant-pagination-item-3').simulate('click');
wrapper.setProps({ dataSource: [data[0]] });
2018-12-07 16:17:45 +08:00
expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe(
true,
);
});
it('should not change page when pagination current is specified', () => {
const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe(
true,
);
wrapper.find('.ant-pagination-item-3').simulate('click');
expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe(
true,
);
});
it('specify the position of pagination', () => {
const wrapper = mount(createTable({ pagination: { position: 'top' } }));
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-spin-container')
.childAt(0)
.find('.ant-pagination'),
).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'bottom' } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-spin-container')
.childAt(1)
.find('.ant-pagination'),
).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'both' } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-spin-container')
.childAt(0)
.find('.ant-pagination'),
).toHaveLength(1);
expect(
wrapper
.find('.ant-spin-container')
.childAt(2)
.find('.ant-pagination'),
).toHaveLength(1);
});
/**
* `pagination` is not designed to accept `true` value,
* but in practice, many people assign `true` to `pagination`,
* since they misunderstand that `pagination` can accept a boolean value.
*/
it('Accepts pagination as true', () => {
const wrapper = render(createTable({ pagination: true }));
expect(wrapper).toMatchSnapshot();
});
it('ajax render should keep display by the dataSource', () => {
const onChange = jest.fn();
const wrapper = mount(
createTable({
onChange,
pagination: {
total: 200,
},
}),
);
expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
wrapper.find('.ant-pagination .ant-pagination-item-2').simulate('click');
expect(onChange.mock.calls[0][0].current).toBe(2);
expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
});
it('select by checkbox to trigger stopPropagation', () => {
2019-08-27 17:35:29 +08:00
jest.useFakeTimers();
const onShowSizeChange = jest.fn();
2019-09-28 15:22:27 +08:00
const onChange = jest.fn();
const wrapper = mount(
createTable({
pagination: {
total: 200,
showSizeChanger: true,
onShowSizeChange,
},
2019-09-28 15:22:27 +08:00
onChange,
}),
);
2019-08-27 17:35:29 +08:00
wrapper.find('.ant-select').simulate('click');
jest.runAllTimers();
const dropdownWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
expect(dropdownWrapper.find('MenuItem').length).toBe(4);
dropdownWrapper
.find('MenuItem')
.at(3)
.simulate('click');
expect(onShowSizeChange).toHaveBeenCalled();
2019-09-28 15:22:27 +08:00
expect(onChange).toHaveBeenCalled();
2019-08-27 17:35:29 +08:00
jest.useRealTimers();
});
2019-09-28 15:22:27 +08:00
it('should support current in pagination', () => {
const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2');
});
it('should support defaultCurrent in pagination', () => {
const wrapper = mount(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2');
});
it('should support defaultPageSize in pagination', () => {
const wrapper = mount(createTable({ pagination: { defaultPageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item')).toHaveLength(4);
});
2016-12-14 14:48:09 +08:00
});