unit tests for pagination buttons

frontend/src/components/PaginationButtons.spec.js

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import PaginationButtons from './PaginationButtons'
+
+const localVue = global.localVue
+
+describe('PaginationButtons', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(PaginationButtons, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.pagination-buttons').exists()).toBeTruthy()
+    })
+
+    it('has previous page button disabled by default', () => {
+      expect(wrapper.find('button.previous-page').attributes('disabled')).toBe('disabled')
+    })
+
+    it('has bext page button disabled by default', () => {
+      expect(wrapper.find('button.next-page').attributes('disabled')).toBe('disabled')
+    })
+
+    it('shows the text "1 / 1" by default"', () => {
+      expect(wrapper.find('p.text-center').text()).toBe('1 / 1')
+    })
+
+    describe('with active buttons', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          hasNext: true,
+          hasPrevious: true,
+        })
+      })
+
+      it('emits show-previous when previous page button is clicked', () => {
+        wrapper.find('button.previous-page').trigger('click')
+        expect(wrapper.emitted('show-previous')).toBeTruthy()
+      })
+
+      it('emits show-next when next page button is clicked', () => {
+        wrapper.find('button.next-page').trigger('click')
+        expect(wrapper.emitted('show-next')).toBeTruthy()
+      })
+    })
+  })
+})

frontend/src/components/PaginationButtons.vue

@@ -2,7 +2,7 @@
   <div class="pagination-buttons">
     <b-row class="m-4">
       <b-col class="text-right">
-        <b-button :disabled="!hasPrevious" @click="$emit('show-previous')">
+        <b-button class="previous-page" :disabled="!hasPrevious" @click="$emit('show-previous')">
           <b-icon icon="chevron-left" variant="primary"></b-icon>
         </b-button>
       </b-col>
@@ -10,7 +10,7 @@
         <p class="text-center pt-2">{{ currentPage }} / {{ totalPages }}</p>
       </b-col>
       <b-col>
-        <b-button :disabled="!hasNext" @click="$emit('show-next')">
+        <b-button class="next-page" :disabled="!hasNext" @click="$emit('show-next')">
           <b-icon icon="chevron-right" variant="primary"></b-icon>
         </b-button>
       </b-col>

frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js

@@ -202,16 +202,6 @@ describe('GddTransactionList', () => {
           expect(transaction.findAll('div').at(3).text()).toBe('decay')
         })
       })
-
-      describe('pageSize property set to 2', () => {
-        beforeEach(async () => {
-          await wrapper.setProps({ pageSize: 2 })
-        })
-
-        it('shows only 2 transactions', () => {
-          expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(2)
-        })
-      })
     })
 
     describe('with invalid transaction type', () => {
@@ -234,5 +224,69 @@ describe('GddTransactionList', () => {
         expect(errorHandler).toHaveBeenCalled()
       })
     })
+
+    describe('pagination buttons', () => {
+      const transactions = Array.from({ length: 42 }, (_, idx) => {
+        return {
+          balance: '3.14',
+          date: '2021-04-29T17:26:40+00:00',
+          memo: 'Kreiszahl PI',
+          name: 'Euklid',
+          transaction_id: idx + 1,
+          type: 'receive',
+        }
+      })
+
+      let paginationButtons
+
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions,
+          transactionCount: 42,
+          showPagination: true,
+        })
+        paginationButtons = wrapper.find('div.pagination-buttons')
+      })
+
+      it('shows the pagination buttons', () => {
+        expect(paginationButtons.exists()).toBeTruthy()
+      })
+
+      it('has the previous button disabled', () => {
+        expect(paginationButtons.find('button.previous-page').attributes('disabled')).toBe(
+          'disabled',
+        )
+      })
+
+      it('shows the text "1 / 2"', () => {
+        expect(paginationButtons.find('p.text-center').text()).toBe('1 / 2')
+      })
+
+      it('emits update-transactions when next button is clicked', async () => {
+        paginationButtons.find('button.next-page').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted('update-transactions')[1]).toEqual([{ firstPage: 2, items: 25 }])
+      })
+
+      it('shows text "2 / 2" when next button is clicked', async () => {
+        paginationButtons.find('button.next-page').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(paginationButtons.find('p.text-center').text()).toBe('2 / 2')
+      })
+
+      it('has next-button disabled when next button is clicked', async () => {
+        paginationButtons.find('button.next-page').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(paginationButtons.find('button.next-page').attributes('disabled')).toBe('disabled')
+      })
+
+      it('emits update-transactions when preivous button is clicked after next buton', async () => {
+        paginationButtons.find('button.next-page').trigger('click')
+        await wrapper.vm.$nextTick()
+        paginationButtons.find('button.previous-page').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted('update-transactions')[2]).toEqual([{ firstPage: 1, items: 25 }])
+      })
+    })
   })
 })

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -2,7 +2,7 @@
   <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
-        v-for="item in transactions.slice(0, pageSize)"
+        v-for="item in transactions"
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
@@ -104,7 +104,7 @@ export default {
   },
   props: {
     transactions: { default: () => [] },
-    pageSize: { type: Number, default: 5 },
+    pageSize: { type: Number, default: 25 },
     timestamp: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
     showPagination: { type: Boolean, default: false },
@@ -129,7 +129,7 @@ export default {
   methods: {
     updateTransactions() {
       this.$emit('update-transactions', {
-        firstPage: 1 + this.pageSize * (this.currentPage - 1),
+        firstPage: this.currentPage,
         items: this.pageSize,
       })
     },