Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

10 files changed, 32 insertions, 343 deletions

diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js
index 6e5aa572ec0..a823e029281 100644
--- a/spec/frontend/pipelines/graph/action_component_spec.js
+++ b/spec/frontend/pipelines/graph/action_component_spec.js
@@ -9,7 +9,7 @@ import ActionComponent from '~/pipelines/components/jobs_shared/action_component
 describe('pipeline graph action component', () => {
   let wrapper;
   let mock;
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.findComponent(GlButton);
   const findTooltipWrapper = () => wrapper.find('[data-testid="ci-action-icon-tooltip-wrapper"]');
 
   beforeEach(() => {
diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 4b2b61c8edd..2abb5f7dc58 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -15,9 +15,9 @@ import {
 describe('graph component', () => {
   let wrapper;
 
-  const findLinkedColumns = () => wrapper.findAll(LinkedPipelinesColumn);
-  const findLinksLayer = () => wrapper.find(LinksLayer);
-  const findStageColumns = () => wrapper.findAll(StageColumnComponent);
+  const findLinkedColumns = () => wrapper.findAllComponents(LinkedPipelinesColumn);
+  const findLinksLayer = () => wrapper.findComponent(LinksLayer);
+  const findStageColumns = () => wrapper.findAllComponents(StageColumnComponent);
   const findStageNameInJob = () => wrapper.find('[data-testid="stage-name-in-job"]');
 
   const defaultProps = {
@@ -107,7 +107,7 @@ describe('graph component', () => {
       });
 
       it('dims unrelated jobs', () => {
-        const unrelatedJob = wrapper.find(JobItem);
+        const unrelatedJob = wrapper.findComponent(JobItem);
         expect(findLinksLayer().emitted().highlightedJobsChange).toHaveLength(1);
         expect(unrelatedJob.classes('gl-opacity-3')).toBe(true);
       });
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 3eaf06e0656..587a3c67168 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -30,16 +30,10 @@ import * as Api from '~/pipelines/components/graph_shared/api';
 import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import * as parsingUtils from '~/pipelines/components/parsing_utils';
 import getPipelineHeaderData from '~/pipelines/graphql/queries/get_pipeline_header_data.query.graphql';
-import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
 import * as sentryUtils from '~/pipelines/utils';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { mockRunningPipelineHeaderData } from '../mock_data';
-import {
-  mapCallouts,
-  mockCalloutsResponse,
-  mockPipelineResponse,
-  mockPerformanceInsightsResponse,
-} from './mock_data';
+import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
 
 const defaultProvide = {
   graphqlResourceEtag: 'frog/amphibirama/etag/',
@@ -57,11 +51,11 @@ describe('Pipeline graph wrapper', () => {
   const getDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
   const getLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const getLinksLayer = () => wrapper.findComponent(LinksLayer);
-  const getGraph = () => wrapper.find(PipelineGraph);
+  const getGraph = () => wrapper.findComponent(PipelineGraph);
   const getStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
   const getAllStageColumnGroupsInColumn = () =>
-    wrapper.find(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
-  const getViewSelector = () => wrapper.find(GraphViewSelector);
+    wrapper.findComponent(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
+  const getViewSelector = () => wrapper.findComponent(GraphViewSelector);
   const getViewSelectorTrip = () => getViewSelector().findComponent(GlAlert);
   const getLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
@@ -95,15 +89,11 @@ describe('Pipeline graph wrapper', () => {
     const callouts = mapCallouts(calloutsList);
     const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse(callouts));
     const getPipelineHeaderDataHandler = jest.fn().mockResolvedValue(mockRunningPipelineHeaderData);
-    const getPerformanceInsightsHandler = jest
-      .fn()
-      .mockResolvedValue(mockPerformanceInsightsResponse);
 
     const requestHandlers = [
       [getPipelineHeaderData, getPipelineHeaderDataHandler],
       [getPipelineDetails, getPipelineDetailsHandler],
       [getUserCallouts, getUserCalloutsHandler],
-      [getPerformanceInsights, getPerformanceInsightsHandler],
     ];
 
     const apolloProvider = createMockApollo(requestHandlers);
@@ -309,7 +299,7 @@ describe('Pipeline graph wrapper', () => {
         const groupsInFirstColumn =
           mockPipelineResponse.data.project.pipeline.stages.nodes[0].groups.nodes.length;
         expect(getAllStageColumnGroupsInColumn()).toHaveLength(groupsInFirstColumn);
-        expect(getStageColumnTitle().text()).toBe('Build');
+        expect(getStageColumnTitle().text()).toBe('build');
         await getViewSelector().vm.$emit('updateViewType', LAYER_VIEW);
         expect(getAllStageColumnGroupsInColumn()).toHaveLength(groupsInFirstColumn + 1);
         expect(getStageColumnTitle().text()).toBe('');
@@ -418,7 +408,7 @@ describe('Pipeline graph wrapper', () => {
 
       it('reads the view type from localStorage when available', () => {
         const viewSelectorNeedsSegment = wrapper
-          .find(GlButtonGroup)
+          .findComponent(GlButtonGroup)
           .findAllComponents(GlButton)
           .at(1);
         expect(viewSelectorNeedsSegment.classes()).toContain('selected');
@@ -564,7 +554,7 @@ describe('Pipeline graph wrapper', () => {
           mock.restore();
         });
 
-        it('it calls reportPerformance with expected arguments', () => {
+        it('calls reportPerformance with expected arguments', () => {
           expect(markAndMeasure).toHaveBeenCalled();
           expect(reportPerformance).toHaveBeenCalled();
           expect(reportPerformance).toHaveBeenCalledWith(metricsPath, metricsData);
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index 1397500bdc7..43587bebedf 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,34 +1,23 @@
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
-import { mockPerformanceInsightsResponse } from './mock_data';
-
-Vue.use(VueApollo);
 
 describe('the graph view selector component', () => {
   let wrapper;
-  let trackingSpy;
 
   const findDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
   const findViewTypeSelector = () => wrapper.findComponent(GlButtonGroup);
   const findStageViewButton = () => findViewTypeSelector().findAllComponents(GlButton).at(0);
   const findLayerViewButton = () => findViewTypeSelector().findAllComponents(GlButton).at(1);
   const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
-  const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
+  const findToggleLoader = () => findDependenciesToggle().findComponent(GlLoadingIcon);
   const findHoverTip = () => wrapper.findComponent(GlAlert);
-  const findPipelineInsightsBtn = () => wrapper.find('[data-testid="pipeline-insights-btn"]');
 
   const defaultProps = {
     showLinks: false,
     tipPreviouslyDismissed: false,
     type: STAGE_VIEW,
-    isPipelineComplete: true,
   };
 
   const defaultData = {
@@ -38,14 +27,6 @@ describe('the graph view selector component', () => {
     showLinksActive: false,
   };
 
-  const getPerformanceInsightsHandler = jest
-    .fn()
-    .mockResolvedValue(mockPerformanceInsightsResponse);
-
-  const requestHandlers = [[getPerformanceInsights, getPerformanceInsightsHandler]];
-
-  const apolloProvider = createMockApollo(requestHandlers);
-
   const createComponent = ({ data = {}, mountFn = shallowMount, props = {} } = {}) => {
     wrapper = mountFn(GraphViewSelector, {
       propsData: {
@@ -58,7 +39,6 @@ describe('the graph view selector component', () => {
           ...data,
         };
       },
-      apolloProvider,
     });
   };
 
@@ -222,44 +202,5 @@ describe('the graph view selector component', () => {
         expect(findHoverTip().exists()).toBe(false);
       });
     });
-
-    describe('pipeline insights', () => {
-      it.each`
-        isPipelineComplete | shouldShow
-        ${true}            | ${true}
-        ${false}           | ${false}
-      `(
-        'button should display $shouldShow if isPipelineComplete is $isPipelineComplete ',
-        ({ isPipelineComplete, shouldShow }) => {
-          createComponent({
-            props: {
-              isPipelineComplete,
-            },
-          });
-
-          expect(findPipelineInsightsBtn().exists()).toBe(shouldShow);
-        },
-      );
-    });
-
-    describe('tracking', () => {
-      beforeEach(() => {
-        createComponent();
-
-        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-      });
-
-      afterEach(() => {
-        unmockTracking();
-      });
-
-      it('tracks performance insights button click', () => {
-        findPipelineInsightsBtn().vm.$emit('click');
-
-        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_insights_button', {
-          label: 'performance_insights',
-        });
-      });
-    });
   });
 });
diff --git a/spec/frontend/pipelines/graph/job_item_spec.js b/spec/frontend/pipelines/graph/job_item_spec.js
index 4f0da09fec6..05776ec0706 100644
--- a/spec/frontend/pipelines/graph/job_item_spec.js
+++ b/spec/frontend/pipelines/graph/job_item_spec.js
@@ -59,7 +59,7 @@ describe('pipeline graph job item', () => {
       });
     });
 
-    it('it should render status and name', () => {
+    it('should render status and name', () => {
       expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
       expect(wrapper.find('a').exists()).toBe(false);
 
@@ -72,7 +72,7 @@ describe('pipeline graph job item', () => {
   });
 
   describe('action icon', () => {
-    it('it should render the action icon', () => {
+    it('should render the action icon', () => {
       createWrapper({ job: mockJob });
 
       const actionComponent = findActionComponent();
@@ -82,7 +82,7 @@ describe('pipeline graph job item', () => {
       expect(actionComponent.attributes('disabled')).not.toBe('disabled');
     });
 
-    it('it should render disabled action icon when user cannot run the action', () => {
+    it('should render disabled action icon when user cannot run the action', () => {
       createWrapper({ job: mockJobWithUnauthorizedAction });
 
       const actionComponent = findActionComponent();
diff --git a/spec/frontend/pipelines/graph/job_name_component_spec.js b/spec/frontend/pipelines/graph/job_name_component_spec.js
index d3008c046e8..ec432e98fdf 100644
--- a/spec/frontend/pipelines/graph/job_name_component_spec.js
+++ b/spec/frontend/pipelines/graph/job_name_component_spec.js
@@ -24,7 +24,7 @@ describe('job name component', () => {
   });
 
   it('should render an icon with the provided status', () => {
-    expect(wrapper.find(ciIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(ciIcon).exists()).toBe(true);
     expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index 7d1e4774a24..399d52c3dff 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -36,13 +36,13 @@ describe('Linked pipeline', () => {
     type: UPSTREAM,
   };
 
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.findComponent(GlButton);
   const findCancelButton = () => wrapper.findByLabelText('Cancel downstream pipeline');
   const findCardTooltip = () => wrapper.findComponent(GlTooltip);
   const findDownstreamPipelineTitle = () => wrapper.findByTestId('downstream-title');
   const findExpandButton = () => wrapper.findByTestId('expand-pipeline-button');
-  const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findLinkedPipeline = () => wrapper.findComponent({ ref: 'linkedPipeline' });
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findPipelineLabel = () => wrapper.findByTestId('downstream-pipeline-label');
   const findPipelineLink = () => wrapper.findByTestId('pipelineLink');
   const findRetryButton = () => wrapper.findByLabelText('Retry downstream pipeline');
@@ -80,7 +80,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render an svg within the status container', () => {
-      const pipelineStatusElement = wrapper.find(CiStatus);
+      const pipelineStatusElement = wrapper.findComponent(CiStatus);
 
       expect(pipelineStatusElement.find('svg').exists()).toBe(true);
     });
@@ -90,7 +90,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should have a ci-status child component', () => {
-      expect(wrapper.find(CiStatus).exists()).toBe(true);
+      expect(wrapper.findComponent(CiStatus).exists()).toBe(true);
     });
 
     it('should render the pipeline id', () => {
@@ -214,7 +214,7 @@ describe('Linked pipeline', () => {
                   await findRetryButton().trigger('click');
                 });
 
-                it('calls the retry mutation ', () => {
+                it('calls the retry mutation', () => {
                   expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
                   expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
                     mutation: RetryPipelineMutation,
@@ -255,7 +255,7 @@ describe('Linked pipeline', () => {
               createWrapper({ propsData: cancelablePipeline });
             });
 
-            it('shows only the cancel button ', () => {
+            it('shows only the cancel button', () => {
               expect(findCancelButton().exists()).toBe(true);
               expect(findRetryButton().exists()).toBe(false);
             });
@@ -375,7 +375,7 @@ describe('Linked pipeline', () => {
         ${'mouseover'}    | ${'mouseout'}
         ${'focus'}        | ${'blur'}
       `(
-        'applies the class on $activateEventName and removes it on $deactivateEventName ',
+        'applies the class on $activateEventName and removes it on $deactivateEventName',
         async ({ activateEventName, deactivateEventName }) => {
           const shadowClass = 'gl-shadow-none!';
 
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 46000711110..63e2d8707ea 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
@@ -38,8 +38,8 @@ describe('Linked Pipelines Column', () => {
 
   let wrapper;
   const findLinkedColumnTitle = () => wrapper.find('[data-testid="linked-column-title"]');
-  const findLinkedPipelineElements = () => wrapper.findAll(LinkedPipeline);
-  const findPipelineGraph = () => wrapper.find(PipelineGraph);
+  const findLinkedPipelineElements = () => wrapper.findAllComponents(LinkedPipeline);
+  const findPipelineGraph = () => wrapper.findComponent(PipelineGraph);
   const findExpandButton = () => wrapper.find('[data-testid="expand-pipeline-button"]');
 
   Vue.use(VueApollo);
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index 959bbcefc98..6124d67af09 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -1038,245 +1038,3 @@ export const triggerJob = {
     action: null,
   },
 };
-
-export const mockPerformanceInsightsResponse = {
-  data: {
-    project: {
-      __typename: 'Project',
-      id: 'gid://gitlab/Project/20',
-      pipeline: {
-        __typename: 'Pipeline',
-        id: 'gid://gitlab/Ci::Pipeline/97',
-        jobs: {
-          __typename: 'CiJobConnection',
-          pageInfo: {
-            __typename: 'PageInfo',
-            hasNextPage: false,
-          },
-          nodes: [
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Bridge/2502',
-              duration: null,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2502-2502',
-                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
-              },
-              name: 'trigger_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/303',
-                name: 'deploy',
-              },
-              startedAt: null,
-              queuedDuration: 424850.376278,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2501',
-              duration: 10,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2501-2501',
-                detailsPath: '/root/ci-project/-/jobs/2501',
-              },
-              name: 'artifact_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/303',
-                name: 'deploy',
-              },
-              startedAt: '2022-07-01T16:31:41Z',
-              queuedDuration: 2.621553,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2500',
-              duration: 4,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2500-2500',
-                detailsPath: '/root/ci-project/-/jobs/2500',
-              },
-              name: 'coverage_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/302',
-                name: 'test',
-              },
-              startedAt: '2022-07-01T16:31:33Z',
-              queuedDuration: 14.388869,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2499',
-              duration: 4,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2499-2499',
-                detailsPath: '/root/ci-project/-/jobs/2499',
-              },
-              name: 'test_job_two',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/302',
-                name: 'test',
-              },
-              startedAt: '2022-07-01T16:31:28Z',
-              queuedDuration: 15.792664,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2498',
-              duration: 4,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2498-2498',
-                detailsPath: '/root/ci-project/-/jobs/2498',
-              },
-              name: 'test_job_one',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/302',
-                name: 'test',
-              },
-              startedAt: '2022-07-01T16:31:17Z',
-              queuedDuration: 8.317072,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2497',
-              duration: 5,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'failed-2497-2497',
-                detailsPath: '/root/ci-project/-/jobs/2497',
-              },
-              name: 'allow_failure_test_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/302',
-                name: 'test',
-              },
-              startedAt: '2022-07-01T16:31:22Z',
-              queuedDuration: 3.547553,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2496',
-              duration: null,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'manual-2496-2496',
-                detailsPath: '/root/ci-project/-/jobs/2496',
-              },
-              name: 'test_manual_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/302',
-                name: 'test',
-              },
-              startedAt: null,
-              queuedDuration: null,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2495',
-              duration: 5,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2495-2495',
-                detailsPath: '/root/ci-project/-/jobs/2495',
-              },
-              name: 'large_log_output',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/301',
-                name: 'build',
-              },
-              startedAt: '2022-07-01T16:31:11Z',
-              queuedDuration: 79.128625,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2494',
-              duration: 5,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2494-2494',
-                detailsPath: '/root/ci-project/-/jobs/2494',
-              },
-              name: 'build_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/301',
-                name: 'build',
-              },
-              startedAt: '2022-07-01T16:31:05Z',
-              queuedDuration: 73.286895,
-            },
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Build/2493',
-              duration: 16,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2493-2493',
-                detailsPath: '/root/ci-project/-/jobs/2493',
-              },
-              name: 'wait_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/301',
-                name: 'build',
-              },
-              startedAt: '2022-07-01T16:30:48Z',
-              queuedDuration: 56.258856,
-            },
-          ],
-        },
-      },
-    },
-  },
-};
-
-export const mockPerformanceInsightsNextPageResponse = {
-  data: {
-    project: {
-      __typename: 'Project',
-      id: 'gid://gitlab/Project/20',
-      pipeline: {
-        __typename: 'Pipeline',
-        id: 'gid://gitlab/Ci::Pipeline/97',
-        jobs: {
-          __typename: 'CiJobConnection',
-          pageInfo: {
-            __typename: 'PageInfo',
-            hasNextPage: true,
-          },
-          nodes: [
-            {
-              __typename: 'CiJob',
-              id: 'gid://gitlab/Ci::Bridge/2502',
-              duration: null,
-              detailedStatus: {
-                __typename: 'DetailedStatus',
-                id: 'success-2502-2502',
-                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
-              },
-              name: 'trigger_job',
-              stage: {
-                __typename: 'CiStage',
-                id: 'gid://gitlab/Ci::Stage/303',
-                name: 'deploy',
-              },
-              startedAt: null,
-              queuedDuration: 424850.376278,
-            },
-          ],
-        },
-      },
-    },
-  },
-};
diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js
index 99e8ea9d0a4..19f597a7267 100644
--- a/spec/frontend/pipelines/graph/stage_column_component_spec.js
+++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js
@@ -42,8 +42,8 @@ describe('stage column component', () => {
   const findStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
   const findStageColumnGroup = () => wrapper.find('[data-testid="stage-column-group"]');
   const findAllStageColumnGroups = () => wrapper.findAll('[data-testid="stage-column-group"]');
-  const findJobItem = () => wrapper.find(JobItem);
-  const findActionComponent = () => wrapper.find(ActionComponent);
+  const findJobItem = () => wrapper.findComponent(JobItem);
+  const findActionComponent = () => wrapper.findComponent(ActionComponent);
 
   const createComponent = ({ method = shallowMount, props = {} } = {}) => {
     wrapper = method(StageColumnComponent, {
@@ -126,9 +126,9 @@ describe('stage column component', () => {
         });
       });
 
-      it('capitalizes and escapes name', () => {
-        expect(findStageColumnTitle().text()).toBe(
-          'Test <img src=x onerror=alert(document.domain)>',
+      it('escapes name', () => {
+        expect(findStageColumnTitle().html()).toContain(
+          'test <img src=x onerror=alert(document.domain)>',
         );
       });