test: specs is not ok

webapp/components/Comment/Comment.spec.js

@@ -68,7 +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'}
+          author: { id: 'commentAuthorId', slug: 'ogerly' },
         }
       })
 
@@ -202,21 +202,21 @@ 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'
-                },
-              ],
-            ])
-          })
+            [
+              {
+                id: 'commentAuthorId',
+                slug: 'ogerly',
+              },
+            ],
+          ])
+        })
       })
     })
   })

webapp/components/Comment/Comment.vue

@@ -76,7 +76,6 @@ import HcCommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
 import scrollToAnchor from '~/mixins/scrollToAnchor.js'
 
-
 export default {
   mixins: [scrollToAnchor],
   data() {

webapp/components/CommentList/CommentList.spec.js

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

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

@@ -1,7 +1,11 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import PostSlug from './index.vue'
 import Vuex from 'vuex'
-import CommentList from '~/components/CommentList/CommentList'
+import Vue from 'vue'
+
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+config.stubs['router-link'] = '<span><slot /></span>'
 
 const localVue = global.localVue
 
@@ -16,8 +20,9 @@ describe('PostSlug', () => {
     store = new Vuex.Store({
       getters: {
         'auth/user': () => {
-          return {}
+          return { id: '1stUser' }
         },
+        'auth/isModerator': () => false,
       },
     })
     propsData = {}
@@ -25,6 +30,7 @@ describe('PostSlug', () => {
       $t: jest.fn(),
       $filters: {
         truncate: a => a,
+        removeHtml: a => a,
       },
       $route: {
         hash: '',
@@ -41,14 +47,15 @@ describe('PostSlug', () => {
       },
       $apollo: {
         mutate: jest.fn().mockResolvedValue(),
+        query: jest.fn().mockResolvedValue(),
       },
+      $scrollTo: jest.fn(),
     }
   })
 
-
-  describe('shallowMount', () => {
+  describe('mount', () => {
     Wrapper = () => {
-      return shallowMount(PostSlug, {
+      return mount(PostSlug, {
         store,
         mocks,
         localVue,
@@ -56,20 +63,18 @@ describe('PostSlug', () => {
       })
     }
 
-    beforeEach(jest.useFakeTimers)
-
     describe('test Post callbacks', () => {
       beforeEach(() => {
         wrapper = Wrapper()
-        wrapper.setData({
-          post: {
-            id: 'p23',
-            name: 'It is a post',
-            author: {
-              id: 'u1',
-            },
-          },
-        })
+        // wrapper.setData({
+        //   post: {
+        //     id: 'p23',
+        //     name: 'It is a post',
+        //     author: {
+        //       id: 'u1',
+        //     },
+        //   },
+        // })
       })
 
       describe('deletion of Post from Page by invoking "deletePostCallback()"', () => {
@@ -94,17 +99,38 @@ describe('PostSlug', () => {
         })
       })
     })
-  })
 
-  describe('given a comment', () => {
-    wrapper = Wrapper()
-     const bar = wrapper.find(CommentList)
-     it('hc-comment-list', () => {
-      expect(bar).toBe({"selector": "Component"})
+    describe('test Post callbacks', () => {
+      beforeEach(() => {
+        beforeEach(jest.useFakeTimers)
+        wrapper = Wrapper()
+      })
+      it('CommentList', () => {
+        wrapper.setData({
+          post: {
+            id: 1,
+            author: {
+              id: '1stUser',
+            },
+            comments: [
+              {
+                id: 'comment134',
+                contentExcerpt: 'this is a comment',
+                content: 'this is a comment',
+                author: {
+                  id: '1stUser',
+                  slug: '1st-user',
+                },
+              },
+            ],
+          },
+        })
+        jest.runAllTimers()
+        Vue.nextTick()
+        const spy = jest.spyOn(wrapper.vm, 'reply')
+        console.log(spy)
+        expect(spy).toBe(true)
+      })
     })
-    
-       
-   
   })
 })
-

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

@@ -72,10 +72,11 @@
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list
-          @reply="reply"
+          class="hc-comment-list-for-test"
           :post="post"
           :routeHash="$route.hash"
           @toggleNewCommentForm="toggleNewCommentForm"
+          @reply="reply"
         />
         <ds-space margin-bottom="large" />
         <hc-comment-form
@@ -128,17 +129,11 @@ export default {
   data() {
     return {
       post: null,
-      ready: false,
+      ready: true,
       title: 'loading',
       showNewCommentForm: true,
     }
   },
-  watch: {
-    Post(post) {
-      this.post = post[0] || {}
-      this.title = this.post.title
-    },
-  },
   mounted() {
     setTimeout(() => {
       // NOTE: quick fix for jumping flexbox implementation
@@ -210,6 +205,10 @@ export default {
           id: this.$route.params.id,
         }
       },
+      update({ Post }) {
+        this.post = Post
+        this.title = this.post.title
+      },
       fetchPolicy: 'cache-and-network',
     },
   },