Add cypress test to expose comment creation bug

- at the moment, one can create the same comment by clicking rapidly on the "Comment" button
- an idea for a fix https://stackoverflow.com/questions/53101521/prevent-repeated-queries-in-apollo-server-2

cypress/integration/common/post.js

@@ -1,5 +1,7 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps'
 
+const narratorAvatar = 'https://s3.amazonaws.com/uifaces/faces/twitter/nerrsoft/128.jpg'
+
 Then('I click on the {string} button', text => {
   cy.get('button').contains(text).click()
 })
@@ -12,9 +14,26 @@ Then('my comment should be successfully created', () => {
 Then('I should see my comment', () => {
   cy.get('div.comment p')
     .should('contain', 'Human Connection rocks')
+    .get('.ds-avatar img')
+    .should('have.attr', 'src')
+    .and('contain', narratorAvatar)
 })
 
 Then('the editor should be cleared', () => {
   cy.get('.ProseMirror p')
     .should('have.class', 'is-empty')
 })
+
+Then('I rapidly double click on the {string} button', text => {
+  cy.get('button').contains(text).click().click()
+})
+
+Then('I should see my comment once', () => {
+  cy.get('div.comment p')
+    .should('contain', 'Human Connection rocks')
+    .and('have.length', 1)
+    .get('.ds-avatar img')
+    .should('have.attr', 'src')
+    .and('contain', narratorAvatar)
+    .and('have.length', 1)
+})

cypress/integration/common/steps.js

@@ -11,6 +11,7 @@ let loginCredentials = {
 }
 const narratorParams = {
   name: 'Peter Pan',
+  avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/nerrsoft/128.jpg',
   ...loginCredentials
 }
 

cypress/integration/post/Comment.feature

@@ -20,3 +20,14 @@ Feature: Post Comment
     Then my comment should be successfully created
     And I should see my comment
     And the editor should be cleared
+
+  Scenario: Prevention of multiple comment creation
+    Given I visit "post/bWBjpkTKZp/101-essays"
+    And I type in the following text:
+    """
+    Human Connection rocks
+    """
+    And I rapidly double click on the "Comment" button
+    Then my comment should be successfully created
+    And I should see my comment once
+    And the editor should be cleared

webapp/components/comments/CommentForm/index.vue

@@ -29,6 +29,7 @@
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
             <ds-button
               type="submit"
+              :loading="loading"
               :disabled="disabled || errors"
               primary
             >
@@ -56,6 +57,7 @@ export default {
   data() {
     return {
       disabled: true,
+      loading: false,
       form: {
         content: ''
       },
@@ -76,6 +78,8 @@ export default {
       this.$refs.editor.clear()
     },
     handleSubmit() {
+      this.loading = true
+      this.loading = false
       this.$apollo
         .mutate({
           mutation: gql`
@@ -92,9 +96,11 @@ export default {
           }
         })
         .then(res => {
+          this.loading = false
           this.$root.$emit('refetchPostComments', res.data.CreateComment)
           this.$refs.editor.clear()
           this.$toast.success(this.$t('post.comment.submitted'))
+          this.disabled = false
         })
         .catch(err => {
           this.$toast.error(err.message)