Fix tests for pagination buttons

- Now the buttons are disabled instead of remove from the DOM.

webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js

@@ -20,67 +20,67 @@ describe('PaginationButtons.vue', () => {
   }
 
   describe('mount', () => {
-    describe('next button', () => {
+    beforeEach(() => {
-      beforeEach(() => {
+      wrapper = Wrapper()
-        wrapper = Wrapper()
+    })
-      })
 
+    describe('next button', () => {
       it('is disabled by default', () => {
-        expect(wrapper.find('.next-button').exists()).toEqual(false)
+        const nextButton = wrapper.find('[data-test="next-button"]')
+        expect(nextButton.attributes().disabled).toEqual('disabled')
       })
 
       it('is enabled if hasNext is true', async () => {
         wrapper.setProps({ hasNext: true })
         await wrapper.vm.$nextTick()
-        expect(wrapper.find('.next-button').exists()).toEqual(true)
+        const nextButton = wrapper.find('[data-test="next-button"]')
+        expect(nextButton.attributes().disabled).toBeUndefined()
       })
 
       it('emits next when clicked', async () => {
         wrapper.setProps({ hasNext: true })
         await wrapper.vm.$nextTick()
-        wrapper.find('.next-button').trigger('click')
+        wrapper.find('[data-test="next-button"]').trigger('click')
         await wrapper.vm.$nextTick()
         expect(wrapper.emitted().next).toHaveLength(1)
       })
     })
 
     describe('back button', () => {
-      beforeEach(() => {
-        wrapper = Wrapper()
-      })
-
       it('is disabled by default', () => {
-        expect(wrapper.find('.previous-button').exists()).toEqual(false)
+        const backButton = wrapper.find('[data-test="previous-button"]')
+        expect(backButton.attributes().disabled).toEqual('disabled')
       })
 
       it('is enabled if hasPrevious is true', async () => {
         wrapper.setProps({ hasPrevious: true })
         await wrapper.vm.$nextTick()
-        expect(wrapper.find('.previous-button').exists()).toEqual(true)
+        const backButton = wrapper.find('[data-test="previous-button"]')
+        // expect(wrapper.find('.previous-button').exists()).toEqual(true)
+        expect(backButton.attributes().disabled).toBeUndefined()
       })
 
       it('emits back when clicked', async () => {
         wrapper.setProps({ hasPrevious: true })
         await wrapper.vm.$nextTick()
-        wrapper.find('.previous-button').trigger('click')
+        wrapper.find('[data-test="previous-button"]').trigger('click')
         await wrapper.vm.$nextTick()
         expect(wrapper.emitted().back).toHaveLength(1)
       })
     })
 
     describe('page counter', () => {
-      beforeEach(() => {
-        wrapper = Wrapper()
-      })
-
       it('displays the page counter when showPageCount is true', () => {
-        expect(wrapper.find('.pagination-pageCount').text().replace(/\s+/g, ' ')).toEqual('2 / 3')
+        const paginationPageCount = wrapper.find('[data-test="pagination-pageCount"]')
+        expect(paginationPageCount.text().replace(/\s+/g, ' ')).toEqual('2 / 3')
       })
 
       it('does not display the page counter when showPageCount is false', async () => {
         wrapper.setProps({ showPageCounter: false })
         await wrapper.vm.$nextTick()
-        expect(wrapper.find('.pagination-pageCount').exists()).toEqual(false)
+        const paginationPageCount = wrapper.find('[data-test="pagination-pageCount"]')
+        // expect(wrapper.find('.pagination-pageCount').exists()).toEqual(false)
+        expect(paginationPageCount.exists()).toEqual(false)
       })
     })
   })

webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="pagination-buttons">
     <base-button
+      class="previous-button"
       :disabled="!hasPrevious"
       icon="arrow-left"
       circle
-      class="previous-button"
+      data-test="previous-button"
       @click="$emit('back')"
     />
 
-    <span v-if="showPageCounter" class="pagination-pageCount">
+    <span v-if="showPageCounter" class="pagination-pageCount" data-test="pagination-pageCount">
       {{ $t('search.page') }} {{ activePage + 1 }} /
       {{ Math.floor((activeResourceCount - 1) / pageSize) + 1 }}
     </span>
 
     <base-button
+      class="next-button"
       :disabled="!hasNext"
       icon="arrow-right"
       circle
-      class="next-button"
+      data-test="next-button"
       @click="$emit('next')"
     />
   </div>