1 files changed, 41 insertions, 4 deletions
diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 7572dd83798..cfc3b7af282 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -1,7 +1,9 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
+import JobItem from '~/pipelines/components/graph/job_item.vue';
 import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
+import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import { GRAPHQL } from '~/pipelines/components/graph/constants';
 import {
   generateResponse,
@@ -13,21 +15,37 @@ describe('graph component', () => {
   let wrapper;
 
   const findLinkedColumns = () => wrapper.findAll(LinkedPipelinesColumn);
+  const findLinksLayer = () => wrapper.find(LinksLayer);
   const findStageColumns = () => wrapper.findAll(StageColumnComponent);
 
   const defaultProps = {
     pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'),
   };
 
-  const createComponent = ({ mountFn = shallowMount, props = {} } = {}) => {
+  const createComponent = ({
+    data = {},
+    mountFn = shallowMount,
+    props = {},
+    stubOverride = {},
+  } = {}) => {
     wrapper = mountFn(PipelineGraph, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      data() {
+        return { ...data };
+      },
       provide: {
         dataMethod: GRAPHQL,
       },
+      stubs: {
+        'links-inner': true,
+        'linked-pipeline': true,
+        'job-item': true,
+        'job-group-dropdown': true,
+        ...stubOverride,
+      },
     });
   };
 
@@ -45,17 +63,36 @@ describe('graph component', () => {
       expect(findStageColumns()).toHaveLength(defaultProps.pipeline.stages.length);
     });
 
+    it('renders the links layer', () => {
+      expect(findLinksLayer().exists()).toBe(true);
+    });
+
     describe('when column requests a refresh', () => {
       beforeEach(() => {
-        findStageColumns()
-          .at(0)
-          .vm.$emit('refreshPipelineGraph');
+        findStageColumns().at(0).vm.$emit('refreshPipelineGraph');
       });
 
       it('refreshPipelineGraph is emitted', () => {
         expect(wrapper.emitted().refreshPipelineGraph).toHaveLength(1);
       });
     });
+
+    describe('when links are present', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountFn: mount,
+          stubOverride: { 'job-item': false },
+          data: { hoveredJobName: 'test_a' },
+        });
+        findLinksLayer().vm.$emit('highlightedJobsChange', ['test_c', 'build_c']);
+      });
+
+      it('dims unrelated jobs', () => {
+        const unrelatedJob = wrapper.find(JobItem);
+        expect(findLinksLayer().emitted().highlightedJobsChange).toHaveLength(1);
+        expect(unrelatedJob.classes('gl-opacity-3')).toBe(true);
+      });
+    });
   });
 
   describe('when linked pipelines are not present', () => {