text: 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 {
        propsData: {
          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);
    });
  });
  