test: added some test

webapp/components/Comment/Comment.spec.js

@@ -1,4 +1,4 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import Comment from './Comment.vue'
 import Vuex from 'vuex'
 
@@ -47,14 +47,14 @@ describe('Comment.vue', () => {
     }
   })
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     beforeEach(jest.useFakeTimers)
 
     Wrapper = () => {
       const store = new Vuex.Store({
         getters,
       })
-      return shallowMount(Comment, {
+      return mount(Comment, {
         store,
         propsData,
         mocks,
@@ -68,6 +68,7 @@ describe('Comment.vue', () => {
           id: '2',
           contentExcerpt: 'Hello I am a comment content',
           content: 'Hello I am comment content',
+          author: { id: 'commentAuthorId', slug: 'ogerly'}
         }
       })
 
@@ -199,6 +200,24 @@ describe('Comment.vue', () => {
           })
         })
       })
+
+      describe('click reply button', () => {
+
+        beforeEach(async () => {
+          wrapper = Wrapper()
+          await wrapper.find('.reply-button').trigger('click')
+        }) 
+        it('emits "reply"', () => {
+          expect(wrapper.emitted('reply')).toEqual([
+              [
+                {
+                  id: 'commentAuthorId',
+                  slug: 'ogerly'
+                },
+              ],
+            ])
+          })
+      })
     })
   })
 })

webapp/components/Comment/Comment.vue

@@ -55,11 +55,11 @@
       </div>
       <ds-space margin-bottom="small" />
       <ds-button
-        :title="this.$t('post.comment.answer')"
+        :title="this.$t('post.comment.reply')"
         icon="level-down"
         @click.prevent="reply"
         v-scroll-to="'.editor'"
-        class="answerbutton"
+        class="reply-button"
         size="small"
       ></ds-button>
     </ds-card>
@@ -76,6 +76,7 @@ import HcCommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
 import scrollToAnchor from '~/mixins/scrollToAnchor.js'
 
+
 export default {
   mixins: [scrollToAnchor],
   data() {
@@ -148,7 +149,7 @@ export default {
     },
   },
   methods: {
-    reply(comment) {
+    reply() {
       const message = { slug: this.comment.author.slug, id: this.comment.author.id }
       this.$emit('reply', message)
     },
@@ -204,11 +205,11 @@ export default {
   float: right;
 }
 
-.answerbutton {
+.reply-button {
   float: right;
   top: 0px;
 }
-.answerbutton:after {
+.reply-button:after {
   clear: both;
 }
 

webapp/components/CommentList/CommentList.spec.js

@@ -103,4 +103,22 @@ describe('CommentList.vue', () => {
       })
     })
   })
+
+  describe('Comment', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+   
+    it('Comment emitted reply()', () => {
+      wrapper.find('.comment-tag').vm.$emit('reply')
+     expect(wrapper.emitted('reply')).toEqual([
+      [
+        {
+          id: 'commentAuthorId',
+          slug: 'ogerly'
+        },
+      ],
+    ])
+  })
+  })
 })

webapp/components/CommentList/CommentList.vue

@@ -17,6 +17,7 @@
         @deleteComment="updateCommentList"
         @updateComment="updateCommentList"
         @toggleNewCommentForm="toggleNewCommentForm"
+        class="comment-tag"
       />
     </div>
   </div>

webapp/locales/de.json

@@ -270,7 +270,7 @@
             "submit": "Kommentiere",
             "submitted": "Kommentar Gesendet",
             "updated": "Änderungen gespeichert",
-            "answer": "Antworten"
+            "reply": "Antworten"
         },
         "edited": "bearbeitet"
     },

webapp/locales/en.json

@@ -424,7 +424,7 @@
       "submit": "Comment",
       "submitted": "Comment Submitted",
       "updated": "Changes Saved",
-      "answer": "Answer"
+      "reply": "Reply"
     },
     "edited": "edited"
   },

webapp/pages/post/_id/_slug/index.spec.js

@@ -1,16 +1,16 @@
 import { config, shallowMount } from '@vue/test-utils'
 import PostSlug from './index.vue'
 import Vuex from 'vuex'
+import CommentList from '~/components/CommentList/CommentList'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('PostSlug', () => {
   let wrapper
   let Wrapper
   let store
   let mocks
+  let propsData
 
   beforeEach(() => {
     store = new Vuex.Store({
@@ -20,6 +20,7 @@ describe('PostSlug', () => {
         },
       },
     })
+    propsData = {}
     mocks = {
       $t: jest.fn(),
       $filters: {
@@ -44,12 +45,14 @@ describe('PostSlug', () => {
     }
   })
 
+
   describe('shallowMount', () => {
     Wrapper = () => {
       return shallowMount(PostSlug, {
         store,
         mocks,
         localVue,
+        propsData,
       })
     }
 
@@ -92,4 +95,16 @@ describe('PostSlug', () => {
       })
     })
   })
+
+  describe('given a comment', () => {
+    wrapper = Wrapper()
+     const bar = wrapper.find(CommentList)
+     it('hc-comment-list', () => {
+      expect(bar).toBe({"selector": "Component"})
+    })
+    
+       
+   
+  })
 })
+