From 30d0ff3cc7c747509f4c4725c4294df49986de5a Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 26 Apr 2019 11:31:18 -0300
Subject: [PATCH] Search for button with text "Comment" in cypress test

---
 cypress/integration/common/post.js       | 4 ++++
 cypress/integration/post/Comment.feature | 2 +-
 webapp/components/CommentForm/index.vue  | 8 ++++----
 webapp/pages/post/_id/_slug/index.vue    | 5 ++++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/common/post.js b/cypress/integration/common/post.js
index 23a7d5764..85a9f3339 100644
--- a/cypress/integration/common/post.js
+++ b/cypress/integration/common/post.js
@@ -1,5 +1,9 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps'
 
+Then('I click on the {string} button', text => {
+  cy.get('button').contains(text).click()
+})
+
 Then('my comment should be successfully created', () => {
   cy.get('.iziToast-message')
     .contains('Comment Submitted')
diff --git a/cypress/integration/post/Comment.feature b/cypress/integration/post/Comment.feature
index 9d76a8cef..e7e462824 100644
--- a/cypress/integration/post/Comment.feature
+++ b/cypress/integration/post/Comment.feature
@@ -16,7 +16,7 @@ Feature: Post Comment
     """
     Human Connection rocks
     """
-    And I click on "Comment"
+    And I click on the "Comment" button
     Then my comment should be successfully created
     And I should see my comment
     And the editor should be cleared
diff --git a/webapp/components/CommentForm/index.vue b/webapp/components/CommentForm/index.vue
index b1f3ddf80..3c73300c2 100644
--- a/webapp/components/CommentForm/index.vue
+++ b/webapp/components/CommentForm/index.vue
@@ -14,9 +14,9 @@
           />
         </no-ssr>
         <ds-space />
-        <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }" >
-          <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%',  xs: '0%' }" />
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }" >
+        <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
+          <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
+          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
             <ds-button
               :disabled="disabled"
               ghost
@@ -25,7 +25,7 @@
               {{ $t('actions.cancel') }}
             </ds-button>
           </ds-flex-item>
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }" >
+          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
             <ds-button
               type="submit"
               :disabled="disabled || errors"
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 40077d5f9..f83925f68 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -125,7 +125,10 @@
           icon="messages"
         />
         <ds-space margin-bottom="large" />
-        <hc-comment-form :post="post" @addComment="addComment" />
+        <hc-comment-form
+          :post="post"
+          @addComment="addComment"
+        />
       </ds-section>
     </ds-card>
   </transition>