Add latest changes from gitlab-org/gitlab@master

3 files changed, 15 insertions, 61 deletions

diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js
index 2a89dbd3fa5..99e8ea9d0a4 100644
--- a/spec/frontend/pipelines/graph/stage_column_component_spec.js
+++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js
@@ -56,7 +56,6 @@ describe('stage column component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when mounted', () => {
diff --git a/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap b/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap
index 16c28791514..82206e907ff 100644
--- a/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap
+++ b/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap
@@ -2,29 +2,29 @@
 
 exports[`Links Inner component with a large number of needs matches snapshot and has expected path 1`] = `
 "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
-    <path d=\\"M202,118L42,118C72,118,72,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
-    <path d=\\"M202,118L52,118C82,118,82,148,112,148\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
-    <path d=\\"M222,138L62,138C92,138,92,158,122,158\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
-    <path d=\\"M212,128L72,128C102,128,102,168,132,168\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
-    <path d=\\"M232,148L82,148C112,148,112,178,142,178\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M202,118C62,118,62,148,112,148\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M222,138C72,138,72,158,122,158\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M212,128C82,128,82,168,132,168\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M232,148C92,148,92,178,142,178\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
   </svg> </div>"
 `;
 
 exports[`Links Inner component with a parallel need matches snapshot and has expected path 1`] = `
 "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
-    <path d=\\"M192,108L22,108C52,108,52,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
   </svg> </div>"
 `;
 
 exports[`Links Inner component with one need matches snapshot and has expected path 1`] = `
 "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
-    <path d=\\"M202,118L42,118C72,118,72,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
   </svg> </div>"
 `;
 
 exports[`Links Inner component with same stage needs matches snapshot and has expected path 1`] = `
 "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
-    <path d=\\"M192,108L22,108C52,108,52,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
-    <path d=\\"M202,118L32,118C62,118,62,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M202,118C42,118,42,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
   </svg> </div>"
 `;
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
index 7bac7036f46..1b89e322d31 100644
--- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
+++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
@@ -6,7 +6,7 @@ import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue';
 import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
-import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
+import StageName from '~/pipelines/components/pipeline_graph/stage_name.vue';
 import { pipelineData, singleStageData } from './mock_data';
 
 describe('pipeline graph component', () => {
@@ -35,11 +35,9 @@ describe('pipeline graph component', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findAllJobPills = () => wrapper.findAll(JobPill);
-  const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]');
-  const findAllStagePills = () => wrapper.findAllComponents(StagePill);
+  const findAllStageNames = () => wrapper.findAllComponents(StageName);
   const findLinksLayer = () => wrapper.findComponent(LinksLayer);
   const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]');
-  const findStageBackgroundElementAt = (index) => findAllStageBackgroundElements().at(index);
 
   afterEach(() => {
     wrapper.destroy();
@@ -67,10 +65,10 @@ describe('pipeline graph component', () => {
       wrapper = createComponent({ pipelineData: singleStageData });
     });
 
-    it('renders the right number of stage pills', () => {
+    it('renders the right number of stage titles', () => {
       const expectedStagesLength = singleStageData.stages.length;
 
-      expect(findAllStagePills()).toHaveLength(expectedStagesLength);
+      expect(findAllStageNames()).toHaveLength(expectedStagesLength);
     });
 
     it('renders the right number of job pills', () => {
@@ -81,20 +79,6 @@ describe('pipeline graph component', () => {
 
       expect(findAllJobPills()).toHaveLength(expectedJobsLength);
     });
-
-    describe('rounds corner', () => {
-      it.each`
-        cssClass                       | expectedState
-        ${'gl-rounded-bottom-left-6'}  | ${true}
-        ${'gl-rounded-top-left-6'}     | ${true}
-        ${'gl-rounded-top-right-6'}    | ${true}
-        ${'gl-rounded-bottom-right-6'} | ${true}
-      `('$cssClass should be $expectedState on the only element', ({ cssClass, expectedState }) => {
-        const classes = findStageBackgroundElementAt(0).classes();
-
-        expect(classes.includes(cssClass)).toBe(expectedState);
-      });
-    });
   });
 
   describe('with multiple stages and jobs', () => {
@@ -102,10 +86,10 @@ describe('pipeline graph component', () => {
       wrapper = createComponent();
     });
 
-    it('renders the right number of stage pills', () => {
+    it('renders the right number of stage titles', () => {
       const expectedStagesLength = pipelineData.stages.length;
 
-      expect(findAllStagePills()).toHaveLength(expectedStagesLength);
+      expect(findAllStageNames()).toHaveLength(expectedStagesLength);
     });
 
     it('renders the right number of job pills', () => {
@@ -116,34 +100,5 @@ describe('pipeline graph component', () => {
 
       expect(findAllJobPills()).toHaveLength(expectedJobsLength);
     });
-
-    describe('rounds corner', () => {
-      it.each`
-        cssClass                       | expectedState
-        ${'gl-rounded-bottom-left-6'}  | ${true}
-        ${'gl-rounded-top-left-6'}     | ${true}
-        ${'gl-rounded-top-right-6'}    | ${false}
-        ${'gl-rounded-bottom-right-6'} | ${false}
-      `(
-        '$cssClass should be $expectedState on the first element',
-        ({ cssClass, expectedState }) => {
-          const classes = findStageBackgroundElementAt(0).classes();
-
-          expect(classes.includes(cssClass)).toBe(expectedState);
-        },
-      );
-
-      it.each`
-        cssClass                       | expectedState
-        ${'gl-rounded-bottom-left-6'}  | ${false}
-        ${'gl-rounded-top-left-6'}     | ${false}
-        ${'gl-rounded-top-right-6'}    | ${true}
-        ${'gl-rounded-bottom-right-6'} | ${true}
-      `('$cssClass should be $expectedState on the last element', ({ cssClass, expectedState }) => {
-        const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
-
-        expect(classes.includes(cssClass)).toBe(expectedState);
-      });
-    });
   });
 });