diff options
-rw-r--r-- | app/assets/javascripts/vue_shared/directives/tooltip.js | 1 | ||||
-rw-r--r-- | changelogs/unreleased/refactor-58830-migrate-sidebar-spec-to-jest.yml | 5 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js) | 4 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js) | 4 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/date_picker_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js) | 8 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js) | 48 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js) | 8 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js) | 5 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js) | 5 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js) | 2 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js) | 2 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js) | 2 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js) | 7 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js) | 8 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js (renamed from spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js) | 4 |
15 files changed, 62 insertions, 51 deletions
diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js index 549d27e96d9..2d1f7a1cfd0 100644 --- a/app/assets/javascripts/vue_shared/directives/tooltip.js +++ b/app/assets/javascripts/vue_shared/directives/tooltip.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import '~/commons/bootstrap'; export default { bind(el) { diff --git a/changelogs/unreleased/refactor-58830-migrate-sidebar-spec-to-jest.yml b/changelogs/unreleased/refactor-58830-migrate-sidebar-spec-to-jest.yml new file mode 100644 index 00000000000..20a4be8c9ad --- /dev/null +++ b/changelogs/unreleased/refactor-58830-migrate-sidebar-spec-to-jest.yml @@ -0,0 +1,5 @@ +--- +title: 'Refactored Karma spec files to Jest' +merge_request: 27688 +author: Martin Hobert +type: other diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js b/spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js index 6bff1521695..691ebe43d6b 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js @@ -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(); diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js index c507a97d37e..062ebfa01c9 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js @@ -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); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js index 805ba7b9947..5e2bca6efc9 100644 --- a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js @@ -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(); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js index c44b04009ca..6aee616c324 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js +++ b/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'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js index 0689fc1cf1f..bb33dc6ea0f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js +++ b/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[]', diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js index b8f32f96332..1c25d42682c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ b/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); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js index 3711e9dac8c..989901a0012 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ b/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, diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js index 115e21e4f9f..c36a82e1a35 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js +++ b/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); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js index c30e619e76b..2fffb2e495e 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js +++ b/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); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js index 6c84d2e167c..1616e657c81 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js +++ b/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); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js index 4d3de5e474d..517f2c01c46 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/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'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js index 35a9c300953..ec143fec5d9 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ b/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, diff --git a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js b/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js index c911a129173..5cf25ca6f81 100644 --- a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js @@ -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(); |