Add comment component

client/cypress/integration/frontend/rooms/article-page.spec.js

@@ -1,9 +1,20 @@
 import {getMinimalMe} from '../../../support/helpers';
 
 describe('Article page', () => {
+  const slug = 'this-article-has-a-slug';
+
   const operations = {
     MeQuery: getMinimalMe({}),
-    RoomEntryQuery: {}
+    RoomEntryQuery: {
+      roomEntry: {
+        slug,
+        id: 'room-entry-id',
+        title: 'Some Room Entry, yay!',
+        comments: {
+          edges: [],
+        },
+      },
+    },
   };
 
   beforeEach(() => {
@@ -12,11 +23,11 @@ describe('Article page', () => {
 
   it('goes to article and leaves a comment', () => {
     cy.mockGraphqlOps({
-      operations
+      operations,
     });
 
     const commentText = 'First! 🖐️';
-    cy.visit('/article/this-article-has-a-slug');
+    cy.visit(`/article/${slug}`);
     cy.getByDataCy('comment-textarea').type(commentText);
     cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
     cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();

client/src/components/rooms/Comment.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="comment"
+    data-cy="comment">
+    <div>
+      Author {{ comment.author }}
+    </div>
+    <div>
+      Datum {{ comment.created }}
+    </div>
+    <div>
+      Text {{ comment.text }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      comment: {
+        type: Object,
+        default: null
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/components/rooms/CommentInput.vue

@@ -7,7 +7,11 @@
       data-cy="comment-textarea"
       class="comment-input__textarea"
       placeholder="Kommentar erfassen"
-      @input="$emit('input', $event.target.value)"/>
+    />
+    <a
+      data-cy="submit-comment"
+      class="button button--primary"
+      @click="$emit('input', $event.target.value)">Kommentar teilen</a>
   </div>
 </template>