ant-design/components/pagination/__tests__/index.test.tsx

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 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();
  });

  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();
    });
  });
});