Merge branch 'vs-migrate-roadmap-to-jest' into 'master'

Migrate ee/spec/javascripts/roadmap/ to Jest

Closes #194303

See merge request gitlab-org/gitlab!27992

ee/spec/javascripts/roadmap/components/current_day_indicator_spec.js → ee/spec/frontend/roadmap/components/current_day_indicator_spec.js

@@ -8,7 +8,7 @@ import {
 } from 'ee/roadmap/utils/roadmap_utils';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import { mockTimeframeInitialDate } from '../mock_data';
+import { mockTimeframeInitialDate } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
@@ -46,7 +46,7 @@ describe('CurrentDayIndicator', () => {
 
   describe('computed', () => {
     describe('hasToday', () => {
-      it('returns true when presetType is QUARTERS and currentDate is within current quarter', done => {
+      it('returns true when presetType is QUARTERS and currentDate is within current quarter', () => {
         wrapper.setData({
           currentDate: mockTimeframeQuarters[0].range[1],
         });
@@ -56,13 +56,12 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeQuarters[0],
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.hasToday).toBe(true);
-          done();
         });
       });
 
-      it('returns true when presetType is MONTHS and currentDate is within current month', done => {
+      it('returns true when presetType is MONTHS and currentDate is within current month', () => {
         wrapper.setData({
           currentDate: new Date(2020, 0, 15),
         });
@@ -72,13 +71,12 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: new Date(2020, 0, 1),
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.hasToday).toBe(true);
-          done();
         });
       });
 
-      it('returns true when presetType is WEEKS and currentDate is within current week', done => {
+      it('returns true when presetType is WEEKS and currentDate is within current week', () => {
         wrapper.setData({
           currentDate: mockTimeframeWeeks[0],
         });
@@ -88,9 +86,8 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeWeeks[0],
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.hasToday).toBe(true);
-          done();
         });
       });
     });
@@ -98,7 +95,7 @@ describe('CurrentDayIndicator', () => {
 
   describe('methods', () => {
     describe('getIndicatorStyles', () => {
-      it('returns object containing `left` with value `34%` when presetType is QUARTERS', done => {
+      it('returns object containing `left` with value `34%` when presetType is QUARTERS', () => {
         wrapper.setData({
           currentDate: mockTimeframeQuarters[0].range[1],
         });
@@ -108,17 +105,16 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeQuarters[0],
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.getIndicatorStyles()).toEqual(
-            jasmine.objectContaining({
+            expect.objectContaining({
               left: '34%',
             }),
           );
-          done();
         });
       });
 
-      it('returns object containing `left` with value `48%` when presetType is MONTHS', done => {
+      it('returns object containing `left` with value `48%` when presetType is MONTHS', () => {
         wrapper.setData({
           currentDate: new Date(2020, 0, 15),
         });
@@ -128,17 +124,16 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: new Date(2020, 0, 1),
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.getIndicatorStyles()).toEqual(
-            jasmine.objectContaining({
+            expect.objectContaining({
               left: '48%',
             }),
           );
-          done();
         });
       });
 
-      it('returns object containing `left` with value `7%` when presetType is WEEKS', done => {
+      it('returns object containing `left` with value `7%` when presetType is WEEKS', () => {
         wrapper.setData({
           currentDate: mockTimeframeWeeks[0],
         });
@@ -148,34 +143,33 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeWeeks[0],
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.getIndicatorStyles()).toEqual(
-            jasmine.objectContaining({
+            expect.objectContaining({
               left: '7%',
             }),
           );
-          done();
         });
       });
     });
   });
 
   describe('template', () => {
-    beforeEach(done => {
+    beforeEach(() => {
+      wrapper = createComponent();
       wrapper.setData({
         currentDate: mockTimeframeMonths[0],
       });
-      wrapper.vm.$nextTick(() => {
-        done();
-      });
+
+      return wrapper.vm.$nextTick();
     });
 
     it('renders span element containing class `current-day-indicator`', () => {
-      expect(wrapper.element.classList.contains('current-day-indicator')).toBe(true);
+      expect(wrapper.classes('current-day-indicator')).toBe(true);
     });
 
     it('renders span element with style attribute containing `left: 3%;`', () => {
-      expect(wrapper.element.getAttribute('style')).toBe('left: 3%;');
+      expect(wrapper.attributes('style')).toBe('left: 3%;');
     });
   });
 });

ee/spec/javascripts/roadmap/components/epic_item_details_spec.js → ee/spec/frontend/roadmap/components/epic_item_details_spec.js

@@ -7,7 +7,7 @@ import {
   mockFormattedEpic,
   mockFormattedChildEpic2,
   mockFormattedChildEpic1,
-} from '../mock_data';
+} from 'ee_jest/roadmap/mock_data';
 
 const createComponent = (
   epic = mockFormattedEpic,
@@ -159,7 +159,7 @@ describe('EpicItemDetails', () => {
       });
 
       it('emits toggleIsEpicExpanded event when clicked', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
         const id = 42;
         const epic = {

ee/spec/javascripts/roadmap/components/epic_item_spec.js → ee/spec/frontend/roadmap/components/epic_item_spec.js

@@ -8,8 +8,8 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate, mockEpic, mockGroupId } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate, mockEpic, mockGroupId } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 
@@ -111,7 +111,7 @@ describe('EpicItemComponent', () => {
   describe('methods', () => {
     describe('removeHighlight', () => {
       it('should call _.delay after 3 seconds with a callback function which would set `epic.newEpic` to false when it is true already', done => {
-        spyOn(_, 'delay');
+        jest.spyOn(_, 'delay').mockImplementation(() => {});
 
         vm.epic.newEpic = true;
 
@@ -119,7 +119,7 @@ describe('EpicItemComponent', () => {
 
         vm.$nextTick()
           .then(() => {
-            expect(_.delay).toHaveBeenCalledWith(jasmine.any(Function), 3000);
+            expect(_.delay).toHaveBeenCalledWith(expect.any(Function), 3000);
           })
           .then(done)
           .catch(done.fail);

ee/spec/javascripts/roadmap/components/epic_item_timeline_spec.js → ee/spec/frontend/roadmap/components/epic_item_timeline_spec.js

@@ -4,7 +4,7 @@ import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue
 import EpicItemTimeline from 'ee/roadmap/components/epic_item_timeline.vue';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
-import { mockTimeframeInitialDate, mockFormattedEpic } from '../mock_data';
+import { mockTimeframeInitialDate, mockFormattedEpic } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/components/epics_list_empty_spec.js → ee/spec/frontend/roadmap/components/epics_list_empty_spec.js

@@ -10,8 +10,12 @@ import {
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate, mockSvgPath, mockNewEpicEndpoint } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import {
+  mockTimeframeInitialDate,
+  mockSvgPath,
+  mockNewEpicEndpoint,
+} from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);

ee/spec/javascripts/roadmap/components/epics_list_section_spec.js → ee/spec/frontend/roadmap/components/epics_list_section_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VirtualList from 'vue-virtual-scroll-list';
-import epicsListSectionComponent from 'ee/roadmap/components/epics_list_section.vue';
+import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
 import EpicItem from 'ee/roadmap/components/epic_item.vue';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
@@ -18,7 +18,7 @@ import {
   mockSortedBy,
   basePath,
   epicsPath,
-} from '../mock_data';
+} from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 const store = createStore();
@@ -39,6 +39,7 @@ const mockEpics = store.state.epics;
 store.state.epics[0].children = {
   edges: [mockFormattedChildEpic1, mockFormattedChildEpic2],
 };
+const localVue = createLocalVue();
 
 const createComponent = ({
   epics = mockEpics,
@@ -47,9 +48,7 @@ const createComponent = ({
   presetType = PRESET_TYPES.MONTHS,
   roadmapBufferedRendering = true,
 } = {}) => {
-  const localVue = createLocalVue();
-
-  return shallowMount(epicsListSectionComponent, {
+  return shallowMount(EpicsListSection, {
     localVue,
     store,
     stubs: {
@@ -82,6 +81,13 @@ describe('EpicsListSectionComponent', () => {
 
   describe('data', () => {
     it('returns default data props', () => {
+      // Destroy the existing wrapper, and create a new one. This works around
+      // a race condition between how Jest runs tests and the $nextTick call in
+      // EpicsListSectionComponent's mounted hook.
+      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27992#note_319213990
+      wrapper.destroy();
+      wrapper = createComponent();
+
       expect(wrapper.vm.offsetLeft).toBe(0);
       expect(wrapper.vm.emptyRowContainerStyles).toEqual({});
       expect(wrapper.vm.showBottomShadow).toBe(false);
@@ -115,63 +121,69 @@ describe('EpicsListSectionComponent', () => {
 
   describe('methods', () => {
     describe('initMounted', () => {
+      beforeEach(() => {
+        // Destroy the existing wrapper, and create a new one. This works
+        // around a race condition between how Jest runs tests and the
+        // $nextTick call in EpicsListSectionComponent's mounted hook.
+        // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27992#note_319213990
+        wrapper.destroy();
+        wrapper = createComponent();
+
+        jest.spyOn(wrapper.vm, 'scrollToTodayIndicator').mockImplementation(() => {});
+      });
+
       it('sets value of `roadmapShellEl` with root component element', () => {
         expect(wrapper.vm.roadmapShellEl instanceof HTMLElement).toBe(true);
       });
 
       it('calls action `setBufferSize` with value based on window.innerHeight and component element position', () => {
-        expect(wrapper.vm.bufferSize).toBe(12);
+        expect(wrapper.vm.bufferSize).toBe(16);
       });
 
-      it('sets value of `offsetLeft` with parentElement.offsetLeft', done => {
-        wrapper.vm.$nextTick(() => {
+      it('sets value of `offsetLeft` with parentElement.offsetLeft', () => {
+        return wrapper.vm.$nextTick(() => {
           // During tests, there's no `$el.parentElement` present
           // hence offsetLeft is 0.
           expect(wrapper.vm.offsetLeft).toBe(0);
-          done();
         });
       });
 
-      it('calls `scrollToTodayIndicator` following the component render', done => {
-        spyOn(wrapper.vm, 'scrollToTodayIndicator');
-
+      it('calls `scrollToTodayIndicator` following the component render', () => {
         // Original method implementation waits for render cycle
         // to complete at 2 levels before scrolling.
-        wrapper.vm.$nextTick(() => {
-          wrapper.vm.$nextTick(() => {
+        return wrapper.vm
+          .$nextTick()
+          .then(() => wrapper.vm.$nextTick())
+          .then(() => {
             expect(wrapper.vm.scrollToTodayIndicator).toHaveBeenCalled();
-            done();
-          });
           });
       });
 
-      it('sets style object to `emptyRowContainerStyles`', done => {
-        wrapper.vm.$nextTick(() => {
+      it('sets style object to `emptyRowContainerStyles`', () => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.emptyRowContainerStyles).toEqual(
-            jasmine.objectContaining({
+            expect.objectContaining({
               height: '0px',
             }),
           );
-          done();
         });
       });
     });
 
     describe('getEmptyRowContainerStyles', () => {
-      it('returns empty object when there are no epics available to render', done => {
+      it('returns empty object when there are no epics available to render', () => {
         wrapper.setProps({
           epics: [],
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual({});
-          done();
         });
       });
 
       it('returns object containing `height` when there epics available to render', () => {
         expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual(
-          jasmine.objectContaining({
+          expect.objectContaining({
             height: '0px',
           }),
         );
@@ -203,7 +215,7 @@ describe('EpicsListSectionComponent', () => {
     describe('getEpicItemProps', () => {
       it('returns an object containing props for EpicItem component', () => {
         expect(wrapper.vm.getEpicItemProps(1)).toEqual(
-          jasmine.objectContaining({
+          expect.objectContaining({
             key: 1,
             props: {
               epic: wrapper.vm.epics[1],
@@ -219,15 +231,14 @@ describe('EpicsListSectionComponent', () => {
 
   describe('template', () => {
     it('renders component container element with class `epics-list-section`', () => {
-      expect(wrapper.vm.$el.classList.contains('epics-list-section')).toBe(true);
+      expect(wrapper.classes('epics-list-section')).toBe(true);
     });
 
-    it('renders virtual-list when roadmapBufferedRendering is `true` and `epics.length` is more than `bufferSize`', done => {
+    it('renders virtual-list when roadmapBufferedRendering is `true` and `epics.length` is more than `bufferSize`', () => {
       wrapper.vm.setBufferSize(5);
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.find(VirtualList).exists()).toBe(true);
-        done();
       });
     });
 
@@ -267,7 +278,6 @@ describe('EpicsListSectionComponent', () => {
 
   it('expands to show child epics when epic is toggled', done => {
     const epic = mockEpics[0];
-    wrapper = createComponent();
 
     expect(wrapper.findAll(EpicItem).length).toBe(mockEpics.length);
 

ee/spec/frontend/roadmap/components/milestone_item_spec.js

@@ -7,7 +7,7 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
 import { mount } from '@vue/test-utils';
-import { mockTimeframeInitialDate, mockMilestone2 } from '../../../javascripts/roadmap/mock_data';
+import { mockTimeframeInitialDate, mockMilestone2 } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 
@@ -45,29 +45,25 @@ describe('MilestoneItemComponent', () => {
   describe('computed', () => {
     describe('startDateValues', () => {
       it('returns object containing date parts from milestone.startDate', () => {
-        expect(wrapper.vm.startDateValues).toEqual(
-          jasmine.objectContaining({
+        expect(wrapper.vm.startDateValues).toMatchObject({
           day: mockMilestone2.startDate.getDay(),
           date: mockMilestone2.startDate.getDate(),
           month: mockMilestone2.startDate.getMonth(),
           year: mockMilestone2.startDate.getFullYear(),
           time: mockMilestone2.startDate.getTime(),
-          }),
-        );
+        });
       });
     });
 
     describe('endDateValues', () => {
       it('returns object containing date parts from milestone.endDate', () => {
-        expect(wrapper.vm.endDateValues).toEqual(
-          jasmine.objectContaining({
+        expect(wrapper.vm.endDateValues).toMatchObject({
           day: mockMilestone2.endDate.getDay(),
           date: mockMilestone2.endDate.getDate(),
           month: mockMilestone2.endDate.getMonth(),
           year: mockMilestone2.endDate.getFullYear(),
           time: mockMilestone2.endDate.getTime(),
-          }),
-        );
+        });
       });
     });
 

ee/spec/frontend/roadmap/components/milestone_timeline_spec.js

@@ -7,11 +7,7 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import {
-  mockTimeframeInitialDate,
-  mockMilestone2,
-  mockGroupId,
-} from '../../../javascripts/roadmap/mock_data';
+import { mockTimeframeInitialDate, mockMilestone2, mockGroupId } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 

ee/spec/frontend/roadmap/components/milestones_list_section_spec.js

@@ -8,11 +8,7 @@ import {
   EPIC_DETAILS_CELL_WIDTH,
   TIMELINE_CELL_MIN_WIDTH,
 } from 'ee/roadmap/constants';
-import {
-  mockTimeframeInitialDate,
-  mockGroupId,
-  rawMilestones,
-} from '../../../javascripts/roadmap/mock_data';
+import { mockTimeframeInitialDate, mockGroupId, rawMilestones } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 const store = createStore();

ee/spec/javascripts/roadmap/components/preset_months/months_header_item_spec.js → ee/spec/frontend/roadmap/components/preset_months/months_header_item_spec.js

@@ -3,8 +3,8 @@ import Vue from 'vue';
 import MonthsHeaderItemComponent from 'ee/roadmap/components/preset_months/months_header_item.vue';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 const mockTimeframeIndex = 0;

ee/spec/javascripts/roadmap/components/preset_months/months_header_sub_item_spec.js → ee/spec/frontend/roadmap/components/preset_months/months_header_sub_item_spec.js

@@ -4,8 +4,8 @@ import MonthsHeaderSubItemComponent from 'ee/roadmap/components/preset_months/mo
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/components/preset_quarters/quarters_header_item_spec.js → ee/spec/frontend/roadmap/components/preset_quarters/quarters_header_item_spec.js

@@ -3,8 +3,8 @@ import Vue from 'vue';
 import QuartersHeaderItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_item.vue';
 import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeIndex = 0;
 const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);

ee/spec/javascripts/roadmap/components/preset_quarters/quarters_header_sub_item_spec.js → ee/spec/frontend/roadmap/components/preset_quarters/quarters_header_sub_item_spec.js

@@ -4,8 +4,8 @@ import QuartersHeaderSubItemComponent from 'ee/roadmap/components/preset_quarter
 import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/components/preset_weeks/weeks_header_item_spec.js → ee/spec/frontend/roadmap/components/preset_weeks/weeks_header_item_spec.js

@@ -3,8 +3,8 @@ import Vue from 'vue';
 import WeeksHeaderItemComponent from 'ee/roadmap/components/preset_weeks/weeks_header_item.vue';
 import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeIndex = 0;
 const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);

ee/spec/javascripts/roadmap/components/preset_weeks/weeks_header_sub_item_spec.js → ee/spec/frontend/roadmap/components/preset_weeks/weeks_header_sub_item_spec.js

@@ -4,8 +4,8 @@ import WeeksHeaderSubItemComponent from 'ee/roadmap/components/preset_weeks/week
 import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate } from 'ee_spec/roadmap/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate } from '../../mock_data';
 
 const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/components/roadmap_app_spec.js → ee/spec/frontend/roadmap/components/roadmap_app_spec.js

@@ -8,7 +8,7 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES, EXTEND_AS } from 'ee/roadmap/constants';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import {
   mockTimeframeInitialDate,
   mockGroupId,
@@ -18,7 +18,7 @@ import {
   mockSortedBy,
   basePath,
   epicsPath,
-} from '../mock_data';
+} from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 
@@ -115,16 +115,14 @@ describe('Roadmap AppComponent', () => {
 
   describe('methods', () => {
     describe('processExtendedTimeline', () => {
-      it('updates timeline by extending timeframe from the start when called with extendType as `prepend`', done => {
+      it('updates timeline by extending timeframe from the start when called with extendType as `prepend`', () => {
         vm.$store.dispatch('receiveEpicsSuccess', { rawEpics });
         vm.$store.state.epicsFetchInProgress = false;
 
-        Vue.nextTick()
-          .then(() => {
+        return Vue.nextTick().then(() => {
           const roadmapTimelineEl = vm.$el.querySelector('.roadmap-timeline-section');
 
-            spyOn(eventHub, '$emit');
-            spyOn(roadmapTimelineEl.parentElement, 'scrollBy');
+          jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
           vm.processExtendedTimeline({
             extendType: EXTEND_AS.PREPEND,
@@ -132,22 +130,19 @@ describe('Roadmap AppComponent', () => {
             itemsCount: 0,
           });
 
-            expect(eventHub.$emit).toHaveBeenCalledWith('refreshTimeline', jasmine.any(Object));
+          expect(eventHub.$emit).toHaveBeenCalledWith('refreshTimeline', expect.any(Object));
           expect(roadmapTimelineEl.parentElement.scrollBy).toHaveBeenCalled();
-          })
-          .then(done)
-          .catch(done.fail);
+        });
       });
 
-      it('updates timeline by extending timeframe from the end when called with extendType as `append`', done => {
+      it('updates timeline by extending timeframe from the end when called with extendType as `append`', () => {
         vm.$store.dispatch('receiveEpicsSuccess', { rawEpics });
         vm.$store.state.epicsFetchInProgress = false;
 
-        Vue.nextTick()
-          .then(() => {
+        return Vue.nextTick().then(() => {
           const roadmapTimelineEl = vm.$el.querySelector('.roadmap-timeline-section');
 
-            spyOn(eventHub, '$emit');
+          jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
           vm.processExtendedTimeline({
             extendType: EXTEND_AS.PREPEND,
@@ -155,10 +150,8 @@ describe('Roadmap AppComponent', () => {
             itemsCount: 0,
           });
 
-            expect(eventHub.$emit).toHaveBeenCalledWith('refreshTimeline', jasmine.any(Object));
-          })
-          .then(done)
-          .catch(done.fail);
+          expect(eventHub.$emit).toHaveBeenCalledWith('refreshTimeline', expect.any(Object));
+        });
       });
     });
 
@@ -172,10 +165,10 @@ describe('Roadmap AppComponent', () => {
       });
 
       it('updates the store and refreshes roadmap with extended timeline based on provided extendType', () => {
-        spyOn(vm, 'extendTimeframe');
-        spyOn(vm, 'refreshEpicDates');
-        spyOn(vm, 'refreshMilestoneDates');
-        spyOn(vm, 'fetchEpicsForTimeframe').and.callFake(() => new Promise(() => {}));
+        jest.spyOn(vm, 'extendTimeframe').mockImplementation(() => {});
+        jest.spyOn(vm, 'refreshEpicDates').mockImplementation(() => {});
+        jest.spyOn(vm, 'refreshMilestoneDates').mockImplementation(() => {});
+        jest.spyOn(vm, 'fetchEpicsForTimeframe').mockResolvedValue();
 
         const extendType = EXTEND_AS.PREPEND;
 
@@ -186,26 +179,23 @@ describe('Roadmap AppComponent', () => {
         expect(vm.refreshMilestoneDates).toHaveBeenCalled();
       });
 
-      it('calls `fetchEpicsForTimeframe` with extended timeframe array', done => {
-        spyOn(vm, 'extendTimeframe').and.stub();
-        spyOn(vm, 'refreshEpicDates').and.stub();
-        spyOn(vm, 'refreshMilestoneDates').and.stub();
-        spyOn(vm, 'fetchEpicsForTimeframe').and.callFake(() => new Promise(() => {}));
+      it('calls `fetchEpicsForTimeframe` with extended timeframe array', () => {
+        jest.spyOn(vm, 'extendTimeframe').mockImplementation(() => {});
+        jest.spyOn(vm, 'refreshEpicDates').mockImplementation(() => {});
+        jest.spyOn(vm, 'refreshMilestoneDates').mockImplementation(() => {});
+        jest.spyOn(vm, 'fetchEpicsForTimeframe').mockResolvedValue();
 
         const extendType = EXTEND_AS.PREPEND;
 
         vm.handleScrollToExtend(roadmapTimelineEl, extendType);
 
-        vm.$nextTick()
-          .then(() => {
+        return vm.$nextTick().then(() => {
           expect(vm.fetchEpicsForTimeframe).toHaveBeenCalledWith(
-              jasmine.objectContaining({
+            expect.objectContaining({
               timeframe: vm.extendedTimeframe,
             }),
           );
-          })
-          .then(done)
-          .catch(done.fail);
+        });
       });
     });
   });
@@ -215,15 +205,13 @@ describe('Roadmap AppComponent', () => {
       expect(vm.$el.classList.contains('roadmap-container')).toBe(true);
     });
 
-    it('renders roadmap container with classes `roadmap-container overflow-reset` when isEpicsListEmpty prop is true', done => {
+    it('renders roadmap container with classes `roadmap-container overflow-reset` when isEpicsListEmpty prop is true', () => {
       vm.$store.state.epicsFetchResultEmpty = true;
-      Vue.nextTick()
-        .then(() => {
+
+      return Vue.nextTick().then(() => {
         expect(vm.$el.classList.contains('roadmap-container')).toBe(true);
         expect(vm.$el.classList.contains('overflow-reset')).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      });
     });
   });
 });

ee/spec/javascripts/roadmap/components/roadmap_shell_spec.js → ee/spec/frontend/roadmap/components/roadmap_shell_spec.js

@@ -7,8 +7,13 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { mockEpic, mockTimeframeInitialDate, mockGroupId, mockMilestone } from '../mock_data';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import {
+  mockEpic,
+  mockTimeframeInitialDate,
+  mockGroupId,
+  mockMilestone,
+} from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 
@@ -73,13 +78,13 @@ describe('RoadmapShellComponent', () => {
     describe('handleScroll', () => {
       it('emits `epicsListScrolled` event via eventHub', done => {
         const vmWithParentEl = createComponent({}, document.getElementById('roadmap-shell'));
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
         Vue.nextTick()
           .then(() => {
             vmWithParentEl.handleScroll();
 
-            expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Object));
+            expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', expect.any(Object));
 
             vmWithParentEl.$destroy();
           })

ee/spec/javascripts/roadmap/components/roadmap_timeline_section_spec.js → ee/spec/frontend/roadmap/components/roadmap_timeline_section_spec.js

@@ -6,8 +6,8 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockEpic, mockTimeframeInitialDate } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockEpic, mockTimeframeInitialDate } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 
@@ -46,7 +46,7 @@ describe('RoadmapTimelineSectionComponent', () => {
     describe('sectionContainerStyles', () => {
       it('returns object containing `width` with value based on epic details cell width, timeline cell width and timeframe length', () => {
         expect(vm.sectionContainerStyles).toEqual(
-          jasmine.objectContaining({
+          expect.objectContaining({
             width: '1760px',
           }),
         );
@@ -73,21 +73,21 @@ describe('RoadmapTimelineSectionComponent', () => {
 
   describe('mounted', () => {
     it('binds `epicsListScrolled` event listener via eventHub', () => {
-      spyOn(eventHub, '$on');
+      jest.spyOn(eventHub, '$on').mockImplementation(() => {});
       const vmX = createComponent({});
 
-      expect(eventHub.$on).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Function));
+      expect(eventHub.$on).toHaveBeenCalledWith('epicsListScrolled', expect.any(Function));
       vmX.$destroy();
     });
   });
 
   describe('beforeDestroy', () => {
     it('unbinds `epicsListScrolled` event listener via eventHub', () => {
-      spyOn(eventHub, '$off');
+      jest.spyOn(eventHub, '$off').mockImplementation(() => {});
       const vmX = createComponent({});
       vmX.$destroy();
 
-      expect(eventHub.$off).toHaveBeenCalledWith('epicsListScrolled', jasmine.any(Function));
+      expect(eventHub.$off).toHaveBeenCalledWith('epicsListScrolled', expect.any(Function));
     });
   });
 

ee/spec/javascripts/roadmap/mixins/months_preset_mixin_spec.js → ee/spec/frontend/roadmap/mixins/months_preset_mixin_spec.js

@@ -5,8 +5,8 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate, mockEpic } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/mixins/quarters_preset_mixin_spec.js → ee/spec/frontend/roadmap/mixins/quarters_preset_mixin_spec.js

@@ -5,8 +5,8 @@ import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate, mockEpic } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/mixins/weeks_preset_mixin_spec.js → ee/spec/frontend/roadmap/mixins/weeks_preset_mixin_spec.js

@@ -5,8 +5,8 @@ import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframeInitialDate, mockEpic } from '../mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
 

ee/spec/javascripts/roadmap/store/mutations_spec.js → ee/spec/frontend/roadmap/store/mutations_spec.js

@@ -3,7 +3,7 @@ import * as types from 'ee/roadmap/store/mutation_types';
 
 import defaultState from 'ee/roadmap/store/state';
 
-import { mockGroupId, basePath, epicsPath, mockSortedBy } from '../mock_data';
+import { mockGroupId, basePath, epicsPath, mockSortedBy } from 'ee_jest/roadmap/mock_data';
 
 const getEpic = (epicId, epics) => epics.find(e => e.id === epicId);
 
@@ -36,7 +36,7 @@ describe('Roadmap Store Mutations', () => {
 
       mutations[types.SET_INITIAL_DATA](state, initialData);
 
-      expect(state).toEqual(jasmine.objectContaining(initialData));
+      expect(state).toEqual(expect.objectContaining(initialData));
     });
   });
 

ee/spec/javascripts/roadmap/utils/epic_utils_spec.js → ee/spec/frontend/roadmap/utils/epic_utils_spec.js

@@ -9,7 +9,7 @@ describe('extractGroupEpics', () => {
 
     expect(extractedEpics.length).toBe(edges.length);
     expect(extractedEpics[0]).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         ...edges[0].node,
         groupName: edges[0].node.group.name,
         groupFullName: edges[0].node.group.fullName,

ee/spec/javascripts/roadmap/utils/roadmap_utils_spec.js → ee/spec/frontend/roadmap/utils/roadmap_utils_spec.js

@@ -43,8 +43,8 @@ describe('getTimeframeForQuartersView', () => {
   it('each timeframe item has `quarterSequence`, `year` and `range` present', () => {
     const timeframeItem = timeframe[0];
 
-    expect(timeframeItem.quarterSequence).toEqual(jasmine.any(Number));
-    expect(timeframeItem.year).toEqual(jasmine.any(Number));
+    expect(timeframeItem.quarterSequence).toEqual(expect.any(Number));
+    expect(timeframeItem.year).toEqual(expect.any(Number));
     expect(Array.isArray(timeframeItem.range)).toBe(true);
   });
 
@@ -307,7 +307,7 @@ describe('getEpicsTimeframeRange', () => {
     });
 
     expect(range).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         startDate: '2017-7-1',
         dueDate: '2019-3-31',
       }),
@@ -322,7 +322,7 @@ describe('getEpicsTimeframeRange', () => {
     });
 
     expect(range).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         startDate: '2017-11-1',
         dueDate: '2018-6-30',
       }),
@@ -337,7 +337,7 @@ describe('getEpicsTimeframeRange', () => {
     });
 
     expect(range).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         startDate: '2017-12-17',
         dueDate: '2018-2-3',
       }),