2 files changed, 45 insertions, 42 deletions

diff --git a/spec/frontend/boards/components/issue_card_inner_scoped_label_spec.js b/spec/frontend/boards/components/issue_card_inner_scoped_label_spec.js
index 7389cb14ecb..53e670e76da 100644
--- a/spec/frontend/boards/components/issue_card_inner_scoped_label_spec.js
+++ b/spec/frontend/boards/components/issue_card_inner_scoped_label_spec.js
@@ -1,43 +1,40 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import IssueCardInnerScopedLabel from '~/boards/components/issue_card_inner_scoped_label.vue';
 
 describe('IssueCardInnerScopedLabel Component', () => {
-  let vm;
-  const Component = Vue.extend(IssueCardInnerScopedLabel);
-  const props = {
-    label: { title: 'Foo::Bar', description: 'Some Random Description' },
-    labelStyle: { background: 'white', color: 'black' },
-    scopedLabelsDocumentationLink: '/docs-link',
-  };
-  const createComponent = () => mountComponent(Component, { ...props });
+  let wrapper;
 
   beforeEach(() => {
-    vm = createComponent();
+    wrapper = shallowMount(IssueCardInnerScopedLabel, {
+      propsData: {
+        label: { title: 'Foo::Bar', description: 'Some Random Description' },
+        labelStyle: { background: 'white', color: 'black' },
+        scopedLabelsDocumentationLink: '/docs-link',
+      },
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render label title', () => {
-    expect(vm.$el.querySelector('.color-label').textContent.trim()).toEqual('Foo::Bar');
+    expect(wrapper.find('.color-label').text()).toBe('Foo::Bar');
   });
 
   it('should render question mark symbol', () => {
-    expect(vm.$el.querySelector('.fa-question-circle')).not.toBeNull();
+    expect(wrapper.find('.fa-question-circle').exists()).toBe(true);
   });
 
   it('should render label style provided', () => {
-    const node = vm.$el.querySelector('.color-label');
+    const label = wrapper.find('.color-label');
 
-    expect(node.style.background).toEqual(props.labelStyle.background);
-    expect(node.style.color).toEqual(props.labelStyle.color);
+    expect(label.attributes('style')).toContain('background: white;');
+    expect(label.attributes('style')).toContain('color: black;');
   });
 
   it('should render the docs link', () => {
-    expect(vm.$el.querySelector('a.scoped-label').href).toContain(
-      props.scopedLabelsDocumentationLink,
-    );
+    expect(wrapper.find(GlLink).attributes('href')).toBe('/docs-link');
   });
 });
diff --git a/spec/frontend/boards/components/issue_due_date_spec.js b/spec/frontend/boards/components/issue_due_date_spec.js
index 8cb1d963851..880859287e1 100644
--- a/spec/frontend/boards/components/issue_due_date_spec.js
+++ b/spec/frontend/boards/components/issue_due_date_spec.js
@@ -1,72 +1,78 @@
-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import dateFormat from 'dateformat';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = (dueDate = new Date(), closed = false) =>
+  shallowMount(IssueDueDate, {
+    propsData: {
+      closed,
+      date: dateFormat(dueDate, 'yyyy-mm-dd', true),
+    },
+  });
+
+const findTime = wrapper => wrapper.find('time');
 
 describe('Issue Due Date component', () => {
-  let vm;
+  let wrapper;
   let date;
-  const Component = Vue.extend(IssueDueDate);
-  const createComponent = (dueDate = new Date(), closed = false) =>
-    mountComponent(Component, { closed, date: dateFormat(dueDate, 'yyyy-mm-dd', true) });
 
   beforeEach(() => {
     date = new Date();
-    vm = createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render "Today" if the due date is today', () => {
-    const timeContainer = vm.$el.querySelector('time');
+    wrapper = createComponent();
 
-    expect(timeContainer.textContent.trim()).toEqual('Today');
+    expect(findTime(wrapper).text()).toBe('Today');
   });
 
   it('should render "Yesterday" if the due date is yesterday', () => {
     date.setDate(date.getDate() - 1);
-    vm = createComponent(date);
+    wrapper = createComponent(date);
 
-    expect(vm.$el.querySelector('time').textContent.trim()).toEqual('Yesterday');
+    expect(findTime(wrapper).text()).toBe('Yesterday');
   });
 
   it('should render "Tomorrow" if the due date is one day from now', () => {
     date.setDate(date.getDate() + 1);
-    vm = createComponent(date);
+    wrapper = createComponent(date);
 
-    expect(vm.$el.querySelector('time').textContent.trim()).toEqual('Tomorrow');
+    expect(findTime(wrapper).text()).toBe('Tomorrow');
   });
 
   it('should render day of the week if due date is one week away', () => {
     date.setDate(date.getDate() + 5);
-    vm = createComponent(date);
+    wrapper = createComponent(date);
 
-    expect(vm.$el.querySelector('time').textContent.trim()).toEqual(dateFormat(date, 'dddd'));
+    expect(findTime(wrapper).text()).toBe(dateFormat(date, 'dddd'));
   });
 
   it('should render month and day for other dates', () => {
     date.setDate(date.getDate() + 17);
-    vm = createComponent(date);
+    wrapper = createComponent(date);
     const today = new Date();
     const isDueInCurrentYear = today.getFullYear() === date.getFullYear();
     const format = isDueInCurrentYear ? 'mmm d' : 'mmm d, yyyy';
 
-    expect(vm.$el.querySelector('time').textContent.trim()).toEqual(dateFormat(date, format));
+    expect(findTime(wrapper).text()).toBe(dateFormat(date, format));
   });
 
   it('should contain the correct `.text-danger` css class for overdue issue that is open', () => {
     date.setDate(date.getDate() - 17);
-    vm = createComponent(date);
+    wrapper = createComponent(date);
 
-    expect(vm.$el.querySelector('time').classList.contains('text-danger')).toEqual(true);
+    expect(findTime(wrapper).classes('text-danger')).toBe(true);
   });
 
   it('should not contain the `.text-danger` css class for overdue issue that is closed', () => {
     date.setDate(date.getDate() - 17);
-    vm = createComponent(date, true);
+    const closed = true;
+    wrapper = createComponent(date, closed);
 
-    expect(vm.$el.querySelector('time').classList.contains('text-danger')).toEqual(false);
+    expect(findTime(wrapper).classes('text-danger')).toBe(false);
   });
 });