Add Jest specs

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { pick } from 'lodash';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import Api from 'ee/api';
 import {
   ERROR_LOADING_PAYMENT_FORM,
@@ -9,10 +8,11 @@ import {
   ZUORA_IFRAME_OVERRIDE_PARAMS,
   PAYMENT_FORM_ID,
 } from 'ee/subscriptions/constants';
-import createFlash from '~/flash';
+import updateStateMutation from 'ee/subscriptions/graphql/mutations/update_state.mutation.graphql';
 import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
 import activateNextStepMutation from 'ee/vue_shared/purchase_flow/graphql/mutations/activate_next_step.mutation.graphql';
-import updateStateMutation from 'ee/subscriptions/graphql/mutations/update_state.mutation.graphql';
+import createFlash from '~/flash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -46,9 +46,6 @@ export default {
   mounted() {
     this.loadZuoraScript();
   },
-  beforeDestroy() {
-    document.head.removeChild(this.zuoraScriptEl);
-  },
   methods: {
     zuoraIframeRendered() {
       this.isLoading = false;

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

+import { mount, createLocalVue } from '@vue/test-utils';
+import { merge } from 'lodash';
+import VueApollo from 'vue-apollo';
+import PaymentMethod from 'ee/subscriptions/buy_minutes/components/checkout/payment_method.vue';
+import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { STEPS } from 'ee/subscriptions/constants';
+import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
+import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
+import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('Payment Method', () => {
+  let wrapper;
+
+  const createComponent = (apolloLocalState = {}) => {
+    const apolloProvider = createMockApolloProvider(STEPS, STEPS[2], {
+      ...resolvers,
+    });
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: stateQuery,
+      data: merge({}, initialStateData, apolloLocalState),
+    });
+
+    return mount(PaymentMethod, {
+      localVue,
+      apolloProvider,
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = createComponent({
+      paymentMethod: {
+        id: 'paymentMethodId',
+        creditCardType: 'Visa',
+        creditCardMaskNumber: '************4242',
+        creditCardExpirationMonth: 12,
+        creditCardExpirationYear: 2009,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('validations', () => {
+    const isStepValid = () => wrapper.find(Step).props('isValid');
+
+    it('should be valid when paymentMethodId is defined', () => {
+      expect(isStepValid()).toBe(true);
+    });
+
+    it('should be invalid when paymentMethodId is undefined', () => {
+      wrapper = createComponent({
+        paymentMethod: { id: null },
+      });
+
+      expect(isStepValid()).toBe(false);
+    });
+  });
+
+  describe('showing the summary', () => {
+    it('should show the entered credit card details', () => {
+      expect(wrapper.find('.js-summary-line-1').text()).toMatchInterpolatedText(
+        'Visa ending in 4242',
+      );
+    });
+
+    it('should show the entered credit card expiration date', () => {
+      expect(wrapper.find('.js-summary-line-2').text()).toBe('Exp 12/09');
+    });
+  });
+});

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

+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { merge } from 'lodash';
+import VueApollo from 'vue-apollo';
+import Zuora from 'ee/subscriptions/buy_minutes/components/checkout/zuora.vue';
+import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { STEPS } from 'ee/subscriptions/constants';
+import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
+import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';
+import axios from '~/lib/utils/axios_utils';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('Zuora', () => {
+  let axiosMock;
+  let wrapper;
+
+  const createComponent = (props = {}, data = {}, apolloLocalState = {}) => {
+    const apolloProvider = createMockApolloProvider(STEPS, STEPS[1], {
+      ...resolvers,
+    });
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: stateQuery,
+      data: merge({}, initialStateData, apolloLocalState),
+    });
+
+    return shallowMount(Zuora, {
+      propsData: {
+        active: true,
+        ...props,
+      },
+      data() {
+        return { ...data };
+      },
+      localVue,
+    });
+  };
+
+  const findLoading = () => wrapper.find(GlLoadingIcon);
+  const findZuoraPayment = () => wrapper.find('#zuora_payment');
+
+  beforeEach(() => {
+    window.Z = {
+      runAfterRender(fn) {
+        return Promise.resolve().then(fn);
+      },
+      render() {},
+    };
+
+    axiosMock = new AxiosMockAdapter(axios);
+    axiosMock.onGet(`/-/subscriptions/payment_form`).reply(200, {});
+  });
+
+  afterEach(() => {
+    delete window.Z;
+    wrapper.destroy();
+  });
+
+  describe('when active', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({}, { isLoading: false });
+    });
+
+    it('shows the loading icon', () => {
+      expect(findLoading().exists()).toBe(true);
+    });
+
+    it('the zuora_payment selector should be hidden', () => {
+      expect(findZuoraPayment().isVisible()).toBe(false);
+    });
+
+    describe('when toggling the loading indicator', () => {
+      beforeEach(() => {
+        wrapper = createComponent({}, { isLoading: true });
+        wrapper.vm.zuoraScriptEl.onload();
+      });
+
+      it('shows the loading icon', () => {
+        expect(findLoading().exists()).toBe(true);
+      });
+
+      it('the zuora_payment selector should not be visible', () => {
+        expect(findZuoraPayment().isVisible()).toBe(false);
+      });
+    });
+  });
+
+  describe('when not active', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ active: false });
+    });
+
+    it('the zuora_payment selector should not be visible', () => {
+      expect(findZuoraPayment().isVisible()).toBe(false);
+    });
+  });
+});