Merge branch 'qa-add-wait-for-note-to-load' into 'master'

Add wait for note loading to shared component and update selectors

See merge request gitlab-org/gitlab!42884

app/assets/javascripts/notes/components/comment_form.vue

@@ -381,7 +381,8 @@ export default {
                 dir="auto"
                 :disabled="isSubmitting"
                 name="note[note]"
-                class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area qa-comment-input"
+                class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area"
+                data-qa-selector="comment_field"
                 data-supports-quick-actions="true"
                 :aria-label="__('Description')"
                 :placeholder="__('Write a comment or drag your files here…')"
@@ -426,7 +427,8 @@ export default {
               >
                 <gl-button
                   :disabled="isSubmitButtonDisabled"
-                  class="js-comment-button js-comment-submit-button qa-comment-button"
+                  class="js-comment-button js-comment-submit-button"
+                  data-qa-selector="comment_button"
                   type="submit"
                   category="primary"
                   variant="success"
@@ -440,7 +442,8 @@ export default {
                   name="button"
                   category="primary"
                   variant="success"
-                  class="note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
+                  class="note-type-toggle js-note-new-discussion dropdown-toggle"
+                  data-qa-selector="note_dropdown"
                   data-display="static"
                   data-toggle="dropdown"
                   icon="chevron-down"
@@ -469,7 +472,10 @@ export default {
                   </li>
                   <li class="divider droplab-item-ignore"></li>
                   <li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
-                    <button class="qa-discussion-option" @click.prevent="setNoteType('discussion')">
+                    <button
+                      data-qa-selector="discussion_menu_item"
+                      @click.prevent="setNoteType('discussion')"
+                    >
                       <i aria-hidden="true" class="fa fa-check icon"></i>
                       <div class="description">
                         <strong>{{ __('Start thread') }}</strong>

app/assets/javascripts/notes/components/note_actions.vue

@@ -275,7 +275,8 @@ export default {
         v-gl-tooltip
         type="button"
         title="Edit comment"
-        class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
+        class="note-action-button js-note-edit btn btn-transparent"
+        data-qa-selector="note_edit_button"
         @click="onEdit"
       >
         <gl-icon name="pencil" class="link-highlight" />

app/assets/javascripts/notes/components/note_form.vue

@@ -338,7 +338,8 @@ export default {
           v-model="updatedNoteBody"
           :data-supports-quick-actions="!isEditing"
           name="note[note]"
-          class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form qa-reply-input"
+          class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form"
+          data-qa-selector="reply_field"
           dir="auto"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"
@@ -377,7 +378,8 @@ export default {
             <button
               :disabled="isDisabled"
               type="button"
-              class="btn btn-success qa-start-review"
+              class="btn btn-success"
+              data-qa-selector="start_review_button"
               @click="handleAddToReview"
             >
               <template v-if="hasDrafts">{{ __('Add to review') }}</template>
@@ -386,7 +388,8 @@ export default {
             <button
               :disabled="isDisabled"
               type="button"
-              class="btn qa-comment-now js-comment-button"
+              class="btn js-comment-button"
+              data-qa-selector="comment_now_button"
               @click="handleUpdate()"
             >
               {{ __('Add comment now') }}
@@ -405,7 +408,8 @@ export default {
           <button
             :disabled="isDisabled"
             type="button"
-            class="js-vue-issue-save btn btn-success js-comment-button qa-reply-comment-button"
+            class="js-vue-issue-save btn btn-success js-comment-button"
+            data-qa-selector="reply_comment_button"
             @click="handleUpdate()"
           >
             {{ saveButtonTitle }}

app/assets/javascripts/notes/components/toggle_replies_widget.vue

@@ -57,7 +57,12 @@ export default {
           tooltip-placement="bottom"
         />
       </div>
-      <button class="btn btn-link js-replies-text qa-expand-replies" type="button" @click="toggle">
+      <button
+        class="btn btn-link js-replies-text"
+        data-qa-selector="expand_replies_button"
+        type="button"
+        @click="toggle"
+      >
         {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
       </button>
       {{ __('Last reply by') }}
@@ -68,7 +73,8 @@ export default {
     </template>
     <span
       v-else
-      class="collapse-replies-btn js-collapse-replies qa-collapse-replies"
+      class="collapse-replies-btn js-collapse-replies"
+      data-qa-selector="collapse_replies_button"
       @click="toggle"
     >
       <gl-icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }}

app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue

@@ -12,7 +12,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item class="note note-wrapper" data-qa-selector="skeleton_note">
+  <timeline-entry-item class="note note-wrapper" data-qa-selector="skeleton_note_placeholder">
     <div class="timeline-icon"></div>
     <div class="timeline-content">
       <div class="note-header"></div>

qa/qa/ee/page/group/epic/show.rb

@@ -42,7 +42,7 @@ module QA
             end
 
             def add_comment_to_epic(comment)
-              fill_element :comment_input, comment
+              fill_element :comment_field, comment
               click_element :comment_button
             end
 

qa/qa/page/component/note.rb

@@ -9,9 +9,18 @@ module QA
         def self.included(base)
           super
 
+          base.view 'app/assets/javascripts/diffs/components/diff_file_header.vue' do
+            element :toggle_comments_button
+          end
+
+          base.view 'app/assets/javascripts/notes/components/discussion_actions.vue' do
+            element :discussion_reply_tab
+            element :resolve_discussion_button
+          end
+
           base.view 'app/assets/javascripts/notes/components/comment_form.vue' do
             element :note_dropdown
-            element :discussion_option
+            element :discussion_menu_item
           end
 
           base.view 'app/assets/javascripts/notes/components/noteable_discussion.vue' do
@@ -23,39 +32,32 @@ module QA
           end
 
           base.view 'app/assets/javascripts/notes/components/note_form.vue' do
-            element :reply_input
+            element :reply_field
             element :reply_comment_button
           end
 
-          base.view 'app/assets/javascripts/notes/components/discussion_actions.vue' do
-            element :discussion_reply_tab
-            element :resolve_discussion_button
-          end
-
           base.view 'app/assets/javascripts/notes/components/toggle_replies_widget.vue' do
-            element :expand_replies
-            element :collapse_replies
+            element :expand_replies_button
+            element :collapse_replies_button
           end
 
-          base.view 'app/assets/javascripts/diffs/components/diff_file_header.vue' do
-            element :toggle_comments_button
+          base.view 'app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue' do
+            element :skeleton_note_placeholder
           end
         end
 
-        def start_discussion(text)
-          fill_element :comment_input, text
-          click_element :note_dropdown
-          click_element :discussion_option
-          click_element :comment_button
+        def collapse_replies
+          click_element :collapse_replies_button
         end
 
-        def toggle_comments(position)
-          all_elements(:toggle_comments_button, minimum: position)[position - 1].click
+        def edit_comment(text)
+          click_element :note_edit_button
+          fill_element :reply_field, text
+          click_element :reply_comment_button
         end
 
-        def type_reply_to_discussion(position, reply_text)
-          all_elements(:discussion_reply_tab, minimum: position)[position - 1].click
-          fill_element :reply_input, reply_text
+        def expand_replies
+          click_element :expand_replies_button
         end
 
         def reply_to_discussion(position, reply_text)
@@ -69,18 +71,24 @@ module QA
           end
         end
 
-        def collapse_replies
-          click_element :collapse_replies
+        def start_discussion(text)
+          fill_element :comment_field, text
+          click_element :note_dropdown
+          click_element :discussion_menu_item
+          click_element :comment_button
         end
 
-        def expand_replies
-          click_element :expand_replies
+        def toggle_comments(position)
+          all_elements(:toggle_comments_button, minimum: position)[position - 1].click
         end
 
-        def edit_comment(text)
-          click_element :note_edit_button
-          fill_element :reply_input, text
-          click_element :reply_comment_button
+        def type_reply_to_discussion(position, reply_text)
+          all_elements(:discussion_reply_tab, minimum: position)[position - 1].click
+          fill_element :reply_field, reply_text
+        end
+
+        def wait_for_loading
+          has_no_element?(:skeleton_note_placeholer)
         end
       end
     end

qa/qa/page/merge_request/show.rb

@@ -44,10 +44,6 @@ module QA
           element :squash_checkbox
         end
 
-        view 'app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue' do
-          element :skeleton_note
-        end
-
         view 'app/views/projects/merge_requests/show.html.haml' do
           element :notes_tab
           element :diffs_tab
@@ -74,8 +70,8 @@ module QA
         view 'app/assets/javascripts/notes/components/note_form.vue' do
           element :unresolve_review_discussion_checkbox
           element :resolve_review_discussion_checkbox
-          element :start_review
-          element :comment_now
+          element :start_review_button
+          element :comment_now_button
         end
 
         view 'app/assets/javascripts/batch_comments/components/preview_dropdown.vue' do
@@ -83,19 +79,19 @@ module QA
         end
 
         def start_review
-          click_element :start_review
+          click_element :start_review_button
 
           # After clicking the button, wait for it to disappear
           # before moving on to the next part of the test
-          has_no_element? :start_review
+          has_no_element? :start_review_button
         end
 
         def comment_now
-          click_element :comment_now
+          click_element :comment_now_button
 
           # After clicking the button, wait for it to disappear
           # before moving on to the next part of the test
-          has_no_element? :comment_now
+          has_no_element? :comment_now_button
         end
 
         def submit_pending_reviews
@@ -117,7 +113,7 @@ module QA
         end
 
         def resolve_review_discussion
-          scroll_to_element :start_review
+          scroll_to_element :start_review_button
           check_element :resolve_review_discussion_checkbox
         end
 
@@ -131,7 +127,7 @@ module QA
           end
           all_elements(:new_diff_line, minimum: 1).first.hover
           click_element(:diff_comment)
-          fill_element(:reply_input, text)
+          fill_element(:reply_field, text)
         end
 
         def click_discussions_tab
@@ -266,10 +262,6 @@ module QA
           end
         end
 
-        def wait_for_loading
-          has_no_element?(:skeleton_note)
-        end
-
         def click_open_in_web_ide
           click_element(:open_in_web_ide_button)
           wait_for_requests

qa/qa/page/project/issue/show.rb

@@ -12,7 +12,7 @@ module QA
 
           view 'app/assets/javascripts/notes/components/comment_form.vue' do
             element :comment_button
-            element :comment_input
+            element :comment_field
           end
 
           view 'app/assets/javascripts/notes/components/discussion_filter.vue' do
@@ -84,7 +84,7 @@ module QA
           # attachment option should be an absolute path
           def comment(text, attachment: nil, filter: :all_activities)
             method("select_#{filter}_filter").call
-            fill_element :comment_input, "#{text}\n"
+            fill_element :comment_field, "#{text}\n"
 
             unless attachment.nil?
               QA::Page::Component::Dropzone.new(self, '.new-note')
@@ -125,6 +125,8 @@ module QA
               click_element(:title)
               click_element :discussion_filter
               find_element(:filter_options, text: text).click
+
+              wait_for_loading
             end
           end
         end