Started writing Jest tests for Deletion of Comments

webapp/components/Comment.spec.js

@@ -1,4 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import {
+  config,
+  shallowMount,
+  createLocalVue
+} from '@vue/test-utils'
 import Comment from './Comment.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
@@ -14,6 +18,8 @@ describe('Comment.vue', () => {
   let propsData
   let mocks
   let getters
+  let wrapper
+  let Wrapper
 
   beforeEach(() => {
     propsData = {}
@@ -29,11 +35,16 @@ describe('Comment.vue', () => {
   })
 
   describe('shallowMount', () => {
-    const Wrapper = () => {
+    Wrapper = () => {
       const store = new Vuex.Store({
         getters,
       })
-      return shallowMount(Comment, { store, propsData, mocks, localVue })
+      return shallowMount(Comment, {
+        store,
+        propsData,
+        mocks,
+        localVue,
+      })
     }
 
     describe('given a comment', () => {
@@ -45,7 +56,7 @@ describe('Comment.vue', () => {
       })
 
       it('renders content', () => {
-        const wrapper = Wrapper()
+        wrapper = Wrapper()
         expect(wrapper.text()).toMatch('Hello I am a comment content')
       })
 
@@ -55,19 +66,22 @@ describe('Comment.vue', () => {
         })
 
         it('renders no comment data', () => {
-          const wrapper = Wrapper()
+          wrapper = Wrapper()
           expect(wrapper.text()).not.toMatch('comment content')
         })
 
         it('has no "disabled-content" css class', () => {
-          const wrapper = Wrapper()
+          wrapper = Wrapper()
           expect(wrapper.classes()).not.toContain('disabled-content')
         })
 
         it('translates a placeholder', () => {
-          /* const wrapper = */ Wrapper()
+          /* const wrapper = */
+          Wrapper()
           const calls = mocks.$t.mock.calls
-          const expected = [['comment.content.unavailable-placeholder']]
+          const expected = [
+            ['comment.content.unavailable-placeholder']
+          ]
           expect(calls).toEqual(expect.arrayContaining(expected))
         })
 
@@ -77,16 +91,50 @@ describe('Comment.vue', () => {
           })
 
           it('renders comment data', () => {
-            const wrapper = Wrapper()
+            wrapper = Wrapper()
             expect(wrapper.text()).toMatch('comment content')
           })
 
           it('has a "disabled-content" css class', () => {
-            const wrapper = Wrapper()
+            wrapper = Wrapper()
             expect(wrapper.classes()).toContain('disabled-content')
           })
         })
       })
+
+      beforeEach(jest.useFakeTimers)
+
+      describe('test callbacks', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+        })
+
+        describe('deletion of Comment from List by invoking "deleteCommentCallback()"', () => {
+          beforeEach(() => {
+            wrapper.vm.deleteCommentCallback()
+          })
+
+          describe('after timeout', () => {
+            beforeEach(jest.runAllTimers)
+
+            it('emits "deleteComment"', () => {
+              expect(wrapper.emitted().deleteComment.length).toBe(1)
+            })
+
+            // it('does not go to index (main) page', () => {
+            //   expect(mocks.$router.history.push).not.toHaveBeenCalled()
+            // })
+
+            it('does call mutation', () => {
+              expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+            })
+
+            it('mutation is successful', () => {
+              expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+            })
+          })
+        })
+      })
     })
   })
 })