Migrate vue_shared and vuex_shared specs to Jest

Migrate some specs in vue_shared and all specs in vuex_shared to Jest.

spec/javascripts/vue_shared/components/file_finder/index_spec.js → spec/frontend/vue_shared/components/file_finder/index_spec.js

 import Vue from 'vue';
 import Mousetrap from 'mousetrap';
 import { file } from 'jest/ide/helpers';
-import timeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import FindFileComponent from '~/vue_shared/components/file_finder/index.vue';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
@@ -48,7 +48,7 @@ describe('File finder item spec', () => {
         ],
       });
 
-      setTimeout(done);
+      setImmediate(done);
     });
 
     it('renders list of blobs', () => {
@@ -60,7 +60,7 @@ describe('File finder item spec', () => {
     it('filters entries', done => {
       vm.searchText = 'index';
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(vm.$el.textContent).toContain('index.js');
         expect(vm.$el.textContent).not.toContain('component.js');
 
@@ -71,7 +71,7 @@ describe('File finder item spec', () => {
     it('shows clear button when searchText is not empty', done => {
       vm.searchText = 'index';
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(vm.$el.querySelector('.dropdown-input').classList).toContain('has-value');
         expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden');
 
@@ -82,11 +82,11 @@ describe('File finder item spec', () => {
     it('clear button resets searchText', done => {
       vm.searchText = 'index';
 
-      timeoutPromise()
+      waitForPromises()
         .then(() => {
           vm.$el.querySelector('.dropdown-input-clear').click();
         })
-        .then(timeoutPromise)
+        .then(waitForPromises)
         .then(() => {
           expect(vm.searchText).toBe('');
         })
@@ -95,14 +95,14 @@ describe('File finder item spec', () => {
     });
 
     it('clear button focues search input', done => {
-      spyOn(vm.$refs.searchInput, 'focus');
+      jest.spyOn(vm.$refs.searchInput, 'focus').mockImplementation(() => {});
       vm.searchText = 'index';
 
-      timeoutPromise()
+      waitForPromises()
         .then(() => {
           vm.$el.querySelector('.dropdown-input-clear').click();
         })
-        .then(timeoutPromise)
+        .then(waitForPromises)
         .then(() => {
           expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
         })
@@ -114,7 +114,7 @@ describe('File finder item spec', () => {
       it('returns 1 when no filtered entries exist', done => {
         vm.searchText = 'testing 123';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.listShowCount).toBe(1);
 
           done();
@@ -134,7 +134,7 @@ describe('File finder item spec', () => {
       it('returns 33 when entries dont exist', done => {
         vm.searchText = 'testing 123';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.listHeight).toBe(33);
 
           done();
@@ -146,7 +146,7 @@ describe('File finder item spec', () => {
       it('returns length of filtered blobs', done => {
         vm.searchText = 'index';
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.filteredBlobsLength).toBe(1);
 
           done();
@@ -160,7 +160,7 @@ describe('File finder item spec', () => {
           vm.focusedIndex = 1;
           vm.searchText = 'test';
 
-          setTimeout(() => {
+          setImmediate(() => {
             expect(vm.focusedIndex).toBe(0);
 
             done();
@@ -173,11 +173,11 @@ describe('File finder item spec', () => {
           vm.searchText = 'test';
           vm.visible = true;
 
-          timeoutPromise()
+          waitForPromises()
             .then(() => {
               vm.visible = false;
             })
-            .then(timeoutPromise)
+            .then(waitForPromises)
             .then(() => {
               expect(vm.searchText).toBe('');
             })
@@ -189,7 +189,7 @@ describe('File finder item spec', () => {
 
     describe('openFile', () => {
       beforeEach(() => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
       });
 
       it('closes file finder', () => {
@@ -210,11 +210,11 @@ describe('File finder item spec', () => {
         const event = new CustomEvent('keyup');
         event.keyCode = ENTER_KEY_CODE;
 
-        spyOn(vm, 'openFile');
+        jest.spyOn(vm, 'openFile').mockImplementation(() => {});
 
         vm.$refs.searchInput.dispatchEvent(event);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.openFile).toHaveBeenCalledWith(vm.files[0]);
 
           done();
@@ -225,11 +225,11 @@ describe('File finder item spec', () => {
         const event = new CustomEvent('keyup');
         event.keyCode = ESC_KEY_CODE;
 
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
         vm.$refs.searchInput.dispatchEvent(event);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.$emit).toHaveBeenCalledWith('toggle', false);
 
           done();
@@ -303,7 +303,7 @@ describe('File finder item spec', () => {
     beforeEach(done => {
       createComponent();
 
-      spyOn(vm, 'toggle');
+      jest.spyOn(vm, 'toggle').mockImplementation(() => {});
 
       vm.$nextTick(done);
     });

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

 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import Icon from '~/vue_shared/components/icon.vue';
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
 
-describe('Sprite Icon Component', function() {
-  describe('Initialization', function() {
+jest.mock('@gitlab/svgs/dist/icons.svg', () => 'testing');
+
+describe('Sprite Icon Component', () => {
+  describe('Initialization', () => {
     let icon;
 
-    beforeEach(function() {
+    beforeEach(() => {
       const IconComponent = Vue.extend(Icon);
 
       icon = mountComponent(IconComponent, {
@@ -20,20 +23,20 @@ describe('Sprite Icon Component', function() {
       icon.$destroy();
     });
 
-    it('should return a defined Vue component', function() {
+    it('should return a defined Vue component', () => {
       expect(icon).toBeDefined();
     });
 
-    it('should have <svg> as a child element', function() {
+    it('should have <svg> as a child element', () => {
       expect(icon.$el.tagName).toBe('svg');
     });
 
-    it('should have <use> as a child element with the correct href', function() {
+    it('should have <use> as a child element with the correct href', () => {
       expect(icon.$el.firstChild.tagName).toBe('use');
-      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#commit`);
+      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${iconsPath}#commit`);
     });
 
-    it('should properly compute iconSizeClass', function() {
+    it('should properly compute iconSizeClass', () => {
       expect(icon.iconSizeClass).toBe('s32');
     });
 
@@ -43,7 +46,7 @@ describe('Sprite Icon Component', function() {
       expect(icon.$options.props.size.validator(9001)).toBeFalsy();
     });
 
-    it('should properly render img css', function() {
+    it('should properly render img css', () => {
       const { classList } = icon.$el;
       const containsSizeClass = classList.contains('s32');
 
@@ -51,16 +54,18 @@ describe('Sprite Icon Component', function() {
     });
 
     it('`name` validator should return false for non existing icons', () => {
+      jest.spyOn(console, 'warn').mockImplementation();
+
       expect(Icon.props.name.validator('non_existing_icon_sprite')).toBe(false);
     });
 
-    it('`name` validator should return false for existing icons', () => {
+    it('`name` validator should return true for existing icons', () => {
       expect(Icon.props.name.validator('commit')).toBe(true);
     });
   });
 
   it('should call registered listeners when they are triggered', () => {
-    const clickHandler = jasmine.createSpy('clickHandler');
+    const clickHandler = jest.fn();
     const wrapper = mount(Icon, {
       propsData: { name: 'commit' },
       listeners: { click: clickHandler },

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

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import panelResizer from '~/vue_shared/components/panel_resizer.vue';
 
 describe('Panel Resizer component', () => {
@@ -69,12 +69,12 @@ describe('Panel Resizer component', () => {
       side: 'left',
     });
 
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     triggerEvent('mousedown', vm.$el);
     triggerEvent('mousemove', document);
     triggerEvent('mouseup', document);
 
-    expect(vm.$emit.calls.allArgs()).toEqual([
+    expect(vm.$emit.mock.calls).toEqual([
       ['resize-start', 100],
       ['update:size', 100],
       ['resize-end', 100],

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

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue';
 
 describe('Toggle Button', () => {
@@ -28,7 +28,7 @@ describe('Toggle Button', () => {
       </smart-virtual-scroll-list>`,
     });
 
-    return mountComponent(Component);
+    return mount(Component).vm;
   };
 
   afterEach(() => {

spec/javascripts/vue_shared/directives/autofocusonshow_spec.js → spec/frontend/vue_shared/directives/autofocusonshow_spec.js

@@ -9,13 +9,21 @@ describe('AutofocusOnShow directive', () => {
   describe('with input invisible on component render', () => {
     let el;
 
-    beforeAll(() => {
+    beforeEach(() => {
       setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>');
       el = document.querySelector('#inputel');
+
+      window.IntersectionObserver = class {
+        observe = jest.fn();
+      };
+    });
+
+    afterEach(() => {
+      delete window.IntersectionObserver;
     });
 
     it('should bind IntersectionObserver on input element', () => {
-      spyOn(el, 'focus');
+      jest.spyOn(el, 'focus').mockImplementation(() => {});
 
       autofocusonshow.inserted(el);
 
@@ -27,7 +35,7 @@ describe('AutofocusOnShow directive', () => {
       el.visibilityObserver = {
         disconnect: () => {},
       };
-      spyOn(el.visibilityObserver, 'disconnect');
+      jest.spyOn(el.visibilityObserver, 'disconnect').mockImplementation(() => {});
 
       autofocusonshow.unbind(el);
 

spec/javascripts/vuex_shared/modules/modal/actions_spec.js → spec/frontend/vuex_shared/modules/modal/actions_spec.js

-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import * as types from '~/vuex_shared/modules/modal/mutation_types';
 import * as actions from '~/vuex_shared/modules/modal/actions';
 

spec/javascripts/vue_shared/components/issue/related_issuable_mock_data.js

-export * from '../../../../frontend/vue_shared/components/issue/related_issuable_mock_data';