Start writing component test

- restructured directories

webapp/components/comments/CommentForm/CommentForm.test.js

@@ -0,0 +1,74 @@
+import { config, mount, createLocalVue } 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 form
+  let propsData
+  let submitBtn
+  let cancelBtn
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest
+          .fn()
+          .mockRejectedValue({ message: 'Ouch!' })
+          .mockResolvedValueOnce({ data: { CreateComment: { contentExcerpt: 'this is a comment' } } })
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn()
+      },
+      $root: {
+        $emit: jest.fn()
+      } 
+    },
+    propsData = {
+      post: { id: 1  }
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(CommentForm, { mocks, localVue, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('calls the apollo mutation when form is submitted', () => {
+      wrapper.vm.updateEditorContent('ok')
+      form = wrapper.find('form')
+      form.trigger('submit')
+      expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+    })
+
+    it("calls clear method when the cancel button is clicked", () => {
+      const spy = jest.spyOn(wrapper.vm, 'clear')
+      wrapper.vm.updateEditorContent('ok')
+      cancelBtn = wrapper.find('.cancelBtn')
+      cancelBtn.trigger('click')
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('shows a success toaster if the mutation resolves', () => {
+      wrapper.vm.updateEditorContent('ok')
+      form = wrapper.find('form')
+      form.trigger('submit')
+      expect(mocks.$root.$emit).toHaveBeenCalledTimes(1)
+      expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+    })
+  })
+})

webapp/components/comments/CommentForm/index.vue

@@ -21,6 +21,7 @@
               :disabled="disabled"
               ghost
               @click.prevent="clear"
+              class="cancelBtn"
             >
               {{ $t('actions.cancel') }}
             </ds-button>
@@ -91,6 +92,7 @@ export default {
           }
         })
         .then(res => {
+          // console.log(this.$toast.success.mockResolvedValue())
           this.$root.$emit('addComment', res.data.CreateComment)
           this.$refs.editor.clear()
           this.$toast.success(this.$t('post.comment.submitted'))

webapp/graphql/PostCommentsQuery.js

@@ -5,7 +5,6 @@ export default app => {
   return gql(`
     query Post($slug: String!) {
       Post(slug: $slug) {
-        commentsCount
         comments(orderBy: createdAt_asc) {
           id
           contentExcerpt

webapp/pages/post/_id/_slug/index.vue

@@ -112,8 +112,8 @@ import HcTag from '~/components/Tag'
 import ContentMenu from '~/components/ContentMenu'
 import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
-import HcCommentForm from '~/components/CommentForm'
-import HcCommentList from '~/components/CommentList'
+import HcCommentForm from '~/components/comments/CommentForm'
+import HcCommentList from '~/components/comments/CommentList'
 
 export default {
   transition: {