fix(VPagination): fix v-pagination misbehavior (#3636) (#4651)

Author: clive107

src/components/VPagination/VPagination.js

@@ -63,7 +63,7 @@ export default {
       const left = Math.floor(maxLength / 2)
       const right = this.length - left + 1 + even
 
-      if (this.value >= left && this.value <= right) {
+      if (this.value > left && this.value < right) {
         const start = this.value - left + 2
         const end = this.value + left - 2 - even
 

test/unit/components/VPagination/VPagination.spec.js

@@ -127,6 +127,46 @@ test('VPagination.vue', ({ mount }) => {
     expect(wrapper.find('.v-pagination__more').length).toEqual(2)
   })
 
+  it('should only render start and end of range if value is equals "left"', async () => {
+    jest.useFakeTimers()
+    const wrapper = mount(VPagination, {
+      propsData: {
+        length: 100,
+        totalVisible: 5
+      }
+    })
+    const maxLength = wrapper.vm.totalVisible
+    const left = Math.floor(maxLength / 2)
+    wrapper.setProps({ value: left })
+    jest.runAllTimers()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-pagination__more').length).toEqual(1)
+  })
+
+  it('should only render start and end of range if value is equals "right"', async () => {
+    jest.useFakeTimers()
+    const wrapper = mount(VPagination, {
+      propsData: {
+        length: 100,
+        totalVisible: 5
+      }
+    })
+    const maxLength = wrapper.vm.totalVisible
+    const even = maxLength % 2 === 0 ? 1 : 0
+    const left = Math.floor(maxLength / 2)
+    const right = wrapper.vm.length - left + 1 + even
+    wrapper.setProps({ value: right })
+    jest.runAllTimers()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-pagination__more').length).toEqual(1)
+  })
+
   it('should use totalVisible prop if defined', async () => {
     jest.useFakeTimers()
     const wrapper = mount(VPagination, {

test/unit/components/VPagination/__snapshots__/VPagination.spec.js.snap

@@ -320,6 +320,106 @@ exports[`VPagination.vue should only render start and end of range if length is
 
 `;
 
+exports[`VPagination.vue should only render start and end of range if value is equals "left" 1`] = `
+
+<ul class="v-pagination">
+  <li>
+    <button class="v-pagination__navigation">
+      <i aria-hidden="true"
+         class="v-icon material-icons"
+      >
+        chevron_left
+      </i>
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      1
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item v-pagination__item--active primary">
+      2
+    </button>
+  </li>
+  <li>
+    <span class="v-pagination__more">
+      ...
+    </span>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      99
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      100
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__navigation">
+      <i aria-hidden="true"
+         class="v-icon material-icons"
+      >
+        chevron_right
+      </i>
+    </button>
+  </li>
+</ul>
+
+`;
+
+exports[`VPagination.vue should only render start and end of range if value is equals "right" 1`] = `
+
+<ul class="v-pagination">
+  <li>
+    <button class="v-pagination__navigation">
+      <i aria-hidden="true"
+         class="v-icon material-icons"
+      >
+        chevron_left
+      </i>
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      1
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      2
+    </button>
+  </li>
+  <li>
+    <span class="v-pagination__more">
+      ...
+    </span>
+  </li>
+  <li>
+    <button class="v-pagination__item v-pagination__item--active primary">
+      99
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__item">
+      100
+    </button>
+  </li>
+  <li>
+    <button class="v-pagination__navigation">
+      <i aria-hidden="true"
+         class="v-icon material-icons"
+      >
+        chevron_right
+      </i>
+    </button>
+  </li>
+</ul>
+
+`;
+
 exports[`VPagination.vue should render component in RTL mode and match snapshot 1`] = `
 
 <ul class="v-pagination">