1 files changed, 12 insertions, 16 deletions

diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
index 6347e3c3be3..7f0173b7445 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_spec.js
@@ -4,9 +4,8 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
-import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
-import PipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
+import MRWidgetPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
+import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
 import { SUCCESS } from '~/vue_merge_request_widget/constants';
 import mockData from '../mock_data';
 
@@ -30,14 +29,13 @@ describe('MRWidgetPipeline', () => {
   const findPipelineInfoContainer = () => wrapper.findByTestId('pipeline-info-container');
   const findCommitLink = () => wrapper.findByTestId('commit-link');
   const findPipelineFinishedAt = () => wrapper.findByTestId('finished-at');
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
-  const findAllPipelineStages = () => wrapper.findAllComponents(PipelineStage);
   const findPipelineCoverage = () => wrapper.findByTestId('pipeline-coverage');
   const findPipelineCoverageDelta = () => wrapper.findByTestId('pipeline-coverage-delta');
   const findPipelineCoverageTooltipText = () =>
     wrapper.findByTestId('pipeline-coverage-tooltip').text();
   const findPipelineCoverageDeltaTooltipText = () =>
     wrapper.findByTestId('pipeline-coverage-delta-tooltip').text();
+  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
   const findMonitoringPipelineMessage = () => wrapper.findByTestId('monitoring-pipeline-message');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
@@ -45,7 +43,7 @@ describe('MRWidgetPipeline', () => {
 
   const createWrapper = (props = {}, mountFn = shallowMount) => {
     wrapper = extendedWrapper(
-      mountFn(PipelineComponent, {
+      mountFn(MRWidgetPipelineComponent, {
         propsData: {
           ...defaultProps,
           ...props,
@@ -106,8 +104,10 @@ describe('MRWidgetPipeline', () => {
     });
 
     it('should render pipeline graph', () => {
+      const stagesCount = mockData.pipeline.details.stages.length;
+
       expect(findPipelineMiniGraph().exists()).toBe(true);
-      expect(findAllPipelineStages()).toHaveLength(mockData.pipeline.details.stages.length);
+      expect(findPipelineMiniGraph().props('stages')).toHaveLength(stagesCount);
     });
 
     describe('should render pipeline coverage information', () => {
@@ -176,15 +176,11 @@ describe('MRWidgetPipeline', () => {
       expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
     });
 
-    it('should render pipeline graph with correct styles', () => {
+    it('should render pipeline graph', () => {
       const stagesCount = mockData.pipeline.details.stages.length;
 
       expect(findPipelineMiniGraph().exists()).toBe(true);
-      expect(findPipelineMiniGraph().findAll('.mr-widget-pipeline-stages')).toHaveLength(
-        stagesCount,
-      );
-
-      expect(findAllPipelineStages()).toHaveLength(stagesCount);
+      expect(findPipelineMiniGraph().props('stages')).toHaveLength(stagesCount);
     });
 
     it('should render coverage information', () => {
@@ -266,13 +262,13 @@ describe('MRWidgetPipeline', () => {
     });
 
     describe('for a detached merge request pipeline', () => {
-      it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
-        pipeline.details.name = 'Detached merge request pipeline';
+      it('renders a pipeline widget that reads "Merge request pipeline <ID> <status> for <SHA>"', () => {
+        pipeline.details.name = 'Merge request pipeline';
         pipeline.merge_request_event_type = 'detached';
 
         factory();
 
-        const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+        const expected = `Merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
         const actual = trimText(findPipelineInfoContainer().text());
 
         expect(actual).toBe(expected);