Remove deprecated `methods` from components/checkout

`@vue/test-utils` 1.x deprecated `methods` option. Replace it with
mocking store actions instead

ee/app/assets/javascripts/subscriptions/new/store/index.js

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

ee/spec/frontend/subscriptions/new/components/checkout/billing_address_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import Component from 'ee/subscriptions/new/components/checkout/billing_address.vue';
 import Step from 'ee/subscriptions/new/components/checkout/step.vue';
-import createStore from 'ee/subscriptions/new/store';
+import { getStoreConfig } from 'ee/subscriptions/new/store';
 import * as types from 'ee/subscriptions/new/store/mutation_types';
 
-describe('Billing Address', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+Vue.use(Vuex);
 
+describe('Billing Address', () => {
   let store;
   let wrapper;
 
-  const methodMocks = {
+  const actionMocks = {
     fetchCountries: jest.fn(),
     fetchStates: jest.fn(),
   };
 
   const createComponent = () => {
+    const { actions, ...storeConfig } = getStoreConfig();
+    store = new Vuex.Store({
+      ...storeConfig,
+      actions: { ...actions, ...actionMocks },
+    });
+
     wrapper = mount(Component, {
-      localVue,
       store,
-      methods: methodMocks,
     });
   };
 
   beforeEach(() => {
-    store = createStore();
     createComponent();
   });
 
@@ -36,7 +39,7 @@ describe('Billing Address', () => {
 
   describe('mounted', () => {
     it('should load the countries', () => {
-      expect(methodMocks.fetchCountries).toHaveBeenCalled();
+      expect(actionMocks.fetchCountries).toHaveBeenCalled();
     });
   });
 
@@ -55,12 +58,11 @@ describe('Billing Address', () => {
       expect(countrySelect().html()).toContain('<option value="NL">Netherlands</option>');
     });
 
-    it('should fetch states when selecting a country', () => {
+    it('should fetch states when selecting a country', async () => {
       countrySelect().trigger('change');
+      await nextTick();
 
-      return localVue.nextTick().then(() => {
-        expect(methodMocks.fetchStates).toHaveBeenCalled();
-      });
+      expect(actionMocks.fetchStates).toHaveBeenCalled();
     });
   });
 
@@ -78,36 +80,32 @@ describe('Billing Address', () => {
       expect(isStepValid()).toBe(true);
     });
 
-    it('should be invalid when country is undefined', () => {
+    it('should be invalid when country is undefined', async () => {
       store.commit(types.UPDATE_COUNTRY, null);
+      await nextTick();
 
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(false);
-      });
+      expect(isStepValid()).toBe(false);
     });
 
-    it('should be invalid when streetAddressLine1 is undefined', () => {
+    it('should be invalid when streetAddressLine1 is undefined', async () => {
       store.commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, null);
+      await nextTick();
 
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(false);
-      });
+      expect(isStepValid()).toBe(false);
     });
 
-    it('should be invalid when city is undefined', () => {
+    it('should be invalid when city is undefined', async () => {
       store.commit(types.UPDATE_CITY, null);
+      await nextTick();
 
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(false);
-      });
+      expect(isStepValid()).toBe(false);
     });
 
-    it('should be invalid when zipCode is undefined', () => {
+    it('should be invalid when zipCode is undefined', async () => {
       store.commit(types.UPDATE_ZIP_CODE, null);
+      await nextTick();
 
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(false);
-      });
+      expect(isStepValid()).toBe(false);
     });
   });
 

ee/spec/frontend/subscriptions/new/components/checkout/zuora_spec.js

@@ -2,7 +2,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import Component from 'ee/subscriptions/new/components/checkout/zuora.vue';
-import createStore from 'ee/subscriptions/new/store';
+import { getStoreConfig } from 'ee/subscriptions/new/store';
 import * as types from 'ee/subscriptions/new/store/mutation_types';
 
 describe('Zuora', () => {
@@ -12,21 +12,30 @@ describe('Zuora', () => {
   let store;
   let wrapper;
 
-  const methodMocks = {
-    loadZuoraScript: jest.fn(),
-    renderZuoraIframe: jest.fn(),
+  const actionMocks = {
+    startLoadingZuoraScript: jest.fn(),
+    fetchPaymentFormParams: jest.fn(),
+    zuoraIframeRendered: jest.fn(),
+    paymentFormSubmitted: jest.fn(),
   };
 
   const createComponent = (props = {}) => {
+    const { actions, ...storeConfig } = getStoreConfig();
+    store = new Vuex.Store({
+      ...storeConfig,
+      actions: {
+        ...actions,
+        ...actionMocks,
+      },
+    });
+
     wrapper = shallowMount(Component, {
       propsData: {
         active: true,
         ...props,
       },
       localVue,
-      sync: false,
       store,
-      methods: methodMocks,
     });
   };
 
@@ -34,18 +43,24 @@ describe('Zuora', () => {
   const findZuoraPayment = () => wrapper.find('#zuora_payment');
 
   beforeEach(() => {
-    store = createStore();
+    window.Z = {
+      runAfterRender(fn) {
+        return Promise.resolve().then(fn);
+      },
+      render() {},
+    };
   });
 
   afterEach(() => {
+    delete window.Z;
     wrapper.destroy();
   });
 
   describe('mounted', () => {
-    it('should call loadZuoraScript', () => {
+    it('starts loading zuora script', () => {
       createComponent();
 
-      expect(methodMocks.loadZuoraScript).toHaveBeenCalled();
+      expect(actionMocks.startLoadingZuoraScript).toHaveBeenCalled();
     });
   });
 
@@ -97,12 +112,12 @@ describe('Zuora', () => {
     it('is called when the paymentFormParams are updated', () => {
       createComponent();
 
-      expect(methodMocks.renderZuoraIframe).not.toHaveBeenCalled();
+      expect(actionMocks.zuoraIframeRendered).not.toHaveBeenCalled();
 
       store.commit(types.UPDATE_PAYMENT_FORM_PARAMS, {});
 
       return localVue.nextTick().then(() => {
-        expect(methodMocks.renderZuoraIframe).toHaveBeenCalled();
+        expect(actionMocks.zuoraIframeRendered).toHaveBeenCalled();
       });
     });
   });