Add jobClasses to both jobs

Add jobClasses to job without
link or with a link so the UX
stays the same. Also update specs
to cover both cases.

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

@@ -143,7 +143,7 @@ export default {
       v-else
       v-gl-tooltip="{ boundary, placement: 'bottom' }"
       :title="tooltipText"
-      :class="cssClassJobName"
+      :class="jobClasses"
       class="js-job-component-tooltip non-details-job-component"
       data-testid="job-without-link"
     >

spec/frontend/pipelines/graph/job_item_spec.js

@@ -37,7 +37,7 @@ describe('pipeline graph job item', () => {
   };
   const mockJobWithoutDetails = {
     id: 4257,
-    name: 'test',
+    name: 'job_without_details',
     status: {
       icon: 'status_success',
       text: 'passed',
@@ -85,7 +85,7 @@ 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())).toEqual(mockJobWithoutDetails.name);
     });
 
     it('should apply hover class and provided class name', () => {
@@ -158,22 +158,32 @@ describe('pipeline graph job item', () => {
   });
 
   describe('trigger job highlighting', () => {
-    it('trigger job should stay highlighted when downstream is expanded', () => {
-      createWrapper({
-        job: mockJob,
-        pipelineExpanded: { jobName: mockJob.name, expanded: true },
-      });
-
-      expect(findJobWithLink().classes()).toContain(triggerActiveClass);
-    });
-
-    it('trigger job should not be highlighted when downstream is closed', () => {
-      createWrapper({
-        job: mockJob,
-        pipelineExpanded: { jobName: mockJob.name, expanded: false },
-      });
-
-      expect(findJobWithLink().classes()).not.toContain(triggerActiveClass);
-    });
+    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 stay highlighted when downstream is expanded`,
+      ({ job, jobName, expanded, link }) => {
+        createWrapper({ job, pipelineExpanded: { jobName, expanded } });
+        const findJobEl = link ? findJobWithLink : findJobWithoutLink;
+
+        expect(findJobEl().classes()).not.toContain(triggerActiveClass);
+      },
+    );
   });
 });