Migrate vue shared specs to Jest + VTU

Migrated a few Karma specs to Jest and Vue Test Utils, which will help
us with the ongoing BootstrapVue upgrade.

spec/javascripts/vue_shared/components/clipboard_button_spec.js → spec/frontend/vue_shared/components/clipboard_button_spec.js

-import Vue from 'vue';
-import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 describe('clipboard button', () => {
-  const Component = Vue.extend(clipboardButton);
-  let vm;
+  let wrapper;
+
+  const createWrapper = propsData => {
+    wrapper = shallowMount(ClipboardButton, {
+      propsData,
+      sync: false,
+      attachToDocument: true,
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('without gfm', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
+      createWrapper({
         text: 'copy me',
         title: 'Copy this value',
         cssClass: 'btn-danger',
@@ -20,30 +29,30 @@ describe('clipboard button', () => {
     });
 
     it('renders a button for clipboard', () => {
-      expect(vm.$el.tagName).toEqual('BUTTON');
-      expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
-      expect(vm.$el).toHaveSpriteIcon('duplicate');
+      expect(wrapper.find(GlButton).exists()).toBe(true);
+      expect(wrapper.attributes('data-clipboard-text')).toBe('copy me');
+      expect(wrapper.find(Icon).props('name')).toBe('duplicate');
     });
 
     it('should have a tooltip with default values', () => {
-      expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value');
+      expect(wrapper.attributes('data-original-title')).toBe('Copy this value');
     });
 
     it('should render provided classname', () => {
-      expect(vm.$el.classList).toContain('btn-danger');
+      expect(wrapper.classes()).toContain('btn-danger');
     });
   });
 
   describe('with gfm', () => {
     it('sets data-clipboard-text with gfm', () => {
-      vm = mountComponent(Component, {
+      createWrapper({
         text: 'copy me',
         gfm: '`path/to/file`',
         title: 'Copy this value',
         cssClass: 'btn-danger',
       });
 
-      expect(vm.$el.getAttribute('data-clipboard-text')).toEqual(
+      expect(wrapper.attributes('data-clipboard-text')).toBe(
         '{"text":"copy me","gfm":"`path/to/file`"}',
       );
     });

spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js

+import _ from 'underscore';
+import { trimText } from 'helpers/text_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { TEST_HOST } from 'spec/test_constants';
+
+describe('User Avatar Link Component', () => {
+  let wrapper;
+
+  const defaultProps = {
+    linkHref: `${TEST_HOST}/myavatarurl.com`,
+    imgSize: 99,
+    imgSrc: `${TEST_HOST}/myavatarurl.com`,
+    imgAlt: 'mydisplayname',
+    imgCssClasses: 'myextraavatarclass',
+    tooltipText: 'tooltip text',
+    tooltipPlacement: 'bottom',
+    username: 'username',
+  };
+
+  const createWrapper = props => {
+    wrapper = shallowMount(UserAvatarLink, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      sync: false,
+      attachToDocument: true,
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should return a defined Vue component', () => {
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+
+  it('should have user-avatar-image registered as child component', () => {
+    expect(wrapper.vm.$options.components.userAvatarImage).toBeDefined();
+  });
+
+  it('user-avatar-link should have user-avatar-image as child component', () => {
+    expect(wrapper.find(UserAvatarImage).exists()).toBe(true);
+  });
+
+  it('should render GlLink as a child element', () => {
+    const link = wrapper.find(GlLink);
+
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe(defaultProps.linkHref);
+  });
+
+  it('should return necessary props as defined', () => {
+    _.each(defaultProps, (val, key) => {
+      expect(wrapper.vm[key]).toBeDefined();
+    });
+  });
+
+  describe('no username', () => {
+    beforeEach(() => {
+      createWrapper({
+        username: '',
+      });
+    });
+
+    it('should only render image tag in link', () => {
+      const childElements = wrapper.vm.$el.childNodes;
+
+      expect(wrapper.find('img')).not.toBe('null');
+
+      // Vue will render the hidden component as <!---->
+      expect(childElements[1].tagName).toBeUndefined();
+    });
+
+    it('should render avatar image tooltip', () => {
+      expect(wrapper.vm.shouldShowUsername).toBe(false);
+      expect(wrapper.vm.avatarTooltipText).toEqual(defaultProps.tooltipText);
+    });
+  });
+
+  describe('username', () => {
+    it('should not render avatar image tooltip', () => {
+      expect(wrapper.find('.js-user-avatar-image-toolip').exists()).toBe(false);
+    });
+
+    it('should render username prop in <span>', () => {
+      expect(trimText(wrapper.find('.js-user-avatar-link-username').text())).toEqual(
+        defaultProps.username,
+      );
+    });
+
+    it('should render text tooltip for <span>', () => {
+      expect(
+        wrapper.find('.js-user-avatar-link-username').attributes('data-original-title'),
+      ).toEqual(defaultProps.tooltipText);
+    });
+
+    it('should render text tooltip placement for <span>', () => {
+      expect(wrapper.find('.js-user-avatar-link-username').attributes('tooltip-placement')).toBe(
+        defaultProps.tooltipPlacement,
+      );
+    });
+  });
+});

spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js

-import _ from 'underscore';
-import Vue from 'vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import { TEST_HOST } from 'spec/test_constants';
-
-describe('User Avatar Link Component', function() {
-  beforeEach(function() {
-    this.propsData = {
-      linkHref: `${TEST_HOST}/myavatarurl.com`,
-      imgSize: 99,
-      imgSrc: `${TEST_HOST}/myavatarurl.com`,
-      imgAlt: 'mydisplayname',
-      imgCssClasses: 'myextraavatarclass',
-      tooltipText: 'tooltip text',
-      tooltipPlacement: 'bottom',
-      username: 'username',
-    };
-
-    const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
-
-    this.userAvatarLink = new UserAvatarLinkComponent({
-      propsData: this.propsData,
-    }).$mount();
-
-    [this.userAvatarImage] = this.userAvatarLink.$children;
-  });
-
-  it('should return a defined Vue component', function() {
-    expect(this.userAvatarLink).toBeDefined();
-  });
-
-  it('should have user-avatar-image registered as child component', function() {
-    expect(this.userAvatarLink.$options.components.userAvatarImage).toBeDefined();
-  });
-
-  it('user-avatar-link should have user-avatar-image as child component', function() {
-    expect(this.userAvatarImage).toBeDefined();
-  });
-
-  it('should render <a> as a child element', function() {
-    const link = this.userAvatarLink.$el;
-
-    expect(link.tagName).toBe('A');
-    expect(link.href).toBe(this.propsData.linkHref);
-  });
-
-  it('renders imgSrc with imgSize as image', function() {
-    const { imgSrc, imgSize } = this.propsData;
-    const image = this.userAvatarLink.$el.querySelector('img');
-
-    expect(image).not.toBeNull();
-    expect(image.src).toBe(`${imgSrc}?width=${imgSize}`);
-  });
-
-  it('should return necessary props as defined', function() {
-    _.each(this.propsData, (val, key) => {
-      expect(this.userAvatarLink[key]).toBeDefined();
-    });
-  });
-
-  describe('no username', function() {
-    beforeEach(function(done) {
-      this.userAvatarLink.username = '';
-
-      Vue.nextTick(done);
-    });
-
-    it('should only render image tag in link', function() {
-      const childElements = this.userAvatarLink.$el.childNodes;
-
-      expect(this.userAvatarLink.$el.querySelector('img')).not.toBe('null');
-
-      // Vue will render the hidden component as <!---->
-      expect(childElements[1].tagName).toBeUndefined();
-    });
-
-    it('should render avatar image tooltip', function() {
-      expect(this.userAvatarLink.shouldShowUsername).toBe(false);
-      expect(this.userAvatarLink.avatarTooltipText).toEqual(this.propsData.tooltipText);
-    });
-  });
-
-  describe('username', function() {
-    it('should not render avatar image tooltip', function() {
-      expect(this.userAvatarLink.$el.querySelector('.js-user-avatar-image-toolip')).toBeNull();
-    });
-
-    it('should render username prop in <span>', function() {
-      expect(
-        this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').innerText.trim(),
-      ).toEqual(this.propsData.username);
-    });
-
-    it('should render text tooltip for <span>', function() {
-      expect(
-        this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').dataset
-          .originalTitle,
-      ).toEqual(this.propsData.tooltipText);
-    });
-
-    it('should render text tooltip placement for <span>', function() {
-      expect(
-        this.userAvatarLink.$el
-          .querySelector('.js-user-avatar-link-username')
-          .getAttribute('tooltip-placement'),
-      ).toEqual(this.propsData.tooltipPlacement);
-    });
-  });
-});