mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
221 lines
5.6 KiB
TypeScript
221 lines
5.6 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { sleep } from '@element-plus/test-utils'
|
|
import Pagination from '../src/index'
|
|
import { nextTick } from 'vue'
|
|
|
|
const TIME_OUT = 100
|
|
|
|
describe('Pagination.vue', () => {
|
|
test('layout', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
layout: 'prev, pager, next',
|
|
},
|
|
})
|
|
expect(wrapper.find('button.btn-prev').exists()).toBe(true)
|
|
expect(wrapper.find('ul.el-pager').exists()).toBe(true)
|
|
expect(wrapper.find('button.btn-next').exists()).toBe(true)
|
|
expect(wrapper.find('.el-pagination__jump').exists()).toBe(false)
|
|
expect(wrapper.find('.el-pagination__rightwrapper').exists()).toBe(false)
|
|
expect(wrapper.find('.el-pagination__total').exists()).toBe(false)
|
|
})
|
|
|
|
test('slot', () => {
|
|
const TestComponent = {
|
|
template: `
|
|
<el-pagination
|
|
layout="slot, prev, pager, next"
|
|
:page-size="25"
|
|
:total="100">
|
|
<span class="slot-test">slot test</span>
|
|
</el-pagination>
|
|
`,
|
|
components: {
|
|
'el-pagination': Pagination,
|
|
},
|
|
}
|
|
const wrapper = mount(TestComponent)
|
|
expect(wrapper.find('.slot-test').exists()).toBe(true)
|
|
})
|
|
|
|
test('small', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
small: true,
|
|
},
|
|
})
|
|
expect(wrapper.vm.$el.classList.contains('el-pagination--small')).toBe(true)
|
|
})
|
|
|
|
test('pageSize', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 25,
|
|
total: 100,
|
|
},
|
|
})
|
|
expect(wrapper.findAll('li.number').length).toBe(4)
|
|
})
|
|
|
|
test('pageSize: NaN', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: NaN,
|
|
total: 100,
|
|
},
|
|
})
|
|
expect(wrapper.findAll('li.number').length).toBe(7)
|
|
})
|
|
|
|
test('pageCount', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 25,
|
|
pagerCount: 5,
|
|
},
|
|
})
|
|
expect(wrapper.findAll('li.number').length).toBe(5)
|
|
})
|
|
|
|
test('pagerCount', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 25,
|
|
total: 1000,
|
|
pagerCount: 21,
|
|
},
|
|
})
|
|
expect(wrapper.findAll('li.number').length).toBe(21)
|
|
})
|
|
|
|
test('will work without total & page-count', async () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 25,
|
|
currentPage: 2,
|
|
},
|
|
})
|
|
wrapper.find('.btn-prev').trigger('click')
|
|
await sleep(TIME_OUT)
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(1)
|
|
wrapper.find('.btn-prev').trigger('click')
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(1)
|
|
})
|
|
|
|
test('currentPage', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 20,
|
|
total: 200,
|
|
currentPage: 3,
|
|
},
|
|
})
|
|
expect(wrapper.find('li.number.active').text()).toEqual('3')
|
|
})
|
|
|
|
test('currentPage: NaN', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
pageSize: 20,
|
|
total: 200,
|
|
currentPage: NaN,
|
|
},
|
|
})
|
|
expect(wrapper.find('li.number.active').text()).toEqual('1')
|
|
expect(wrapper.vm.$el.querySelectorAll('li.number').length).toBe(7)
|
|
})
|
|
|
|
test('layout is empty', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
layout: '',
|
|
},
|
|
})
|
|
expect(wrapper.vm.$el.textContent).toEqual('')
|
|
})
|
|
})
|
|
|
|
describe('click pager', () => {
|
|
test('click ul', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
total: 1000,
|
|
},
|
|
})
|
|
wrapper.find('.el-pager').trigger('click')
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(1)
|
|
})
|
|
|
|
test('click li', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
total: 1000,
|
|
},
|
|
})
|
|
wrapper.findAll('.el-pager li.number')[1].trigger('click')
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(2)
|
|
})
|
|
|
|
test('click next icon-more', () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
total: 1000,
|
|
},
|
|
})
|
|
wrapper.find('.btn-quicknext.more').trigger('click')
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(6)
|
|
})
|
|
|
|
test('click prev icon-more', async () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
total: 1000,
|
|
},
|
|
})
|
|
wrapper.find('.btn-quicknext.more').trigger('click')
|
|
await sleep(TIME_OUT)
|
|
expect(wrapper.find('.btn-quickprev.more').exists()).toBe(true)
|
|
wrapper.find('.btn-quickprev.more').trigger('click')
|
|
expect(wrapper.vm.internalCurrentPage).toEqual(1)
|
|
})
|
|
|
|
test('click last page', async () => {
|
|
const wrapper = mount(Pagination, {
|
|
props: {
|
|
total: 1000,
|
|
},
|
|
})
|
|
const nodes = wrapper.findAll('li.number')
|
|
nodes[nodes.length - 1].trigger('click')
|
|
await sleep(TIME_OUT)
|
|
expect(wrapper.find('.btn-quickprev.more').exists()).toBe(true)
|
|
expect(wrapper.find('.btn-quicknext.more').exists()).toBe(false)
|
|
})
|
|
test('should emit change size evt', async () => {
|
|
const onSizeChange = jest.fn()
|
|
const wrapper = mount({
|
|
components: {
|
|
'el-pagination': Pagination,
|
|
},
|
|
template: `
|
|
<el-pagination
|
|
@size-change="onSizeChange"
|
|
:total="1000"
|
|
:page-sizes="[100, 200, 300]"
|
|
layout="sizes, pager"
|
|
:page-size="100"/>
|
|
`,
|
|
methods: {
|
|
onSizeChange,
|
|
},
|
|
})
|
|
|
|
const items = document.querySelectorAll('.el-select-dropdown__item:not(.selected)');
|
|
(items[0] as HTMLOptionElement)?.click()
|
|
await nextTick()
|
|
expect(onSizeChange).toHaveBeenCalled()
|
|
expect(wrapper.findComponent(Pagination).emitted()).toHaveProperty('size-change')
|
|
})
|
|
})
|
|
|