replace ds-card in CommentForm

webapp/components/CommentCard/CommentCard.spec.js

@@ -1,4 +1,4 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import CommentCard from './CommentCard.vue'
 import Vuex from 'vuex'
 
@@ -62,7 +62,7 @@ describe('CommentCard.vue', () => {
       const store = new Vuex.Store({
         getters,
       })
-      return shallowMount(CommentCard, {
+      return mount(CommentCard, {
         store,
         propsData,
         mocks,

webapp/components/CommentCard/CommentCard.vue

@@ -46,7 +46,7 @@
       circle
       size="small"
       v-scroll-to="'.editor'"
-      @click.prevent="reply"
+      @click="reply"
     />
   </base-card>
 </template>

webapp/components/CommentForm/CommentForm.vue

@@ -1,8 +1,7 @@
 <template>
   <ds-form v-model="form" @submit="handleSubmit" class="comment-form">
     <template slot-scope="{ errors }">
-      <ds-card>
-        <!-- with client-only the content is not shown -->
+      <base-card>
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
           <base-button
@@ -17,7 +16,7 @@
             {{ $t('post.comment.submit') }}
           </base-button>
         </div>
-      </ds-card>
+      </base-card>
     </template>
   </ds-form>
 </template>
@@ -146,10 +145,13 @@ export default {
 
 <style lang="scss">
 .comment-form {
+  .editor {
+    margin-bottom: $space-small;
+  }
+
   .buttons {
     display: flex;
     justify-content: flex-end;
-    margin: $space-small 0;
 
     > .base-button {
       margin-left: $space-x-small;

webapp/components/CommentList/CommentList.spec.js

@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils'
 import CommentList from './CommentList'
-import Comment from '~/components/Comment/Comment'
+import CommentCard from '~/components/CommentCard/CommentCard'
 import Vuex from 'vuex'
 import Vue from 'vue'
 
@@ -107,7 +107,7 @@ describe('CommentList.vue', () => {
       })
 
       it('Comment emitted reply()', () => {
-        wrapper.find(Comment).vm.$emit('reply', {
+        wrapper.find(CommentCard).vm.$emit('reply', {
           id: 'commentAuthorId',
           slug: 'ogerly',
         })

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

@@ -84,11 +84,7 @@
       </ds-space>
       <!-- Comments -->
       <ds-section slot="footer">
-        <comment-list
-          :post="post"
-          @toggleNewCommentForm="toggleNewCommentForm"
-          @reply="reply"
-        />
+        <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
         <ds-space margin-bottom="large" />
         <comment-form
           v-if="showNewCommentForm && !post.author.blocked"