Merge pull request #556 from Human-Connection/554-add-component-test-CommentForm

Write component tests for CommentForm.vue

webapp/components/comments/CommentForm/index.vue

@@ -97,8 +97,8 @@ export default {
         })
         .then(res => {
           this.loading = false
-          this.$root.$emit('refetchPostComments', res.data.CreateComment)
-          this.$refs.editor.clear()
+          this.$root.$emit('refetchPostComments')
+          this.clear()
           this.$toast.success(this.$t('post.comment.submitted'))
           this.disabled = false
         })

webapp/components/comments/CommentForm/spec.js

@@ -0,0 +1,92 @@
+import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils'
+import CommentForm from './index.vue'
+import Vue from 'vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+
+describe('CommentForm.vue', () => {
+  let mocks
+  let wrapper
+  let propsData
+  let cancelBtn
+  let cancelMethodSpy
+
+  beforeEach(() => {
+    ;(mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest
+          .fn()
+          .mockResolvedValueOnce({
+            data: { CreateComment: { contentExcerpt: 'this is a comment' } }
+          })
+          .mockRejectedValue({ message: 'Ouch!' })
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn()
+      }
+    }),
+      (propsData = {
+        post: { id: 1 }
+      })
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(CommentForm, { mocks, localVue, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+      cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
+    })
+
+    it('calls the apollo mutation when form is submitted', async () => {
+      wrapper.vm.updateEditorContent('this is a comment')
+      await wrapper.find('form').trigger('submit')
+      expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+    })
+
+    it('calls clear method when the cancel button is clicked', () => {
+      wrapper.vm.updateEditorContent('ok')
+      cancelBtn = wrapper.find('.cancelBtn')
+      cancelBtn.trigger('click')
+      expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
+    })
+
+    describe('mutation resolves', () => {
+      beforeEach(async () => {
+        wrapper.vm.updateEditorContent('this is a comment')
+        wrapper.find('form').trigger('submit')
+      })
+
+      it('shows a success toaster', async () => {
+        await mocks.$apollo.mutate
+        expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+      })
+
+      it('clears the editor', () => {
+        expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
+      })
+
+      it('emits a method call with the returned comment', () => {
+        const rootWrapper = createWrapper(wrapper.vm.$root)
+        expect(rootWrapper.emitted().refetchPostComments.length).toEqual(1)
+      })
+
+      describe('mutation fails', () => {
+        it('shows the error toaster', async () => {
+          await wrapper.find('form').trigger('submit')
+          await mocks.$apollo.mutate
+          expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
+        })
+      })
+    })
+  })
+})