2022-09-05 19:41:32 +08:00
|
|
|
import type { OptionFC } from 'rc-select/lib/Option';
|
2023-06-07 11:54:50 +08:00
|
|
|
import React from 'react';
|
2022-09-05 19:41:32 +08:00
|
|
|
import type { PaginationProps } from '..';
|
2019-08-26 22:53:20 +08:00
|
|
|
import Pagination from '..';
|
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-06-24 11:32:42 +08:00
|
|
|
import { fireEvent, render } from '../../../tests/utils';
|
2022-06-02 17:26:41 +08:00
|
|
|
import ConfigProvider from '../../config-provider';
|
|
|
|
import Select from '../../select';
|
2019-08-26 22:53:20 +08:00
|
|
|
|
|
|
|
describe('Pagination', () => {
|
|
|
|
mountTest(Pagination);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Pagination);
|
|
|
|
|
2020-02-13 13:31:37 +08:00
|
|
|
it('should pass disabled to prev and next buttons', () => {
|
2022-09-05 19:41:32 +08:00
|
|
|
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
|
2020-02-13 13:31:37 +08:00
|
|
|
if (type === 'prev') {
|
|
|
|
return <button type="button">prev</button>;
|
|
|
|
}
|
|
|
|
if (type === 'next') {
|
|
|
|
return <button type="button">next</button>;
|
|
|
|
}
|
|
|
|
return originalElement;
|
2021-08-30 13:04:21 +08:00
|
|
|
};
|
2022-06-22 17:12:04 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Pagination defaultCurrent={1} total={50} itemRender={itemRender} />,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('button')?.disabled).toBe(true);
|
2020-02-13 13:31:37 +08:00
|
|
|
});
|
2020-03-10 20:32:34 +08:00
|
|
|
|
2023-02-23 21:56:43 +08:00
|
|
|
it('should automatically be small when size is not specified', async () => {
|
2022-06-22 17:12:04 +08:00
|
|
|
const { container } = render(<Pagination responsive />);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('ul')?.className.includes('ant-pagination-mini')).toBe(true);
|
2020-06-13 14:26:29 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/24913
|
|
|
|
// https://github.com/ant-design/ant-design/issues/24501
|
|
|
|
it('should onChange called when pageSize change', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onChange = jest.fn();
|
|
|
|
const onShowSizeChange = jest.fn();
|
2022-06-22 17:12:04 +08:00
|
|
|
const { container } = render(
|
2020-06-13 14:26:29 +08:00
|
|
|
<Pagination
|
|
|
|
defaultCurrent={1}
|
|
|
|
total={500}
|
|
|
|
onChange={onChange}
|
|
|
|
onShowSizeChange={onShowSizeChange}
|
|
|
|
/>,
|
|
|
|
);
|
2022-06-22 17:12:04 +08:00
|
|
|
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
|
2022-06-22 17:12:04 +08:00
|
|
|
|
|
|
|
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
|
|
|
|
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
|
2020-06-13 14:26:29 +08:00
|
|
|
expect(onChange).toHaveBeenCalledWith(1, 20);
|
2020-03-10 20:32:34 +08:00
|
|
|
});
|
2021-09-13 12:15:18 +08:00
|
|
|
|
|
|
|
it('should support custom selectComponentClass', () => {
|
2022-09-05 19:41:32 +08:00
|
|
|
const CustomSelect: React.FC<{ className?: string }> & { Option: OptionFC } = ({
|
|
|
|
className,
|
|
|
|
...props
|
|
|
|
}) => <Select className={`${className} custom-select`} {...props} />;
|
2021-09-13 12:15:18 +08:00
|
|
|
|
|
|
|
CustomSelect.Option = Select.Option;
|
|
|
|
|
2022-06-22 17:12:04 +08:00
|
|
|
const { container } = render(
|
2021-09-13 12:15:18 +08:00
|
|
|
<Pagination defaultCurrent={1} total={500} selectComponentClass={CustomSelect} />,
|
|
|
|
);
|
2022-06-22 17:12:04 +08:00
|
|
|
expect(container.querySelectorAll('.custom-select').length).toBeTruthy();
|
2021-09-13 12:15:18 +08:00
|
|
|
});
|
2022-03-30 16:38:08 +08:00
|
|
|
|
|
|
|
describe('ConfigProvider', () => {
|
|
|
|
it('should be rendered correctly in RTL', () => {
|
2022-06-22 17:12:04 +08:00
|
|
|
const { asFragment } = render(
|
2022-03-30 16:38:08 +08:00
|
|
|
<ConfigProvider direction="rtl">
|
|
|
|
<Pagination defaultCurrent={1} total={50} />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
2022-06-22 17:12:04 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2022-03-30 16:38:08 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should be rendered correctly when componentSize is large', () => {
|
2022-06-22 17:12:04 +08:00
|
|
|
const { container, asFragment } = render(
|
2022-03-30 16:38:08 +08:00
|
|
|
<ConfigProvider componentSize="large">
|
|
|
|
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
2022-06-22 17:12:04 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
expect(container.querySelectorAll('.ant-select-lg').length).toBe(0);
|
2022-03-30 16:38:08 +08:00
|
|
|
});
|
|
|
|
});
|
2019-08-26 22:53:20 +08:00
|
|
|
});
|