Commit 4848c32e authored by Martin Hobert's avatar Martin Hobert

refactor(sidebar): Refactored Karma spec files to Jest

fix #58830

Added changelog

Updated to use jest functions

Added mock implementation
parent f04f6909
import $ from 'jquery'; import $ from 'jquery';
import '~/commons/bootstrap';
export default { export default {
bind(el) { bind(el) {
......
---
title: 'Refactored Karma spec files to Jest'
merge_request: 27688
author: Martin Hobert
type: other
import Vue from 'vue'; import Vue from 'vue';
import collapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.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', () => { describe('collapsedCalendarIcon', () => {
let vm; let vm;
...@@ -26,7 +26,7 @@ describe('collapsedCalendarIcon', () => { ...@@ -26,7 +26,7 @@ describe('collapsedCalendarIcon', () => {
}); });
it('should emit click event when container is clicked', () => { it('should emit click event when container is clicked', () => {
const click = jasmine.createSpy(); const click = jest.fn();
vm.$on('click', click); vm.$on('click', click);
vm.$el.click(); vm.$el.click();
......
import Vue from 'vue'; import Vue from 'vue';
import collapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.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', () => { describe('collapsedGroupedDatePicker', () => {
let vm; let vm;
...@@ -13,7 +13,7 @@ describe('collapsedGroupedDatePicker', () => { ...@@ -13,7 +13,7 @@ describe('collapsedGroupedDatePicker', () => {
describe('toggleCollapse events', () => { describe('toggleCollapse events', () => {
beforeEach(done => { beforeEach(done => {
spyOn(vm, 'toggleSidebar'); jest.spyOn(vm, 'toggleSidebar').mockImplementation(() => {});
vm.minDate = new Date('07/17/2016'); vm.minDate = new Date('07/17/2016');
Vue.nextTick(done); Vue.nextTick(done);
}); });
......
import Vue from 'vue'; import Vue from 'vue';
import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.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', () => { describe('sidebarDatePicker', () => {
let vm; let vm;
...@@ -13,7 +13,7 @@ describe('sidebarDatePicker', () => { ...@@ -13,7 +13,7 @@ describe('sidebarDatePicker', () => {
}); });
it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => { it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => {
const toggleCollapse = jasmine.createSpy(); const toggleCollapse = jest.fn();
vm.$on('toggleCollapse', toggleCollapse); vm.$on('toggleCollapse', toggleCollapse);
vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click(); vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click();
...@@ -90,7 +90,7 @@ describe('sidebarDatePicker', () => { ...@@ -90,7 +90,7 @@ describe('sidebarDatePicker', () => {
}); });
it('should emit saveDate when remove button is clicked', () => { it('should emit saveDate when remove button is clicked', () => {
const saveDate = jasmine.createSpy(); const saveDate = jest.fn();
vm.$on('saveDate', saveDate); vm.$on('saveDate', saveDate);
vm.$el.querySelector('.value-content .btn-blank').click(); vm.$el.querySelector('.value-content .btn-blank').click();
...@@ -110,7 +110,7 @@ describe('sidebarDatePicker', () => { ...@@ -110,7 +110,7 @@ describe('sidebarDatePicker', () => {
}); });
it('should emit toggleCollapse when toggle sidebar is clicked', () => { it('should emit toggleCollapse when toggle sidebar is clicked', () => {
const toggleCollapse = jasmine.createSpy(); const toggleCollapse = jest.fn();
vm.$on('toggleCollapse', toggleCollapse); vm.$on('toggleCollapse', toggleCollapse);
vm.$el.querySelector('.title .gutter-toggle').click(); vm.$el.querySelector('.title .gutter-toggle').click();
......
...@@ -3,25 +3,35 @@ import Vue from 'vue'; ...@@ -3,25 +3,35 @@ import Vue from 'vue';
import LabelsSelect from '~/labels_select'; import LabelsSelect from '~/labels_select';
import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue'; import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mount } from '@vue/test-utils';
import {
import { mockConfig, mockLabels } from './mock_data'; mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
const createComponent = (config = mockConfig) => { const createComponent = (config = mockConfig) => {
const Component = Vue.extend(baseComponent); const Component = Vue.extend(baseComponent);
return mountComponent(Component, config); return mount(Component, {
propsData: config,
sync: false,
});
}; };
describe('BaseComponent', () => { describe('BaseComponent', () => {
let wrapper;
let vm; let vm;
beforeEach(() => { beforeEach(done => {
vm = createComponent(); wrapper = createComponent();
({ vm } = wrapper);
Vue.nextTick(done);
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
describe('computed', () => { describe('computed', () => {
...@@ -31,11 +41,9 @@ describe('BaseComponent', () => { ...@@ -31,11 +41,9 @@ describe('BaseComponent', () => {
}); });
it('returns correct string when showCreate prop is `false`', () => { it('returns correct string when showCreate prop is `false`', () => {
const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false }); wrapper.setProps({ showCreate: false });
const vmNonEditable = createComponent(mockConfigNonEditable);
expect(vmNonEditable.hiddenInputName).toBe('label_id[]'); expect(vm.hiddenInputName).toBe('label_id[]');
vmNonEditable.$destroy();
}); });
}); });
...@@ -45,11 +53,9 @@ describe('BaseComponent', () => { ...@@ -45,11 +53,9 @@ describe('BaseComponent', () => {
}); });
it('return `Create group label` when `isProject` prop is false', () => { it('return `Create group label` when `isProject` prop is false', () => {
const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); wrapper.setProps({ isProject: false });
const vmGroup = createComponent(mockConfigGroup);
expect(vmGroup.createLabelTitle).toBe('Create group label'); expect(vm.createLabelTitle).toBe('Create group label');
vmGroup.$destroy();
}); });
}); });
...@@ -59,11 +65,9 @@ describe('BaseComponent', () => { ...@@ -59,11 +65,9 @@ describe('BaseComponent', () => {
}); });
it('return `Manage group labels` when `isProject` prop is false', () => { it('return `Manage group labels` when `isProject` prop is false', () => {
const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); wrapper.setProps({ isProject: false });
const vmGroup = createComponent(mockConfigGroup);
expect(vmGroup.manageLabelsTitle).toBe('Manage group labels'); expect(vm.manageLabelsTitle).toBe('Manage group labels');
vmGroup.$destroy();
}); });
}); });
}); });
...@@ -71,7 +75,7 @@ describe('BaseComponent', () => { ...@@ -71,7 +75,7 @@ describe('BaseComponent', () => {
describe('methods', () => { describe('methods', () => {
describe('handleClick', () => { describe('handleClick', () => {
it('emits onLabelClick event with label and list of labels as params', () => { it('emits onLabelClick event with label and list of labels as params', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.handleClick(mockLabels[0]); vm.handleClick(mockLabels[0]);
expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
...@@ -80,7 +84,7 @@ describe('BaseComponent', () => { ...@@ -80,7 +84,7 @@ describe('BaseComponent', () => {
describe('handleCollapsedValueClick', () => { describe('handleCollapsedValueClick', () => {
it('emits toggleCollapse event on component', () => { it('emits toggleCollapse event on component', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.handleCollapsedValueClick(); vm.handleCollapsedValueClick();
expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse');
...@@ -89,7 +93,7 @@ describe('BaseComponent', () => { ...@@ -89,7 +93,7 @@ describe('BaseComponent', () => {
describe('handleDropdownHidden', () => { describe('handleDropdownHidden', () => {
it('emits onDropdownClose event on component', () => { it('emits onDropdownClose event on component', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.handleDropdownHidden(); vm.handleDropdownHidden();
expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose');
......
...@@ -2,9 +2,11 @@ import Vue from 'vue'; ...@@ -2,9 +2,11 @@ import Vue from 'vue';
import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue'; import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import {
import { mockConfig, mockLabels } from './mock_data'; mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
const componentConfig = Object.assign({}, mockConfig, { const componentConfig = Object.assign({}, mockConfig, {
fieldName: 'label_id[]', fieldName: 'label_id[]',
......
...@@ -2,9 +2,8 @@ import Vue from 'vue'; ...@@ -2,9 +2,8 @@ import Vue from 'vue';
import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue'; import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockSuggestedColors } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockSuggestedColors } from './mock_data';
const createComponent = headerTitle => { const createComponent = headerTitle => {
const Component = Vue.extend(dropdownCreateLabelComponent); const Component = Vue.extend(dropdownCreateLabelComponent);
......
...@@ -2,9 +2,8 @@ import Vue from 'vue'; ...@@ -2,9 +2,8 @@ import Vue from 'vue';
import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue'; import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockConfig } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockConfig } from './mock_data';
const createComponent = ( const createComponent = (
labelsWebUrl = mockConfig.labelsWebUrl, labelsWebUrl = mockConfig.labelsWebUrl,
......
...@@ -2,7 +2,7 @@ import Vue from 'vue'; ...@@ -2,7 +2,7 @@ import Vue from 'vue';
import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.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 createComponent = () => {
const Component = Vue.extend(dropdownHeaderComponent); const Component = Vue.extend(dropdownHeaderComponent);
......
...@@ -2,7 +2,7 @@ import Vue from 'vue'; ...@@ -2,7 +2,7 @@ import Vue from 'vue';
import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.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 createComponent = () => {
const Component = Vue.extend(dropdownSearchInputComponent); const Component = Vue.extend(dropdownSearchInputComponent);
......
...@@ -2,7 +2,7 @@ import Vue from 'vue'; ...@@ -2,7 +2,7 @@ import Vue from 'vue';
import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.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 createComponent = (canEdit = true) => {
const Component = Vue.extend(dropdownTitleComponent); const Component = Vue.extend(dropdownTitleComponent);
......
...@@ -2,9 +2,8 @@ import Vue from 'vue'; ...@@ -2,9 +2,8 @@ import Vue from 'vue';
import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockLabels } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockLabels } from './mock_data';
const createComponent = (labels = mockLabels) => { const createComponent = (labels = mockLabels) => {
const Component = Vue.extend(dropdownValueCollapsedComponent); const Component = Vue.extend(dropdownValueCollapsedComponent);
...@@ -72,7 +71,7 @@ describe('DropdownValueCollapsedComponent', () => { ...@@ -72,7 +71,7 @@ describe('DropdownValueCollapsedComponent', () => {
describe('methods', () => { describe('methods', () => {
describe('handleClick', () => { describe('handleClick', () => {
it('emits onValueClick event on component', () => { it('emits onValueClick event on component', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.handleClick(); vm.handleClick();
expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); expect(vm.$emit).toHaveBeenCalledWith('onValueClick');
......
...@@ -3,9 +3,11 @@ import $ from 'jquery'; ...@@ -3,9 +3,11 @@ import $ from 'jquery';
import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import {
import { mockConfig, mockLabels } from './mock_data'; mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
const createComponent = ( const createComponent = (
labels = mockLabels, labels = mockLabels,
......
import Vue from 'vue'; import Vue from 'vue';
import toggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.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', () => { describe('toggleSidebar', () => {
let vm; let vm;
...@@ -23,7 +23,7 @@ describe('toggleSidebar', () => { ...@@ -23,7 +23,7 @@ describe('toggleSidebar', () => {
}); });
it('should emit toggle event when button clicked', () => { it('should emit toggle event when button clicked', () => {
const toggle = jasmine.createSpy(); const toggle = jest.fn();
vm.$on('toggle', toggle); vm.$on('toggle', toggle);
vm.$el.click(); vm.$el.click();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment