diff --git a/frontend/src/components/PaginationButtons.spec.js b/frontend/src/components/PaginationButtons.spec.js new file mode 100644 index 000000000..7a03d0443 --- /dev/null +++ b/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() + }) + }) + }) +}) diff --git a/frontend/src/components/PaginationButtons.vue b/frontend/src/components/PaginationButtons.vue index 82440a40e..ac7ff73c6 100644 --- a/frontend/src/components/PaginationButtons.vue +++ b/frontend/src/components/PaginationButtons.vue @@ -2,7 +2,7 @@
- + @@ -10,7 +10,7 @@

{{ currentPage }} / {{ totalPages }}

- + diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js index aa0a6f2d2..93dd748d6 100644 --- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js +++ b/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 }]) + }) + }) }) }) diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue index a9aafdb85..55f03f9e2 100644 --- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue +++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue @@ -2,7 +2,7 @@
@@ -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, }) },