refactor(sidebar): Refactored Karma spec files to Jest
fix #58830 Added changelog Updated to use jest functions Added mock implementation
This commit is contained in:
parent
f04f6909ce
commit
4848c32ea0
15 changed files with 62 additions and 51 deletions
|
@ -1,4 +1,5 @@
|
|||
import $ from 'jquery';
|
||||
import '~/commons/bootstrap';
|
||||
|
||||
export default {
|
||||
bind(el) {
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 'Refactored Karma spec files to Jest'
|
||||
merge_request: 27688
|
||||
author: Martin Hobert
|
||||
type: other
|
|
@ -1,6 +1,6 @@
|
|||
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();
|
|
@ -1,6 +1,6 @@
|
|||
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);
|
||||
});
|
|
@ -1,6 +1,6 @@
|
|||
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();
|
|
@ -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');
|
|
@ -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[]',
|
|
@ -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);
|
|
@ -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,
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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');
|
|
@ -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,
|
|
@ -1,6 +1,6 @@
|
|||
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();
|
||||
|
Loading…
Reference in a new issue