Merge branch '223211-refactor-job_app_spec-to-not-use-js-selectors' into 'master'

Refactor job_app not to use js-selectors

Closes #223211

See merge request gitlab-org/gitlab!37343

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

@@ -71,9 +71,9 @@ export default {
 
     <div class="col-12">
       <div class="text-content">
-        <h4 class="js-job-empty-state-title text-center">{{ title }}</h4>
+        <h4 class="text-center" data-testid="job-empty-state-title">{{ title }}</h4>
 
-        <p v-if="content" class="js-job-empty-state-content">{{ content }}</p>
+        <p v-if="content" data-testid="job-empty-state-content">{{ content }}</p>
       </div>
       <manual-variables-form
         v-if="shouldRenderManualVariables"
@@ -85,7 +85,8 @@ export default {
           <gl-link
             :href="action.path"
             :data-method="action.method"
-            class="js-job-empty-state-action btn btn-primary"
+            class="btn btn-primary"
+            data-testid="job-empty-state-action"
             >{{ action.button_title }}</gl-link
           >
         </div>

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

@@ -198,17 +198,13 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon
-      v-if="isLoading"
-      size="lg"
-      class="js-job-loading qa-loading-animation prepend-top-20"
-    />
+    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation prepend-top-20" />
 
     <template v-else-if="shouldRenderContent">
-      <div class="js-job-content build-page">
+      <div class="build-page" data-testid="job-content">
         <!-- Header Section -->
         <header>
-          <div class="js-build-header build-header top-area">
+          <div class="build-header top-area">
             <ci-header
               :status="job.status"
               :item-id="job.id"
@@ -230,7 +226,6 @@ export default {
         <!-- Body Section -->
         <stuck-block
           v-if="job.stuck"
-          class="js-job-stuck"
           :has-no-runners-for-project="hasRunnersForProject"
           :tags="job.tags"
           :runners-path="runnerSettingsUrl"
@@ -238,13 +233,11 @@ export default {
 
         <unmet-prerequisites-block
           v-if="hasUnmetPrerequisitesFailure"
-          class="js-job-failed"
           :help-path="deploymentHelpUrl"
         />
 
         <shared-runner
           v-if="shouldRenderSharedRunnerLimitWarning"
-          class="js-shared-runner-limit"
           :quota-used="job.runners.quota.used"
           :quota-limit="job.runners.quota.limit"
           :runners-path="runnerHelpUrl"
@@ -254,7 +247,6 @@ export default {
 
         <environments-block
           v-if="hasEnvironment"
-          class="js-job-environment"
           :deployment-status="job.deployment_status"
           :deployment-cluster="job.deployment_cluster"
           :icon-status="job.status"
@@ -262,7 +254,7 @@ export default {
 
         <erased-block
           v-if="job.erased_at"
-          class="js-job-erased-block"
+          data-testid="job-erased-block"
           :user="job.erased_by"
           :erased-at="job.erased_at"
         />
@@ -270,8 +262,9 @@ export default {
         <div
           v-if="job.archived"
           ref="sticky"
-          class="js-archived-job gl-mt-3 archived-job"
+          class="gl-mt-3 archived-job"
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
+          data-testid="archived-job"
         >
           <icon name="lock" class="align-text-bottom" />
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
@@ -305,7 +298,6 @@ export default {
         <!-- empty state -->
         <empty-state
           v-if="!hasTrace"
-          class="js-job-empty-state"
           :illustration-path="emptyStateIllustration.image"
           :illustration-size-class="emptyStateIllustration.size"
           :title="emptyStateTitle"
@@ -323,12 +315,12 @@ export default {
 
     <sidebar
       v-if="shouldRenderContent"
-      class="js-job-sidebar"
       :class="{
         'right-sidebar-expanded': isSidebarOpen,
         'right-sidebar-collapsed': !isSidebarOpen,
       }"
       :runner-help-url="runnerHelpUrl"
+      data-testid="job-sidebar"
     />
   </div>
 </template>

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

@@ -71,13 +71,14 @@ export default {
 <template>
   <div class="top-bar">
     <!-- truncate information -->
-    <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
+    <div class="truncated-info d-none d-sm-block float-left" data-testid="log-truncated-info">
       <template v-if="isTraceSizeVisible">
         {{ jobLogSize }}
         <gl-link
           v-if="rawPath"
           :href="rawPath"
-          class="js-raw-link text-plain text-underline gl-ml-2"
+          class="text-plain text-underline gl-ml-2"
+          data-testid="raw-link"
           >{{ s__('Job|Complete Raw') }}</gl-link
         >
       </template>
@@ -91,7 +92,8 @@ export default {
         v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
-        class="js-raw-link-controller controllers-buttons"
+        class="controllers-buttons"
+        data-testid="job-raw-link-controller"
       >
         <icon name="doc-text" />
       </gl-link>
@@ -102,7 +104,8 @@ export default {
         :title="s__('Job|Erase job log')"
         :href="erasePath"
         :data-confirm="__('Are you sure you want to erase this build?')"
-        class="js-erase-link controllers-buttons"
+        class="controllers-buttons"
+        data-testid="job-log-erase-link"
         data-method="post"
       >
         <icon name="remove" />
@@ -114,7 +117,8 @@ export default {
         <gl-deprecated-button
           :disabled="isScrollTopDisabled"
           type="button"
-          class="js-scroll-top btn-scroll btn-transparent btn-blank"
+          class="btn-scroll btn-transparent btn-blank"
+          data-testid="job-controller-scroll-top"
           @click="handleScrollToTop"
         >
           <icon name="scroll_up" />
@@ -126,6 +130,7 @@ export default {
           :disabled="isScrollBottomDisabled"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
           :class="{ animate: isScrollingDown }"
+          data-testid="job-controller-scroll-bottom"
           @click="handleScrollToBottom"
           v-html="$options.scrollDown"
         />

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

@@ -100,7 +100,7 @@ export default {
 };
 </script>
 <template>
-  <div class="js-manual-vars-form col-12">
+  <div class="col-12" data-testid="manual-vars-form">
     <label>{{ s__('CiVariables|Variables') }}</label>
 
     <div class="ci-table">

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

@@ -147,7 +147,8 @@ export default {
           <gl-link
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
-            class="js-new-issue btn btn-success btn-inverted float-left mr-2"
+            class="btn btn-success btn-inverted float-left mr-2"
+            data-testid="job-new-issue"
             >{{ __('New issue') }}</gl-link
           >
           <gl-link

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

@@ -26,22 +26,27 @@ export default {
 </script>
 <template>
   <div class="bs-callout bs-callout-warning">
-    <p v-if="tags.length" class="js-stuck-with-tags gl-mb-0">
+    <p v-if="tags.length" class="gl-mb-0" data-testid="job-stuck-with-tags">
       {{
         s__(`This job is stuck because you don't have
   any active runners online or available with any of these tags assigned to them:`)
       }}
-      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2">
+      <span
+        v-for="(tag, index) in tags"
+        :key="index"
+        class="badge badge-primary gl-mr-2"
+        data-testid="badge"
+      >
         {{ tag }}
       </span>
     </p>
-    <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners gl-mb-0">
+    <p v-else-if="hasNoRunnersForProject" class="gl-mb-0" data-testid="job-stuck-no-runners">
       {{
         s__(`Job|This job is stuck because the project
   doesn't have any runners online assigned to it.`)
       }}
     </p>
-    <p v-else class="js-stuck-no-active-runner gl-mb-0">
+    <p v-else class="gl-mb-0" data-testid="job-stuck-no-active-runners">
       {{
         s__(`This job is stuck because you don't
   have any active runners that can run this job.`)
@@ -49,7 +54,7 @@ export default {
     </p>
 
     {{ __('Go to project') }}
-    <gl-link v-if="runnersPath" :href="runnersPath" class="js-runners-path">
+    <gl-link v-if="runnersPath" :href="runnersPath">
       {{ __('CI settings') }}
     </gl-link>
   </div>

spec/features/projects/jobs/user_browses_job_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe 'User browses a job', :js do
 
     # scroll to the top of the page first
     execute_script "window.scrollTo(0,0)"
-    accept_confirm { find('.js-erase-link').click }
+    accept_confirm { find('[data-testid="job-log-erase-link"]').click }
 
     expect(page).to have_no_css('.artifacts')
     expect(build).not_to have_trace

spec/features/projects/jobs_spec.rb

@@ -282,7 +282,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
           href = new_project_issue_path(project, options)
 
           page.within('.build-sidebar') do
-            expect(find('.js-new-issue')['href']).to include(href)
+            expect(find('[data-testid="job-new-issue"]')['href']).to include(href)
           end
         end
       end
@@ -425,7 +425,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
 
       it do
         wait_for_all_requests
-        expect(page).to have_css('.js-raw-link-controller')
+        expect(page).to have_css('[data-testid="job-raw-link-controller"]')
       end
     end
 
@@ -875,7 +875,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
         wait_for_requests
 
-        page.within('.js-job-erased-block') do
+        page.within('[data-testid="job-erased-block"]') do
           expect(page).to have_content('Job has been erased')
         end
       end
@@ -888,7 +888,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
         wait_for_requests
 
-        expect(page).not_to have_css('.js-job-erased-block')
+        expect(page).not_to have_css('[data-testid="job-erased-block"]')
       end
     end
 
@@ -901,8 +901,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
         wait_for_requests
 
-        expect(page).to have_css('.js-job-sidebar.right-sidebar-collapsed', visible: false)
-        expect(page).not_to have_css('.js-job-sidebar.right-sidebar-expanded', visible: false)
+        expect(page).to have_css('[data-testid="job-sidebar"].right-sidebar-collapsed', visible: false)
+        expect(page).not_to have_css('[data-testid="job-sidebar"].right-sidebar-expanded', visible: false)
       end
     end
 
@@ -913,8 +913,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         visit project_job_path(project, job)
         wait_for_requests
 
-        expect(page).to have_css('.js-job-sidebar.right-sidebar-expanded')
-        expect(page).not_to have_css('.js-job-sidebar.right-sidebar-collapsed')
+        expect(page).to have_css('[data-testid="job-sidebar"].right-sidebar-expanded')
+        expect(page).not_to have_css('[data-testid="job-sidebar"].right-sidebar-collapsed')
       end
     end
 
@@ -929,7 +929,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner) }
 
         it 'renders message about job being stuck because no runners are active' do
-          expect(page).to have_css('.js-stuck-no-active-runner')
+          expect(page).to have_selector('[data-testid="job-stuck-no-active-runners"]')
           expect(page).to have_content("This job is stuck because you don't have any active runners that can run this job.")
         end
       end
@@ -939,7 +939,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner, tag_list: %w(docker linux)) }
 
         it 'renders message about job being stuck because of no runners with the specified tags' do
-          expect(page).to have_css('.js-stuck-with-tags')
+          expect(page).to have_selector('[data-testid="job-stuck-with-tags"')
           expect(page).to have_content("This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:")
         end
       end
@@ -949,7 +949,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner, tag_list: %w(docker linux)) }
 
         it 'renders message about job being stuck because of no runners with the specified tags' do
-          expect(page).to have_css('.js-stuck-with-tags')
+          expect(page).to have_selector('[data-testid="job-stuck-with-tags"')
           expect(page).to have_content("This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:")
         end
       end
@@ -957,8 +957,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
       context 'without any runners available' do
         let(:job) { create(:ci_build, :pending, pipeline: pipeline) }
 
-        it 'renders message about job being stuck because not runners are available' do
-          expect(page).to have_css('.js-stuck-no-active-runner')
+        it 'renders message about job being stuck because no runners are available' do
+          expect(page).to have_selector('[data-testid="job-stuck-no-active-runners"]')
           expect(page).to have_content("This job is stuck because you don't have any active runners that can run this job.")
         end
       end
@@ -968,7 +968,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner) }
 
         it 'renders message about job being stuck because runners are offline' do
-          expect(page).to have_css('.js-stuck-no-runners')
+          expect(page).to have_selector('[data-testid="job-stuck-no-runners"')
           expect(page).to have_content("This job is stuck because the project doesn't have any runners online assigned to it.")
         end
       end

spec/frontend/jobs/components/empty_state_spec.js

-import Vue from 'vue';
-import component from '~/jobs/components/empty_state.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import EmptyState from '~/jobs/components/empty_state.vue';
 
 describe('Empty State', () => {
-  const Component = Vue.extend(component);
-  let vm;
+  let wrapper;
 
-  const props = {
+  const defaultProps = {
     illustrationPath: 'illustrations/pending_job_empty.svg',
     illustrationSizeClass: 'svg-430',
     title: 'This job has not started yet',
@@ -14,100 +12,107 @@ describe('Empty State', () => {
     variablesSettingsUrl: '',
   };
 
+  const createWrapper = props => {
+    wrapper = mount(EmptyState, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
   const content = 'This job is in pending state and is waiting to be picked by a runner';
 
+  const findEmptyStateImage = () => wrapper.find('img');
+  const findTitle = () => wrapper.find('[data-testid="job-empty-state-title"]');
+  const findContent = () => wrapper.find('[data-testid="job-empty-state-content"]');
+  const findAction = () => wrapper.find('[data-testid="job-empty-state-action"]');
+  const findManualVarsForm = () => wrapper.find('[data-testid="manual-vars-form"]');
+
   afterEach(() => {
-    vm.$destroy();
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
   describe('renders image and title', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
-      });
+      createWrapper();
     });
 
-    it('renders img with provided path and size', () => {
-      expect(vm.$el.querySelector('img').getAttribute('src')).toEqual(props.illustrationPath);
-      expect(vm.$el.querySelector('.svg-content').classList).toContain(props.illustrationSizeClass);
+    it('renders empty state image', () => {
+      expect(findEmptyStateImage().exists()).toBe(true);
     });
 
     it('renders provided title', () => {
-      expect(vm.$el.querySelector('.js-job-empty-state-title').textContent.trim()).toEqual(
-        props.title,
-      );
+      expect(
+        findTitle()
+          .text()
+          .trim(),
+      ).toBe(defaultProps.title);
     });
   });
 
   describe('with content', () => {
-    it('renders content', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
+    beforeEach(() => {
+      createWrapper({ content });
     });
 
-      expect(vm.$el.querySelector('.js-job-empty-state-content').textContent.trim()).toEqual(
-        content,
-      );
+    it('renders content', () => {
+      expect(
+        findContent()
+          .text()
+          .trim(),
+      ).toBe(content);
     });
   });
 
   describe('without content', () => {
-    it('does not render content', () => {
-      vm = mountComponent(Component, {
-        ...props,
+    beforeEach(() => {
+      createWrapper();
     });
 
-      expect(vm.$el.querySelector('.js-job-empty-state-content')).toBeNull();
+    it('does not render content', () => {
+      expect(findContent().exists()).toBe(false);
     });
   });
 
   describe('with action', () => {
-    it('renders action', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
+    beforeEach(() => {
+      createWrapper({
         action: {
           path: 'runner',
           button_title: 'Check runner',
           method: 'post',
         },
       });
+    });
 
-      expect(vm.$el.querySelector('.js-job-empty-state-action').getAttribute('href')).toEqual(
-        'runner',
-      );
+    it('renders action', () => {
+      expect(findAction().attributes('href')).toBe('runner');
     });
   });
 
   describe('without action', () => {
-    it('does not render action', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
+    beforeEach(() => {
+      createWrapper({
         action: null,
       });
-
-      expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull();
-    });
     });
 
-  describe('without playbale action', () => {
-    it('does not render manual variables form', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
+    it('does not render action', () => {
+      expect(findAction().exists()).toBe(false);
     });
 
-      expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+    it('does not render manual variables form', () => {
+      expect(findManualVarsForm().exists()).toBe(false);
     });
   });
 
-  describe('with playbale action and not scheduled job', () => {
+  describe('with playable action and not scheduled job', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        ...props,
+      createWrapper({
         content,
         playable: true,
         scheduled: false,
@@ -120,22 +125,25 @@ describe('Empty State', () => {
     });
 
     it('renders manual variables form', () => {
-      expect(vm.$el.querySelector('.js-manual-vars-form')).not.toBeNull();
+      expect(findManualVarsForm().exists()).toBe(true);
     });
 
     it('does not render the empty state action', () => {
-      expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull();
+      expect(findAction().exists()).toBe(false);
     });
   });
 
-  describe('with playbale action and  scheduled job', () => {
-    it('does not render manual variables form', () => {
-      vm = mountComponent(Component, {
-        ...props,
+  describe('with playable action and scheduled job', () => {
+    beforeEach(() => {
+      createWrapper({
+        playable: true,
+        scheduled: true,
         content,
       });
+    });
 
-      expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+    it('does not render manual variables form', () => {
+      expect(findManualVarsForm().exists()).toBe(false);
     });
   });
 });

spec/frontend/jobs/components/job_app_spec.js

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { getJSONFixture } from 'helpers/fixtures';
 import axios from '~/lib/utils/axios_utils';
 import JobApp from '~/jobs/components/job_app.vue';
+import Sidebar from '~/jobs/components/sidebar.vue';
+import StuckBlock from '~/jobs/components/stuck_block.vue';
+import UnmetPrerequisitesBlock from '~/jobs/components/unmet_prerequisites_block.vue';
+import EnvironmentsBlock from '~/jobs/components/environments_block.vue';
+import ErasedBlock from '~/jobs/components/erased_block.vue';
+import EmptyState from '~/jobs/components/empty_state.vue';
 import createStore from '~/jobs/store';
 import job from '../mock_data';
 import { TEST_HOST } from 'jest/helpers/test_constants';
@@ -55,6 +62,26 @@ describe('Job App', () => {
       .then(() => wrapper.vm.$nextTick());
   };
 
+  const findLoadingComponent = () => wrapper.find(GlLoadingIcon);
+  const findSidebar = () => wrapper.find(Sidebar);
+  const findJobContent = () => wrapper.find('[data-testid="job-content"');
+  const findStuckBlockComponent = () => wrapper.find(StuckBlock);
+  const findStuckBlockWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"');
+  const findStuckBlockNoActiveRunners = () =>
+    wrapper.find('[data-testid="job-stuck-no-active-runners"');
+  const findFailedJobComponent = () => wrapper.find(UnmetPrerequisitesBlock);
+  const findEnvironmentsBlockComponent = () => wrapper.find(EnvironmentsBlock);
+  const findErasedBlock = () => wrapper.find(ErasedBlock);
+  const findArchivedJob = () => wrapper.find('[data-testid="archived-job"]');
+  const findEmptyState = () => wrapper.find(EmptyState);
+  const findJobNewIssueLink = () => wrapper.find('[data-testid="job-new-issue"]');
+  const findJobEmptyStateTitle = () => wrapper.find('[data-testid="job-empty-state-title"]');
+  const findJobTraceScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
+  const findJobTraceScrollBottom = () =>
+    wrapper.find('[data-testid="job-controller-scroll-bottom"]');
+  const findJobTraceController = () => wrapper.find('[data-testid="job-raw-link-controller"]');
+  const findJobTraceEraseLink = () => wrapper.find('[data-testid="job-log-erase-link"]');
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
     store = createStore();
@@ -72,9 +99,9 @@ describe('Job App', () => {
     });
 
     it('renders loading icon', () => {
-      expect(wrapper.find('.js-job-loading').exists()).toBe(true);
-      expect(wrapper.find('.js-job-sidebar').exists()).toBe(false);
-      expect(wrapper.find('.js-job-content').exists()).toBe(false);
+      expect(findLoadingComponent().exists()).toBe(true);
+      expect(findSidebar().exists()).toBe(false);
+      expect(findJobContent().exists()).toBe(false);
     });
   });
 
@@ -115,7 +142,7 @@ describe('Job App', () => {
         });
 
         it('should render new issue link', () => {
-          expect(wrapper.find('.js-new-issue').attributes('href')).toEqual(job.new_issue_path);
+          expect(findJobNewIssueLink().attributes('href')).toEqual(job.new_issue_path);
         });
       });
 
@@ -134,7 +161,7 @@ describe('Job App', () => {
     });
 
     describe('stuck block', () => {
-      describe('without active runners availabl', () => {
+      describe('without active runners available', () => {
         it('renders stuck block when there are no runners', () =>
           setupAndMount({
             jobData: {
@@ -153,8 +180,8 @@ describe('Job App', () => {
               tags: [],
             },
           }).then(() => {
-            expect(wrapper.find('.js-job-stuck').exists()).toBe(true);
-            expect(wrapper.find('.js-job-stuck .js-stuck-no-active-runner').exists()).toBe(true);
+            expect(findStuckBlockComponent().exists()).toBe(true);
+            expect(findStuckBlockNoActiveRunners().exists()).toBe(true);
           }));
       });
 
@@ -176,8 +203,8 @@ describe('Job App', () => {
               },
             },
           }).then(() => {
-            expect(wrapper.find('.js-job-stuck').text()).toContain(job.tags[0]);
-            expect(wrapper.find('.js-job-stuck .js-stuck-with-tags').exists()).toBe(true);
+            expect(findStuckBlockComponent().text()).toContain(job.tags[0]);
+            expect(findStuckBlockWithTags().exists()).toBe(true);
           }));
       });
 
@@ -199,8 +226,8 @@ describe('Job App', () => {
               },
             },
           }).then(() => {
-            expect(wrapper.find('.js-job-stuck').text()).toContain(job.tags[0]);
-            expect(wrapper.find('.js-job-stuck .js-stuck-with-tags').exists()).toBe(true);
+            expect(findStuckBlockComponent().text()).toContain(job.tags[0]);
+            expect(findStuckBlockWithTags().exists()).toBe(true);
           }));
       });
 
@@ -210,7 +237,7 @@ describe('Job App', () => {
             runners: { available: true },
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-stuck').exists()).toBe(false);
+          expect(findStuckBlockComponent().exists()).toBe(false);
         }));
     });
 
@@ -239,7 +266,7 @@ describe('Job App', () => {
             tags: [],
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-failed').exists()).toBe(true);
+          expect(findFailedJobComponent().exists()).toBe(true);
         }));
     });
 
@@ -255,12 +282,12 @@ describe('Job App', () => {
             },
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-environment').exists()).toBe(true);
+          expect(findEnvironmentsBlockComponent().exists()).toBe(true);
         }));
 
       it('does not render environment block when job has environment', () =>
         setupAndMount().then(() => {
-          expect(wrapper.find('.js-job-environment').exists()).toBe(false);
+          expect(findEnvironmentsBlockComponent().exists()).toBe(false);
         }));
     });
 
@@ -275,7 +302,7 @@ describe('Job App', () => {
             erased_at: '2016-11-07T11:11:16.525Z',
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-erased-block').exists()).toBe(true);
+          expect(findErasedBlock().exists()).toBe(true);
         }));
 
       it('does not render erased block when `erased` is false', () =>
@@ -284,7 +311,7 @@ describe('Job App', () => {
             erased_at: null,
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-erased-block').exists()).toBe(false);
+          expect(findErasedBlock().exists()).toBe(false);
         }));
     });
 
@@ -313,7 +340,7 @@ describe('Job App', () => {
             },
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-empty-state').exists()).toBe(true);
+          expect(findEmptyState().exists()).toBe(true);
         }));
 
       it('does not render empty state when job does not have trace but it is running', () =>
@@ -329,12 +356,12 @@ describe('Job App', () => {
             },
           },
         }).then(() => {
-          expect(wrapper.find('.js-job-empty-state').exists()).toBe(false);
+          expect(findEmptyState().exists()).toBe(false);
         }));
 
       it('does not render empty state when job has trace but it is not running', () =>
         setupAndMount({ jobData: { has_trace: true } }).then(() => {
-          expect(wrapper.find('.js-job-empty-state').exists()).toBe(false);
+          expect(findEmptyState().exists()).toBe(false);
         }));
 
       it('displays remaining time for a delayed job', () => {
@@ -345,9 +372,9 @@ describe('Job App', () => {
             () => new Date(delayedJobFixture.scheduled_at).getTime() - oneHourInMilliseconds,
           );
         return setupAndMount({ jobData: delayedJobFixture }).then(() => {
-          expect(wrapper.find('.js-job-empty-state').exists()).toBe(true);
+          expect(findEmptyState().exists()).toBe(true);
 
-          const title = wrapper.find('.js-job-empty-state-title').text();
+          const title = findJobEmptyStateTitle().text();
 
           expect(title).toEqual('This is a delayed job to run in 01:00:00');
         });
@@ -386,7 +413,7 @@ describe('Job App', () => {
     beforeEach(() => setupAndMount({ jobData: { archived: true } }));
 
     it('renders warning about job being archived', () => {
-      expect(wrapper.find('.js-archived-job ').exists()).toBe(true);
+      expect(findArchivedJob().exists()).toBe(true);
     });
   });
 
@@ -394,7 +421,7 @@ describe('Job App', () => {
     beforeEach(() => setupAndMount());
 
     it('does not warning about job being archived', () => {
-      expect(wrapper.find('.js-archived-job ').exists()).toBe(false);
+      expect(findArchivedJob().exists()).toBe(false);
     });
   });
 
@@ -413,16 +440,16 @@ describe('Job App', () => {
     );
 
     it('should render scroll buttons', () => {
-      expect(wrapper.find('.js-scroll-top').exists()).toBe(true);
-      expect(wrapper.find('.js-scroll-bottom').exists()).toBe(true);
+      expect(findJobTraceScrollTop().exists()).toBe(true);
+      expect(findJobTraceScrollBottom().exists()).toBe(true);
     });
 
     it('should render link to raw ouput', () => {
-      expect(wrapper.find('.js-raw-link-controller').exists()).toBe(true);
+      expect(findJobTraceController().exists()).toBe(true);
     });
 
     it('should render link to erase job', () => {
-      expect(wrapper.find('.js-erase-link').exists()).toBe(true);
+      expect(findJobTraceEraseLink().exists()).toBe(true);
     });
   });
 });

spec/frontend/jobs/components/job_log_controllers_spec.js

-import Vue from 'vue';
-import component from '~/jobs/components/job_log_controllers.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import JobLogControllers from '~/jobs/components/job_log_controllers.vue';
 
 describe('Job log controllers', () => {
-  const Component = Vue.extend(component);
-  let vm;
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
-  const props = {
+  const defaultProps = {
     rawPath: '/raw',
     erasePath: '/erase',
     size: 511952,
@@ -20,70 +21,80 @@ describe('Job log controllers', () => {
     isTraceSizeVisible: true,
   };
 
+  const createWrapper = props => {
+    wrapper = mount(JobLogControllers, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  const findTruncatedInfo = () => wrapper.find('[data-testid="log-truncated-info"]');
+  const findRawLink = () => wrapper.find('[data-testid="raw-link"]');
+  const findRawLinkController = () => wrapper.find('[data-testid="job-raw-link-controller"]');
+  const findEraseLink = () => wrapper.find('[data-testid="job-log-erase-link"]');
+  const findScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
+  const findScrollBottom = () => wrapper.find('[data-testid="job-controller-scroll-bottom"]');
+
   describe('Truncate information', () => {
     describe('with isTraceSizeVisible', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, props);
+        createWrapper();
       });
 
       it('renders size information', () => {
-        expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
+        expect(findTruncatedInfo().text()).toMatch('499.95 KiB');
       });
 
       it('renders link to raw trace', () => {
-        expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+        expect(findRawLink().attributes('href')).toBe(defaultProps.rawPath);
       });
     });
   });
 
   describe('links section', () => {
     describe('with raw trace path', () => {
-      it('renders raw trace link', () => {
-        vm = mountComponent(Component, props);
+      beforeEach(() => {
+        createWrapper();
+      });
 
-        expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual(
-          '/raw',
-        );
+      it('renders raw trace link', () => {
+        expect(findRawLinkController().attributes('href')).toBe(defaultProps.rawPath);
       });
     });
 
     describe('without raw trace path', () => {
-      it('does not render raw trace link', () => {
-        vm = mountComponent(Component, {
-          erasePath: '/erase',
-          size: 511952,
-          isScrollTopDisabled: true,
-          isScrollBottomDisabled: true,
-          isScrollingDown: false,
-          isTraceSizeVisible: true,
+      beforeEach(() => {
+        createWrapper({
+          rawPath: null,
+        });
       });
 
-        expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull();
+      it('does not render raw trace link', () => {
+        expect(findRawLinkController().exists()).toBe(false);
       });
     });
 
     describe('when is erasable', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, props);
+        createWrapper();
       });
 
       it('renders erase job link', () => {
-        expect(vm.$el.querySelector('.js-erase-link')).not.toBeNull();
+        expect(findEraseLink().exists()).toBe(true);
       });
     });
 
     describe('when it is not erasable', () => {
-      it('does not render erase button', () => {
-        vm = mountComponent(Component, {
-          rawPath: '/raw',
-          size: 511952,
-          isScrollTopDisabled: true,
-          isScrollBottomDisabled: true,
-          isScrollingDown: false,
-          isTraceSizeVisible: true,
+      beforeEach(() => {
+        createWrapper({
+          erasePath: null,
+        });
       });
 
-        expect(vm.$el.querySelector('.js-erase-link')).toBeNull();
+      it('does not render erase button', () => {
+        expect(findEraseLink().exists()).toBe(false);
       });
     });
   });
@@ -92,45 +103,39 @@ describe('Job log controllers', () => {
     describe('scroll top button', () => {
       describe('when user can scroll top', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, props);
+          createWrapper({
+            isScrollTopDisabled: false,
           });
-
-        it('renders enabled scroll top button', () => {
-          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toBeNull();
         });
 
-        it('emits scrollJobLogTop event on click', () => {
-          jest.spyOn(vm, '$emit').mockImplementation(() => {});
-          vm.$el.querySelector('.js-scroll-top').click();
+        it('emits scrollJobLogTop event on click', async () => {
+          findScrollTop().trigger('click');
+
+          await wrapper.vm.$nextTick();
 
-          expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogTop');
+          expect(wrapper.emitted().scrollJobLogTop).toHaveLength(1);
         });
       });
 
       describe('when user can not scroll top', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawPath: '/raw',
-            erasePath: '/erase',
-            size: 511952,
+          createWrapper({
             isScrollTopDisabled: true,
             isScrollBottomDisabled: false,
             isScrollingDown: false,
-            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll top button', () => {
-          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual(
-            'disabled',
-          );
+          expect(findScrollTop().attributes('disabled')).toBe('disabled');
         });
 
-        it('does not emit scrollJobLogTop event on click', () => {
-          jest.spyOn(vm, '$emit').mockImplementation(() => {});
-          vm.$el.querySelector('.js-scroll-top').click();
+        it('does not emit scrollJobLogTop event on click', async () => {
+          findScrollTop().trigger('click');
+
+          await wrapper.vm.$nextTick();
 
-          expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop');
+          expect(wrapper.emitted().scrollJobLogTop).toBeUndefined();
         });
       });
     });
@@ -138,69 +143,61 @@ describe('Job log controllers', () => {
     describe('scroll bottom button', () => {
       describe('when user can scroll bottom', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, props);
+          createWrapper();
         });
 
-        it('renders enabled scroll bottom button', () => {
-          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toBeNull();
-        });
+        it('emits scrollJobLogBottom event on click', async () => {
+          findScrollBottom().trigger('click');
 
-        it('emits scrollJobLogBottom event on click', () => {
-          jest.spyOn(vm, '$emit').mockImplementation(() => {});
-          vm.$el.querySelector('.js-scroll-bottom').click();
+          await wrapper.vm.$nextTick();
 
-          expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogBottom');
+          expect(wrapper.emitted().scrollJobLogBottom).toHaveLength(1);
         });
       });
 
       describe('when user can not scroll bottom', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawPath: '/raw',
-            erasePath: '/erase',
-            size: 511952,
+          createWrapper({
             isScrollTopDisabled: false,
             isScrollBottomDisabled: true,
             isScrollingDown: false,
-            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll bottom button', () => {
-          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual(
-            'disabled',
-          );
+          expect(findScrollBottom().attributes('disabled')).toEqual('disabled');
         });
 
-        it('does not emit scrollJobLogBottom event on click', () => {
-          jest.spyOn(vm, '$emit').mockImplementation(() => {});
-          vm.$el.querySelector('.js-scroll-bottom').click();
+        it('does not emit scrollJobLogBottom event on click', async () => {
+          findScrollBottom().trigger('click');
 
-          expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.emitted().scrollJobLogBottom).toBeUndefined();
         });
       });
 
       describe('while isScrollingDown is true', () => {
-        it('renders animate class for the scroll down button', () => {
-          vm = mountComponent(Component, props);
+        beforeEach(() => {
+          createWrapper();
+        });
 
-          expect(vm.$el.querySelector('.js-scroll-bottom').className).toContain('animate');
+        it('renders animate class for the scroll down button', () => {
+          expect(findScrollBottom().classes()).toContain('animate');
         });
       });
 
       describe('while isScrollingDown is false', () => {
-        it('does not render animate class for the scroll down button', () => {
-          vm = mountComponent(Component, {
-            rawPath: '/raw',
-            erasePath: '/erase',
-            size: 511952,
+        beforeEach(() => {
+          createWrapper({
             isScrollTopDisabled: true,
             isScrollBottomDisabled: false,
             isScrollingDown: false,
-            isTraceSizeVisible: true,
+          });
         });
 
-          expect(vm.$el.querySelector('.js-scroll-bottom').className).not.toContain('animate');
+        it('does not render animate class for the scroll down button', () => {
+          expect(findScrollBottom().classes()).not.toContain('animate');
         });
       });
     });

spec/frontend/jobs/components/sidebar_spec.js

@@ -59,11 +59,13 @@ describe('Sidebar details block', () => {
 
   describe('actions', () => {
     it('should render link to new issue', () => {
-      expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
+      expect(vm.$el.querySelector('[data-testid="job-new-issue"]').getAttribute('href')).toEqual(
         job.new_issue_path,
       );
 
-      expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue');
+      expect(vm.$el.querySelector('[data-testid="job-new-issue"]').textContent.trim()).toEqual(
+        'New issue',
+      );
     });
 
     it('should render link to retry job', () => {

spec/frontend/jobs/components/stuck_block_spec.js

-import Vue from 'vue';
-import component from '~/jobs/components/stuck_block.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import StuckBlock from '~/jobs/components/stuck_block.vue';
 
 describe('Stuck Block Job component', () => {
-  const Component = Vue.extend(component);
-  let vm;
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
+  const createWrapper = props => {
+    wrapper = shallowMount(StuckBlock, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const tags = ['docker', 'gitlab-org'];
+
+  const findStuckNoActiveRunners = () =>
+    wrapper.find('[data-testid="job-stuck-no-active-runners"]');
+  const findStuckNoRunners = () => wrapper.find('[data-testid="job-stuck-no-runners"]');
+  const findStuckWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"]');
+  const findRunnerPathLink = () => wrapper.find(GlLink);
+  const findAllBadges = () => wrapper.findAll('[data-testid="badge"]');
+
   describe('with no runners for project', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
+      createWrapper({
         hasNoRunnersForProject: true,
         runnersPath: '/root/project/runners#js-runners-settings',
       });
     });
 
     it('renders only information about project not having runners', () => {
-      expect(vm.$el.querySelector('.js-stuck-no-runners')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-with-tags')).toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-no-active-runner')).toBeNull();
+      expect(findStuckNoRunners().exists()).toBe(true);
+      expect(findStuckWithTags().exists()).toBe(false);
+      expect(findStuckNoActiveRunners().exists()).toBe(false);
     });
 
     it('renders link to runners page', () => {
-      expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+      expect(findRunnerPathLink().attributes('href')).toBe(
         '/root/project/runners#js-runners-settings',
       );
     });
@@ -33,26 +52,27 @@ describe('Stuck Block Job component', () => {
 
   describe('with tags', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
+      createWrapper({
         hasNoRunnersForProject: false,
-        tags: ['docker', 'gitlab-org'],
+        tags,
         runnersPath: '/root/project/runners#js-runners-settings',
       });
     });
 
     it('renders information about the tags not being set', () => {
-      expect(vm.$el.querySelector('.js-stuck-no-runners')).toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-with-tags')).not.toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-no-active-runner')).toBeNull();
+      expect(findStuckWithTags().exists()).toBe(true);
+      expect(findStuckNoActiveRunners().exists()).toBe(false);
+      expect(findStuckNoRunners().exists()).toBe(false);
     });
 
     it('renders tags', () => {
-      expect(vm.$el.textContent).toContain('docker');
-      expect(vm.$el.textContent).toContain('gitlab-org');
+      findAllBadges().wrappers.forEach((badgeElt, index) => {
+        return expect(badgeElt.text()).toBe(tags[index]);
+      });
     });
 
     it('renders link to runners page', () => {
-      expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+      expect(findRunnerPathLink().attributes('href')).toBe(
         '/root/project/runners#js-runners-settings',
       );
     });
@@ -60,20 +80,20 @@ describe('Stuck Block Job component', () => {
 
   describe('without active runners', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
+      createWrapper({
         hasNoRunnersForProject: false,
         runnersPath: '/root/project/runners#js-runners-settings',
       });
     });
 
     it('renders information about project not having runners', () => {
-      expect(vm.$el.querySelector('.js-stuck-no-runners')).toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-with-tags')).toBeNull();
-      expect(vm.$el.querySelector('.js-stuck-no-active-runner')).not.toBeNull();
+      expect(findStuckNoActiveRunners().exists()).toBe(true);
+      expect(findStuckNoRunners().exists()).toBe(false);
+      expect(findStuckWithTags().exists()).toBe(false);
     });
 
     it('renders link to runners page', () => {
-      expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+      expect(findRunnerPathLink().attributes('href')).toBe(
         '/root/project/runners#js-runners-settings',
       );
     });