1 files changed, 33 insertions, 39 deletions

diff --git a/spec/frontend/jobs/components/sidebar_detail_row_spec.js b/spec/frontend/jobs/components/sidebar_detail_row_spec.js
index 42d11266dad..bae4d6cf837 100644
--- a/spec/frontend/jobs/components/sidebar_detail_row_spec.js
+++ b/spec/frontend/jobs/components/sidebar_detail_row_spec.js
@@ -1,61 +1,55 @@
-import Vue from 'vue';
-import sidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue';
+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue';
 
 describe('Sidebar detail row', () => {
-  let SidebarDetailRow;
-  let vm;
+  let wrapper;
 
-  beforeEach(() => {
-    SidebarDetailRow = Vue.extend(sidebarDetailRow);
-  });
+  const title = 'this is the title';
+  const value = 'this is the value';
+  const helpUrl = '/help/ci/runners/README.html';
 
-  afterEach(() => {
-    vm.$destroy();
-  });
+  const findHelpLink = () => wrapper.findComponent(GlLink);
 
-  it('should render no title', () => {
-    vm = new SidebarDetailRow({
+  const createComponent = (props) => {
+    wrapper = shallowMount(SidebarDetailRow, {
       propsData: {
-        value: 'this is the value',
+        ...props,
       },
-    }).$mount();
+    });
+  };
 
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('this is the value');
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  beforeEach(() => {
-    vm = new SidebarDetailRow({
-      propsData: {
-        title: 'this is the title',
-        value: 'this is the value',
-      },
-    }).$mount();
-  });
+  describe('with title/value and without helpUrl', () => {
+    beforeEach(() => {
+      createComponent({ title, value });
+    });
 
-  it('should render provided title and value', () => {
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
-      'this is the title: this is the value',
-    );
-  });
+    it('should render the provided title and value', () => {
+      expect(wrapper.text()).toBe(`${title}: ${value}`);
+    });
 
-  describe('when helpUrl not provided', () => {
-    it('should not render help', () => {
-      expect(vm.$el.querySelector('.help-button')).toBeNull();
+    it('should not render the help link', () => {
+      expect(findHelpLink().exists()).toBe(false);
     });
   });
 
   describe('when helpUrl provided', () => {
     beforeEach(() => {
-      vm = new SidebarDetailRow({
-        propsData: {
-          helpUrl: 'help url',
-          value: 'foo',
-        },
-      }).$mount();
+      createComponent({
+        helpUrl,
+        title,
+        value,
+      });
     });
 
-    it('should render help', () => {
-      expect(vm.$el.querySelector('.help-button a').getAttribute('href')).toEqual('help url');
+    it('should render the help link', () => {
+      expect(findHelpLink().exists()).toBe(true);
+      expect(findHelpLink().attributes('href')).toBe(helpUrl);
     });
   });
 });