Stub component, rename component, refactor

- We need to stub the Editor since it throws difficult to interpret
  errors about view.root.getSelection, but we want to stub it's methods
as well, so that we don't need a guard clause just for tests.

- CommentForm is already multiword
- Favor update over result for Vue apollo smart queries

webapp/components/Comment/Comment.spec.js

@@ -7,14 +7,9 @@ localVue.directive('scrollTo', jest.fn())
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
-config.stubs['content-viewer'] = '<span><slot /></span>'
 
 describe('Comment.vue', () => {
-  let propsData
+  let propsData, mocks, stubs, getters, wrapper, Wrapper
-  let mocks
-  let getters
-  let wrapper
-  let Wrapper
 
   beforeEach(() => {
     propsData = {}
@@ -42,6 +37,9 @@ describe('Comment.vue', () => {
         }),
       },
     }
+    stubs = {
+      ContentViewer: true,
+    }
     getters = {
       'auth/user': () => {
         return {}
@@ -62,6 +60,7 @@ describe('Comment.vue', () => {
         propsData,
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/components/Comment/Comment.vue

@@ -33,7 +33,7 @@
         </client-only>
       </ds-space>
       <div v-if="openEditCommentMenu">
-        <hc-comment-form
+        <comment-form
           :update="true"
           :post="post"
           :comment="comment"
@@ -73,7 +73,7 @@ import { COMMENT_MAX_UNTRUNCATED_LENGTH, COMMENT_TRUNCATE_TO_LENGTH } from '~/co
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
-import HcCommentForm from '~/components/CommentForm/CommentForm'
+import CommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
 import scrollToAnchor from '~/mixins/scrollToAnchor.js'
 import BaseButton from '~/components/_new/generic/BaseButton/BaseButton'
@@ -95,7 +95,7 @@ export default {
     UserTeaser,
     ContentMenu,
     ContentViewer,
-    HcCommentForm,
+    CommentForm,
     BaseButton,
   },
   props: {

webapp/components/CommentForm/CommentForm.vue

@@ -52,7 +52,6 @@ export default {
   },
   methods: {
     reply(message) {
-      if (!this.$refs.editor.insertReply) return null
       this.$refs.editor.insertReply(message)
     },
     updateEditorContent(value) {

webapp/components/Emotions/Emotions.vue

@@ -105,7 +105,7 @@ export default {
           postId: this.post.id,
         }
       },
-      result({ data: { PostsEmotionsByCurrentUser } }) {
+      update({ PostsEmotionsByCurrentUser }) {
         this.selectedEmotions = PostsEmotionsByCurrentUser
       },
     },

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

@@ -6,15 +6,12 @@ import CommentList from '~/components/CommentList/CommentList'
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'
-config.stubs['content-viewer'] = '<span><slot /></span>'
-config.stubs['hc-editor'] = '<span><slot /></span>'
-config.stubs['hc-emotions'] = '<span><slot /></span>'
 
 const localVue = global.localVue
 localVue.directive('scrollTo', jest.fn())
 
 describe('PostSlug', () => {
-  let wrapper, Wrapper, store, mocks, propsData, spy
+  let store, propsData, mocks, stubs, wrapper, Wrapper, spy
 
   beforeEach(() => {
     store = new Vuex.Store({
@@ -47,7 +44,7 @@ describe('PostSlug', () => {
       },
       $apollo: {
         mutate: jest.fn().mockResolvedValue(),
-        query: jest.fn().mockResolvedValue(),
+        query: jest.fn().mockResolvedValue({ data: { PostEmotionsCountByEmotion: {} } }),
       },
       $scrollTo: jest.fn(),
       $refs: {
@@ -59,6 +56,10 @@ describe('PostSlug', () => {
         },
       },
     }
+    stubs = {
+      HcEditor: { render: () => {}, methods: { insertReply: () => null } },
+      ContentViewer: true,
+    }
     jest.useFakeTimers()
     wrapper = Wrapper()
     wrapper.setData({
@@ -91,6 +92,7 @@ describe('PostSlug', () => {
         mocks,
         localVue,
         propsData,
+        stubs,
       })
     }
 

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

@@ -91,7 +91,7 @@
           @reply="reply"
         />
         <ds-space margin-bottom="large" />
-        <hc-comment-form
+        <comment-form
           ref="commentForm"
           v-if="showNewCommentForm"
           :post="post"
@@ -109,7 +109,7 @@ import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
-import HcCommentForm from '~/components/CommentForm/CommentForm'
+import CommentForm from '~/components/CommentForm/CommentForm'
 import CommentList from '~/components/CommentList/CommentList'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 import PostQuery from '~/graphql/PostQuery'
@@ -128,7 +128,7 @@ export default {
     UserTeaser,
     HcShoutButton,
     ContentMenu,
-    HcCommentForm,
+    CommentForm,
     CommentList,
     HcEmotions,
     ContentViewer,