Merge branch 'jivanvl-address-technical-debt-job-container-item' into 'master'

Address technical debt in job_container_item component

See merge request gitlab-org/gitlab!61726

app/assets/javascripts/jobs/components/job_container_item.vue

@@ -35,33 +35,40 @@ export default {
 
       return text;
     },
+    jobName() {
+      return this.job.name ? this.job.name : this.job.id;
+    },
+    classes() {
+      return {
+        retried: this.job.retried,
+        'gl-font-weight-bold': this.isActive,
+      };
+    },
+    dataTestId() {
+      return this.isActive ? 'active-job' : null;
+    },
   },
 };
 </script>
 
 <template>
-  <div
-    class="build-job gl-relative"
-    :class="{
-      retried: job.retried,
-      active: isActive,
-    }"
-  >
+  <div class="build-job gl-relative" :class="classes">
     <gl-link
       v-gl-tooltip:tooltip-container.left
       :href="job.status.details_path"
       :title="tooltipText"
-      class="js-job-link gl-display-flex gl-align-items-center"
+      class="gl-display-flex gl-align-items-center"
+      :data-testid="dataTestId"
     >
       <gl-icon
         v-if="isActive"
         name="arrow-right"
-        class="js-arrow-right icon-arrow-right gl-absolute gl-display-block"
+        class="icon-arrow-right gl-absolute gl-display-block"
       />
 
       <ci-icon :status="job.status" />
 
-      <span class="text-truncate w-100">{{ job.name ? job.name : job.id }}</span>
+      <span class="gl-text-truncate gl-w-full">{{ jobName }}</span>
 
       <gl-icon v-if="job.retried" name="retry" />
     </gl-link>

app/assets/stylesheets/page_bundles/build.scss

@@ -198,10 +198,6 @@
     }
 
     .build-job {
-      &.active {
-        font-weight: $gl-font-weight-bold;
-      }
-
       &.retried {
         background-color: var(--gray-10, $gray-10);
       }

spec/features/projects/jobs_spec.rb

@@ -136,7 +136,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
 
         wait_for_requests
-        expect(page).to have_selector('.build-job.active')
+        expect(page).to have_selector('[data-testid="active-job"]')
       end
     end
 
@@ -255,7 +255,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
       end
 
       it 'renders escaped tooltip name' do
-        page.find('.active.build-job a').hover
+        page.find('[data-testid="active-job"]').hover
         expect(page).to have_content('<img src=x onerror=alert(document.domain)> - passed')
       end
     end