ant-design/components/table/__tests__/Table.pagination.test.js
陈帅 523b74e3b6
merge master into Feature ()
* feat: add successColor for Progress ()

* feat: add successColor for Progress

* feat: update

* fix: update test

* remove snap

* feat: add test case

* refactor success

* feat: adjust styyle

* feat: add DevWarning

* feat: Support rowSelection.dirty ()

* feat: Support rowSelection.dirty

* rename to reserveKeys

* preserveKeys will keep record also

* to preserveSelectedRowKeys

* feat: add ghost prop for collapse ()

* feat: add ghost prop for collapse

* doc: version of collapse's ghost prop

* refactor: make ghost collapse's less code to a nested style

* chore: remove redundant codes in ghost collapse's less & doc

* doc: add a background wrapper for ghost collapse demo

* doc: dark-theme wrapper bg-color for ghost collapse demo

* test: update snapshot of ghost collapse

* doc: use softer bg-color on ghost collapse demo

* doc: remove disabled panel in ghost collapse demo

* feat: form instance support getFieldInstance ()

* support getFieldInstance

* update doc

* fix lint

* move func

* move into hooks

* update ref logic

* fix lint

* rm only

* fix docs

* feat: dropdown support arrow ()

* feat: dropdown support arrow prop

close 

* test: update snapshot

* fix: fix dropdown cls names

* test: update snapshot

* test: update snapshot

* doc: update demo

* test: update demo snapshot

* demo

* fix: snapshot

* chore: change the style of ghost collapse & demo modified ()

* refactor: reduce content padding in ghost collapse

* doc: remove the wrapper outside ghost collapse

Designer want the demo differs from other demos

* refactor: remove redundant .less code in collapse

* feat: cascader dropdown-render prop ()

* feat: cascader dropdown-render prop

* fix: update Cascader dropdownRender type annotation

* fix: set rc-cascader semver from ^ to ~

* docs: fix coding style in cascader/custom-dropdown

* feat: 🆕 support Drawer closeIcon ()

* feat: 🆕 support Drawer closeIcon

close 
close 

* add test case

* update docs

* feat: 🆕 Cascader expandIcon ()

* feat: cascader expandIcon

* fix: snap

* refactor: reduce CSS size ()

* refactor: reduce button css size

* refactor: remove redundant button .less code

* feat: add Table onChange an action param ()

* Working on tests

* created TableAction type

* changed TableActions to tuple

* removed chinese documentation line

* refactor TableActions

* fix documentation

* Moved action into extra param

* minor doc change

* feat: add closeIcon customize tag close ()

* feat: add closeIcon customize tag close

* docs fix

* update snap

* fix: css name

* update snapshot

* snapshot

* feat: add radio `optionType` api to set radio option type ()

* feat: radio component

* docs: update md

* fix: snap

* test components

* fix: use optionType

* fix name

* add warning

* fix

* feat: expand rate character ()

* feat: expand rate character

* fix: demo

* fix: snap

* Update components/rate/index.zh-CN.md

Co-authored-by: 偏右 <afc163@gmail.com>

* fix

Co-authored-by: 偏右 <afc163@gmail.com>

* Refactor demo code box actions ()

* refactor: refine the styling of actions part of demo code-box

* fix: lint style

* refactor: move Result children to end ()

* feat: remove content max-width on dot-step ()

* feat: add Skeleton-Image ()

* feat: add Skeleton-Image

* feat: add docs

* fix: adjust skeleton

* feat: adjust Image Component

* feat: rebase

* feat: adjust style

* fix: lint

* feat: remove size

* feat: delete md

* feat: fix style

*  feat: Mentions support autoSize ()

close 

* chore: replace textarea with rc-textarea ()

* feat: update pagination@2.3.0 support onChange called when pageSize change ()

* feat: update pagination@2.5.0 and add test case to relative component

* fix: lint

* delete

* feat: add test case for pagination

* adjust test case

* feat: Implement centered prop in Tabs ()

* Implement centered in Tabs along with its tests and docs

* Fix build error

* Add Chinese translations and remove test case

Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com>

* feat: Add modal style parameter ()

* add some paramters in default.less

* Update components/style/themes/default.less

Co-authored-by: Amumu <yoyo837@hotmail.com>

* change parameter in compact.less

Co-authored-by: Crystal Gao <jinggao@ebay.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>

* feat: export Tabs addIcon ()

* feat: export Tabs addIcon

* update snapshot

* feat: showNow on timepicker and datetimepicker ()

* feat: update rc-picker@1.7.1 and fix icons of month and quarter picker in DatePicker Component ()

* feat: update rc-picker@1.7.1

* delete

* add

* feat: expand rate support props ()

* docs: 📝 Add Form.Item hidden in doc ()

close 

* fix: ⌨️ Improve Pagination accessibility issue ()

* ⌨️ Improve Pagination a11y by fixing a W3C error

https://github.com/react-component/pagination/issues/280

* update snapshot

* 🆙 rc-pagination to 2.4.1

* feat: support triggerSubMenuAction for <Menu /> ()

* feat(menu): add triggerSubMenuAction for Menu

* feat(menu): test cases

* chore: Adjust picker logic ()

* chore: update rc-picker 1.10.0 ()

* feat: table row check strictly ()

* feat: add checkStrictly on Table.rowSelection

* fix: LGTM warnings

* test: table rowSelection.checkStrictly

* test: add cov [wip]

* refactor: tree.rowSelection.checkStrictly [wip]

* test: table.rowSelection.checkStrictly basic case

* feat: support rowKey on checkStrictly table

* feat: Table checkStrictly support getCheckboxProps

* docs: Table checkStrictly

* chore: typo

* chore: remove useless comment

* chore: update snapshot

* chore: update snapshot

* fix: fire selectAll on selection dropdown menu & changeRows incorrect in selectAll callback

* docs: typo

* chore

* chore

* fix: expand buttons of leaf rows in tree data are not hidden

* feat: Table warning about rowKey index parameter

* perf: only generate keyEntities when not checkStrictly

* refactor: remove useless parseCheckedKeys

* refactor: get derived selected & half selected keys from selectedRowKeys

* chore: remove env condition stmt

* chore: revert index usage & code formatting

* chore: rerun ci

* docs: table tree-data checkstrictly

* test: update snapshots

* refactor: use useMergedState hook

* chore: rerun ci

* chore: rerun ci 2

* chore: revert selection select all behavior

* refactor: refactor code based on feature

* chore: revert table code format

* chore: revert table code format

* fix: useMemo deps

* fix: useMemo deps

* fix: useMemo deps

* feat: support preserve ()

* docs: add responsibly order for Col ()

* feat: add type

* feat: add responsibly order cols

* feat: add docs

* feat: add test case

* fix test

Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: 偏右 <afc163@gmail.com>
Co-authored-by: zoomdong <1344492820@qq.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>
Co-authored-by: wendellhu <wendellhu95@gmail.com>
Co-authored-by: xrkffgg <xrkffgg@gmail.com>
Co-authored-by: Neto Braghetto <netow93@gmail.com>
Co-authored-by: Kermit Xuan <kermitlx@outlook.com>
Co-authored-by: Ashkan Pourghasem <64011067+ashkan-pm@users.noreply.github.com>
Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com>
Co-authored-by: hicrystal <295247343@qq.com>
Co-authored-by: Crystal Gao <jinggao@ebay.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: Li Ming <armyiljfe@gmail.com>
2020-06-28 22:41:59 +08:00

363 lines
13 KiB
JavaScript

/* eslint-disable import/first */
jest.mock('../../_util/scrollTo');
import React from 'react';
import { mount } from 'enzyme';
import Table from '..';
import scrollTo from '../../_util/scrollTo';
import { resetWarned } from '../../_util/devWarning';
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 = { className: 'my-page', pageSize: 2 };
function createTable(props) {
return <Table columns={columns} dataSource={data} pagination={pagination} {...props} />;
}
function renderedNames(wrapper) {
return wrapper.find('BodyRow').map(row => row.props().record.name);
}
it('renders pagination correctly', () => {
const wrapper = mount(createTable());
expect(wrapper.render()).toMatchSnapshot();
});
it('not crash when pageSize is undefined', () => {
expect(() => {
mount(createTable({ pagination: { pageSIze: undefined } }));
}).not.toThrow();
});
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);
});
it('paginate data', () => {
const wrapper = mount(createTable());
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
wrapper.find('Pager').last().simulate('click');
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);
});
it('should scroll to first row when page change', () => {
scrollTo.mockReturnValue(null);
const wrapper = mount(
createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }),
);
expect(scrollTo).toHaveBeenCalledTimes(0);
wrapper.find('Pager').last().simulate('click');
expect(scrollTo).toHaveBeenCalledTimes(1);
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item').last().simulate('click');
expect(scrollTo).toHaveBeenCalledTimes(3);
});
it('fires change event', () => {
const handleChange = jest.fn();
const handlePaginationChange = jest.fn();
const noop = () => {};
const wrapper = mount(
createTable({
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
onChange: handleChange,
}),
);
wrapper.find('Pager').last().simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{
className: 'my-page',
current: 2,
pageSize: 2,
},
{},
{},
{
currentDataSource: [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
],
action: 'paginate',
},
);
expect(handlePaginationChange).toHaveBeenCalledWith(2, 2);
});
// 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', () => {
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
// 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 });
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: undefined });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(wrapper)).toEqual(['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]] });
expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe(
true,
);
});
// https://github.com/ant-design/ant-design/issues/24913
it('should onChange called when pageSize change', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const wrapper = mount(
createTable({
pagination: {
current: 1,
pageSize: 10,
total: 200,
onChange,
onShowSizeChange,
},
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
wrapper.find('.ant-select-item-option').at(1).simulate('click');
expect(onChange).toHaveBeenCalledWith(1, 20);
});
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: ['topLeft'] } }));
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['bottomRight'] } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
expect(wrapper.find('.ant-spin-container').childAt(1).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['topLeft', 'bottomRight'] } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3);
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);
wrapper.setProps({ pagination: { position: ['invalid'] } });
expect(wrapper.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 = mount(createTable({ pagination: true }));
expect(wrapper.render()).toMatchSnapshot();
});
it('ajax render should keep display by the dataSource', () => {
const onChange = jest.fn();
const onPaginationChange = jest.fn();
const wrapper = mount(
createTable({
onChange,
pagination: {
total: 200,
onChange: onPaginationChange,
},
}),
);
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(onChange).toHaveBeenCalledWith(
{ current: 2, pageSize: 10, total: 200 },
{},
{},
{
currentDataSource: [
{ key: 0, name: 'Jack' },
{ key: 1, name: 'Lucy' },
{ key: 2, name: 'Tom' },
{ key: 3, name: 'Jerry' },
],
action: 'paginate',
},
);
expect(onPaginationChange).toHaveBeenCalledWith(2, 10);
expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
});
it('select by checkbox to trigger stopPropagation', () => {
jest.useFakeTimers();
const onShowSizeChange = jest.fn();
const onChange = jest.fn();
const wrapper = mount(
createTable({
pagination: {
total: 200,
showSizeChanger: true,
onShowSizeChange,
},
onChange,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
jest.runAllTimers();
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
dropdownWrapper.find('.ant-select-item-option').at(3).simulate('click');
expect(onShowSizeChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalled();
jest.useRealTimers();
});
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);
});
// https://github.com/ant-design/ant-design/issues/19957
it('ajax should work with pagination', () => {
const wrapper = mount(createTable({ pagination: { total: 100 } }));
wrapper.find('.ant-pagination-item-2').simulate('click');
wrapper.setProps({ pagination: { current: 2, total: 100 } });
expect(
wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active'),
).toBeTruthy();
});
it('pagination should ignore invalidate total', () => {
const wrapper = mount(createTable({ pagination: { total: null } }));
expect(wrapper.find('.ant-pagination-item-1').length).toBeTruthy();
});
it('renders pagination topLeft and bottomRight', () => {
const wrapper = mount(createTable({ pagination: ['topLeft', 'bottomRight'] }));
expect(wrapper.render()).toMatchSnapshot();
});
it('dynamic warning', () => {
resetWarned();
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const dynamicData = [];
for (let i = 0; i < 15; i += 1) {
dynamicData.push({
key: i,
name: i,
});
}
const wrapper = mount(
createTable({
dataSource: dynamicData,
pagination: { total: 100, pageSize: 10, current: 2 },
}),
);
expect(wrapper.find('tbody tr')).toHaveLength(5);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',
);
});
});