From c6b11319fef76e455c3ccce7c8c6263624d05e46 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 22 Apr 2019 11:51:29 -0300
Subject: [PATCH] Clear editor, write cypress test

- the editor only clears once, also there are some other bugs associated with clearing it this way
- according to https://github.com/scrumpy/tiptap/issues/21 there should be a clearContent(), but haven't been able to get it to work
- cypress test for some reason is with a weird bug where I need to submit the form, then click on the submit button, otherwise it doesn't call the handleSubmit method
---
 cypress/integration/common/post.js       | 18 ++++++++++++++++++
 cypress/integration/post/Comment.feature |  7 ++++---
 webapp/pages/post/_id/_slug/index.vue    | 18 +++++++++---------
 3 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 cypress/integration/common/post.js

diff --git a/cypress/integration/common/post.js b/cypress/integration/common/post.js
new file mode 100644
index 000000000..fc03b20b3
--- /dev/null
+++ b/cypress/integration/common/post.js
@@ -0,0 +1,18 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+When('I should be able to post a comment', () => {
+  cy.get('.ProseMirror')
+    .type('This is a comment')
+    .get('.ds-form')
+    .submit()
+    .get('button')
+    .contains('Submit Comment')
+    .click()
+    .get('.iziToast-message')
+    .contains('Comment Submitted')
+  })
+  
+Then('I should see my comment', () => {
+  cy.get('div.comment p')
+    .should('contain', 'This is a comment')
+}) 
diff --git a/cypress/integration/post/Comment.feature b/cypress/integration/post/Comment.feature
index e82b7ee86..164c13bd6 100644
--- a/cypress/integration/post/Comment.feature
+++ b/cypress/integration/post/Comment.feature
@@ -1,7 +1,7 @@
 Feature: Post Comment
   As a user
   I want to comment on contributions of others
-  To be able to express my thoughts and emotions about these, discuss and add give further information.
+  To be able to express my thoughts and emotions about these, discuss, and add give further information.
 
   Background:
     Given we have the following posts in our database:
@@ -11,5 +11,6 @@ Feature: Post Comment
     And I am logged in
 
   Scenario:
-    Given I get to the post page of "101-essays"
-    Then I should be able to post a comment to the post "101-essays"
\ No newline at end of file
+    Given I visit "post/bWBjpkTKZp/101-essays"
+    Then I should be able to post a comment
+    And I should see my comment
\ No newline at end of file
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 58f254273..27b552608 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -97,7 +97,7 @@
       <!-- Comments -->
       <ds-section slot="footer">
         <ds-flex>
-          <ds-flex-item width="30%">
+          <ds-flex-item width="20%">
             <h3 style="margin-top: 0;">
               <span>
                 <ds-icon name="comments" />
@@ -111,7 +111,7 @@
               </span>
             </h3>
           </ds-flex-item>
-          <ds-flex-item width="70%">
+          <ds-flex-item width="80%">
             <ds-form
               ref="commentForm"
               v-model="form"
@@ -122,19 +122,18 @@
                 <ds-card>
                   <no-ssr>
                     <hc-editor
-                      :post="post" 
                       :value="form.content"
                       @input="updateEditorContent"
                     />
                   </no-ssr>
                   <ds-space />
                   <ds-flex>
-                    <ds-flex-item width="50%" />
+                    <ds-flex-item width="50%"/>
                     <ds-flex-item width="20%">
                       <ds-button
                         :disabled="loading || disabled"
                         ghost
-                        @click="clearEditor"
+                        @click.prevent="clearEditor"
                       >
                         {{ $t('actions.cancel') }}
                       </ds-button>
@@ -244,8 +243,9 @@ export default {
       this.$refs.commentForm.update('content', value)
     },
     clearEditor() {
-      this.$emit('clear')
-      this.$refs.commentForm.update('content', '')
+      this.loading = false
+      this.disabled = false
+      this.form.content = ' '
     },
     addComment(comment) {
       this.$apollo.queries.Post.refetch()
@@ -253,7 +253,7 @@ export default {
     },
     handleSubmit() {
       const content = this.form.content
-      this.form.content = ''
+      this.form.content = ' '
       this.$apollo
         .mutate({
           mutation: gql`
@@ -266,7 +266,7 @@ export default {
           `,
           variables: {
             postId: this.post.id,
-            content: content
+            content
           }
         })
         .then(res => {