Clean zuora component spec

- New store in beforeEach
- Only one component instance
- Only testing component interface
Signed-off-by: Alex Buijs <abuijs@gitlab.com>

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

@@ -9,26 +9,32 @@ describe('Zuora', () => {
   const localVue = createLocalVue();
   localVue.use(Vuex);
 
+  let store;
   let wrapper;
 
-  const store = createStore();
+  const methodMocks = {
+    loadZuoraScript: jest.fn(),
+    renderZuoraIframe: jest.fn(),
+  };
 
-  const createComponent = (opts = {}) => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(Component, {
+      propsData: {
+        active: true,
+        ...props,
+      },
       localVue,
       sync: false,
       store,
-      ...opts,
+      methods: methodMocks,
     });
   };
 
-  const methodMocks = {
-    loadZuoraScript: jest.fn(),
-    renderZuoraIframe: jest.fn(),
-  };
+  const findLoading = () => wrapper.find(GlLoadingIcon);
+  const findZuoraPayment = () => wrapper.find('#zuora_payment');
 
   beforeEach(() => {
-    createComponent({ methods: methodMocks, propsData: { active: true } });
+    store = createStore();
   });
 
   afterEach(() => {
@@ -37,75 +43,70 @@ describe('Zuora', () => {
 
   describe('mounted', () => {
     it('should call loadZuoraScript', () => {
+      createComponent();
+
       expect(methodMocks.loadZuoraScript).toHaveBeenCalled();
     });
   });
 
-  describe('when active and loading', () => {
-    it('the loading indicator should not be shown', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  describe('when active', () => {
+    beforeEach(() => {
+      createComponent();
     });
 
-    it('the zuora_payment selector should be visible', () => {
-      expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
+    it('shows the loading icon', () => {
+      expect(findLoading().exists()).toBe(true);
     });
-  });
 
-  describe('when active and not loading', () => {
-    beforeEach(() => {
-      wrapper.vm.toggleLoading();
+    it('the zuora_payment selector should not be visible', () => {
+      expect(findZuoraPayment().element.style.display).toEqual('none');
     });
 
-    it('the loading indicator should not be shown', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-    });
+    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 }) => {
+      beforeEach(() => {
+        store.commit(commitType, commitPayload);
 
-    it('the zuora_payment selector should be visible', () => {
-      expect(wrapper.find('#zuora_payment').element.style.display).toEqual('');
-    });
-  });
+        return localVue.nextTick();
+      });
 
-  describe('not active and not loading', () => {
-    beforeEach(() => {
-      createComponent({ methods: methodMocks, propsData: { active: false } });
-      wrapper.vm.toggleLoading();
-    });
+      it('does not show loading icon', () => {
+        expect(findLoading().exists()).toBe(false);
+      });
 
-    it('the zuora_payment selector should not be visible', () => {
-      expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
+      it('the zuora_payment selector should be visible', () => {
+        expect(findZuoraPayment().element.style.display).toEqual('');
+      });
     });
   });
 
-  describe('toggleLoading', () => {
-    let spy;
-
+  describe('when not active and not loading', () => {
     beforeEach(() => {
-      spy = jest.spyOn(wrapper.vm, 'toggleLoading');
-    });
-
-    afterEach(() => {
-      spy.mockClear();
-    });
+      createComponent({ active: false });
 
-    it('is called when the paymentMethodId is updated', () => {
       store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'foo');
 
-      return localVue.nextTick().then(() => {
-        expect(spy).toHaveBeenCalled();
-      });
+      return localVue.nextTick();
     });
 
-    it('is called when the creditCardDetails are updated', () => {
-      store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {});
+    it('does not show loading icon', () => {
+      expect(findLoading().exists()).toBe(false);
+    });
 
-      return localVue.nextTick().then(() => {
-        expect(spy).toHaveBeenCalled();
-      });
+    it('the zuora_payment selector should not be visible', () => {
+      expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
     });
   });
 
   describe('renderZuoraIframe', () => {
     it('is called when the paymentFormParams are updated', () => {
+      createComponent();
+
+      expect(methodMocks.renderZuoraIframe).not.toHaveBeenCalled();
+
       store.commit(types.UPDATE_PAYMENT_FORM_PARAMS, {});
 
       return localVue.nextTick().then(() => {