From b378bcb2861c0e61c3ef9f9ce79db2f73541de22 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 27 May 2019 17:02:00 -0300
Subject: [PATCH 1/2] Fix edit field render bug(CommentForm)

- remove no-ssr, which was not necessary and causing the edit field not to appear the majority of the times visiting a Post.
- this was really bad user experience since a user would need to refresh the page to comment.
- removed args in refetchPostComments as there are no params passed in when it is called anymore
- needed to add an if statement since if there are no comments on a Post, then this.$apollo.queries.Post is undefined and it errors out trying to call refetch()
- update test to remove no-ssr

Co-authored-by: Mike Aono <aonomike@gmail.com>
---
 webapp/components/comments/CommentForm/index.vue | 14 ++++++--------
 webapp/components/comments/CommentForm/spec.js   |  4 +---
 webapp/components/comments/CommentList/index.vue | 10 ++++++----
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/webapp/components/comments/CommentForm/index.vue b/webapp/components/comments/CommentForm/index.vue
index 05ab2356e..f16c31ae3 100644
--- a/webapp/components/comments/CommentForm/index.vue
+++ b/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>
+        <hc-editor
+          ref="editor"
+          :users="users"
+          :value="form.content"
+          @input="updateEditorContent"
+        />
         <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%' }" />
diff --git a/webapp/components/comments/CommentForm/spec.js b/webapp/components/comments/CommentForm/spec.js
index 0259e7101..ded57348c 100644
--- a/webapp/components/comments/CommentForm/spec.js
+++ b/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
diff --git a/webapp/components/comments/CommentList/index.vue b/webapp/components/comments/CommentList/index.vue
index 3ea4337ba..cec640ab9 100644
--- a/webapp/components/comments/CommentList/index.vue
+++ b/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) {
-      this.$apollo.queries.Post.refetch()
+    refetchPostComments() {
+      if (this.$apollo.queries.Post) {
+        this.$apollo.queries.Post.refetch()
+      }
     },
   },
   apollo: {

From 745a326fbe74678c49af6997c60a27c89d7099bb Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 27 May 2019 19:16:27 -0300
Subject: [PATCH 2/2] Test refetching a Post with its comments

---
 .../comments/CommentList/CommentList.spec.js         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/webapp/components/comments/CommentList/CommentList.spec.js b/webapp/components/comments/CommentList/CommentList.spec.js
index 55a75fbb2..9bfa13ea5 100644
--- a/webapp/components/comments/CommentList/CommentList.spec.js
+++ b/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)
+    })
   })
 })