Update mini pipeline selectors to use data-testid

This change updates one of the widely used mini pipeline classes
to use data-testid in feature tests.

app/assets/javascripts/pipelines/components/pipelines_list/stage.vue

@@ -160,7 +160,8 @@ export default {
       v-gl-tooltip.hover
       :class="triggerButtonClass"
       :title="stage.title"
-      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
+      class="mini-pipeline-graph-dropdown-toggle"
+      data-testid="mini-pipeline-graph-dropdown-toggle"
       data-toggle="dropdown"
       data-display="static"
       type="button"

ee/spec/features/merge_trains/user_adds_merge_request_to_merge_train_spec.rb

@@ -69,11 +69,11 @@ RSpec.describe 'User adds a merge request to a merge train', :js do
       end
 
       it 'displays pipeline control' do
-        expect(page).to have_selector('.mini-pipeline-graph-dropdown-toggle')
+        expect(page).to have_selector('[data-testid="mini-pipeline-graph-dropdown-toggle"]')
       end
 
       it 'does not allow retry for merge train pipeline' do
-        find('.mini-pipeline-graph-dropdown-toggle').click
+        find('[data-testid="mini-pipeline-graph-dropdown-toggle"]').click
         page.within '.ci-job-component' do
           expect(page).to have_selector('.ci-status-icon')
           expect(page).not_to have_selector('.retry')

spec/features/merge_request/user_sees_mini_pipeline_graph_spec.rb

@@ -9,6 +9,8 @@ RSpec.describe 'Merge request < User sees mini pipeline graph', :js do
   let(:pipeline) { create(:ci_empty_pipeline, project: project, ref: 'master', status: 'running', sha: project.commit.id) }
   let(:build) { create(:ci_build, pipeline: pipeline, stage: 'test') }
 
+  dropdown_toggle_selector = '[data-testid="mini-pipeline-graph-dropdown-toggle"]'
+
   before do
     build.run
     build.trace.set('hello')
@@ -51,40 +53,25 @@ RSpec.describe 'Merge request < User sees mini pipeline graph', :js do
 
   describe 'build list toggle' do
     let(:toggle) do
-      find('.mini-pipeline-graph-dropdown-toggle')
-      first('.mini-pipeline-graph-dropdown-toggle')
+      find(dropdown_toggle_selector)
+      first(dropdown_toggle_selector)
     end
 
     # Status icon button styles should update as described in
     # https://gitlab.com/gitlab-org/gitlab-foss/issues/42769
     it 'has unique styles for default, :hover, :active, and :focus states' do
-      find('.mini-pipeline-graph-dropdown-toggle')
-      default_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
-      default_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
-      default_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
+      default_background_color, default_foreground_color, default_box_shadow = get_toggle_colors(dropdown_toggle_selector)
 
       toggle.hover
-
-      find('.mini-pipeline-graph-dropdown-toggle')
-      hover_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
-      hover_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
-      hover_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
+      hover_background_color, hover_foreground_color, hover_box_shadow = get_toggle_colors(dropdown_toggle_selector)
 
       page.driver.browser.action.click_and_hold(toggle.native).perform
-
-      find('.mini-pipeline-graph-dropdown-toggle')
-      active_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
-      active_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
-      active_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
+      active_background_color, active_foreground_color, active_box_shadow = get_toggle_colors(dropdown_toggle_selector)
 
       page.driver.browser.action.release(toggle.native)
                                 .move_by(100, 100)
                                 .perform
-
-      find('.mini-pipeline-graph-dropdown-toggle')
-      focus_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
-      focus_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
-      focus_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
+      focus_background_color, focus_foreground_color, focus_box_shadow = get_toggle_colors(dropdown_toggle_selector)
 
       expect(default_background_color).not_to eq(hover_background_color)
       expect(hover_background_color).not_to eq(active_background_color)
@@ -112,8 +99,8 @@ RSpec.describe 'Merge request < User sees mini pipeline graph', :js do
 
   describe 'builds list menu' do
     let(:toggle) do
-      find('.mini-pipeline-graph-dropdown-toggle')
-      first('.mini-pipeline-graph-dropdown-toggle')
+      find(dropdown_toggle_selector)
+      first(dropdown_toggle_selector)
     end
 
     before do
@@ -157,4 +144,15 @@ RSpec.describe 'Merge request < User sees mini pipeline graph', :js do
       end
     end
   end
+
+  private
+
+  def get_toggle_colors(selector)
+    find(selector)
+    [
+      evaluate_script("$('#{selector}:visible').css('background-color');"),
+      evaluate_script("$('#{selector}:visible svg').css('fill');"),
+      evaluate_script("$('#{selector}:visible').css('box-shadow');")
+    ]
+  end
 end

spec/features/projects/pipelines/pipelines_spec.rb

@@ -525,24 +525,26 @@ RSpec.describe 'Pipelines', :js do
                                       name: 'build')
         end
 
+        dropdown_toggle_selector = '[data-testid="mini-pipeline-graph-dropdown-toggle"]'
+
         before do
           visit_project_pipelines
         end
 
         it 'renders a mini pipeline graph' do
           expect(page).to have_selector('[data-testid="widget-mini-pipeline-graph"]')
-          expect(page).to have_selector('.js-builds-dropdown-button')
+          expect(page).to have_selector(dropdown_toggle_selector)
         end
 
         context 'when clicking a stage badge' do
           it 'opens a dropdown' do
-            find('.js-builds-dropdown-button').click
+            find(dropdown_toggle_selector).click
 
             expect(page).to have_link build.name
           end
 
           it 'is possible to cancel pending build' do
-            find('.js-builds-dropdown-button').click
+            find(dropdown_toggle_selector).click
             find('.js-ci-action').click
             wait_for_requests
 
@@ -558,7 +560,7 @@ RSpec.describe 'Pipelines', :js do
           end
 
           it 'displays the failure reason' do
-            find('.js-builds-dropdown-button').click
+            find(dropdown_toggle_selector).click
 
             within('.js-builds-dropdown-list') do
               build_element = page.find('.mini-pipeline-graph-dropdown-item')

spec/frontend/pipelines/pipelines_spec.js

@@ -66,10 +66,10 @@ describe('Pipelines', () => {
   const findRunPipelineButton = () => findByTestId('run-pipeline-button');
   const findCiLintButton = () => findByTestId('ci-lint-button');
   const findCleanCacheButton = () => findByTestId('clear-cache-button');
+  const findStagesDropdown = () => findByTestId('mini-pipeline-graph-dropdown-toggle');
 
   const findEmptyState = () => wrapper.find(EmptyState);
   const findBlankState = () => wrapper.find(BlankState);
-  const findStagesDropdown = () => wrapper.find('.js-builds-dropdown-button');
 
   const findTablePagination = () => wrapper.find(TablePagination);
 

spec/frontend/pipelines/pipelines_table_row_spec.js

@@ -155,7 +155,9 @@ describe('Pipelines Table Row', () => {
 
     it('should render an icon for each stage', () => {
       expect(
-        wrapper.findAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
+        wrapper.findAll(
+          '.table-section:nth-child(4) [data-testid="mini-pipeline-graph-dropdown-toggle"]',
+        ).length,
       ).toEqual(pipeline.details.stages.length);
     });
   });