Migrate time ago spec to jest

Migrated time ago karma spec
to jest and now using vue test
utils.

spec/frontend/pipelines/time_ago_spec.js

+import { shallowMount } from '@vue/test-utils';
+import TimeAgo from '~/pipelines/components/time_ago.vue';
+
+describe('Timeago component', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(TimeAgo, {
+      propsData: {
+        ...props,
+      },
+      data() {
+        return {
+          iconTimerSvg: `<svg></svg>`,
+        };
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('with duration', () => {
+    beforeEach(() => {
+      createComponent({ duration: 10, finishedTime: '' });
+    });
+
+    it('should render duration and timer svg', () => {
+      expect(wrapper.find('.duration').exists()).toBe(true);
+      expect(wrapper.find('.duration svg').exists()).toBe(true);
+    });
+  });
+
+  describe('without duration', () => {
+    beforeEach(() => {
+      createComponent({ duration: 0, finishedTime: '' });
+    });
+
+    it('should not render duration and timer svg', () => {
+      expect(wrapper.find('.duration').exists()).toBe(false);
+    });
+  });
+
+  describe('with finishedTime', () => {
+    beforeEach(() => {
+      createComponent({ duration: 0, finishedTime: '2017-04-26T12:40:23.277Z' });
+    });
+
+    it('should render time and calendar icon', () => {
+      expect(wrapper.find('.finished-at').exists()).toBe(true);
+      expect(wrapper.find('.finished-at i.fa-calendar').exists()).toBe(true);
+      expect(wrapper.find('.finished-at time').exists()).toBe(true);
+    });
+  });
+
+  describe('without finishedTime', () => {
+    beforeEach(() => {
+      createComponent({ duration: 0, finishedTime: '' });
+    });
+
+    it('should not render time and calendar icon', () => {
+      expect(wrapper.find('.finished-at').exists()).toBe(false);
+    });
+  });
+});

spec/javascripts/pipelines/time_ago_spec.js

-import Vue from 'vue';
-import timeAgo from '~/pipelines/components/time_ago.vue';
-
-describe('Timeago component', () => {
-  let TimeAgo;
-  beforeEach(() => {
-    TimeAgo = Vue.extend(timeAgo);
-  });
-
-  describe('with duration', () => {
-    it('should render duration and timer svg', () => {
-      const component = new TimeAgo({
-        propsData: {
-          duration: 10,
-          finishedTime: '',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.duration')).toBeDefined();
-      expect(component.$el.querySelector('.duration svg')).toBeDefined();
-    });
-  });
-
-  describe('without duration', () => {
-    it('should not render duration and timer svg', () => {
-      const component = new TimeAgo({
-        propsData: {
-          duration: 0,
-          finishedTime: '',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.duration')).toBe(null);
-    });
-  });
-
-  describe('with finishedTime', () => {
-    it('should render time and calendar icon', () => {
-      const component = new TimeAgo({
-        propsData: {
-          duration: 0,
-          finishedTime: '2017-04-26T12:40:23.277Z',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.finished-at')).toBeDefined();
-      expect(component.$el.querySelector('.finished-at i.fa-calendar')).toBeDefined();
-      expect(component.$el.querySelector('.finished-at time')).toBeDefined();
-    });
-  });
-
-  describe('without finishedTime', () => {
-    it('should not render time and calendar icon', () => {
-      const component = new TimeAgo({
-        propsData: {
-          duration: 0,
-          finishedTime: '',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.finished-at')).toBe(null);
-    });
-  });
-});