From f616fe6a83e83e73544f40b46e255a6290b08bbc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 23 Aug 2021 17:36:45 +0200
Subject: [PATCH] Add comment component

---
 .../frontend/rooms/article-page.spec.js       | 17 ++++++++--
 client/src/components/rooms/Comment.vue       | 31 +++++++++++++++++++
 client/src/components/rooms/CommentInput.vue  |  6 +++-
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/rooms/Comment.vue

diff --git a/client/cypress/integration/frontend/rooms/article-page.spec.js b/client/cypress/integration/frontend/rooms/article-page.spec.js
index f9926d9b..bb2a541f 100644
--- a/client/cypress/integration/frontend/rooms/article-page.spec.js
+++ b/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();
diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue
new file mode 100644
index 00000000..d1cd15bb
--- /dev/null
+++ b/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>
diff --git a/client/src/components/rooms/CommentInput.vue b/client/src/components/rooms/CommentInput.vue
index c1d557e7..cd599e7e 100644
--- a/client/src/components/rooms/CommentInput.vue
+++ b/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>