Merge branch 'xanf-fix-deprecated-methods-in-vue-shared' into 'master'

Fix deprecated methods in vue_shared tests

See merge request gitlab-org/gitlab!41193

ee/app/assets/javascripts/vue_shared/metrics_reports/store/index.js

@@ -7,10 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export default () =>
-  new Vuex.Store({
-    actions,
-    mutations,
-    getters,
-    state: state(),
-  });
+export const getStoreConfig = () => ({
+  actions,
+  mutations,
+  getters,
+  state: state(),
+});
+
+export default () => new Vuex.Store(getStoreConfig());

ee/spec/frontend/vue_shared/metrics_reports/grouped_metrics_reports_app_spec.js

@@ -2,7 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GroupedMetricsReportsApp from 'ee/vue_shared/metrics_reports/grouped_metrics_reports_app.vue';
 import MetricsReportsIssueBody from 'ee/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue';
-import store from 'ee/vue_shared/metrics_reports/store';
+import { getStoreConfig } from 'ee/vue_shared/metrics_reports/store';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,7 +25,7 @@ describe('Grouped metrics reports app', () => {
   };
 
   beforeEach(() => {
-    mockStore = store();
+    mockStore = new Vuex.Store(getStoreConfig());
     mountComponent();
   });
 

spec/frontend/vue_shared/components/confirm_modal_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlModal } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import ConfirmModal from '~/vue_shared/components/confirm_modal.vue';
 
@@ -21,9 +20,14 @@ describe('vue_shared/components/confirm_modal', () => {
     selector: '.test-button',
   };
 
-  const actionSpies = {
-    openModal: jest.fn(),
-    closeModal: jest.fn(),
+  const popupMethods = {
+    hide: jest.fn(),
+    show: jest.fn(),
+  };
+
+  const GlModalStub = {
+    template: '<div><slot></slot></div>',
+    methods: popupMethods,
   };
 
   let wrapper;
@@ -34,8 +38,8 @@ describe('vue_shared/components/confirm_modal', () => {
         ...defaultProps,
         ...props,
       },
-      methods: {
-        ...actionSpies,
+      stubs: {
+        GlModal: GlModalStub,
       },
     });
   };
@@ -44,7 +48,7 @@ describe('vue_shared/components/confirm_modal', () => {
     wrapper.destroy();
   });
 
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.find(GlModalStub);
   const findForm = () => wrapper.find('form');
   const findFormData = () =>
     findForm()
@@ -103,7 +107,7 @@ describe('vue_shared/components/confirm_modal', () => {
       });
 
       it('does not close modal', () => {
-        expect(actionSpies.closeModal).not.toHaveBeenCalled();
+        expect(popupMethods.hide).not.toHaveBeenCalled();
       });
 
       describe('when modal closed', () => {
@@ -112,7 +116,7 @@ describe('vue_shared/components/confirm_modal', () => {
         });
 
         it('closes modal', () => {
-          expect(actionSpies.closeModal).toHaveBeenCalled();
+          expect(popupMethods.hide).toHaveBeenCalled();
         });
       });
     });

spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js

@@ -14,19 +14,13 @@ import {
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-function createRenamedComponent({
-  props = {},
-  methods = {},
-  store = new Vuex.Store({}),
-  deep = false,
-}) {
+function createRenamedComponent({ props = {}, store = new Vuex.Store({}), deep = false }) {
   const mnt = deep ? mount : shallowMount;
 
   return mnt(Renamed, {
     propsData: { ...props },
     localVue,
     store,
-    methods,
   });
 }
 
@@ -258,25 +252,17 @@ describe('Renamed Diff Viewer', () => {
       'includes a link to the full file for alternate viewer type "$altType"',
       ({ altType, linkText }) => {
         const file = { ...diffFile };
-        const clickMock = jest.fn().mockImplementation(() => {});
 
         file.alternate_viewer.name = altType;
         wrapper = createRenamedComponent({
           deep: true,
           props: { diffFile: file },
-          methods: {
-            clickLink: clickMock,
-          },
         });
 
         const link = wrapper.find('a');
 
         expect(link.text()).toEqual(linkText);
         expect(link.attributes('href')).toEqual(DIFF_FILE_VIEW_PATH);
-
-        link.vm.$emit('click');
-
-        expect(clickMock).toHaveBeenCalled();
       },
     );
   });