Prevents child pipelines from rendering incorrectly on hover

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -52,7 +52,7 @@ export default {
       required: true,
     },
     cssClassJobName: {
-      type: [String, Array],
+      type: [String, Array, Object],
       required: false,
       default: '',
     },
@@ -167,9 +167,13 @@ export default {
       return this.job.name === this.pipelineExpanded.jobName && this.pipelineExpanded.expanded;
     },
     jobClasses() {
-      return this.relatedDownstreamHovered || this.relatedDownstreamExpanded
-        ? `${this.$options.hoverClass} ${this.cssClassJobName}`
-        : this.cssClassJobName;
+      return [
+        {
+          [this.$options.hoverClass]:
+            this.relatedDownstreamHovered || this.relatedDownstreamExpanded,
+        },
+        this.cssClassJobName,
+      ];
     },
   },
   errorCaptured(err, _vm, info) {

spec/frontend/pipelines/graph/job_item_spec.js

@@ -205,4 +205,64 @@ describe('pipeline graph job item', () => {
       },
     );
   });
+
+  describe('job classes', () => {
+    it('job class is shown', () => {
+      createWrapper({
+        job: mockJob,
+        cssClassJobName: 'my-class',
+      });
+
+      expect(wrapper.find('a').classes()).toContain('my-class');
+
+      expect(wrapper.find('a').classes()).not.toContain(triggerActiveClass);
+    });
+
+    it('job class is shown, along with hover', () => {
+      createWrapper({
+        job: mockJob,
+        cssClassJobName: 'my-class',
+        sourceJobHovered: mockJob.name,
+      });
+
+      expect(wrapper.find('a').classes()).toContain('my-class');
+      expect(wrapper.find('a').classes()).toContain(triggerActiveClass);
+    });
+
+    it('multiple job classes are shown', () => {
+      createWrapper({
+        job: mockJob,
+        cssClassJobName: ['my-class-1', 'my-class-2'],
+      });
+
+      expect(wrapper.find('a').classes()).toContain('my-class-1');
+      expect(wrapper.find('a').classes()).toContain('my-class-2');
+
+      expect(wrapper.find('a').classes()).not.toContain(triggerActiveClass);
+    });
+
+    it('multiple job classes are shown conditionally', () => {
+      createWrapper({
+        job: mockJob,
+        cssClassJobName: { 'my-class-1': true, 'my-class-2': true },
+      });
+
+      expect(wrapper.find('a').classes()).toContain('my-class-1');
+      expect(wrapper.find('a').classes()).toContain('my-class-2');
+
+      expect(wrapper.find('a').classes()).not.toContain(triggerActiveClass);
+    });
+
+    it('multiple job classes are shown, along with a hover', () => {
+      createWrapper({
+        job: mockJob,
+        cssClassJobName: ['my-class-1', 'my-class-2'],
+        sourceJobHovered: mockJob.name,
+      });
+
+      expect(wrapper.find('a').classes()).toContain('my-class-1');
+      expect(wrapper.find('a').classes()).toContain('my-class-2');
+      expect(wrapper.find('a').classes()).toContain(triggerActiveClass);
+    });
+  });
 });