diff --git a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.stories.js b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..95d5afcab152eae04df16374755b71a7410ef843
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.stories.js
@@ -0,0 +1,18 @@
+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,
+};
diff --git a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.vue b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.vue
index 2a57f693b554bead906ade1e168582797b465e56..dd75cd61252c61441b31f7e7d0a589f8fc5e1a31 100644
--- a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.vue
+++ b/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>
diff --git a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.stories.js b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..26476e6cb790d57e6855d1da1d03d76163db8b79
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.stories.js
@@ -0,0 +1,18 @@
+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,
+};
diff --git a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.vue b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.vue
index bd03ec72d0733fde1d202d68355ce73026b72e86..426e48146a85a30faa6493abd945c8fe92d2cfdc 100644
--- a/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.vue
+++ b/ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.vue
@@ -1,37 +1,11 @@
<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>
diff --git a/ee/spec/frontend/vue_shared/purchase_flow/components/checkout/billing_account_details_spec.js b/ee/spec/frontend/vue_shared/purchase_flow/components/checkout/billing_account_details_spec.js
index fc7ef7b5b6d3c412cc6b06bd9812da5597562ff7..0467fbab3fa7a01a1b094a8d6d6537874eb75b63 100644
--- a/ee/spec/frontend/vue_shared/purchase_flow/components/checkout/billing_account_details_spec.js
+++ b/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);
});
});
diff --git a/ee/spec/frontend/vue_shared/purchase_flow/components/company_information_spec.js b/ee/spec/frontend/vue_shared/purchase_flow/components/company_information_spec.js
index b9400cafa37dceeba0e5e94ff6a86b231b5f143a..8c0e68e035f77c3775e7cb5a83a260c9c0bd6a2f 100644
--- a/ee/spec/frontend/vue_shared/purchase_flow/components/company_information_spec.js
+++ b/ee/spec/frontend/vue_shared/purchase_flow/components/company_information_spec.js
@@ -1,39 +1,18 @@
-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);
- });
- });
});