Merge pull request #690 from Human-Connection/582-edit-field-bug-comment-form

Fix edit field render bug(CommentForm)

webapp/components/comments/CommentForm/index.vue

@@ -5,14 +5,12 @@
   >
     <template slot-scope="{ errors }">
       <ds-card>
-        <no-ssr>
         <hc-editor
           ref="editor"
           :users="users"
           :value="form.content"
           @input="updateEditorContent"
         />
-        </no-ssr>
         <ds-space />
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />

webapp/components/comments/CommentForm/spec.js

@@ -1,4 +1,4 @@
-import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils'
+import { mount, createLocalVue, createWrapper } from '@vue/test-utils'
 import CommentForm from './index.vue'
 import Styleguide from '@human-connection/styleguide'
 
@@ -6,8 +6,6 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 
-config.stubs['no-ssr'] = '<span><slot /></span>'
-
 describe('CommentForm.vue', () => {
   let mocks
   let wrapper

webapp/components/comments/CommentList/CommentList.spec.js

@@ -33,6 +33,13 @@ describe('CommentList.vue', () => {
   })
   mocks = {
     $t: jest.fn(),
+    $apollo: {
+      queries: {
+        Post: {
+          refetch: jest.fn(),
+        },
+      },
+    },
   }
   data = () => {
     return {
@@ -63,5 +70,10 @@ describe('CommentList.vue', () => {
     it('displays comments when there are comments to display', () => {
       expect(wrapper.find('div#comments').text()).toEqual('this is a comment')
     })
+
+    it("refetches a post's comments from the backend", () => {
+      wrapper.vm.refetchPostComments()
+      expect(mocks.$apollo.queries.Post.refetch).toHaveBeenCalledTimes(1)
+    })
   })
 })

webapp/components/comments/CommentList/index.vue

@@ -54,13 +54,15 @@ export default {
     },
   },
   mounted() {
-    this.$root.$on('refetchPostComments', comment => {
-      this.refetchPostComments(comment)
+    this.$root.$on('refetchPostComments', () => {
+      this.refetchPostComments()
     })
   },
   methods: {
-    refetchPostComments(comment) {
+    refetchPostComments() {
+      if (this.$apollo.queries.Post) {
         this.$apollo.queries.Post.refetch()
+      }
     },
   },
   apollo: {