Merge branch 'qa-fix-label-selectors-for-vue' into 'master'

Updates e2e tests to use vue selectors for labels

See merge request gitlab-org/gitlab!43214

app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue

@@ -89,6 +89,7 @@ export default {
     :labels-select-in-progress="labelsSelectInProgress"
     :selected-labels="selectedLabels"
     :variant="$options.sidebar"
+    data-qa-selector="labels_block"
     @onDropdownClose="handleDropdownClose"
     @updateSelectedLabels="handleUpdateSelectedLabels"
   >

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue

@@ -38,6 +38,7 @@ export default {
 <template>
   <div
     class="labels-select-dropdown-contents w-100 mt-1 mb-3 py-2 rounded-top rounded-bottom position-absolute"
+    data-qa-selector="labels_dropdown_content"
     :style="directionStyle"
   >
     <component :is="dropdownContentsView" />

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue

@@ -156,7 +156,11 @@ export default {
       />
     </div>
     <div class="dropdown-input" @click.stop="() => {}">
-      <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
+      <gl-search-box-by-type
+        v-model="searchKey"
+        :autofocus="true"
+        data-qa-selector="dropdown_input_field"
+      />
     </div>
     <div
       v-show="showListContainer"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue

@@ -35,6 +35,8 @@ export default {
     <template v-for="label in selectedLabels" v-else>
       <gl-label
         :key="label.id"
+        data-qa-selector="selected_label_content"
+        :data-qa-label-name="label.title"
         :title="label.title"
         :description="label.description"
         :background-color="label.color"

app/views/shared/issuable/_sidebar.html.haml

@@ -116,7 +116,7 @@
             selected_labels: issuable_sidebar[:labels].to_json } }
         - else
           - selected_labels = issuable_sidebar[:labels]
-          .block.labels
+          .block.labels{ data: { qa_selector: 'labels_block' } }
             .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(selected_labels), data: { placement: "left", container: "body", boundary: 'viewport' } }
               = sprite_icon('labels')
               %span
@@ -125,11 +125,11 @@
               = _('Labels')
               = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
               - if can_edit_issuable
-                = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { qa_selector: "edit_labels_link", track_label: "right_sidebar", track_property: "labels", track_event: "click_edit_button", track_value: "" }
-            .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?), data: { qa_selector: 'labels_block' } }
+                = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { qa_selector: "labels_edit_button", track_label: "right_sidebar", track_property: "labels", track_event: "click_edit_button", track_value: "" }
+            .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
               - if selected_labels.any?
                 - selected_labels.each do |label_hash|
-                  = render_label(label_from_hash(label_hash).present(issuable_subject: nil), link: sidebar_label_filter_path(issuable_sidebar[:project_issuables_path], label_hash[:title]), dataset: { qa_selector: 'label', qa_label_name: label_hash[:title] })
+                  = render_label(label_from_hash(label_hash).present(issuable_subject: nil), link: sidebar_label_filter_path(issuable_sidebar[:project_issuables_path], label_hash[:title]), dataset: { qa_selector: 'selected_label_content', qa_label_name: label_hash[:title] })
               - else
                 %span.no-value
                   = _('None')
@@ -141,7 +141,7 @@
                   %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
                     = multi_label_name(selected_labels, "Labels")
                   = icon('chevron-down', 'aria-hidden': 'true')
-                .dropdown-menu.dropdown-select.dropdown-menu-paging.qa-dropdown-menu-labels.dropdown-menu-labels.dropdown-menu-selectable.dropdown-extended-height
+                .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable.dropdown-extended-height{ data: { qa_selector: "labels_dropdown_content"} }
                   = render partial: "shared/issuable/label_page_default"
                   - if issuable_sidebar.dig(:current_user, :can_admin_label)
                     = render partial: "shared/issuable/label_page_create"

qa/qa/page/component/issuable/sidebar.rb

@@ -18,16 +18,29 @@ module QA
               element :more_assignees_link
             end
 
-            base.view 'app/helpers/dropdowns_helper.rb' do
+            base.view 'app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue' do
+              element :labels_block
+            end
+
+            base.view 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue' do
+              element :selected_label_content
+            end
+
+            base.view 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue' do
+              element :labels_dropdown_content
+            end
+
+            base.view 'app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue' do
+              element :labels_edit_button
+            end
+
+            base.view 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue' do
               element :dropdown_input_field
             end
 
             base.view 'app/views/shared/issuable/_sidebar.html.haml' do
               element :assignee_block
-              element :dropdown_menu_labels
-              element :edit_labels_link
               element :edit_milestone_link
-              element :labels_block
               element :milestone_block
               element :milestone_link
             end
@@ -64,7 +77,7 @@ module QA
 
           def has_label?(label)
             within_element(:labels_block) do
-              !!has_element?(:label, label_name: label)
+              !!has_element?(:selected_label_content, label_name: label)
             end
           end
 
@@ -80,23 +93,25 @@ module QA
 
           def select_labels_and_refresh(labels)
             Support::Retrier.retry_until do
-              click_element(:edit_labels_link)
-              has_element?(:dropdown_menu_labels, text: labels.first)
+              click_element(:labels_edit_button)
+              has_element?(:labels_dropdown_content, text: labels.first)
             end
 
             labels.each do |label|
-              within_element(:dropdown_menu_labels, text: label) do
+              within_element(:labels_dropdown_content) do
                 send_keys_to_element(:dropdown_input_field, [label, :enter])
               end
             end
 
-            click_element(:edit_labels_link)
+            click_element(:labels_edit_button)
 
             labels.each do |label|
               has_element?(:labels_block, text: label, wait: 0)
             end
 
             refresh
+
+            wait_for_requests
           end
 
           def toggle_more_assignees_link

qa/qa/specs/features/browser_ui/3_create/merge_request/create_merge_request_spec.rb

@@ -29,7 +29,7 @@ module QA
         end
       end
 
-      it 'creates a merge request with a milestone and label', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/514', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/254988', type: :stale } do
+      it 'creates a merge request with a milestone and label', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/514' do
         gitlab_account_username = "@#{Runtime::User.username}"
 
         milestone = Resource::ProjectMilestone.fabricate_via_api! do |milestone|

qa/qa/specs/features/ee/browser_ui/2_plan/scoped_labels/editing_scoped_labels_spec.rb

 # frozen_string_literal: true
 
 module QA
-  RSpec.describe 'Plan', :reliable do
+  RSpec.describe 'Plan' do
     describe 'Editing scoped labels on issues' do
       let(:initial_label) { 'animal::fox' }
       let(:new_label_same_scope) { 'animal::dolphin' }
@@ -33,7 +33,7 @@ module QA
         issue.visit!
       end
 
-      it 'correctly applies simple and multiple colon scoped pairs labels', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/595', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/254960', type: :stale } do
+      it 'correctly applies simple and multiple colon scoped pairs labels', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/595' do
         Page::Project::Issue::Show.perform do |show|
           show.select_labels_and_refresh([
             new_label_same_scope,
@@ -42,15 +42,15 @@ module QA
             new_label_different_scope_multi_colon
           ])
 
-          show.select_all_activities_filter
-
+          aggregate_failures do
             expect(show).to have_label(new_label_same_scope)
             expect(show).to have_label(new_label_different_scope)
-          expect(show).to have_label('group::car::porsche')
-          expect(show).to have_label('group::truck::mercedes-bens')
+            expect(show).to have_label(new_label_same_scope_multi_colon)
+            expect(show).to have_label(new_label_different_scope_multi_colon)
 
             expect(show).not_to have_label(initial_label)
-          expect(show).not_to have_label('group::car::ferrari')
+            expect(show).not_to have_label(initial_label_multi_colon)
+          end
         end
       end
     end