mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 00:08:27 +08:00
523b74e3b6
* feat: add successColor for Progress (#24655) * 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 (#24718) * feat: Support rowSelection.dirty * rename to reserveKeys * preserveKeys will keep record also * to preserveSelectedRowKeys * feat: add ghost prop for collapse (#24734) * 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 (#24711) * support getFieldInstance * update doc * fix lint * move func * move into hooks * update ref logic * fix lint * rm only * fix docs * feat: dropdown support arrow (#23869) * feat: dropdown support arrow prop close #22758 * 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 (#24762) * 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 (#24812) * 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 (#24842) * feat: 🆕 support Drawer closeIcon close #19283 close #19153 * add test case * update docs * feat: 🆕 Cascader expandIcon (#24865) * feat: cascader expandIcon * fix: snap * refactor: reduce CSS size (#24846) * refactor: reduce button css size * refactor: remove redundant button .less code * feat: add Table onChange an action param (#24697) * 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 (#24885) * 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 (#24809) * feat: radio component * docs: update md * fix: snap * test components * fix: use optionType * fix name * add warning * fix * feat: expand rate character (#24903) * 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 (#24887) * refactor: refine the styling of actions part of demo code-box * fix: lint style * refactor: move Result children to end (#24945) * feat: remove content max-width on dot-step (#24907) * feat: add Skeleton-Image (#24805) * 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 (#24961) close #17746 * chore: replace textarea with rc-textarea (#24966) * feat: update pagination@2.3.0 support onChange called when pageSize change (#24964) * 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 (#24958) * 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 (#24773) * 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 (#25006) * feat: export Tabs addIcon * update snapshot * feat: showNow on timepicker and datetimepicker (#25032) * feat: update rc-picker@1.7.1 and fix icons of month and quarter picker in DatePicker Component (#25035) * feat: update rc-picker@1.7.1 * delete * add * feat: expand rate support props (#24993) * docs: 📝 Add Form.Item hidden in doc (#25108) close #25101 * fix: ⌨️ Improve Pagination accessibility issue (#25119) * ⌨️ 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 /> (#25127) * feat(menu): add triggerSubMenuAction for Menu * feat(menu): test cases * chore: Adjust picker logic (#25135) * chore: update rc-picker 1.10.0 (#25174) * feat: table row check strictly (#24931) * 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 (#25186) * docs: add responsibly order for Col (#25139) * 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>
363 lines
13 KiB
JavaScript
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.',
|
|
);
|
|
});
|
|
});
|