Merge branch '433384-billing_account_details_stories' into 'master'

Improve billing account details inheritance

See merge request !142256



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Co-authored-by: lcallahan <lmeckley@gitlab.com>

ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.stories.js

+import { mockBillingAccount } from 'ee_jest/subscriptions/mock_data';
+import BillingAccountDetails from './billing_account_details.vue';
+
+export default {
+  component: BillingAccountDetails,
+  title: 'ee/vue_shared/purchase_flow/components/checkout/billing_account_details',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { BillingAccountDetails },
+  props: Object.keys(argTypes),
+  template: '<billing-account-details v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  billingAccount: mockBillingAccount,
+};

ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.vue

@@ -8,11 +8,7 @@ export default {
     ContactBillingAddress,
   },
   props: {
-    soldToContact: {
-      type: Object,
-      required: true,
-    },
-    billToContact: {
+    billingAccount: {
       type: Object,
       required: true,
     },
@@ -21,9 +17,9 @@ export default {
 </script>
 <template>
   <div>
-    <contact-billing-address :is-sold-to-contact="true" :contact="soldToContact" />
-    <contact-billing-address :is-sold-to-contact="false" :contact="billToContact" />
+    <contact-billing-address :is-sold-to-contact="true" :contact="billingAccount.soldToContact" />
+    <contact-billing-address :is-sold-to-contact="false" :contact="billingAccount.billToContact" />
 
-    <company-information />
+    <company-information :billing-account="billingAccount" />
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.stories.js

+import { mockBillingAccount } from 'ee_jest/subscriptions/mock_data';
+import CompanyInformation from './company_information.vue';
+
+export default {
+  component: CompanyInformation,
+  title: 'ee/vue_shared/purchase_flow/components/company_information',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { CompanyInformation },
+  props: Object.keys(argTypes),
+  template: '<company-information v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  billingAccount: mockBillingAccount,
+};

ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.vue

 <script>
 import { s__ } from '~/locale';
-import getBillingAccountQuery from 'ee/vue_shared/purchase_flow/graphql/queries/get_billing_account.customer.query.graphql';
-import { CUSTOMERSDOT_CLIENT } from 'ee/subscriptions/buy_addons_shared/constants';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import { logError } from '~/lib/logger';
 
 export default {
-  data() {
-    return {
-      billingAccount: null,
-    };
-  },
-  apollo: {
+  props: {
     billingAccount: {
-      query: getBillingAccountQuery,
-      client: CUSTOMERSDOT_CLIENT,
-      skip() {
-        return !gon.features?.keyContactsManagement;
-      },
-      error(error) {
-        this.handleError(error);
-      },
-    },
-  },
-  computed: {
-    shouldShowInformation() {
-      return Boolean(this.billingAccount?.zuoraAccountName);
-    },
-  },
-  methods: {
-    handleError(error) {
-      Sentry.captureException(error);
-      logError(error);
+      required: true,
+      type: Object,
     },
   },
   i18n: {
@@ -41,7 +15,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="shouldShowInformation" class="gl-mb-5" data-testid="billing-account-company-wrapper">
+  <div data-testid="billing-account-company-wrapper">
     <h6>{{ $options.i18n.title }}</h6>
 
     <div data-testid="billing-account-company-name">{{ billingAccount.zuoraAccountName }}</div>

ee/spec/frontend/vue_shared/purchase_flow/components/checkout/billing_account_details_spec.js

@@ -11,13 +11,11 @@ describe('Billing account details', () => {
   const findCompanyInformation = () => wrapper.findComponent(CompanyInformation);
 
   const { soldToContact, billToContact } = mockBillingAccount;
-  const initialProps = {
-    soldToContact,
-    billToContact,
-  };
 
   const createComponent = () => {
-    wrapper = shallowMount(BillingAccountDetails, { propsData: initialProps });
+    wrapper = shallowMount(BillingAccountDetails, {
+      propsData: { billingAccount: mockBillingAccount },
+    });
   };
 
   beforeEach(() => {
@@ -42,7 +40,7 @@ describe('Billing account details', () => {
     });
   });
 
-  it('renders CompanyInformation component', () => {
+  it('renders company information', () => {
     expect(findCompanyInformation().exists()).toBe(true);
   });
 });

ee/spec/frontend/vue_shared/purchase_flow/components/company_information_spec.js

-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
 import CompanyInformation from 'ee/vue_shared/purchase_flow/components/company_information.vue';
 import { mockBillingAccount } from 'ee_jest/subscriptions/mock_data';
-import waitForPromises from 'helpers/wait_for_promises';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import { logError } from '~/lib/logger';
-import { CUSTOMERSDOT_CLIENT } from 'ee/subscriptions/buy_addons_shared/constants';
-import createMockApollo, { createMockClient } from 'helpers/mock_apollo_helper';
-import getBillingAccountQuery from 'ee/vue_shared/purchase_flow/graphql/queries/get_billing_account.customer.query.graphql';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
-Vue.use(VueApollo);
 jest.mock('~/lib/logger');
 
 describe('Company information', () => {
   let wrapper;
-  let apolloProvider;
 
   const mockBillingAccountWithoutTaxId = { ...mockBillingAccount, vatFieldVisible: false };
 
-  const createComponent = async (
-    billingAccountFn = jest
-      .fn()
-      .mockResolvedValue({ data: { billingAccount: mockBillingAccount } }),
-  ) => {
-    apolloProvider = createMockApollo();
-
-    apolloProvider.clients[CUSTOMERSDOT_CLIENT] = createMockClient([
-      [getBillingAccountQuery, billingAccountFn],
-    ]);
-
+  const createComponent = (propsData = { billingAccount: mockBillingAccount }) => {
     wrapper = shallowMountExtended(CompanyInformation, {
-      apolloProvider,
+      propsData,
     });
-    await waitForPromises();
   };
 
   const findCompanyInformationContent = () =>
@@ -42,16 +21,14 @@ describe('Company information', () => {
   const findCompanyName = () => wrapper.findByTestId('billing-account-company-name');
   const findCompanyTaxId = () => wrapper.findByTestId('billing-account-tax-id');
 
-  describe('when getBillingAccountQuery returns a valid billing account', () => {
+  describe('with a valid billing account', () => {
     describe.each`
       testCaseName        | billingAccount                    | showsTaxId
       ${'with tax ID'}    | ${mockBillingAccount}             | ${true}
       ${'without tax ID'} | ${mockBillingAccountWithoutTaxId} | ${false}
     `('$testCaseName', ({ billingAccount, showsTaxId }) => {
-      beforeEach(async () => {
-        gon.features = { keyContactsManagement: true };
-
-        await createComponent(jest.fn().mockResolvedValue({ data: { billingAccount } }));
+      beforeEach(() => {
+        createComponent({ billingAccount });
       });
 
       it('shows company information content', () => {
@@ -71,50 +48,4 @@ describe('Company information', () => {
       });
     });
   });
-
-  describe('when getBillingAccountQuery does not return a valid billing account', () => {
-    beforeEach(async () => {
-      gon.features = { keyContactsManagement: true };
-      await createComponent(jest.fn().mockResolvedValue({ data: { billingAccount: null } }));
-    });
-
-    it('does not show company information content', () => {
-      expect(findCompanyInformationContent().exists()).toBe(false);
-    });
-  });
-
-  describe('when keyContactsManagement flag is false', () => {
-    beforeEach(async () => {
-      gon.features = { keyContactsManagement: false };
-      await createComponent();
-    });
-
-    it('does not show company information content', () => {
-      expect(findCompanyInformationContent().exists()).toBe(false);
-    });
-  });
-
-  describe('when getBillingAccountQuery responds with error', () => {
-    const error = new Error('oh no!');
-
-    beforeEach(async () => {
-      gon.features = { keyContactsManagement: true };
-      jest.spyOn(Sentry, 'captureException');
-
-      await createComponent(jest.fn().mockRejectedValue(error));
-      await waitForPromises();
-    });
-
-    it('logs to Sentry', () => {
-      expect(Sentry.captureException).toHaveBeenCalledWith(error);
-    });
-
-    it('logs the error to console', () => {
-      expect(logError).toHaveBeenCalledWith(error);
-    });
-
-    it('does not show company information content', () => {
-      expect(findCompanyInformationContent().exists()).toBe(false);
-    });
-  });
 });