ant-design-vue/components/table/__tests__/Table.pagination.test.js

import { mount } from '@vue/test-utils';
import Table from '..';
import Vue from 'vue';
import { asyncExpect } from '@/tests/utils';

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 = { class: 'my-page', pageSize: 2 };

  function getTableOptions(props = {}, listeners = {}) {
    return {
      props: {
        columns,
        dataSource: data,
        pagination,
        ...props,
      },
      listeners: {
        ...listeners,
      },
      sync: false,
    };
  }

  function renderedNames(wrapper) {
    return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
      return row.props().record.name;
    });
  }

  it('renders pagination correctly', done => {
    const wrapper = mount(Table, getTableOptions());
    Vue.nextTick(() => {
      expect(wrapper.html()).toMatchSnapshot();
      done();
    });
  });

  it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', async () => {
    const wrapper = mount(
      Table,
      getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true } }),
    );
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
      wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
      wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
    });
  });

  it('paginate data', done => {
    const wrapper = mount(Table, getTableOptions());
    Vue.nextTick(() => {
      expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
      const pager = wrapper.findAll({ name: 'Pager' });
      pager.at(pager.length - 1).trigger('click');
      Vue.nextTick(() => {
        expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
        done();
      });
    });
  });

  it('repaginates when pageSize change', () => {
    const wrapper = mount(Table, getTableOptions());
    wrapper.setProps({ pagination: { pageSize: 1 } });
    Vue.nextTick(() => {
      expect(renderedNames(wrapper)).toEqual(['Jack']);
    });
  });

  it('fires change event', done => {
    const handleChange = jest.fn();
    const handlePaginationChange = jest.fn();
    const noop = () => {};
    const wrapper = mount(
      Table,
      getTableOptions(
        {
          pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
        },
        { change: handleChange },
      ),
    );
    Vue.nextTick(() => {
      const pager = wrapper.findAll({ name: 'Pager' });
      pager.at(pager.length - 1).trigger('click');

      expect(handleChange).toBeCalledWith(
        {
          class: 'my-page',
          current: 2,
          pageSize: 2,
        },
        {},
        {},
        {
          currentDataSource: [
            { key: 0, name: 'Jack' },
            { key: 1, name: 'Lucy' },
            { key: 2, name: 'Tom' },
            { key: 3, name: 'Jerry' },
          ],
        },
      );

      expect(handlePaginationChange).toBeCalledWith(2, 2);
      done();
    });
  });

  // 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', done => {
    const wrapper = mount(Table, getTableOptions({ pagination: false }));
    Vue.nextTick(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
      wrapper.setProps({ pagination: undefined });
      Vue.nextTick(() => {
        expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
        expect(wrapper.findAll('.ant-pagination-item-active')).toHaveLength(1);
        done();
      });
    });
  });

  // 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', async () => {
    const wrapper = mount(Table, getTableOptions());
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2);
      wrapper.setProps({ pagination: false });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
      wrapper.setProps({ pagination });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2);
      wrapper.find('.ant-pagination-item-2').trigger('click');
    });
    await asyncExpect(() => {
      expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
      wrapper.setProps({ pagination: false });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
      wrapper.setProps({ pagination: true });
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
      expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1); // pageSize will be 10
      expect(renderedNames(wrapper)).toHaveLength(4);
    });
  });

  // https://github.com/ant-design/ant-design/issues/5259
  it('change to correct page when data source changes', done => {
    const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 1 } }));
    Vue.nextTick(() => {
      wrapper.find('.ant-pagination-item-3').trigger('click');
      wrapper.setProps({ dataSource: [data[0]] });
      Vue.nextTick(() => {
        expect(wrapper.find('.ant-pagination-item-1').classes()).toContain(
          'ant-pagination-item-active',
        );
        done();
      });
    });
  });

  it('specify the position of pagination', async () => {
    const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' } }));
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
      expect(
        wrapper
          .findAll('.ant-spin-container > *')
          .at(0)
          .findAll('.ant-pagination'),
      ).toHaveLength(1);
      wrapper.setProps({ pagination: { position: 'bottom' } });
    }, 0);
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
      expect(
        wrapper
          .findAll('.ant-spin-container > *')
          .at(1)
          .findAll('.ant-pagination'),
      ).toHaveLength(1);
      wrapper.setProps({ pagination: { position: 'both' } });
    }, 0);
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3);
      expect(
        wrapper
          .findAll('.ant-spin-container > *')
          .at(0)
          .findAll('.ant-pagination'),
      ).toHaveLength(1);
      expect(
        wrapper
          .findAll('.ant-spin-container > *')
          .at(2)
          .findAll('.ant-pagination'),
      ).toHaveLength(1);
    }, 0);
  });
});