Refactor sidebar detail row

Refactor the component and the
related spec.

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

@@ -34,12 +34,13 @@ export default {
 };
 </script>
 <template>
-  <p class="build-detail-row">
-    <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
-    <span v-if="hasHelpURL" class="help-button float-right">
-      <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
-        <gl-icon name="question-o" />
-      </gl-link>
-    </span>
+  <p class="gl-display-flex gl-justify-content-space-between gl-mb-2">
+    <span v-if="hasTitle"
+      ><b>{{ title }}</b
+      >: {{ value }}</span
+    >
+    <gl-link v-if="hasHelpURL" :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
+      <gl-icon name="question-o" />
+    </gl-link>
   </p>
 </template>

spec/frontend/jobs/components/sidebar_detail_row_spec.js

-import Vue from 'vue';
-import sidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+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.find(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);
     });
   });
 });