Check the click callback for FollowButtons

Author: roschaefer

components/Global/Elements/BlockButton/BlockButton.vue

@@ -11,6 +11,7 @@
     </template>
   </hc-button>
 </template>
+
 <script>
 import Icon from '~/components/Global/Elements/Icon/Icon.vue'
 import Button from '~/components/Global/Elements/Button/Button.vue'

components/Global/Elements/Follow/FollowButtons.test.js

@@ -6,12 +6,7 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 
-const propsData = {
-  entity: {
-    _id: 4711,
-    name: 'author'
-  }
-}
+let propsData
 
 const mocks = { $t: () => {} }
 
@@ -23,10 +18,21 @@ describe('FollowButtons.vue', () => {
   let currentUser
 
   beforeEach(() => {
+    propsData = {
+      entity: {
+        _id: 4711,
+        name: 'author'
+      }
+    }
     currentUser = {
       _id: 42
     }
     getters = {
+      'connections/follow': () => {
+        return { isPending: false, isFollowing: false }
+      },
+      'feathers-vuex-usersettings/current': () => { return {} },
+      'feathers-vuex-usersettings/isPending': () => false,
       'auth/user': () => { return currentUser },
     }
     actions = {
@@ -42,4 +48,21 @@ describe('FollowButtons.vue', () => {
     wrapper = shallowMount(FollowButtons, { store, localVue, propsData, mocks })
     expect(wrapper.is('div')).toBeTruthy()
   })
+
+  describe('showButtons === true', () => {
+    beforeEach(() => {
+      propsData.showButtons = true
+    })
+
+    describe('click', () => {
+      test('calls `click` method', () => {
+        const methods = {
+          click: jest.fn()
+        }
+        wrapper = mount(FollowButtons, { store, localVue, propsData, mocks, methods })
+        wrapper.find('button').trigger('click')
+        expect(methods.click).toHaveBeenCalled()
+      })
+    })
+  })
 })

components/Global/Elements/Follow/FollowButtons.vue

@@ -18,7 +18,7 @@
       <div class="column control has-text-centered">
         <hc-button color="button is-fullwidth"
                    :class="{'is-primary': !follow.isPending && !follow.isFollowing}"
-                   @click="toggleFollow"
+                   @click="click"
                    :disabled="follow.isPending"
                    :isLoading="follow.isPending">
           <template v-if="follow.isFollowing">
@@ -39,11 +39,15 @@
 <script>
   import { mapGetters } from 'vuex'
   import BlockButton from '~/components/Global/Elements/BlockButton/BlockButton'
+  import Icon from '~/components/Global/Elements/Icon/Icon.vue'
+  import Button from '~/components/Global/Elements/Button/Button.vue'
 
   export default {
     name: 'hc-follow-buttons',
     components: {
       'hc-block-button': BlockButton,
+      'hc-button': Button,
+      'hc-icon': Icon
     },
     props: {
       showButtons: {
@@ -94,6 +98,9 @@
           onConfirm: () => { next() }
         })
       },
+      async click(){
+        return this.toggleFollow();
+      },
       async toggleFollow () {
         if (this.follow._id) {
           await this.$store.dispatch('connections/unfollow', {