FPagination.spec.js

import { shallowMount } from '@vue/test-utils'
import FPagination from './FPagination'

const WRAPPER_PROPS = { currentPage: 1, total: 100, perPage: 6, max: 10 }


describe('FPaginantion tests', () => {
  let WRAPPER

  beforeEach(() => WRAPPER = shallowMount(FPagination, { propsData: WRAPPER_PROPS }))

  test('Componente existe', () => {
    expect(WRAPPER.exists()).toBe(true)
  })

  test('Teste da computed que calcula número máximo de páginas', () => {
    expect(WRAPPER.vm.totalPages).toBe(17)

    WRAPPER.setProps({ total: 200 })
    expect(WRAPPER.vm.totalPages).toBe(34)
  })

  test('Teste do valor da computed de lista das páginas', () => {
    expect(WRAPPER.vm.show).toStrictEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

    WRAPPER.setData({ localCurrentPage: 11 })
    expect(WRAPPER.vm.show).toStrictEqual([6, 7, 8, 9, 10, 11, 12, 13, 14, 15])

    WRAPPER.setData({ localCurrentPage: 15 })
    expect(WRAPPER.vm.show).toStrictEqual([8, 9, 10, 11, 12, 13, 14, 15, 16, 17])

    WRAPPER.setData({ localCurrentPage: 18 })
    expect(WRAPPER.vm.show).toStrictEqual([8, 9, 10, 11, 12, 13, 14, 15, 16, 17])

    WRAPPER.setData({ localCurrentPage: 1 })
    expect(WRAPPER.vm.show).toStrictEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  })

  test('Teste da computed checa se a página atual é a primeira', () => {
    expect(WRAPPER.vm.isFirstPage).toBeTruthy()

    WRAPPER.setData({ localCurrentPage: 10 })
    expect(WRAPPER.vm.isFirstPage).toBeFalsy()
  })

  test('Teste da computed checa se a página atual é a última', () => {
    expect(WRAPPER.vm.isLastPage).toBeFalsy()

    WRAPPER.vm.jumpTo('last')
    expect(WRAPPER.vm.isLastPage).toBeTruthy()
  })

  test('Teste do método jumpTo', () => {
    expect(WRAPPER.vm.localCurrentPage).toBe(1)

    WRAPPER.vm.jumpTo('last')
    expect(WRAPPER.vm.localCurrentPage).toBe(17)

    WRAPPER.vm.jumpTo('first')
    expect(WRAPPER.vm.localCurrentPage).toBe(1)
  })

  test('Teste do método setCurrentPage', async () => {
    WRAPPER.vm.setCurrentPage(10)
    expect(WRAPPER.vm.localCurrentPage).toBe(10)

    // Wait util $emit has been handled and check for
    // event emission.
    await WRAPPER.vm.$nextTick()

    expect(WRAPPER.emitted()['update:current_page']).toBeTruthy()
    // The emitted() function returns the event as an Array
    // within an Array, for each event emmited.
    expect(WRAPPER.emitted()['update:current_page'][0][0]).toBe(10)

    WRAPPER.vm.setCurrentPage(0)
    expect(WRAPPER.vm.localCurrentPage).toBe(0)

    await WRAPPER.vm.$nextTick()
    expect(WRAPPER.emitted()['update:current_page']).toBeTruthy()
    expect(WRAPPER.emitted()['update:current_page'][1][0]).toBe(0)
  })

  test('Componente não alterado', () => {
    expect(WRAPPER.html()).toMatchSnapshot()
  })
})

FPagination.vue

<template>
  <section class="f-pagination">
    <ul>
      <li>
        <button :disabled="isFirstPage" @click="jumpTo('first')">
          Primeira
        </button>
      </li>
      <li>
        <button :disabled="isFirstPage" @click="jumpTo('prev')">
          <
        </button>
      </li>
      <li v-for="i in show" :key="i">
        <button :class="getPageClasses(i)" @click="setCurrentPage(i)">
          {{ i }}
        </button>
      </li>
      <li>
        <button :disabled="isLastPage" @click="jumpTo('next')">
          >
        </button>
      </li>
      <li>
        <button :disabled="isLastPage" @click="jumpTo('last')">
          Última
        </button>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'f-pagination',

  props: {
    currentPage: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    perPage: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      default: 10
    }
  },

  data: () => ({
    localCurrentPage: 0
  }),

  computed: {
    isFirstPage () {
      return this.localCurrentPage === 1
    },

    isLastPage () {
      return this.localCurrentPage === this.totalPages
    },

    totalPages() {
      if (!this.total || !this.perPage) return 0
      return Math.ceil(this.total / this.perPage)
    },

    show() {
      const base = this.localCurrentPage
      const max = this.max

      const factor = Math.ceil(max / 2)
      const pgFrom = base - factor
      const pgTo = base <= this.totalPages ? base + factor : this.totalPages

      const result = Array.from({ length: max }, (e, i) =>
        pgFrom + max > this.totalPages
          ? (this.totalPages + 1) - (max - i)
          : pgFrom < 0 ? i + 1 : pgFrom + i)
      
      return result
    }
  },

  methods: {
    getPageClasses (i) {
      return { 'selected': this.localCurrentPage === i }
    },

    setCurrentPage(value) {
      this.localCurrentPage = value
      this.$emit('update:current_page', value)
    },

    jumpTo(position) {
      const value = parseInt(this.localCurrentPage)

      if (position === 'first') this.setCurrentPage(1)
      if (position === 'last') this.setCurrentPage(this.totalPages)

      if (position === 'prev' && value > 0)
        this.setCurrentPage(value - 1)

      if (position === 'next' && value <= this.totalPages)
        this.setCurrentPage(value + 1)
    },

    initPagination () {
      this.localCurrentPage = parseInt(this.currentPage)
      this.lastPage = this.totalPages.length - 1
    }
  },

  created() {
    this.initPagination()
  }
}
</script>

<style lang="scss" scoped>
.f-pagination {
  user-select: none;

  &__icon {
    margin: auto;
  }

  ul,
  li {
    display: inline-block;
    min-height: 100%;
    text-align: center;
  }

  ul {
    display: flex;
    align-items: center;
    align-content: center;
    list-style-type: none;

    li {
      button {
        text-transform: capitalize;
        padding: 0;
        text-align: center;
        min-width: 35px;
        outline: none;
        color: var(--color-gray);

        &.selected {
          color: var(--color-primary);
        }

        &:hover {
          color: var(--color-primary-light);
        }

        &:disabled {
          opacity: 50%;
          cursor: default;
        }
      }
    }
  }
}
</style>