Remove deprecated methods option from geo tests

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

ee/app/assets/javascripts/geo_replicable/store/index.js

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

ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js

@@ -2,7 +2,6 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown } from '@gitlab/ui';
 import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
-import store from 'ee/geo_node_form/store';
 import { MOCK_SYNC_NAMESPACES } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -23,17 +22,22 @@ describe('GeoNodeFormNamespaces', () => {
     isSelected: jest.fn(),
   };
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, initialState) => {
+    const fakeStore = new Vuex.Store({
+      state: {
+        synchronizationNamespaces: [],
+        ...initialState,
+      },
+      actions: actionSpies,
+    });
+
     wrapper = shallowMount(GeoNodeFormNamespaces, {
       localVue,
-      store,
+      store: fakeStore,
       propsData: {
         ...defaultProps,
         ...props,
       },
-      methods: {
-        ...actionSpies,
-      },
     });
   };
 
@@ -73,18 +77,21 @@ describe('GeoNodeFormNamespaces', () => {
         });
 
         it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
-          expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(namespaceSearch);
+          expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(
+            expect.any(Object),
+            namespaceSearch,
+            undefined,
+          );
         });
       });
     });
 
     describe('findDropdownItems', () => {
       beforeEach(() => {
-        delete actionSpies.isSelected;
-        createComponent({
-          selectedNamespaces: [[MOCK_SYNC_NAMESPACES[0].id]],
-        });
-        wrapper.vm.$store.state.synchronizationNamespaces = MOCK_SYNC_NAMESPACES;
+        createComponent(
+          { selectedNamespaces: [[MOCK_SYNC_NAMESPACES[0].id]] },
+          { synchronizationNamespaces: MOCK_SYNC_NAMESPACES },
+        );
       });
 
       it('renders an instance for each namespace', () => {
@@ -100,10 +107,10 @@ describe('GeoNodeFormNamespaces', () => {
   describe('methods', () => {
     describe('toggleNamespace', () => {
       beforeEach(() => {
-        delete actionSpies.toggleNamespace;
-        createComponent({
-          selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id],
-        });
+        createComponent(
+          { selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id] },
+          { synchronizationNamespaces: MOCK_SYNC_NAMESPACES },
+        );
       });
 
       describe('when namespace is in selectedNamespaces', () => {
@@ -123,10 +130,10 @@ describe('GeoNodeFormNamespaces', () => {
 
     describe('isSelected', () => {
       beforeEach(() => {
-        delete actionSpies.isSelected;
-        createComponent({
-          selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id],
-        });
+        createComponent(
+          { selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id] },
+          { synchronizationNamespaces: MOCK_SYNC_NAMESPACES },
+        );
       });
 
       describe('when namespace is in selectedNamespaces', () => {
@@ -188,8 +195,7 @@ describe('GeoNodeFormNamespaces', () => {
       describe('noSyncNamespaces', () => {
         describe('when synchronizationNamespaces.length > 0', () => {
           beforeEach(() => {
-            createComponent();
-            wrapper.vm.$store.state.synchronizationNamespaces = MOCK_SYNC_NAMESPACES;
+            createComponent({}, { synchronizationNamespaces: MOCK_SYNC_NAMESPACES });
           });
 
           it('returns `false`', () => {
@@ -201,7 +207,6 @@ describe('GeoNodeFormNamespaces', () => {
       describe('when synchronizationNamespaces.length === 0', () => {
         beforeEach(() => {
           createComponent();
-          wrapper.vm.$store.state.synchronizationNamespaces = [];
         });
 
         it('returns `true`', () => {

ee/spec/frontend/geo_node_form/components/geo_node_form_shards_spec.js

@@ -11,20 +11,12 @@ describe('GeoNodeFormShards', () => {
     syncShardsOptions: MOCK_SYNC_SHARDS,
   };
 
-  const actionSpies = {
-    toggleShard: jest.fn(),
-    isSelected: jest.fn(),
-  };
-
   const createComponent = (props = {}) => {
     wrapper = mount(GeoNodeFormShards, {
       propsData: {
         ...defaultProps,
         ...props,
       },
-      methods: {
-        ...actionSpies,
-      },
     });
   };
 
@@ -46,7 +38,6 @@ describe('GeoNodeFormShards', () => {
 
     describe('DropdownItems', () => {
       beforeEach(() => {
-        delete actionSpies.isSelected;
         createComponent({
           selectedShards: [MOCK_SYNC_SHARDS[0].value],
         });
@@ -76,10 +67,6 @@ describe('GeoNodeFormShards', () => {
 
   describe('methods', () => {
     describe('toggleShard', () => {
-      beforeEach(() => {
-        delete actionSpies.toggleShard;
-      });
-
       describe('when shard is in selectedShards', () => {
         beforeEach(() => {
           createComponent({
@@ -108,10 +95,6 @@ describe('GeoNodeFormShards', () => {
     });
 
     describe('isSelected', () => {
-      beforeEach(() => {
-        delete actionSpies.isSelected;
-      });
-
       describe('when shard is in selectedShards', () => {
         beforeEach(() => {
           createComponent({

ee/spec/frontend/geo_replicable/components/geo_replicable_filter_bar_spec.js

@@ -7,7 +7,7 @@ import {
   GlButton,
 } from '@gitlab/ui';
 import GeoReplicableFilterBar from 'ee/geo_replicable/components/geo_replicable_filter_bar.vue';
-import createStore from 'ee/geo_replicable/store';
+import { getStoreConfig } from 'ee/geo_replicable/store';
 import { DEFAULT_SEARCH_DELAY } from 'ee/geo_replicable/constants';
 import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
@@ -25,12 +25,13 @@ describe('GeoReplicableFilterBar', () => {
   };
 
   const createComponent = () => {
+    const fakeStore = new Vuex.Store({
+      ...getStoreConfig({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null }),
+      actions: actionSpies,
+    });
     wrapper = shallowMount(GeoReplicableFilterBar, {
       localVue,
-      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null }),
-      methods: {
-        ...actionSpies,
-      },
+      store: fakeStore,
     });
   };
 
@@ -77,7 +78,7 @@ describe('GeoReplicableFilterBar', () => {
           .at(index)
           .vm.$emit('click');
 
-        expect(actionSpies.setFilter).toHaveBeenCalledWith(index);
+        expect(actionSpies.setFilter).toHaveBeenCalledWith(expect.any(Object), index, undefined);
       });
     });
 
@@ -98,7 +99,11 @@ describe('GeoReplicableFilterBar', () => {
         });
 
         it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
-          expect(actionSpies.setSearch).toHaveBeenCalledWith(testSearch);
+          expect(actionSpies.setSearch).toHaveBeenCalledWith(
+            expect.any(Object),
+            testSearch,
+            undefined,
+          );
           expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
         });
       });
@@ -125,7 +130,7 @@ describe('GeoReplicableFilterBar', () => {
     });
 
     it('should call setFilter with the filterIndex', () => {
-      expect(actionSpies.setFilter).toHaveBeenCalledWith(testValue);
+      expect(actionSpies.setFilter).toHaveBeenCalledWith(expect.any(Object), testValue, undefined);
     });
 
     it('should call fetchReplicableItems', () => {

ee/spec/frontend/geo_replicable/components/geo_replicable_item_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlLink, GlButton } from '@gitlab/ui';
 import GeoReplicableItem from 'ee/geo_replicable/components/geo_replicable_item.vue';
-import createStore from 'ee/geo_replicable/store';
+import { getStoreConfig } from 'ee/geo_replicable/store';
 import { ACTION_TYPES } from 'ee/geo_replicable/constants';
 import { MOCK_BASIC_FETCH_DATA_MAP, MOCK_REPLICABLE_TYPE } from '../mock_data';
 
@@ -27,16 +27,18 @@ describe('GeoReplicableItem', () => {
   };
 
   const createComponent = (props = {}) => {
+    const fakeStore = new Vuex.Store({
+      ...getStoreConfig({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null }),
+      actions: actionSpies,
+    });
+
     wrapper = mount(GeoReplicableItem, {
       localVue,
-      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null }),
+      store: fakeStore,
       propsData: {
         ...defaultProps,
         ...props,
       },
-      methods: {
-        ...actionSpies,
-      },
     });
   };
 
@@ -81,11 +83,15 @@ describe('GeoReplicableItem', () => {
 
         it('calls initiateReplicableSync when clicked', () => {
           findGlButton().trigger('click');
-          expect(actionSpies.initiateReplicableSync).toHaveBeenCalledWith({
-            projectId: mockReplicable.projectId,
-            name: mockReplicable.name,
-            action: ACTION_TYPES.RESYNC,
-          });
+          expect(actionSpies.initiateReplicableSync).toHaveBeenCalledWith(
+            expect.any(Object),
+            {
+              projectId: mockReplicable.projectId,
+              name: mockReplicable.name,
+              action: ACTION_TYPES.RESYNC,
+            },
+            undefined,
+          );
         });
       });
     });