Write a test for "load more" button

The crucial test is still missing: Write a test to check that no more
than one loading spinner is visible all the time.

@Tirokk FYI I wrote a page component test and made sure that the test
will also fail if the implementation is broken.

webapp/components/LoadMore.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-space margin-top="large" style="text-align: center">
+  <ds-space class="load-more" margin-top="large" style="text-align: center">
     <ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
       {{ $t('actions.loadMore') }}
     </ds-button>

webapp/pages/profile/_id/_slug.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import ProfileSlug from './_slug.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
@@ -7,6 +7,11 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.filter('date', d => d)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('ProfileSlug', () => {
   let wrapper
@@ -19,7 +24,7 @@ describe('ProfileSlug', () => {
         id: 'p23',
         name: 'It is a post',
       },
-      $t: jest.fn(),
+      $t: jest.fn(t => t),
       // If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
       $route: {
         params: {
@@ -84,4 +89,88 @@ describe('ProfileSlug', () => {
       })
     })
   })
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(ProfileSlug, {
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given an authenticated user', () => {
+      beforeEach(() => {
+        mocks.$filters = {
+          removeLinks: c => c,
+        }
+        mocks.$store = {
+          getters: {
+            'auth/user': {
+              id: 'u23',
+            },
+          },
+        }
+      })
+
+      describe('given a user for the profile', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.setData({
+            User: [
+              {
+                id: 'u3',
+                name: 'Bob the builder',
+                contributionsCount: 6,
+                shoutedCount: 7,
+                commentedCount: 8,
+              },
+            ],
+          })
+        })
+
+        it('displays name of the user', () => {
+          expect(wrapper.text()).toContain('Bob the builder')
+        })
+
+        describe('load more button', () => {
+          const aPost = {
+            title: 'I am a post',
+            content: 'This is my content',
+            contentExcerpt: 'This is my content',
+          }
+
+          describe('pagination returned less posts than available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays a "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(true)
+            })
+          })
+
+          describe('pagination returned as many posts as available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5, 6].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays no "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(false)
+            })
+          })
+        })
+      })
+    })
+  })
 })