ant-design/components/pagination/__tests__/index.test.tsx
二货爱吃白萝卜 846dc9b022
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
fix: Pagination select props order (#51962)
* fix: Pagination select props order

* chore: replace with select

* chore: back of support

* chore: bump rc-pagination

* chore: merge selection

* chore: fix lint
2024-12-11 11:42:51 +08:00

130 lines
4.5 KiB
TypeScript

import React from 'react';
import type { OptionFC } from 'rc-select/lib/Option';
import type { PaginationProps } from '..';
import Pagination from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import Select from '../../select';
describe('Pagination', () => {
mountTest(Pagination);
rtlTest(Pagination);
it('should pass disabled to prev and next buttons', () => {
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
if (type === 'prev') {
return <button type="button">prev</button>;
}
if (type === 'next') {
return <button type="button">next</button>;
}
return originalElement;
};
const { container } = render(
<Pagination defaultCurrent={1} total={50} itemRender={itemRender} />,
);
expect(container.querySelector('button')?.disabled).toBe(true);
});
it('should automatically be small when size is not specified', async () => {
const { container } = render(<Pagination responsive />);
expect(container.querySelector('ul')?.className.includes('ant-pagination-mini')).toBe(true);
});
// 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', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const { container } = render(
<Pagination
defaultCurrent={1}
total={500}
onChange={onChange}
onShowSizeChange={onShowSizeChange}
/>,
);
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
expect(onChange).toHaveBeenCalledWith(1, 20);
});
it('should support custom selectComponentClass', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const CustomSelect: React.FC<{ className?: string }> & { Option: OptionFC } = ({
className,
...props
}) => <Select className={`${className} custom-select`} {...props} />;
CustomSelect.Option = Select.Option;
const { container } = render(
<Pagination defaultCurrent={1} total={500} selectComponentClass={CustomSelect} />,
);
expect(container.querySelectorAll('.custom-select').length).toBeTruthy();
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Pagination] `selectComponentClass` is not official api which will be removed.',
);
errorSpy.mockRestore();
});
describe('ConfigProvider', () => {
it('should be rendered correctly in RTL', () => {
const { asFragment } = render(
<ConfigProvider direction="rtl">
<Pagination defaultCurrent={1} total={50} />
</ConfigProvider>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should be rendered correctly when componentSize is large', () => {
const { container, asFragment } = render(
<ConfigProvider componentSize="large">
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</ConfigProvider>,
);
expect(asFragment().firstChild).toMatchSnapshot();
expect(container.querySelectorAll('.ant-select-lg').length).toBe(0);
});
});
describe('should support align props', () => {
it('should support align to start', () => {
const { container } = render(<Pagination align="start" />);
expect(container.querySelector('.ant-pagination-start')).toBeTruthy();
});
it('should support align to center', () => {
const { container } = render(<Pagination align="center" />);
expect(container.querySelector('.ant-pagination-center')).toBeTruthy();
});
it('should support align to end', () => {
const { container } = render(<Pagination align="end" />);
expect(container.querySelector('.ant-pagination-end')).toBeTruthy();
});
});
it('showSizeChanger support showSearch=false', () => {
const { container } = render(
<Pagination
defaultCurrent={1}
total={500}
showSizeChanger={{
showSearch: false,
}}
/>,
);
// Expect `input` is `readonly`
expect(container.querySelector('.ant-select input')).toHaveAttribute('readonly');
});
});