Add Cypress test scenario for Chat Poll (#2114)

* feat: add test scenario for create/votes poll

* feat: improved test case for creating a poll

* chore: fixed dry

* feat: added test case for chat poll

frontend/views/containers/chatroom/CreatePoll.vue

@@ -3,14 +3,17 @@
   @click='onBackDropClick'
   @keyup.esc='close'
 )
-  .c-create-poll-wrapper(:style='this.ephemeral.isDesktopScreen ? this.ephemeral.wrapperPosition : {}')
+  .c-create-poll-wrapper(
+    data-test='createPollWrapper'
+    :style='this.ephemeral.isDesktopScreen ? this.ephemeral.wrapperPosition : {}'
+  )
     header.c-header
       i18n.is-title-2.c-popup-title(tag='h2') New poll
       modal-close.c-popup-close-btn(v-if='!ephemeral.isDesktopScreen' @close='close')
 
     section.c-body
       form.c-form(@submit.prevent='' :disabled='form.disabled')
-        .field
+        .field(data-test='question')
           input.input.c-input(
             name='question'
             ref='question'
@@ -22,7 +25,7 @@
             v-error:question=''
           )
 
-        .field.c-add-options
+        .field.c-add-options(data-test='options')
           i18n.label Add options
 
           .c-option-list(ref='optList')
@@ -46,13 +49,14 @@
 
           button.link.has-icon(
             v-if='enableMoreButton'
+            data-test='addOption'
             type='button'
             @click='addOption'
           )
             i.icon-plus
             i18n Add more
 
-        label.field
+        label.field(data-test='expiration')
           i18n.label Expires after (days)
           .selectbox
             select.select.c-duration-select(
@@ -81,6 +85,7 @@
         .buttons.c-btns-container(:class='{ "is-vertical": ephemeral.isDesktopScreen }')
           i18n.is-outlined(
             :class='{ "is-small": ephemeral.isDesktopScreen }'
+            data-test='cancel'
             tag='button'
             type='button'
             @click='close'
@@ -89,6 +94,7 @@
           i18n(
             :disabled='disableSubmit'
             :class='{ "is-small": ephemeral.isDesktopScreen }'
+            data-test='submit'
             tag='button'
             type='button'
             @click='submit'

frontend/views/containers/chatroom/MessageActions.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-menu-parent(ref='menu')
+menu-parent.c-message-menu(ref='menu')
   .c-actions
     tooltip(
       direction='top'

frontend/views/containers/chatroom/SendArea.vue

@@ -99,7 +99,7 @@
           )
             button.is-icon(
               :aria-label='L("Bold style text")'
-              @mousedown='transformTextSelectionToMarkdown($event, "bold")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("bold")'
             )
               i.icon-bold
           tooltip(
@@ -109,7 +109,7 @@
           )
             button.is-icon(
               :aria-label='L("Italic style text")'
-              @mousedown='transformTextSelectionToMarkdown($event, "italic")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("italic")'
             )
               i.icon-italic
           tooltip(
@@ -119,7 +119,7 @@
           )
             button.is-icon(
               :aria-label='L("Add code")'
-              @mousedown='transformTextSelectionToMarkdown($event, "code")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("code")'
             )
               i.icon-code
           tooltip(
@@ -129,7 +129,7 @@
           )
             button.is-icon(
               :aria-label='L("Add strikethrough")'
-              @mousedown='transformTextSelectionToMarkdown($event, "strikethrough")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("strikethrough")'
             )
               i.icon-strikethrough
           tooltip(
@@ -139,7 +139,7 @@
           )
             button.is-icon(
               :aria-label='L("Add link")'
-              @mousedown='transformTextSelectionToMarkdown($event, "link")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("link")'
             )
               i.icon-link
 
@@ -163,7 +163,7 @@
           )
             button.is-icon(
               :aria-label='L("Bold style text")'
-              @mousedown='transformTextSelectionToMarkdown($event, "bold")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("bold")'
             )
               i.icon-bold
           tooltip(
@@ -173,7 +173,7 @@
           )
             button.is-icon(
               :aria-label='L("Italic style text")'
-              @mousedown='transformTextSelectionToMarkdown($event, "italic")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("italic")'
             )
               i.icon-italic
           tooltip(
@@ -183,7 +183,7 @@
           )
             button.is-icon(
               :aria-label='L("Add code")'
-              @mousedown='transformTextSelectionToMarkdown($event, "code")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("code")'
             )
               i.icon-code
           tooltip(
@@ -193,7 +193,7 @@
           )
             button.is-icon(
               :aria-label='L("Add strikethrough")'
-              @mousedown='transformTextSelectionToMarkdown($event, "strikethrough")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("strikethrough")'
             )
               i.icon-strikethrough
           tooltip(
@@ -203,7 +203,7 @@
           )
             button.is-icon(
               :aria-label='L("Add link")'
-              @mousedown='transformTextSelectionToMarkdown($event, "link")'
+              @mousedown.prevent='transformTextSelectionToMarkdown("link")'
             )
               i.icon-link
 
@@ -214,6 +214,7 @@
               :text='L("Create poll")'
             )
               button.is-icon(
+                data-test='createPoll'
                 :aria-label='L("Create poll")'
                 @click='openCreatePollModal'
               )
@@ -808,8 +809,9 @@ export default ({
         this.endMention()
       }
     },
-    transformTextSelectionToMarkdown (e, type) {
-      e.preventDefault() // Calling e.preventDefault() in 'mousedown' event listener prevents the button from being focused upon click.
+    transformTextSelectionToMarkdown (type) {
+      // NOTE: should call preventDefault() for 'mousedown' event
+      //       to prevents the button from being focused upon click
 
       const prevFocusElement = document.activeElement // the captured activeElement inside 'mousedown' handler is still a previously focused element.
       const inputEl = this.$refs.textarea

frontend/views/containers/chatroom/poll-message-content/PollToVote.vue

@@ -20,18 +20,10 @@ form(@submit.prevent='')
 
   .buttons.c-buttons-container
     template(v-if='enableSubmitBtn')
-      button-submit.is-small(
-        v-if='isChangeMode'
-        type='button'
-        @click='changeVotes'
-      )
+      button-submit.is-small(v-if='isChangeMode' data-test='submit' type='button' @click='changeVotes')
         i18n Change vote
 
-      button-submit.is-small(
-        v-else
-        type='button'
-        @click='submitVotes'
-      )
+      button-submit.is-small(v-else type='button' data-test='submit' @click='submitVotes')
         i18n Submit
 
     i18n.is-small.is-outlined(v-if='isChangeMode' tag='button' type='button' @click='onCancelClick') Cancel

frontend/views/containers/chatroom/poll-message-content/PollVoteResult.vue

@@ -14,7 +14,7 @@
         i.icon-ellipsis-v
       menu-content.c-poll-menu-content
         ul
-          menu-item(tag='button' icon='edit' @click='$emit("request-vote-change")')
+          menu-item(tag='button' data-test='changeVote' icon='edit' @click='$emit("request-vote-change")')
             i18n Change vote
   .c-options-and-voters
     ul.c-options-list