Remove deprecated methods options from mount

methods option is deprecated in @vue/test-utils 1.x

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_nav_item.vue

@@ -60,6 +60,9 @@ export default {
   mounted() {
     this.checkIfTitleOverflows();
   },
+  updated() {
+    this.checkIfTitleOverflows();
+  },
   methods: {
     handleDropdownAction(action) {
       this.$emit(action);

ee/spec/frontend/analytics/cycle_analytics/components/duration_chart_spec.js

 import Vuex from 'vuex';
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import { GlLoadingIcon, GlNewDropdownItem } from '@gitlab/ui';
-import durationChartStore from 'ee/analytics/cycle_analytics/store/modules/duration_chart';
 import Scatterplot from 'ee/analytics/shared/components/scatterplot.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
@@ -19,7 +18,7 @@ const fakeStore = ({ initialGetters, initialState }) =>
   new Vuex.Store({
     modules: {
       durationChart: {
-        ...durationChartStore,
+        namespaced: true,
         getters: {
           durationChartPlottableData: () => durationData,
           ...initialGetters,
@@ -28,6 +27,7 @@ const fakeStore = ({ initialGetters, initialState }) =>
           isLoading: false,
           ...initialState,
         },
+        actions: actionSpies,
       },
     },
   });
@@ -46,7 +46,6 @@ function createComponent({
       stages,
       ...props,
     },
-    methods: actionSpies,
     stubs: {
       GlLoadingIcon: true,
       Scatterplot: true,
@@ -102,7 +101,11 @@ describe('DurationChart', () => {
     });
 
     it('calls the `updateSelectedDurationChartStages` action', () => {
-      expect(actionSpies.updateSelectedDurationChartStages).toHaveBeenCalledWith(selectedStages);
+      expect(actionSpies.updateSelectedDurationChartStages).toHaveBeenCalledWith(
+        expect.any(Object),
+        selectedStages,
+        undefined,
+      );
     });
   });
 

ee/spec/frontend/analytics/cycle_analytics/components/stage_nav_item_spec.js

@@ -25,6 +25,10 @@ describe('StageNavItem', () => {
   const findStageTitle = () => wrapper.find({ ref: 'title' });
   const findStageMedian = () => wrapper.find({ ref: 'median' });
   const findDropdown = () => wrapper.find({ ref: 'dropdown' });
+  const setFakeTitleWidth = value =>
+    Object.defineProperty(wrapper.find({ ref: 'titleSpan' }).element, 'scrollWidth', {
+      value,
+    });
 
   afterEach(() => {
     wrapper.destroy();
@@ -79,12 +83,13 @@ describe('StageNavItem', () => {
           data() {
             return { isTitleOverflowing: true };
           },
-          methods: {
-            // making tbis a noop so it wont toggle 'isTitleOverflowing' on mount
-            checkIfTitleOverflows: () => {},
-          },
         },
       });
+
+      // JSDom does not calculate scrollWidth / offsetWidth so we fake it
+      setFakeTitleWidth(1000);
+      wrapper.vm.$forceUpdate();
+      return wrapper.vm.$nextTick();
     });
 
     it('renders the tooltip', () => {

ee/spec/frontend/analytics/cycle_analytics/components/type_of_work_charts_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
-import tasksByTypeStore from 'ee/analytics/cycle_analytics/store/modules/type_of_work';
 import TypeOfWorkCharts from 'ee/analytics/cycle_analytics/components/type_of_work_charts.vue';
 import TasksByTypeChart from 'ee/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_chart.vue';
 import TasksByTypeFilters from 'ee/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue';
@@ -22,7 +21,7 @@ const fakeStore = ({ initialGetters, initialState }) =>
   new Vuex.Store({
     modules: {
       typeOfWork: {
-        ...tasksByTypeStore,
+        namespaced: true,
         getters: {
           tasksByTypeChartData: () => tasksByTypeData,
           selectedTasksByTypeFilters: () => taskByTypeFilters,
@@ -32,6 +31,7 @@ const fakeStore = ({ initialGetters, initialState }) =>
         state: {
           ...initialState,
         },
+        actions: actionSpies,
       },
     },
   });
@@ -41,7 +41,6 @@ describe('TypeOfWorkCharts', () => {
     return shallowMount(TypeOfWorkCharts, {
       localVue,
       store: fakeStore({ initialGetters, initialState }),
-      methods: actionSpies,
       stubs: {
         TasksByTypeChart: true,
         TasksByTypeFilters: true,
@@ -111,7 +110,11 @@ describe('TypeOfWorkCharts', () => {
     });
 
     it('calls the setTasksByTypeFilters method', () => {
-      expect(actionSpies.setTasksByTypeFilters).toHaveBeenCalledWith(payload);
+      expect(actionSpies.setTasksByTypeFilters).toHaveBeenCalledWith(
+        expect.any(Object),
+        payload,
+        undefined,
+      );
     });
   });
 

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

@@ -25,9 +25,12 @@ describe('ValueStreamSelect', () => {
         selectedValueStream: {},
         ...initialState,
       },
+      actions: {
+        createValueStream: createValueStreamMock,
+      },
     });
 
-  const createComponent = ({ data = {}, initialState = {}, methods = {} } = {}) =>
+  const createComponent = ({ data = {}, initialState = {} } = {}) =>
     shallowMount(ValueStreamSelect, {
       localVue,
       store: fakeStore({ initialState }),
@@ -36,10 +39,6 @@ describe('ValueStreamSelect', () => {
           ...data,
         };
       },
-      methods: {
-        createValueStream: createValueStreamMock,
-        ...methods,
-      },
       mocks: {
         $toast: {
           show: mockToastShow,
@@ -163,7 +162,11 @@ describe('ValueStreamSelect', () => {
         });
 
         it('calls the "createValueStream" event when submitted', () => {
-          expect(createValueStreamMock).toHaveBeenCalledWith({ name: streamName });
+          expect(createValueStreamMock).toHaveBeenCalledWith(
+            expect.any(Object),
+            { name: streamName },
+            undefined,
+          );
         });
 
         it('clears the name field', () => {