Migrate loading button spec to jest

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

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import loadingButton from '~/vue_shared/components/loading_button.vue';
+import { shallowMount } from '@vue/test-utils';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 const LABEL = 'Hello';
 
-describe('LoadingButton', function() {
-  let vm;
-  let LoadingButton;
+describe('LoadingButton', () => {
+  let wrapper;
 
-  beforeEach(() => {
-    LoadingButton = Vue.extend(loadingButton);
+  afterEach(() => {
+    wrapper.destroy();
   });
 
-  afterEach(() => {
-    vm.$destroy();
+  const buildWrapper = (propsData = {}) => {
+    wrapper = shallowMount(LoadingButton, {
+      propsData,
     });
+  };
+  const findButtonLabel = () => wrapper.find('.js-loading-button-label');
+  const findButtonIcon = () => wrapper.find('.js-loading-button-icon');
 
   describe('loading spinner', () => {
     it('shown when loading', () => {
-      vm = mountComponent(LoadingButton, {
-        loading: true,
-      });
+      buildWrapper({ loading: true });
 
-      expect(vm.$el.querySelector('.js-loading-button-icon')).toBeDefined();
+      expect(findButtonIcon().exists()).toBe(true);
     });
   });
 
   describe('disabled state', () => {
     it('disabled when loading', () => {
-      vm = mountComponent(LoadingButton, {
-        loading: true,
-      });
-
-      expect(vm.$el.disabled).toEqual(true);
+      buildWrapper({ loading: true });
+      expect(wrapper.attributes('disabled')).toBe('disabled');
     });
 
     it('not disabled when normal', () => {
-      vm = mountComponent(LoadingButton, {
-        loading: false,
-      });
+      buildWrapper({ loading: false });
 
-      expect(vm.$el.disabled).toEqual(false);
+      expect(wrapper.attributes('disabled')).toBe(undefined);
     });
   });
 
   describe('label', () => {
     it('shown when normal', () => {
-      vm = mountComponent(LoadingButton, {
-        loading: false,
-        label: LABEL,
-      });
-      const label = vm.$el.querySelector('.js-loading-button-label');
-
-      expect(label.textContent.trim()).toEqual(LABEL);
+      buildWrapper({ loading: false, label: LABEL });
+      expect(findButtonLabel().text()).toBe(LABEL);
     });
 
     it('shown when loading', () => {
-      vm = mountComponent(LoadingButton, {
-        loading: true,
-        label: LABEL,
-      });
-      const label = vm.$el.querySelector('.js-loading-button-label');
-
-      expect(label.textContent.trim()).toEqual(LABEL);
+      buildWrapper({ loading: false, label: LABEL });
+      expect(findButtonLabel().text()).toBe(LABEL);
     });
   });
 
   describe('container class', () => {
     it('should default to btn btn-align-content', () => {
-      vm = mountComponent(LoadingButton, {});
+      buildWrapper();
 
-      expect(vm.$el.classList.contains('btn')).toEqual(true);
-      expect(vm.$el.classList.contains('btn-align-content')).toEqual(true);
+      expect(wrapper.classes()).toContain('btn');
+      expect(wrapper.classes()).toContain('btn-align-content');
     });
 
     it('should be configurable through props', () => {
-      vm = mountComponent(LoadingButton, {
-        containerClass: 'test-class',
+      const containerClass = 'test-class';
+
+      buildWrapper({
+        containerClass,
       });
 
-      expect(vm.$el.classList.contains('btn')).toEqual(false);
-      expect(vm.$el.classList.contains('btn-align-content')).toEqual(false);
-      expect(vm.$el.classList.contains('test-class')).toEqual(true);
+      expect(wrapper.classes()).not.toContain('btn');
+      expect(wrapper.classes()).not.toContain('btn-align-content');
+      expect(wrapper.classes()).toContain(containerClass);
     });
   });
 
   describe('click callback prop', () => {
     it('calls given callback when normal', () => {
-      vm = mountComponent(LoadingButton, {
+      buildWrapper({
         loading: false,
       });
-      spyOn(vm, '$emit');
 
-      vm.$el.click();
+      wrapper.trigger('click');
 
-      expect(vm.$emit).toHaveBeenCalledWith('click', jasmine.any(Object));
+      expect(wrapper.emitted('click')).toBeTruthy();
     });
 
     it('does not call given callback when disabled because of loading', () => {
-      vm = mountComponent(LoadingButton, {
+      buildWrapper({
         loading: true,
       });
-      spyOn(vm, '$emit');
 
-      vm.$el.click();
+      wrapper.trigger('click');
 
-      expect(vm.$emit).not.toHaveBeenCalled();
+      expect(wrapper.emitted('click')).toBeFalsy();
     });
   });
 });