Copy+paste from post/_slug page

components/Comment.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount, mount, createLocalVue } from '@vue/test-utils'
 import Comment from './Comment.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
@@ -9,6 +9,7 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Styleguide)
 
+config.stubs['no-ssr'] = '<span><slot /></span>'
 
 describe('Comment.vue', () => {
   let wrapper
@@ -20,9 +21,12 @@ describe('Comment.vue', () => {
   beforeEach(() => {
     propsData = {}
     mocks = {
-      $t: jest.fn(),
+      $t: jest.fn()
     }
     getters = {
+      'auth/user': () => {
+        return {}
+      },
       'auth/isModerator': () => false
     }
   })
@@ -38,7 +42,7 @@ describe('Comment.vue', () => {
     describe('given a comment', () => {
       beforeEach(() => {
         propsData.comment = {
-          content: 'Hello I am a comment content'
+          contentExcerpt: 'Hello I am a comment content'
         }
       })
 

components/Comment.vue

@@ -1,33 +1,76 @@
 <template>
-  <div>
-    <div v-if="!disabled">
-      {{ comment.content }}
-    </div>
-    <div v-else>
-      {{ this.$t('comment.content.disabled-placeholder') }}
+  <div class="comment">
+    <div v-if="!deleted">
+      <ds-space
+        margin-bottom="x-small"
+      >
+        <hc-author :post="comment" />
+      </ds-space>
+      <no-ssr>
+        <content-menu
+          v-if="!deleted"
+          placement="bottom-end"
+          resource-type="comment"
+          style="float-right"
+          :item-id="comment.id"
+          :is-owner="isAuthor(author.id)"
+        />
+      </no-ssr>
+      <!-- eslint-disable vue/no-v-html -->
+      <!-- TODO: replace editor content with tiptap render view -->
+      <ds-space margin-bottom="small" />
+      <div
+        style="padding-left: 40px;"
+        v-html="comment.contentExcerpt"
+      />
     </div>
+    <!-- eslint-enable vue/no-v-html -->
+    <ds-text
+      v-else
+      style="padding-left: 40px; font-weight: bold;"
+      color="soft"
+    >
+      <ds-icon name="ban" /> {{ this.$t('comment.content.disabled-placeholder') }}
+    </ds-text>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import HcAuthor from '~/components/Author.vue'
+import ContentMenu from '~/components/ContentMenu'
 
 export default {
+  components: {
+    HcAuthor,
+    ContentMenu
+  },
   props: {
     comment: {
       type: Object,
       default() {
-        return {}
+        return { id: '' }
       }
     }
   },
   computed: {
     ...mapGetters({
+      user: 'auth/user',
       isModerator: 'auth/isModerator'
     }),
 
-    disabled() {
-      return this.comment.disabled && !this.isModerator
+    deleted() {
+      const { disabled, deleted } = this.comment
+      return (disabled || deleted) && !this.isModerator
+    },
+    author() {
+      if (this.deleted) return {}
+      return this.comment.author || {}
+    }
+  },
+  methods: {
+    isAuthor(id) {
+      return this.user.id === id
     }
   }
 }

components/ContentMenu.vue

@@ -53,7 +53,6 @@ export default {
   props: {
     placement: { type: String, default: 'top-end' },
     itemId: { type: String, required: true },
-    name: { type: String, required: true },
     isOwner: { type: Boolean, default: false },
     resourceType: {
       type: String,

pages/post/_slug/index.vue

@@ -89,41 +89,11 @@
           id="comments"
           class="comments"
         >
-          <div
+          <comment
             v-for="comment in post.comments"
             :key="comment.id"
-            :class="{comment: true, 'disabled-content': comment.disabled}"
-          >
-            <ds-space margin-bottom="x-small">
-              <hc-author :post="comment" />
-            </ds-space>
-            <no-ssr>
-              <content-menu
-                placement="bottom-end"
-                resource-type="comment"
-                style="float-right"
-                :item-id="comment.id"
-                :name="comment.author.name"
-                :is-owner="isAuthor(comment.author.id)"
-              />
-            </no-ssr>
-            <!-- eslint-disable vue/no-v-html -->
-            <!-- TODO: replace editor content with tiptap render view -->
-            <div
-              v-if="!comment.deleted"
-              style="padding-left: 40px;"
-              v-html="comment.contentExcerpt"
-            />
-            <!-- eslint-enable vue/no-v-html -->
-            <ds-text
-              v-else
-              style="padding-left: 40px; font-weight: bold;"
-              color="soft"
-            >
-              <ds-icon name="ban" /> Vom Benutzer gelöscht
-            </ds-text>
-          </div>
-          <ds-space margin-bottom="small" />
+            :comment="comment"
+          />
         </div>
         <hc-empty
           v-else
@@ -140,6 +110,7 @@ import ContentMenu from '~/components/ContentMenu'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcEmpty from '~/components/Empty.vue'
+import Comment from '~/components/Comment.vue'
 
 export default {
   transition: {
@@ -150,6 +121,7 @@ export default {
     HcAuthor,
     HcShoutButton,
     HcEmpty,
+    Comment,
     ContentMenu
   },
   head() {