MR Review feedback fixes

Fixes for payment method component

ee/app/assets/javascripts/subscriptions/new/components/checkout/components/zuora.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { ZUORA_SCRIPT_URL } from 'ee/subscriptions/new/constants';
+import { ZUORA_SCRIPT_URL, ZUORA_IFRAME_OVERRIDE_PARAMS } from 'ee/subscriptions/new/constants';
 
 export default {
   components: {
@@ -13,40 +13,34 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      loading: true,
-      overrideParams: {
-        style: 'inline',
-        submitEnabled: 'true',
-        retainValues: 'true',
-      },
-    };
-  },
   computed: {
-    ...mapState(['paymentFormParams', 'paymentMethodId', 'creditCardDetails']),
+    ...mapState([
+      'paymentFormParams',
+      'paymentMethodId',
+      'creditCardDetails',
+      'isLoadingPaymentMethod',
+    ]),
   },
   watch: {
     // The Zuora script has loaded and the parameters for rendering the iframe have been fetched.
     paymentFormParams() {
       this.renderZuoraIframe();
     },
-    // The Zuora form has been submitted successfully and credit card details are being fetched.
-    paymentMethodId() {
-      this.toggleLoading();
-    },
-    // The credit card details have been fetched.
-    creditCardDetails() {
-      this.toggleLoading();
-    },
   },
   mounted() {
     this.loadZuoraScript();
   },
   methods: {
-    ...mapActions(['fetchPaymentFormParams', 'paymentFormSubmitted']),
+    ...mapActions([
+      'startLoadingZuoraScript',
+      'fetchPaymentFormParams',
+      'zuoraIframeRendered',
+      'paymentFormSubmitted',
+    ]),
     loadZuoraScript() {
-      if (typeof window.Z === 'undefined') {
+      this.startLoadingZuoraScript();
+
+      if (!window.Z) {
         const zuoraScript = document.createElement('script');
         zuoraScript.type = 'text/javascript';
         zuoraScript.async = true;
@@ -58,19 +52,16 @@ export default {
       }
     },
     renderZuoraIframe() {
-      const params = { ...this.paymentFormParams, ...this.overrideParams };
-      window.Z.runAfterRender(this.toggleLoading);
+      const params = { ...this.paymentFormParams, ...ZUORA_IFRAME_OVERRIDE_PARAMS };
+      window.Z.runAfterRender(this.zuoraIframeRendered);
       window.Z.render(params, {}, this.paymentFormSubmitted);
     },
-    toggleLoading() {
-      this.loading = !this.loading;
-    },
   },
 };
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="loading" size="lg" />
-    <div v-show="active && !loading" id="zuora_payment"></div>
+    <gl-loading-icon v-if="isLoadingPaymentMethod" size="lg" />
+    <div v-show="active && !isLoadingPaymentMethod" id="zuora_payment"></div>
   </div>
 </template>

ee/app/assets/javascripts/subscriptions/new/components/checkout/payment_method.vue

 <script>
-import _ from 'underscore';
 import { GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { sprintf, s__ } from '~/locale';
 import { mapState } from 'vuex';
 import Step from './components/step.vue';
 import Zuora from './components/zuora.vue';
@@ -15,7 +14,13 @@ export default {
   computed: {
     ...mapState(['paymentMethodId', 'creditCardDetails']),
     isValid() {
-      return !_.isEmpty(this.paymentMethodId);
+      return Boolean(this.paymentMethodId);
+    },
+    expirationDate() {
+      return sprintf(this.$options.i18n.expirationDate, {
+        expirationMonth: this.creditCardDetails.credit_card_expiration_month,
+        expirationYear: this.creditCardDetails.credit_card_expiration_year.toString(10).slice(-2),
+      });
     },
   },
   i18n: {
@@ -34,20 +39,15 @@ export default {
       <div class="js-summary-line-1">
         <gl-sprintf :message="$options.i18n.creditCardDetails">
           <template #cardType>
-            {{ creditCardDetails.cardType }}
+            {{ creditCardDetails.credit_card_type }}
           </template>
           <template #lastFourDigits>
-            <strong>{{ creditCardDetails.lastFourDigits }}</strong>
+            <strong>{{ creditCardDetails.credit_card_mask_number.slice(-4) }}</strong>
           </template>
         </gl-sprintf>
       </div>
       <div class="js-summary-line-2">
-        {{
-          sprintf($options.i18n.expirationDate, {
-            expirationMonth: creditCardDetails.expirationMonth,
-            expirationYear: creditCardDetails.expirationYear,
-          })
-        }}
+        {{ expirationDate }}
       </div>
     </template>
   </step>

ee/app/assets/javascripts/subscriptions/new/constants.js

+// The order of the steps in this array determines the flow of the application
 export const STEPS = ['subscriptionDetails', 'billingAddress', 'paymentMethod'];
 
 export const COUNTRIES_URL = '/-/countries';
@@ -12,4 +13,10 @@ export const PAYMENT_FORM_ID = 'paid_signup_flow';
 
 export const PAYMENT_METHOD_URL = '/-/subscriptions/payment_method';
 
+export const ZUORA_IFRAME_OVERRIDE_PARAMS = {
+  style: 'inline',
+  submitEnabled: 'true',
+  retainValues: 'true',
+};
+
 export const TAX_RATE = 0;

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

@@ -43,12 +43,11 @@ export const updateOrganizationName = ({ commit }, organizationName) => {
   commit(types.UPDATE_ORGANIZATION_NAME, organizationName);
 };
 
-export const fetchCountries = ({ dispatch }) => {
+export const fetchCountries = ({ dispatch }) =>
   axios
     .get(COUNTRIES_URL)
     .then(({ data }) => dispatch('fetchCountriesSuccess', data))
     .catch(() => dispatch('fetchCountriesError'));
-};
 
 export const fetchCountriesSuccess = ({ commit }, data = []) => {
   const countries = data.map(country => ({ text: country[0], value: country[1] }));
@@ -112,12 +111,14 @@ export const updateZipCode = ({ commit }, zipCode) => {
   commit(types.UPDATE_ZIP_CODE, zipCode);
 };
 
-export const fetchPaymentFormParams = ({ dispatch }) => {
+export const startLoadingZuoraScript = ({ commit }) =>
+  commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
+
+export const fetchPaymentFormParams = ({ dispatch }) =>
   axios
     .get(PAYMENT_FORM_URL, { params: { id: PAYMENT_FORM_ID } })
     .then(({ data }) => dispatch('fetchPaymentFormParamsSuccess', data))
     .catch(() => dispatch('fetchPaymentFormParamsError'));
-};
 
 export const fetchPaymentFormParamsSuccess = ({ commit }, data) => {
   if (data.errors) {
@@ -135,8 +136,13 @@ export const fetchPaymentFormParamsError = () => {
   createFlash(s__('Checkout|Credit card form failed to load. Please try again.'));
 };
 
-export const paymentFormSubmitted = ({ dispatch }, response) => {
+export const zuoraIframeRendered = ({ commit }) =>
+  commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, false);
+
+export const paymentFormSubmitted = ({ dispatch, commit }, response) => {
   if (response.success) {
+    commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
+
     dispatch('paymentFormSubmittedSuccess', response.refId);
   } else {
     dispatch('paymentFormSubmittedError', response);
@@ -160,21 +166,14 @@ export const paymentFormSubmittedError = (_, response) => {
   );
 };
 
-export const fetchPaymentMethodDetails = ({ state, dispatch }) => {
+export const fetchPaymentMethodDetails = ({ state, dispatch, commit }) =>
   axios
     .get(PAYMENT_METHOD_URL, { params: { id: state.paymentMethodId } })
     .then(({ data }) => dispatch('fetchPaymentMethodDetailsSuccess', data))
-    .catch(() => dispatch('fetchPaymentMethodDetailsError'));
-};
-
-export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, data) => {
-  const creditCardDetails = {
-    cardType: data.credit_card_type,
-    lastFourDigits: data.credit_card_mask_number.slice(-4),
-    expirationMonth: data.credit_card_expiration_month,
-    expirationYear: data.credit_card_expiration_year % 100,
-  };
+    .catch(() => dispatch('fetchPaymentMethodDetailsError'))
+    .finally(() => commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, false));
 
+export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, creditCardDetails) => {
   commit(types.UPDATE_CREDIT_CARD_DETAILS, creditCardDetails);
 
   dispatch('activateNextStep');

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

@@ -29,3 +29,5 @@ export const UPDATE_PAYMENT_FORM_PARAMS = 'UPDATE_PAYMENT_FORM_PARAMS';
 export const UPDATE_PAYMENT_METHOD_ID = 'UPDATE_PAYMENT_METHOD_ID';
 
 export const UPDATE_CREDIT_CARD_DETAILS = 'UPDATE_CREDIT_CARD_DETAILS';
+
+export const UPDATE_IS_LOADING_PAYMENT_METHOD = 'UPDATE_IS_LOADING_PAYMENT_METHOD';

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

@@ -64,4 +64,8 @@ export default {
   [types.UPDATE_CREDIT_CARD_DETAILS](state, creditCardDetails) {
     state.creditCardDetails = creditCardDetails;
   },
+
+  [types.UPDATE_IS_LOADING_PAYMENT_METHOD](state, isLoadingPaymentMethod) {
+    state.isLoadingPaymentMethod = isLoadingPaymentMethod;
+  },
 };

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

@@ -38,6 +38,7 @@ export default ({ planData = '[]', planId, setupForCompany, fullName }) => {
     paymentFormParams: {},
     paymentMethodId: null,
     creditCardDetails: {},
+    isLoadingPaymentMethod: false,
     taxRate: TAX_RATE,
     startDate: new Date(Date.now()),
   };

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

@@ -54,42 +54,34 @@ describe('Zuora', () => {
       createComponent();
     });
 
-    it('shows the loading icon', () => {
-      expect(findLoading().exists()).toBe(true);
+    it('does not show the loading icon', () => {
+      expect(findLoading().exists()).toBe(false);
     });
 
-    it('the zuora_payment selector should not be visible', () => {
-      expect(findZuoraPayment().element.style.display).toEqual('none');
+    it('the zuora_payment selector should be visible', () => {
+      expect(findZuoraPayment().element.style.display).toEqual('');
     });
 
-    describe.each`
-      desc                                    | commitType                          | commitPayload
-      ${'when paymentMethodId is updated'}    | ${types.UPDATE_PAYMENT_METHOD_ID}   | ${'foo'}
-      ${'when creditCardDetails are updated'} | ${types.UPDATE_CREDIT_CARD_DETAILS} | ${{}}
-    `('$desc', ({ commitType, commitPayload }) => {
+    describe('when toggling the loading indicator', () => {
       beforeEach(() => {
-        store.commit(commitType, commitPayload);
+        store.commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
 
         return localVue.nextTick();
       });
 
-      it('does not show loading icon', () => {
-        expect(findLoading().exists()).toBe(false);
+      it('shows the loading icon', () => {
+        expect(findLoading().exists()).toBe(true);
       });
 
-      it('the zuora_payment selector should be visible', () => {
-        expect(findZuoraPayment().element.style.display).toEqual('');
+      it('the zuora_payment selector should not be visible', () => {
+        expect(findZuoraPayment().element.style.display).toEqual('none');
       });
     });
   });
 
-  describe('when not active and not loading', () => {
+  describe('when not active', () => {
     beforeEach(() => {
       createComponent({ active: false });
-
-      store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'foo');
-
-      return localVue.nextTick();
     });
 
     it('does not show loading icon', () => {
@@ -97,7 +89,7 @@ describe('Zuora', () => {
     });
 
     it('the zuora_payment selector should not be visible', () => {
-      expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
+      expect(findZuoraPayment().element.style.display).toEqual('none');
     });
   });
 

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

@@ -9,20 +9,28 @@ describe('Payment Method', () => {
   const localVue = createLocalVue();
   localVue.use(Vuex);
 
+  let store;
   let wrapper;
 
-  const store = createStore();
-
   const createComponent = (opts = {}) => {
     wrapper = mount(Component, {
       localVue,
-      sync: false,
       store,
       ...opts,
     });
   };
 
   beforeEach(() => {
+    store = createStore();
+
+    store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
+    store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {
+      credit_card_type: 'Visa',
+      credit_card_mask_number: '************4242',
+      credit_card_expiration_month: 12,
+      credit_card_expiration_year: 2009,
+    });
+
     createComponent();
   });
 
@@ -34,11 +42,7 @@ describe('Payment Method', () => {
     const isStepValid = () => wrapper.find(Step).props('isValid');
 
     it('should be valid when paymentMethodId is defined', () => {
-      store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
-
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(true);
-      });
+      expect(isStepValid()).toBe(true);
     });
 
     it('should be invalid when paymentMethodId is undefined', () => {
@@ -51,16 +55,6 @@ describe('Payment Method', () => {
   });
 
   describe('showing the summary', () => {
-    beforeEach(() => {
-      store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
-      store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {
-        cardType: 'Visa',
-        lastFourDigits: '4242',
-        expirationMonth: 12,
-        expirationYear: 19,
-      });
-    });
-
     it('should show the entered credit card details', () => {
       expect(
         wrapper
@@ -71,7 +65,7 @@ describe('Payment Method', () => {
     });
 
     it('should show the entered credit card expiration date', () => {
-      expect(wrapper.find('.js-summary-line-2').text()).toEqual('Exp 12/19');
+      expect(wrapper.find('.js-summary-line-2').text()).toEqual('Exp 12/09');
     });
   });
 });

ee/spec/frontend/subscriptions/new/store/actions_spec.js

@@ -12,6 +12,14 @@ constants.STEPS = ['firstStep', 'secondStep'];
 let mock;
 
 describe('Subscriptions Actions', () => {
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
   describe('activateStep', () => {
     it('set the currentStep to the provided value', done => {
       testAction(
@@ -110,14 +118,6 @@ describe('Subscriptions Actions', () => {
   });
 
   describe('fetchCountries', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('calls fetchCountriesSuccess with the returned data on success', done => {
       mock.onGet(constants.COUNTRIES_URL).replyOnce(200, ['Netherlands', 'NL']);
 
@@ -172,14 +172,6 @@ describe('Subscriptions Actions', () => {
   });
 
   describe('fetchStates', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('calls resetStates and fetchStatesSuccess with the returned data on success', done => {
       mock
         .onGet(constants.STATES_URL, { params: { country: 'NL' } })
@@ -342,15 +334,20 @@ describe('Subscriptions Actions', () => {
     });
   });
 
-  describe('fetchPaymentFormParams', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
+  describe('startLoadingZuoraScript', () => {
+    it('updates isLoadingPaymentMethod to true', done => {
+      testAction(
+        actions.startLoadingZuoraScript,
+        undefined,
+        {},
+        [{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: true }],
+        [],
+        done,
+      );
     });
+  });
 
+  describe('fetchPaymentFormParams', () => {
     it('fetches paymentFormParams and calls fetchPaymentFormParamsSuccess with the returned data on success', done => {
       mock
         .onGet(constants.PAYMENT_FORM_URL, { params: { id: constants.PAYMENT_FORM_ID } })
@@ -420,14 +417,27 @@ describe('Subscriptions Actions', () => {
     });
   });
 
+  describe('zuoraIframeRendered', () => {
+    it('updates isLoadingPaymentMethod to false', done => {
+      testAction(
+        actions.zuoraIframeRendered,
+        undefined,
+        {},
+        [{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('paymentFormSubmitted', () => {
     describe('on success', () => {
-      it('calls paymentFormSubmittedSuccess with the refID from the response', done => {
+      it('calls paymentFormSubmittedSuccess with the refID from the response and updates isLoadingPaymentMethod to true', done => {
         testAction(
           actions.paymentFormSubmitted,
           { success: true, refId: 'id' },
           {},
-          [],
+          [{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: true }],
           [{ type: 'paymentFormSubmittedSuccess', payload: 'id' }],
           done,
         );
@@ -480,15 +490,7 @@ describe('Subscriptions Actions', () => {
   });
 
   describe('fetchPaymentMethodDetails', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
-    });
-
-    it('fetches paymentMethodDetails and calls fetchPaymentMethodDetailsSuccess with the returned data on success', done => {
+    it('fetches paymentMethodDetails and calls fetchPaymentMethodDetailsSuccess with the returned data on success and updates isLoadingPaymentMethod to false', done => {
       mock
         .onGet(constants.PAYMENT_METHOD_URL, { params: { id: 'paymentMethodId' } })
         .replyOnce(200, { token: 'x' });
@@ -497,20 +499,20 @@ describe('Subscriptions Actions', () => {
         actions.fetchPaymentMethodDetails,
         null,
         { paymentMethodId: 'paymentMethodId' },
-        [],
+        [{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
         [{ type: 'fetchPaymentMethodDetailsSuccess', payload: { token: 'x' } }],
         done,
       );
     });
 
-    it('calls fetchPaymentMethodDetailsError on error', done => {
+    it('calls fetchPaymentMethodDetailsError on error and updates isLoadingPaymentMethod to false', done => {
       mock.onGet(constants.PAYMENT_METHOD_URL).replyOnce(500);
 
       testAction(
         actions.fetchPaymentMethodDetails,
         null,
         {},
-        [],
+        [{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
         [{ type: 'fetchPaymentMethodDetailsError' }],
         done,
       );
@@ -523,7 +525,7 @@ describe('Subscriptions Actions', () => {
         actions.fetchPaymentMethodDetailsSuccess,
         {
           credit_card_type: 'cc_type',
-          credit_card_mask_number: '4242424242424242',
+          credit_card_mask_number: '************4242',
           credit_card_expiration_month: 12,
           credit_card_expiration_year: 2019,
         },
@@ -532,10 +534,10 @@ describe('Subscriptions Actions', () => {
           {
             type: 'UPDATE_CREDIT_CARD_DETAILS',
             payload: {
-              cardType: 'cc_type',
-              lastFourDigits: '4242',
-              expirationMonth: 12,
-              expirationYear: 19,
+              credit_card_type: 'cc_type',
+              credit_card_mask_number: '************4242',
+              credit_card_expiration_month: 12,
+              credit_card_expiration_year: 2019,
             },
           },
         ],

ee/spec/frontend/subscriptions/new/store/mutations_spec.js

@@ -9,6 +9,7 @@ const state = () => ({
   organizationName: 'name',
   countryOptions: [],
   stateOptions: [],
+  isLoadingPaymentMethod: false,
 });
 
 let stateCopy;
@@ -19,20 +20,24 @@ beforeEach(() => {
 
 describe('ee/subscriptions/new/store/mutation', () => {
   describe.each`
-    mutation                                | value                                 | stateProp
-    ${types.UPDATE_CURRENT_STEP}            | ${'secondStep'}                       | ${'currentStep'}
-    ${types.UPDATE_SELECTED_PLAN}           | ${'secondPlan'}                       | ${'selectedPlan'}
-    ${types.UPDATE_IS_SETUP_FOR_COMPANY}    | ${false}                              | ${'isSetupForCompany'}
-    ${types.UPDATE_NUMBER_OF_USERS}         | ${2}                                  | ${'numberOfUsers'}
-    ${types.UPDATE_ORGANIZATION_NAME}       | ${'new name'}                         | ${'organizationName'}
-    ${types.UPDATE_COUNTRY_OPTIONS}         | ${[{ text: 'country', value: 'id' }]} | ${'countryOptions'}
-    ${types.UPDATE_STATE_OPTIONS}           | ${[{ text: 'state', value: 'id' }]}   | ${'stateOptions'}
-    ${types.UPDATE_COUNTRY}                 | ${'NL'}                               | ${'country'}
-    ${types.UPDATE_STREET_ADDRESS_LINE_ONE} | ${'streetAddressLine1'}               | ${'streetAddressLine1'}
-    ${types.UPDATE_STREET_ADDRESS_LINE_TWO} | ${'streetAddressLine2'}               | ${'streetAddressLine2'}
-    ${types.UPDATE_CITY}                    | ${'city'}                             | ${'city'}
-    ${types.UPDATE_COUNTRY_STATE}           | ${'countryState'}                     | ${'countryState'}
-    ${types.UPDATE_ZIP_CODE}                | ${'zipCode'}                          | ${'zipCode'}
+    mutation                                  | value                                 | stateProp
+    ${types.UPDATE_CURRENT_STEP}              | ${'secondStep'}                       | ${'currentStep'}
+    ${types.UPDATE_SELECTED_PLAN}             | ${'secondPlan'}                       | ${'selectedPlan'}
+    ${types.UPDATE_IS_SETUP_FOR_COMPANY}      | ${false}                              | ${'isSetupForCompany'}
+    ${types.UPDATE_NUMBER_OF_USERS}           | ${2}                                  | ${'numberOfUsers'}
+    ${types.UPDATE_ORGANIZATION_NAME}         | ${'new name'}                         | ${'organizationName'}
+    ${types.UPDATE_COUNTRY_OPTIONS}           | ${[{ text: 'country', value: 'id' }]} | ${'countryOptions'}
+    ${types.UPDATE_STATE_OPTIONS}             | ${[{ text: 'state', value: 'id' }]}   | ${'stateOptions'}
+    ${types.UPDATE_COUNTRY}                   | ${'NL'}                               | ${'country'}
+    ${types.UPDATE_STREET_ADDRESS_LINE_ONE}   | ${'streetAddressLine1'}               | ${'streetAddressLine1'}
+    ${types.UPDATE_STREET_ADDRESS_LINE_TWO}   | ${'streetAddressLine2'}               | ${'streetAddressLine2'}
+    ${types.UPDATE_CITY}                      | ${'city'}                             | ${'city'}
+    ${types.UPDATE_COUNTRY_STATE}             | ${'countryState'}                     | ${'countryState'}
+    ${types.UPDATE_ZIP_CODE}                  | ${'zipCode'}                          | ${'zipCode'}
+    ${types.UPDATE_PAYMENT_FORM_PARAMS}       | ${{ token: 'x' }}                     | ${'paymentFormParams'}
+    ${types.UPDATE_PAYMENT_METHOD_ID}         | ${'paymentMethodId'}                  | ${'paymentMethodId'}
+    ${types.UPDATE_CREDIT_CARD_DETAILS}       | ${{ type: 'x' }}                      | ${'creditCardDetails'}
+    ${types.UPDATE_IS_LOADING_PAYMENT_METHOD} | ${true}                               | ${'isLoadingPaymentMethod'}
   `('$mutation', ({ mutation, value, stateProp }) => {
     it(`should set the ${stateProp} to the given value`, () => {
       expect(stateCopy[stateProp]).not.toEqual(value);
@@ -43,27 +48,3 @@ describe('ee/subscriptions/new/store/mutation', () => {
     });
   });
 });
-
-describe('UPDATE_PAYMENT_FORM_PARAMS', () => {
-  it('should set the paymentFormParams to the given paymentFormParams', () => {
-    mutations[types.UPDATE_PAYMENT_FORM_PARAMS](stateCopy, { token: 'x' });
-
-    expect(stateCopy.paymentFormParams).toEqual({ token: 'x' });
-  });
-});
-
-describe('UPDATE_PAYMENT_METHOD_ID', () => {
-  it('should set the paymentMethodId to the given paymentMethodId', () => {
-    mutations[types.UPDATE_PAYMENT_METHOD_ID](stateCopy, 'paymentMethodId');
-
-    expect(stateCopy.paymentMethodId).toEqual('paymentMethodId');
-  });
-});
-
-describe('UPDATE_CREDIT_CARD_DETAILS', () => {
-  it('should set the creditCardDetails to the given creditCardDetails', () => {
-    mutations[types.UPDATE_CREDIT_CARD_DETAILS](stateCopy, { type: 'x' });
-
-    expect(stateCopy.creditCardDetails).toEqual({ type: 'x' });
-  });
-});

ee/spec/frontend/subscriptions/new/store/state_spec.js

@@ -149,4 +149,8 @@ describe('projectsSelector default state', () => {
   it('sets the creditCardDetails to an empty object', () => {
     expect(state.creditCardDetails).toEqual({});
   });
+
+  it('sets isLoadingPaymentMethod to false', () => {
+    expect(state.isLoadingPaymentMethod).toEqual(false);
+  });
 });