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 {
      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)
  })
})