Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

1 files changed, 58 insertions, 2 deletions

diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
index 30e192e5726..7c8ebc27974 100644
--- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
+++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { pipelineData } from './mock_data';
+import { pipelineData, singleStageData } from './mock_data';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
 import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
@@ -18,6 +18,8 @@ describe('pipeline graph component', () => {
   };
 
   const findAllStagePills = () => wrapper.findAll(StagePill);
+  const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]');
+  const findStageBackgroundElementAt = index => findAllStageBackgroundElements().at(index);
   const findAllJobPills = () => wrapper.findAll(JobPill);
 
   afterEach(() => {
@@ -31,7 +33,9 @@ describe('pipeline graph component', () => {
     });
 
     it('renders an empty section', () => {
-      expect(wrapper.text()).toContain('No content to show');
+      expect(wrapper.text()).toContain(
+        'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
+      );
       expect(findAllStagePills()).toHaveLength(0);
       expect(findAllJobPills()).toHaveLength(0);
     });
@@ -41,12 +45,43 @@ describe('pipeline graph component', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
+
     it('renders the right number of stage pills', () => {
       const expectedStagesLength = pipelineData.stages.length;
 
       expect(findAllStagePills()).toHaveLength(expectedStagesLength);
     });
 
+    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}
+    `(
+      'rounds corner: $class 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}
+    `(
+      'rounds corner: $class should be $expectedState on the last element',
+      ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      },
+    );
+
     it('renders the right number of job pills', () => {
       // We count the number of jobs in the mock data
       const expectedJobsLength = pipelineData.stages.reduce((acc, val) => {
@@ -56,4 +91,25 @@ describe('pipeline graph component', () => {
       expect(findAllJobPills()).toHaveLength(expectedJobsLength);
     });
   });
+
+  describe('with only one stage', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ pipelineData: singleStageData });
+    });
+
+    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}
+    `(
+      'rounds corner: $class should be $expectedState on the only element',
+      ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(0).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      },
+    );
+  });
 });