Add latest changes from gitlab-org/gitlab@13-4-stable-ee

3 files changed, 123 insertions, 27 deletions

diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 1389649abea..d977db58a0e 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -16,6 +16,9 @@ describe('graph component', () => {
 
   let wrapper;
 
+  const findExpandPipelineBtn = () => wrapper.find('[data-testid="expandPipelineButton"]');
+  const findAllExpandPipelineBtns = () => wrapper.findAll('[data-testid="expandPipelineButton"]');
+
   beforeEach(() => {
     setHTMLFixture('<div class="layout-page"></div>');
   });
@@ -167,7 +170,7 @@ describe('graph component', () => {
       describe('triggered by', () => {
         describe('on click', () => {
           it('should emit `onClickTriggeredBy` when triggered by linked pipeline is clicked', () => {
-            const btnWrapper = wrapper.find('.linked-pipeline-content');
+            const btnWrapper = findExpandPipelineBtn();
 
             btnWrapper.trigger('click');
 
@@ -213,7 +216,7 @@ describe('graph component', () => {
               ),
             });
 
-            const btnWrappers = wrapper.findAll('.linked-pipeline-content');
+            const btnWrappers = findAllExpandPipelineBtns();
             const downstreamBtnWrapper = btnWrappers.at(btnWrappers.length - 1);
 
             downstreamBtnWrapper.trigger('click');
diff --git a/spec/frontend/pipelines/graph/job_item_spec.js b/spec/frontend/pipelines/graph/job_item_spec.js
index 2c5e7a1f6e9..e844cbc5bf8 100644
--- a/spec/frontend/pipelines/graph/job_item_spec.js
+++ b/spec/frontend/pipelines/graph/job_item_spec.js
@@ -6,6 +6,7 @@ describe('pipeline graph job item', () => {
   let wrapper;
 
   const findJobWithoutLink = () => wrapper.find('[data-testid="job-without-link"]');
+  const findJobWithLink = () => wrapper.find('[data-testid="job-with-link"]');
 
   const createWrapper = propsData => {
     wrapper = mount(JobItem, {
@@ -13,6 +14,7 @@ describe('pipeline graph job item', () => {
     });
   };
 
+  const triggerActiveClass = 'gl-shadow-x0-y0-b3-s1-blue-500';
   const delayedJobFixture = getJSONFixture('jobs/delayed.json');
   const mockJob = {
     id: 4256,
@@ -33,6 +35,18 @@ describe('pipeline graph job item', () => {
       },
     },
   };
+  const mockJobWithoutDetails = {
+    id: 4257,
+    name: 'job_without_details',
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+      label: 'passed',
+      group: 'success',
+      details_path: '/root/ci-mock/builds/4257',
+      has_details: false,
+    },
+  };
 
   afterEach(() => {
     wrapper.destroy();
@@ -47,7 +61,7 @@ describe('pipeline graph job item', () => {
 
         expect(link.attributes('href')).toBe(mockJob.status.details_path);
 
-        expect(link.attributes('title')).toEqual(`${mockJob.name} - ${mockJob.status.label}`);
+        expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
 
         expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
 
@@ -61,18 +75,7 @@ describe('pipeline graph job item', () => {
   describe('name without link', () => {
     beforeEach(() => {
       createWrapper({
-        job: {
-          id: 4257,
-          name: 'test',
-          status: {
-            icon: 'status_success',
-            text: 'passed',
-            label: 'passed',
-            group: 'success',
-            details_path: '/root/ci-mock/builds/4257',
-            has_details: false,
-          },
-        },
+        job: mockJobWithoutDetails,
         cssClassJobName: 'css-class-job-name',
         jobHovered: 'test',
       });
@@ -82,11 +85,10 @@ describe('pipeline graph job item', () => {
       expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
       expect(wrapper.find('a').exists()).toBe(false);
 
-      expect(trimText(wrapper.find('.ci-status-text').text())).toEqual(mockJob.name);
+      expect(trimText(wrapper.find('.ci-status-text').text())).toBe(mockJobWithoutDetails.name);
     });
 
     it('should apply hover class and provided class name', () => {
-      expect(findJobWithoutLink().classes()).toContain('gl-inset-border-1-blue-500');
       expect(findJobWithoutLink().classes()).toContain('css-class-job-name');
     });
   });
@@ -137,9 +139,7 @@ describe('pipeline graph job item', () => {
         },
       });
 
-      expect(wrapper.find('.js-job-component-tooltip').attributes('title')).toEqual(
-        'test - success',
-      );
+      expect(wrapper.find('.js-job-component-tooltip').attributes('title')).toBe('test - success');
     });
   });
 
@@ -149,9 +149,39 @@ describe('pipeline graph job item', () => {
         job: delayedJobFixture,
       });
 
-      expect(wrapper.find('.js-pipeline-graph-job-link').attributes('title')).toEqual(
+      expect(findJobWithLink().attributes('title')).toBe(
         `delayed job - delayed manual action (${wrapper.vm.remainingTime})`,
       );
     });
   });
+
+  describe('trigger job highlighting', () => {
+    it.each`
+      job                      | jobName                       | expanded | link
+      ${mockJob}               | ${mockJob.name}               | ${true}  | ${true}
+      ${mockJobWithoutDetails} | ${mockJobWithoutDetails.name} | ${true}  | ${false}
+    `(
+      `trigger job should stay highlighted when downstream is expanded`,
+      ({ job, jobName, expanded, link }) => {
+        createWrapper({ job, pipelineExpanded: { jobName, expanded } });
+        const findJobEl = link ? findJobWithLink : findJobWithoutLink;
+
+        expect(findJobEl().classes()).toContain(triggerActiveClass);
+      },
+    );
+
+    it.each`
+      job                      | jobName                       | expanded | link
+      ${mockJob}               | ${mockJob.name}               | ${false} | ${true}
+      ${mockJobWithoutDetails} | ${mockJobWithoutDetails.name} | ${false} | ${false}
+    `(
+      `trigger job should not be highlighted when downstream is not expanded`,
+      ({ job, jobName, expanded, link }) => {
+        createWrapper({ job, pipelineExpanded: { jobName, expanded } });
+        const findJobEl = link ? findJobWithLink : findJobWithoutLink;
+
+        expect(findJobEl().classes()).not.toContain(triggerActiveClass);
+      },
+    );
+  });
 });
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index 59121c54ff3..8e65f0d4f71 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 
@@ -16,10 +16,18 @@ describe('Linked pipeline', () => {
   const findButton = () => wrapper.find(GlButton);
   const findPipelineLabel = () => wrapper.find('[data-testid="downstream-pipeline-label"]');
   const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findPipelineLink = () => wrapper.find('[data-testid="pipelineLink"]');
+  const findExpandButton = () => wrapper.find('[data-testid="expandPipelineButton"]');
 
-  const createWrapper = propsData => {
+  const createWrapper = (propsData, data = []) => {
     wrapper = mount(LinkedPipelineComponent, {
       propsData,
+      data() {
+        return {
+          ...data,
+        };
+      },
     });
   };
 
@@ -39,7 +47,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render a list item as the containing element', () => {
-      expect(wrapper.is('li')).toBe(true);
+      expect(wrapper.element.tagName).toBe('LI');
     });
 
     it('should render a button', () => {
@@ -76,7 +84,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render the tooltip text as the title attribute', () => {
-      const titleAttr = findButton().attributes('title');
+      const titleAttr = findLinkedPipeline().attributes('title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
       expect(titleAttr).toContain(mockPipeline.details.status.label);
@@ -117,6 +125,56 @@ describe('Linked pipeline', () => {
       createWrapper(upstreamProps);
       expect(findPipelineLabel().exists()).toBe(true);
     });
+
+    it('downstream pipeline should contain the correct link', () => {
+      createWrapper(downstreamProps);
+      expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
+    });
+
+    it('upstream pipeline should contain the correct link', () => {
+      createWrapper(upstreamProps);
+      expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
+    });
+
+    it.each`
+      presentClass        | missingClass
+      ${'gl-right-0'}     | ${'gl-left-0'}
+      ${'gl-border-l-1!'} | ${'gl-border-r-1!'}
+    `(
+      'pipeline expand button should be postioned right when child pipeline',
+      ({ presentClass, missingClass }) => {
+        createWrapper(downstreamProps);
+        expect(findExpandButton().classes()).toContain(presentClass);
+        expect(findExpandButton().classes()).not.toContain(missingClass);
+      },
+    );
+
+    it.each`
+      presentClass        | missingClass
+      ${'gl-left-0'}      | ${'gl-right-0'}
+      ${'gl-border-r-1!'} | ${'gl-border-l-1!'}
+    `(
+      'pipeline expand button should be postioned left when parent pipeline',
+      ({ presentClass, missingClass }) => {
+        createWrapper(upstreamProps);
+        expect(findExpandButton().classes()).toContain(presentClass);
+        expect(findExpandButton().classes()).not.toContain(missingClass);
+      },
+    );
+
+    it.each`
+      pipelineType       | anglePosition    | expanded
+      ${downstreamProps} | ${'angle-right'} | ${false}
+      ${downstreamProps} | ${'angle-left'}  | ${true}
+      ${upstreamProps}   | ${'angle-left'}  | ${false}
+      ${upstreamProps}   | ${'angle-right'} | ${true}
+    `(
+      '$pipelineType.columnTitle pipeline button icon should be $anglePosition if expanded state is $expanded',
+      ({ pipelineType, anglePosition, expanded }) => {
+        createWrapper(pipelineType, { expanded });
+        expect(findExpandButton().props('icon')).toBe(anglePosition);
+      },
+    );
   });
 
   describe('when isLoading is true', () => {
@@ -130,8 +188,8 @@ describe('Linked pipeline', () => {
       createWrapper(props);
     });
 
-    it('sets the loading prop to true', () => {
-      expect(findButton().props('loading')).toBe(true);
+    it('loading icon is visible', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
     });
   });
 
@@ -172,5 +230,10 @@ describe('Linked pipeline', () => {
       findLinkedPipeline().trigger('mouseleave');
       expect(wrapper.emitted().downstreamHovered).toStrictEqual([['']]);
     });
+
+    it('should emit pipelineExpanded with job name and expanded state on click', () => {
+      findExpandButton().trigger('click');
+      expect(wrapper.emitted().pipelineExpandToggle).toStrictEqual([['trigger_job', true]]);
+    });
   });
 });