javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(pagination): fix pagination component layout prop bug (#1576)

Browse Source 
fix(pagination): fix pagination component layout prop bug

Co-authored-by: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
This commit is contained in:
Summer
2021-03-05 22:42:13 +08:00
committed by GitHub
parent 2f60cb82d4
commit c66b7d4d22
2 changed files with 60 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/pagination/__tests__/pagination.spec.ts
View File

@@ -1,7 +1,7 @@
import { mount } from '@vue/test-utils'
import { sleep } from '@element-plus/test-utils'
import Pagination from '../src/index'
import { nextTick } from 'vue'
import { nextTick, ref, h } from 'vue'
const TIME_OUT = 100
@@ -20,6 +20,61 @@ describe('Pagination.vue', () => {
expect(wrapper.find('.el-pagination__total').exists()).toBe(false)
})
test('change layout value', async () => {
const layout = ref('prev, pager, next')
const Comp = {
setup() {
return () => {
return h(Pagination, {
class: 'pagination-wrapper',
layout: layout.value,
})
}
},
}
const wrapper = mount(Comp)
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__rightwrapper').exists()).toBe(false)
layout.value = 'prev, pager, next, ->'
await nextTick()
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__rightwrapper').exists()).toBe(false)
layout.value = 'prev, pager, next, ->, jumper'
await nextTick()
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__rightwrapper').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__jump').exists()).toBe(true)
layout.value = 'prev, pager, next, ->, jumper, sizes'
await nextTick()
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__rightwrapper').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__jump').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__sizes').exists()).toBe(true)
layout.value = 'prev, pager, next, ->, jumper, sizes, total'
await nextTick()
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__rightwrapper').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__jump').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__sizes').exists()).toBe(true)
expect(wrapper.find('.el-pagination__rightwrapper .el-pagination__total').exists()).toBe(true)
})
test('slot', () => {
const TestComponent = {
template: `
@@ -201,6 +256,7 @@ describe('click pager', () => {
},
template: `
<el-pagination
popper-class="select-dropdown-klass"
@size-change="onSizeChange"
v-model:page-size="pageSize"
:total="1000"
@@ -218,7 +274,7 @@ describe('click pager', () => {
},
})
const items = document.querySelectorAll('.el-select-dropdown__item:not(.selected)');
const items = document.querySelector('.select-dropdown-klass').querySelectorAll('.el-select-dropdown__item:not(.selected)');
(items[0] as HTMLOptionElement)?.click()
expect(onSizeChange).toHaveBeenCalled()
expect(wrapper.vm.pageSize).toBe(100)

4
packages/pagination/src/index.ts
View File

@@ -254,8 +254,8 @@ export default defineComponent({
],
})
const rootChildren = []
const rightWrapperRoot = h('div', { class: 'el-pagination__rightwrapper' })
const rightWrapperChildren = []
const rightWrapperRoot = h('div', { class: 'el-pagination__rightwrapper' }, rightWrapperChildren)
const TEMPLATE_MAP = {
prev: h(Prev, {
disabled: this.disabled,
@@ -304,7 +304,7 @@ export default defineComponent({
}
})
if (haveRightWrapper) {
if (haveRightWrapper && rightWrapperChildren.length > 0) {
rootChildren.unshift(rightWrapperRoot)
}