refactor(sidebar): Refactored Karma spec files to Jest

fix #58830

Added changelog

Updated to use jest functions

Added mock implementation

app/assets/javascripts/vue_shared/directives/tooltip.js

 import $ from 'jquery';
+import '~/commons/bootstrap';
 
 export default {
   bind(el) {

changelogs/unreleased/refactor-58830-migrate-sidebar-spec-to-jest.yml

+---
+title: 'Refactored Karma spec files to Jest'
+merge_request: 27688
+author: Martin Hobert
+type: other

spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js → spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js

 import Vue from 'vue';
 import collapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('collapsedCalendarIcon', () => {
   let vm;
@@ -26,7 +26,7 @@ describe('collapsedCalendarIcon', () => {
   });
 
   it('should emit click event when container is clicked', () => {
-    const click = jasmine.createSpy();
+    const click = jest.fn();
     vm.$on('click', click);
 
     vm.$el.click();

spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js → spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js

 import Vue from 'vue';
 import collapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('collapsedGroupedDatePicker', () => {
   let vm;
@@ -13,7 +13,7 @@ describe('collapsedGroupedDatePicker', () => {
 
   describe('toggleCollapse events', () => {
     beforeEach(done => {
-      spyOn(vm, 'toggleSidebar');
+      jest.spyOn(vm, 'toggleSidebar').mockImplementation(() => {});
       vm.minDate = new Date('07/17/2016');
       Vue.nextTick(done);
     });

spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js → spec/frontend/vue_shared/components/sidebar/date_picker_spec.js

 import Vue from 'vue';
 import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('sidebarDatePicker', () => {
   let vm;
@@ -13,7 +13,7 @@ describe('sidebarDatePicker', () => {
   });
 
   it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => {
-    const toggleCollapse = jasmine.createSpy();
+    const toggleCollapse = jest.fn();
     vm.$on('toggleCollapse', toggleCollapse);
 
     vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click();
@@ -90,7 +90,7 @@ describe('sidebarDatePicker', () => {
     });
 
     it('should emit saveDate when remove button is clicked', () => {
-      const saveDate = jasmine.createSpy();
+      const saveDate = jest.fn();
       vm.$on('saveDate', saveDate);
 
       vm.$el.querySelector('.value-content .btn-blank').click();
@@ -110,7 +110,7 @@ describe('sidebarDatePicker', () => {
     });
 
     it('should emit toggleCollapse when toggle sidebar is clicked', () => {
-      const toggleCollapse = jasmine.createSpy();
+      const toggleCollapse = jest.fn();
       vm.$on('toggleCollapse', toggleCollapse);
 
       vm.$el.querySelector('.title .gutter-toggle').click();

spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js

@@ -3,25 +3,35 @@ import Vue from 'vue';
 import LabelsSelect from '~/labels_select';
 import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
+import { mount } from '@vue/test-utils';
+import {
+  mockConfig,
+  mockLabels,
+} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const createComponent = (config = mockConfig) => {
   const Component = Vue.extend(baseComponent);
 
-  return mountComponent(Component, config);
+  return mount(Component, {
+    propsData: config,
+    sync: false,
+  });
 };
 
 describe('BaseComponent', () => {
+  let wrapper;
   let vm;
 
-  beforeEach(() => {
-    vm = createComponent();
+  beforeEach(done => {
+    wrapper = createComponent();
+
+    ({ vm } = wrapper);
+
+    Vue.nextTick(done);
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('computed', () => {
@@ -31,11 +41,9 @@ describe('BaseComponent', () => {
       });
 
       it('returns correct string when showCreate prop is `false`', () => {
-        const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false });
-        const vmNonEditable = createComponent(mockConfigNonEditable);
+        wrapper.setProps({ showCreate: false });
 
-        expect(vmNonEditable.hiddenInputName).toBe('label_id[]');
-        vmNonEditable.$destroy();
+        expect(vm.hiddenInputName).toBe('label_id[]');
       });
     });
 
@@ -45,11 +53,9 @@ describe('BaseComponent', () => {
       });
 
       it('return `Create group label` when `isProject` prop is false', () => {
-        const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false });
-        const vmGroup = createComponent(mockConfigGroup);
+        wrapper.setProps({ isProject: false });
 
-        expect(vmGroup.createLabelTitle).toBe('Create group label');
-        vmGroup.$destroy();
+        expect(vm.createLabelTitle).toBe('Create group label');
       });
     });
 
@@ -59,11 +65,9 @@ describe('BaseComponent', () => {
       });
 
       it('return `Manage group labels` when `isProject` prop is false', () => {
-        const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false });
-        const vmGroup = createComponent(mockConfigGroup);
+        wrapper.setProps({ isProject: false });
 
-        expect(vmGroup.manageLabelsTitle).toBe('Manage group labels');
-        vmGroup.$destroy();
+        expect(vm.manageLabelsTitle).toBe('Manage group labels');
       });
     });
   });
@@ -71,7 +75,7 @@ describe('BaseComponent', () => {
   describe('methods', () => {
     describe('handleClick', () => {
       it('emits onLabelClick event with label and list of labels as params', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
         vm.handleClick(mockLabels[0]);
 
         expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
@@ -80,7 +84,7 @@ describe('BaseComponent', () => {
 
     describe('handleCollapsedValueClick', () => {
       it('emits toggleCollapse event on component', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
         vm.handleCollapsedValueClick();
 
         expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse');
@@ -89,7 +93,7 @@ describe('BaseComponent', () => {
 
     describe('handleDropdownHidden', () => {
       it('emits onDropdownClose event on component', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
         vm.handleDropdownHidden();
 
         expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose');

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js

@@ -2,9 +2,11 @@ import Vue from 'vue';
 
 import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import {
+  mockConfig,
+  mockLabels,
+} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const componentConfig = Object.assign({}, mockConfig, {
   fieldName: 'label_id[]',

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -2,9 +2,8 @@ import Vue from 'vue';
 
 import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockSuggestedColors } from './mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockSuggestedColors } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const createComponent = headerTitle => {
   const Component = Vue.extend(dropdownCreateLabelComponent);

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js

@@ -2,9 +2,8 @@ import Vue from 'vue';
 
 import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig } from './mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockConfig } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const createComponent = (
   labelsWebUrl = mockConfig.labelsWebUrl,

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 
 import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 const createComponent = () => {
   const Component = Vue.extend(dropdownHeaderComponent);

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 
 import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 const createComponent = () => {
   const Component = Vue.extend(dropdownSearchInputComponent);

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 
 import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 const createComponent = (canEdit = true) => {
   const Component = Vue.extend(dropdownTitleComponent);

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js

@@ -2,9 +2,8 @@ import Vue from 'vue';
 
 import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockLabels } from './mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockLabels } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const createComponent = (labels = mockLabels) => {
   const Component = Vue.extend(dropdownValueCollapsedComponent);
@@ -72,7 +71,7 @@ describe('DropdownValueCollapsedComponent', () => {
   describe('methods', () => {
     describe('handleClick', () => {
       it('emits onValueClick event on component', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
         vm.handleClick();
 
         expect(vm.$emit).toHaveBeenCalledWith('onValueClick');

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js → spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js

@@ -3,9 +3,11 @@ import $ from 'jquery';
 
 import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import {
+  mockConfig,
+  mockLabels,
+} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
 const createComponent = (
   labels = mockLabels,

spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js → spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js

 import Vue from 'vue';
 import toggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('toggleSidebar', () => {
   let vm;
@@ -23,7 +23,7 @@ describe('toggleSidebar', () => {
   });
 
   it('should emit toggle event when button clicked', () => {
-    const toggle = jasmine.createSpy();
+    const toggle = jest.fn();
     vm.$on('toggle', toggle);
     vm.$el.click();