From c66b7d4d22316417957f3bfeaed0aa91bd11e1ea Mon Sep 17 00:00:00 2001
From: Summer <SorrowX@users.noreply.github.com>
Date: Fri, 5 Mar 2021 22:42:13 +0800
Subject: [PATCH] fix(pagination): fix pagination component layout prop bug
 (#1576)

fix(pagination): fix pagination component layout prop bug

Co-authored-by: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
---
 .../pagination/__tests__/pagination.spec.ts   | 60 ++++++++++++++++++-
 packages/pagination/src/index.ts              |  4 +-
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/packages/pagination/__tests__/pagination.spec.ts b/packages/pagination/__tests__/pagination.spec.ts
index ed10c671c7..092bc04a44 100644
--- a/packages/pagination/__tests__/pagination.spec.ts
+++ b/packages/pagination/__tests__/pagination.spec.ts
@@ -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)
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
index e0da189266..3dfc4fd5ea 100644
--- a/packages/pagination/src/index.ts
+++ b/packages/pagination/src/index.ts
@@ -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)
     }