Add latest changes from gitlab-org/gitlab@13-3-stable-ee

6 files changed, 255 insertions, 201 deletions

diff --git a/spec/frontend/jobs/components/empty_state_spec.js b/spec/frontend/jobs/components/empty_state_spec.js
index c6eac4e27b3..29d0c4e07aa 100644
--- a/spec/frontend/jobs/components/empty_state_spec.js
+++ b/spec/frontend/jobs/components/empty_state_spec.js
@@ -1,12 +1,10 @@
-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();
+    it('does not render action', () => {
+      expect(findAction().exists()).toBe(false);
     });
-  });
 
-  describe('without playbale action', () => {
     it('does not render manual variables form', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        content,
-      });
-
-      expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+      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);
     });
   });
 });
diff --git a/spec/frontend/jobs/components/job_app_spec.js b/spec/frontend/jobs/components/job_app_spec.js
index d0b3d4f6247..e9ecafcd4c3 100644
--- a/spec/frontend/jobs/components/job_app_spec.js
+++ b/spec/frontend/jobs/components/job_app_spec.js
@@ -1,12 +1,19 @@
 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 { TEST_HOST } from 'jest/helpers/test_constants';
 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';
 
 describe('Job App', () => {
   const localVue = createLocalVue();
@@ -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);
     });
   });
 });
diff --git a/spec/frontend/jobs/components/job_log_controllers_spec.js b/spec/frontend/jobs/components/job_log_controllers_spec.js
index 04f20811601..233cef05622 100644
--- a/spec/frontend/jobs/components/job_log_controllers_spec.js
+++ b/spec/frontend/jobs/components/job_log_controllers_spec.js
@@ -1,16 +1,17 @@
-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', async () => {
+          findScrollTop().trigger('click');
 
-        it('emits scrollJobLogTop event on click', () => {
-          jest.spyOn(vm, '$emit').mockImplementation(() => {});
-          vm.$el.querySelector('.js-scroll-top').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');
 
-          expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop');
+          await wrapper.vm.$nextTick();
+
+          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');
         });
       });
     });
diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js
index a6a767f7921..eb8c4fe8bc9 100644
--- a/spec/frontend/jobs/components/log/mock_data.js
+++ b/spec/frontend/jobs/components/log/mock_data.js
@@ -34,7 +34,7 @@ export const utilsMockData = [
     content: [
       {
         text:
-          'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.6-golang-1.14-git-2.27-lfs-2.9-chrome-83-node-12.x-yarn-1.21-postgresql-11-graphicsmagick-1.3.34',
+          'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.6-golang-1.14-git-2.28-lfs-2.9-chrome-84-node-12.x-yarn-1.21-postgresql-11-graphicsmagick-1.3.34',
       },
     ],
     section: 'prepare-executor',
diff --git a/spec/frontend/jobs/components/sidebar_spec.js b/spec/frontend/jobs/components/sidebar_spec.js
index 0c8e2dc3aef..48788df0c93 100644
--- a/spec/frontend/jobs/components/sidebar_spec.js
+++ b/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', () => {
diff --git a/spec/frontend/jobs/components/stuck_block_spec.js b/spec/frontend/jobs/components/stuck_block_spec.js
index c320793b2be..926286bf75a 100644
--- a/spec/frontend/jobs/components/stuck_block_spec.js
+++ b/spec/frontend/jobs/components/stuck_block_spec.js
@@ -1,31 +1,50 @@
-import Vue from 'vue';
-import component from '~/jobs/components/stuck_block.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { GlBadge, 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(GlBadge);
+
   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',
       );
     });