Merge branch '121617-frontend-move-epic-tests-to-jest' into 'master'

Move epic tests to jest

See merge request gitlab-org/gitlab!24268

ee/spec/javascripts/epic/components/epic_app_spec.js → ee/spec/frontend/epic/components/epic_app_spec.js

@@ -4,8 +4,8 @@ import MockAdapter from 'axios-mock-adapter';
 import EpicApp from 'ee/epic/components/epic_app.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import issueShowData from 'spec/issue_show/mock_data';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { initialRequest } from 'jest/issue_show/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { mockEpicMeta, mockEpicData } from '../mock_data';
@@ -14,9 +14,9 @@ describe('EpicAppComponent', () => {
   let vm;
   let mock;
 
-  beforeEach(done => {
+  beforeEach(() => {
     mock = new MockAdapter(axios);
-    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, issueShowData.initialRequest);
+    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, initialRequest);
 
     const Component = Vue.extend(EpicApp);
     const store = createStore();
@@ -26,8 +26,6 @@ describe('EpicAppComponent', () => {
     vm = mountComponentWithStore(Component, {
       store,
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/components/epic_body_spec.js → ee/spec/frontend/epic/components/epic_body_spec.js

@@ -4,8 +4,8 @@ import MockAdapter from 'axios-mock-adapter';
 import EpicBody from 'ee/epic/components/epic_body.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import issueShowData from 'spec/issue_show/mock_data';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { initialRequest } from 'jest/issue_show/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { mockEpicMeta, mockEpicData } from '../mock_data';
@@ -14,9 +14,9 @@ describe('EpicBodyComponent', () => {
   let vm;
   let mock;
 
-  beforeEach(done => {
+  beforeEach(() => {
     mock = new MockAdapter(axios);
-    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, issueShowData.initialRequest);
+    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, initialRequest);
 
     const Component = Vue.extend(EpicBody);
     const store = createStore();
@@ -26,8 +26,6 @@ describe('EpicBodyComponent', () => {
     vm = mountComponentWithStore(Component, {
       store,
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/components/epic_create_spec.js → ee/spec/frontend/epic/components/epic_create_spec.js

@@ -3,14 +3,14 @@ import Vue from 'vue';
 import EpicCreate from 'ee/epic/components/epic_create.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta } from '../mock_data';
 
 describe('EpicCreateComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(EpicCreate);
 
     store = createStore();
@@ -19,8 +19,6 @@ describe('EpicCreateComponent', () => {
     vm = mountComponentWithStore(Component, {
       store,
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {
@@ -59,7 +57,7 @@ describe('EpicCreateComponent', () => {
     describe('epicTitle', () => {
       describe('set', () => {
         it('calls `setEpicCreateTitle` with param `value`', () => {
-          spyOn(vm, 'setEpicCreateTitle');
+          jest.spyOn(vm, 'setEpicCreateTitle');
 
           const newEpicTitle = 'foobar';
 

ee/spec/javascripts/epic/components/epic_header_spec.js → ee/spec/frontend/epic/components/epic_header_spec.js

@@ -4,14 +4,14 @@ import EpicHeader from 'ee/epic/components/epic_header.vue';
 import createStore from 'ee/epic/store';
 import { statusType } from 'ee/epic/constants';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData } from '../mock_data';
 
 describe('EpicHeaderComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(EpicHeader);
 
     store = createStore();
@@ -21,8 +21,6 @@ describe('EpicHeaderComponent', () => {
     vm = mountComponentWithStore(Component, {
       store,
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/components/epic_sidebar_spec.js → ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -6,7 +6,7 @@ import createStore from 'ee/epic/store';
 import epicUtils from 'ee/epic/utils/epic_utils';
 import { dateTypes } from 'ee/epic/constants';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData, mockAncestors } from '../mock_data';
 
 describe('EpicSidebarComponent', () => {
@@ -14,7 +14,7 @@ describe('EpicSidebarComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(EpicSidebar);
     store = createStore();
     store.dispatch('setEpicMeta', mockEpicMeta);
@@ -24,8 +24,6 @@ describe('EpicSidebarComponent', () => {
     vm = mountComponentWithStore(Component, {
       store,
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {
@@ -35,7 +33,7 @@ describe('EpicSidebarComponent', () => {
   describe('methods', () => {
     describe('getDateFromMilestonesTooltip', () => {
       it('calls `epicUtils.getDateFromMilestonesTooltip` with `dateType` param', () => {
-        spyOn(epicUtils, 'getDateFromMilestonesTooltip');
+        jest.spyOn(epicUtils, 'getDateFromMilestonesTooltip');
 
         vm.getDateFromMilestonesTooltip(dateTypes.start);
 
@@ -49,7 +47,7 @@ describe('EpicSidebarComponent', () => {
 
     describe('changeStartDateType', () => {
       it('calls `toggleStartDateType` on component with `dateTypeIsFixed` param', () => {
-        spyOn(vm, 'toggleStartDateType');
+        jest.spyOn(vm, 'toggleStartDateType');
 
         vm.changeStartDateType(true, true);
 
@@ -61,7 +59,7 @@ describe('EpicSidebarComponent', () => {
       });
 
       it('calls `saveDate` on component when `typeChangeOnEdit` param false', () => {
-        spyOn(vm, 'saveDate');
+        jest.spyOn(vm, 'saveDate');
 
         vm.changeStartDateType(true, false);
 
@@ -77,7 +75,7 @@ describe('EpicSidebarComponent', () => {
 
     describe('saveStartDate', () => {
       it('calls `saveDate` on component with `date` param set to `newDate`', () => {
-        spyOn(vm, 'saveDate');
+        jest.spyOn(vm, 'saveDate');
 
         vm.saveStartDate('2018-1-1');
 
@@ -93,7 +91,7 @@ describe('EpicSidebarComponent', () => {
 
     describe('changeDueDateType', () => {
       it('calls `toggleDueDateType` on component with `dateTypeIsFixed` param', () => {
-        spyOn(vm, 'toggleDueDateType');
+        jest.spyOn(vm, 'toggleDueDateType');
 
         vm.changeDueDateType(true, true);
 
@@ -105,7 +103,7 @@ describe('EpicSidebarComponent', () => {
       });
 
       it('calls `saveDate` on component when `typeChangeOnEdit` param false', () => {
-        spyOn(vm, 'saveDate');
+        jest.spyOn(vm, 'saveDate');
 
         vm.changeDueDateType(true, false);
 
@@ -121,7 +119,7 @@ describe('EpicSidebarComponent', () => {
 
     describe('saveDueDate', () => {
       it('calls `saveDate` on component with `date` param set to `newDate`', () => {
-        spyOn(vm, 'saveDate');
+        jest.spyOn(vm, 'saveDate');
 
         vm.saveDueDate('2018-1-1');
 

ee/spec/javascripts/epic/components/sidebar_items/sidebar_header_spec.js → ee/spec/frontend/epic/components/sidebar_items/sidebar_header_spec.js

@@ -3,14 +3,14 @@ import Vue from 'vue';
 import SidebarHeader from 'ee/epic/components/sidebar_items/sidebar_header.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData } from '../../mock_data';
 
 describe('SidebarHeaderComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(SidebarHeader);
     store = createStore();
     store.dispatch('setEpicMeta', mockEpicMeta);
@@ -20,8 +20,6 @@ describe('SidebarHeaderComponent', () => {
       store,
       props: { sidebarCollapsed: false },
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/components/sidebar_items/sidebar_labels_spec.js → ee/spec/frontend/epic/components/sidebar_items/sidebar_labels_spec.js

@@ -3,14 +3,14 @@ import Vue from 'vue';
 import SidebarLabels from 'ee/epic/components/sidebar_items/sidebar_labels.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData, mockLabels } from '../../mock_data';
 
 describe('SidebarLabelsComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(SidebarLabels);
     store = createStore();
     store.dispatch('setEpicMeta', mockEpicMeta);
@@ -20,8 +20,6 @@ describe('SidebarLabelsComponent', () => {
       store,
       props: { canUpdate: false, sidebarCollapsed: false },
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {
@@ -45,7 +43,7 @@ describe('SidebarLabelsComponent', () => {
   describe('methods', () => {
     describe('toggleSidebarRevealLabelsDropdown', () => {
       it('calls `toggleSidebar` action with param `sidebarCollapse`', () => {
-        spyOn(vm, 'toggleSidebar');
+        jest.spyOn(vm, 'toggleSidebar');
 
         vm.toggleSidebarRevealLabelsDropdown();
 
@@ -59,7 +57,7 @@ describe('SidebarLabelsComponent', () => {
 
     describe('handleDropdownClose', () => {
       it('calls `toggleSidebar` action only when `sidebarExpandedOnClick` prop is true', () => {
-        spyOn(vm, 'toggleSidebar');
+        jest.spyOn(vm, 'toggleSidebar');
 
         vm.sidebarExpandedOnClick = true;
 

ee/spec/javascripts/epic/components/sidebar_items/sidebar_subscription_spec.js → ee/spec/frontend/epic/components/sidebar_items/sidebar_subscription_spec.js

@@ -3,14 +3,14 @@ import Vue from 'vue';
 import SidebarSubscription from 'ee/epic/components/sidebar_items/sidebar_subscription.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData } from '../../mock_data';
 
 describe('SidebarSubscriptionComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     const Component = Vue.extend(SidebarSubscription);
     store = createStore();
     store.dispatch('setEpicMeta', mockEpicMeta);
@@ -20,8 +20,6 @@ describe('SidebarSubscriptionComponent', () => {
       store,
       props: { sidebarCollapsed: false },
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/components/sidebar_items/sidebar_todo_spec.js → ee/spec/frontend/epic/components/sidebar_items/sidebar_todo_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import SidebarTodo from 'ee/epic/components/sidebar_items/sidebar_todo.vue';
 import createStore from 'ee/epic/store';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { mockEpicMeta, mockEpicData } from '../../mock_data';
 
 describe('SidebarTodoComponent', () => {
@@ -11,7 +11,7 @@ describe('SidebarTodoComponent', () => {
   let vm;
   let store;
 
-  beforeEach(done => {
+  beforeEach(() => {
     gon.current_user_id = 1;
 
     const Component = Vue.extend(SidebarTodo);
@@ -23,8 +23,6 @@ describe('SidebarTodoComponent', () => {
       store,
       props: { sidebarCollapsed: false },
     });
-
-    setTimeout(done);
   });
 
   afterEach(() => {

ee/spec/javascripts/epic/store/actions_spec.js → ee/spec/frontend/epic/store/actions_spec.js

@@ -5,7 +5,7 @@ import * as actions from 'ee/epic/store/actions';
 import epicUtils from 'ee/epic/utils/epic_utils';
 import { statusType, dateTypes } from 'ee/epic/constants';
 
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
 
 import { mockEpicMeta, mockEpicData } from '../mock_data';
@@ -96,7 +96,7 @@ describe('Epic Store Actions', () => {
 
   describe('triggerIssuableEvent', () => {
     it('Calls `triggerDocumentEvent` with events `issuable_vue_app:change`, `issuable:change` and passes `isEpicOpen` as param', () => {
-      spyOn(epicUtils, 'triggerDocumentEvent').and.returnValue(false);
+      jest.spyOn(epicUtils, 'triggerDocumentEvent').mockReturnValue(false);
 
       const data = { isEpicOpen: true };
       actions.triggerIssuableEvent({}, data);
@@ -199,8 +199,8 @@ describe('Epic Store Actions', () => {
     const sidebarCollapsed = true;
 
     beforeEach(() => {
-      spyOn(epicUtils, 'toggleContainerClass').and.stub();
-      spyOn(epicUtils, 'setCollapsedGutter').and.stub();
+      jest.spyOn(epicUtils, 'toggleContainerClass');
+      jest.spyOn(epicUtils, 'setCollapsedGutter');
     });
 
     it('should call `epicUtils.toggleContainerClass` with classes `right-sidebar-expanded` & `right-sidebar-collapsed`', () => {
@@ -315,7 +315,7 @@ describe('Epic Store Actions', () => {
 
   describe('triggerTodoToggleEvent', () => {
     it('Calls `triggerDocumentEvent` with event `todo:toggle` and passes `count` as param', () => {
-      spyOn(epicUtils, 'triggerDocumentEvent').and.returnValue(false);
+      jest.spyOn(epicUtils, 'triggerDocumentEvent').mockReturnValue(false);
 
       const data = { count: 5 };
       actions.triggerTodoToggleEvent({}, data);
@@ -629,7 +629,7 @@ describe('Epic Store Actions', () => {
 
     it('dispatches requestEpicDateSave and requestEpicDateSaveSuccess when request is successful', done => {
       mock.onPut(/(.*)/).replyOnce(200, {});
-      spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+      jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
         Promise.resolve({
           data: mockUpdateEpicMutationRes,
         }),
@@ -656,7 +656,7 @@ describe('Epic Store Actions', () => {
 
     it('dispatches requestEpicDateSave and requestEpicDateSaveFailure when request fails', done => {
       mock.onPut(/(.*)/).replyOnce(500, {});
-      spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+      jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
         Promise.resolve({
           data: {
             updateEpic: {
@@ -795,7 +795,7 @@ describe('Epic Store Actions', () => {
     describe('success', () => {
       it('dispatches requestEpicSubscriptionToggle and requestEpicSubscriptionToggleSuccess with param `subscribed` when request is complete', done => {
         mock.onPost(/(.*)/).replyOnce(200, {});
-        spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+        jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
           Promise.resolve({
             data: mockEpicSetSubscriptionRes,
           }),
@@ -837,7 +837,7 @@ describe('Epic Store Actions', () => {
     describe('failure', () => {
       it('dispatches requestEpicSubscriptionToggle and requestEpicSubscriptionToggleFailure when request fails', done => {
         mock.onPost(/(.*)/).replyOnce(500, {});
-        spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+        jest.spyOn(epicUtils.gqClient, 'mutate').mockReturnValue(
           Promise.resolve({
             data: {
               epicSetSubscription: {

ee/spec/javascripts/epic/mock_data.js

-export * from '../../frontend/epic/mock_data';

spec/frontend/issue_show/mock_data.js

+export const initialRequest = {
+  title: '<p>this is a title</p>',
+  title_text: 'this is a title',
+  description: '<p>this is a description!</p>',
+  description_text: 'this is a description',
+  task_status: '2 of 4 completed',
+  updated_at: '2015-05-15T12:31:04.428Z',
+  updated_by_name: 'Some User',
+  updated_by_path: '/some_user',
+  lock_version: 1,
+};
+
+export const secondRequest = {
+  title: '<p>2</p>',
+  title_text: '2',
+  description: '<p>42</p>',
+  description_text: '42',
+  task_status: '0 of 0 completed',
+  updated_at: '2016-05-15T12:31:04.428Z',
+  updated_by_name: 'Other User',
+  updated_by_path: '/other_user',
+  lock_version: 2,
+};

spec/javascripts/issue_show/components/app_spec.js

@@ -7,13 +7,13 @@ import axios from '~/lib/utils/axios_utils';
 import '~/behaviors/markdown/render_gfm';
 import issuableApp from '~/issue_show/components/app.vue';
 import eventHub from '~/issue_show/event_hub';
-import issueShowData from '../mock_data';
+import { initialRequest, secondRequest } from '../mock_data';
 
 function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
 }
 
-const REALTIME_REQUEST_STACK = [issueShowData.initialRequest, issueShowData.secondRequest];
+const REALTIME_REQUEST_STACK = [initialRequest, secondRequest];
 
 describe('Issuable output', () => {
   let mock;

spec/javascripts/issue_show/mock_data.js

-export default {
-  initialRequest: {
-    title: '<p>this is a title</p>',
-    title_text: 'this is a title',
-    description: '<p>this is a description!</p>',
-    description_text: 'this is a description',
-    task_status: '2 of 4 completed',
-    updated_at: '2015-05-15T12:31:04.428Z',
-    updated_by_name: 'Some User',
-    updated_by_path: '/some_user',
-    lock_version: 1,
-  },
-  secondRequest: {
-    title: '<p>2</p>',
-    title_text: '2',
-    description: '<p>42</p>',
-    description_text: '42',
-    task_status: '0 of 0 completed',
-    updated_at: '2016-05-15T12:31:04.428Z',
-    updated_by_name: 'Other User',
-    updated_by_path: '/other_user',
-    lock_version: 2,
-  },
-};
+export * from '../../frontend/issue_show/mock_data';