Commit fae78a06 authored by Savas Vedova's avatar Savas Vedova

Merge branch '346620-change-shared-addon-tests-to-accommodate-tests-for-minutes' into 'master'

Change shared addon component tests to accommodate tests for CI minutes

See merge request gitlab-org/gitlab!77920
parents 0b66f2f4 557c40b0
...@@ -30,31 +30,14 @@ import { mockStoragePlans } from 'ee_jest/subscriptions/mock_data'; ...@@ -30,31 +30,14 @@ import { mockStoragePlans } from 'ee_jest/subscriptions/mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(VueApollo); localVue.use(VueApollo);
describe('Buy Storage App', () => { describe('Buy Addons Shared App', () => {
let wrapper; let wrapper;
function createComponent(apolloProvider) { function createComponent(apolloProvider, propsData) {
wrapper = shallowMountExtended(App, { wrapper = shallowMountExtended(App, {
localVue, localVue,
apolloProvider, apolloProvider,
propsData: { propsData,
config: {
alertText: '',
formula: I18N_DETAILS_FORMULA,
formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
formulaTotal: I18N_STORAGE_FORMULA_TOTAL,
hasExpiration: true,
pricePerUnit: I18N_STORAGE_PRICE_PER_UNIT,
productLabel: I18N_STORAGE_PRODUCT_LABEL,
productUnit: I18N_STORAGE_PRODUCT_UNIT,
quantityPerPack: STORAGE_PER_PACK,
summaryTitle: i18nStorageSummaryTitle,
summaryTotal: I18N_STORAGE_SUMMARY_TOTAL,
title: I18N_STORAGE_TITLE,
tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
},
tags: [planTags.STORAGE_PLAN],
},
stubs: { stubs: {
Checkout, Checkout,
AddonPurchaseDetails, AddonPurchaseDetails,
...@@ -65,6 +48,24 @@ describe('Buy Storage App', () => { ...@@ -65,6 +48,24 @@ describe('Buy Storage App', () => {
return waitForPromises(); return waitForPromises();
} }
const STORAGE_ADDON_PROPS = {
config: {
alertText: '',
formula: I18N_DETAILS_FORMULA,
formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
formulaTotal: I18N_STORAGE_FORMULA_TOTAL,
hasExpiration: true,
pricePerUnit: I18N_STORAGE_PRICE_PER_UNIT,
productLabel: I18N_STORAGE_PRODUCT_LABEL,
productUnit: I18N_STORAGE_PRODUCT_UNIT,
quantityPerPack: STORAGE_PER_PACK,
summaryTitle: i18nStorageSummaryTitle,
summaryTotal: I18N_STORAGE_SUMMARY_TOTAL,
title: I18N_STORAGE_TITLE,
tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
},
tags: [planTags.STORAGE_PLAN],
};
const getStoragePlan = () => pick(mockStoragePlans[0], ['id', 'code', 'pricePerYear', 'name']); const getStoragePlan = () => pick(mockStoragePlans[0], ['id', 'code', 'pricePerYear', 'name']);
const findCheckout = () => wrapper.findComponent(Checkout); const findCheckout = () => wrapper.findComponent(Checkout);
const findOrderSummary = () => wrapper.findComponent(OrderSummary); const findOrderSummary = () => wrapper.findComponent(OrderSummary);
...@@ -79,120 +80,122 @@ describe('Buy Storage App', () => { ...@@ -79,120 +80,122 @@ describe('Buy Storage App', () => {
wrapper.destroy(); wrapper.destroy();
}); });
describe('when data is received', () => { describe('Storage', () => {
beforeEach(() => { describe('when data is received', () => {
const mockApollo = createMockApolloProvider(); beforeEach(() => {
return createComponent(mockApollo); const plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockStoragePlans } });
}); const mockApollo = createMockApolloProvider({ plansQueryMock });
return createComponent(mockApollo, STORAGE_ADDON_PROPS);
it('should display the root element', () => { });
expect(findRootElement().exists()).toBe(true);
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
});
it('provides the correct props to checkout', () => { it('should display the root element', () => {
expect(findCheckout().props()).toMatchObject({ expect(findRootElement().exists()).toBe(true);
plan: { ...getStoragePlan, isAddon: true }, expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
}); });
});
it('provides the correct props to order summary', () => { it('provides the correct props to checkout', () => {
expect(findOrderSummary().props()).toMatchObject({ expect(findCheckout().props()).toMatchObject({
plan: { ...getStoragePlan, isAddon: true }, plan: { ...getStoragePlan, isAddon: true },
title: I18N_STORAGE_TITLE, });
}); });
});
describe('and an error occurred', () => { it('provides the correct props to order summary', () => {
beforeEach(() => { expect(findOrderSummary().props()).toMatchObject({
findOrderSummary().vm.$emit('alertError', I18N_API_ERROR); plan: { ...getStoragePlan, isAddon: true },
title: I18N_STORAGE_TITLE,
});
}); });
it('shows the alert', () => { describe('and an error occurred', () => {
expect(findAlert().props()).toMatchObject({ beforeEach(() => {
dismissible: false, findOrderSummary().vm.$emit('alertError', I18N_API_ERROR);
variant: 'danger', });
it('shows the alert', () => {
expect(findAlert().props()).toMatchObject({
dismissible: false,
variant: 'danger',
});
expect(findAlert().text()).toBe(I18N_API_ERROR);
}); });
expect(findAlert().text()).toBe(I18N_API_ERROR);
}); });
}); });
});
describe('when data is not received', () => { describe('when data is not received', () => {
it('should display the GlEmptyState for empty data', async () => { it('should display the GlEmptyState for empty data', async () => {
const mockApollo = createMockApolloProvider({ const mockApollo = createMockApolloProvider({
plansQueryMock: jest.fn().mockResolvedValue({ data: null }), plansQueryMock: jest.fn().mockResolvedValue({ data: null }),
});
await createComponent(mockApollo, STORAGE_ADDON_PROPS);
expect(findRootElement().exists()).toBe(false);
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
}); });
await createComponent(mockApollo);
expect(findRootElement().exists()).toBe(false); it('should display the GlEmptyState for empty plans', async () => {
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true); const mockApollo = createMockApolloProvider({
}); plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: null } }),
});
await createComponent(mockApollo, STORAGE_ADDON_PROPS);
it('should display the GlEmptyState for empty plans', async () => { expect(findRootElement().exists()).toBe(false);
const mockApollo = createMockApolloProvider({ expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: null } }),
}); });
await createComponent(mockApollo);
expect(findRootElement().exists()).toBe(false); it('should display the GlEmptyState for plans data of wrong type', async () => {
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true); const mockApollo = createMockApolloProvider({
}); plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: {} } }),
});
await createComponent(mockApollo, STORAGE_ADDON_PROPS);
it('should display the GlEmptyState for plans data of wrong type', async () => { expect(findRootElement().exists()).toBe(false);
const mockApollo = createMockApolloProvider({ expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: {} } }),
}); });
await createComponent(mockApollo);
expect(findRootElement().exists()).toBe(false);
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
}); });
});
describe('when an error is received', () => { describe('when an error is received', () => {
it('should display the GlEmptyState', async () => { it('should display the GlEmptyState', async () => {
const mockApollo = createMockApolloProvider({ const mockApollo = createMockApolloProvider({
plansQueryMock: jest.fn().mockRejectedValue(new Error('An error happened!')), plansQueryMock: jest.fn().mockRejectedValue(new Error('An error happened!')),
}); });
await createComponent(mockApollo); await createComponent(mockApollo, STORAGE_ADDON_PROPS);
expect(findRootElement().exists()).toBe(false); expect(findRootElement().exists()).toBe(false);
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true); expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
});
}); });
});
describe('labels', () => { describe('labels', () => {
it('shows labels correctly for 1 pack', async () => { const plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockStoragePlans } });
const mockApollo = createMockApolloProvider({ it('shows labels correctly for 1 pack', async () => {
plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: mockStoragePlans } }), const mockApollo = createMockApolloProvider({ plansQueryMock });
await createComponent(mockApollo, STORAGE_ADDON_PROPS);
expect(findQuantityText().text()).toMatchInterpolatedText(
'x 10 GB per pack = 10 GB of storage',
);
expect(findSummaryLabel().text()).toBe('1 storage pack');
expect(findSummaryTotal().text()).toBe('Total storage: 10 GB');
expect(findPriceLabel().text()).toBe('$60 per 10 GB storage pack per year');
}); });
await createComponent(mockApollo);
expect(findQuantityText().text()).toMatchInterpolatedText(
'x 10 GB per pack = 10 GB of storage',
);
expect(findSummaryLabel().text()).toBe('1 storage pack');
expect(findSummaryTotal().text()).toBe('Total storage: 10 GB');
expect(findPriceLabel().text()).toBe('$60 per 10 GB storage pack per year');
});
it('shows labels correctly for 2 packs', async () => { it('shows labels correctly for 2 packs', async () => {
const mockApollo = createMockApolloProvider({}, { quantity: 2 }); const mockApollo = createMockApolloProvider({ plansQueryMock }, { quantity: 2 });
await createComponent(mockApollo); await createComponent(mockApollo, STORAGE_ADDON_PROPS);
expect(findQuantityText().text()).toMatchInterpolatedText( expect(findQuantityText().text()).toMatchInterpolatedText(
'x 10 GB per pack = 20 GB of storage', 'x 10 GB per pack = 20 GB of storage',
); );
expect(findSummaryLabel().text()).toBe('2 storage packs'); expect(findSummaryLabel().text()).toBe('2 storage packs');
expect(findSummaryTotal().text()).toBe('Total storage: 20 GB'); expect(findSummaryTotal().text()).toBe('Total storage: 20 GB');
}); });
it('does not show labels if input is invalid', async () => { it('does not show labels if input is invalid', async () => {
const mockApollo = createMockApolloProvider({}, { quantity: -1 }); const mockApollo = createMockApolloProvider({ plansQueryMock }, { quantity: -1 });
await createComponent(mockApollo); await createComponent(mockApollo, STORAGE_ADDON_PROPS);
expect(findQuantityText().text()).toMatchInterpolatedText('x 10 GB per pack'); expect(findQuantityText().text()).toMatchInterpolatedText('x 10 GB per pack');
});
}); });
}); });
}); });
...@@ -4,15 +4,11 @@ import plansQuery from 'ee/subscriptions/graphql/queries/plans.customer.query.gr ...@@ -4,15 +4,11 @@ import plansQuery from 'ee/subscriptions/graphql/queries/plans.customer.query.gr
import orderPreviewQuery from 'ee/subscriptions/graphql/queries/order_preview.customer.query.graphql'; import orderPreviewQuery from 'ee/subscriptions/graphql/queries/order_preview.customer.query.graphql';
import { createMockClient } from 'helpers/mock_apollo_helper'; import { createMockClient } from 'helpers/mock_apollo_helper';
import { CUSTOMERSDOT_CLIENT } from 'ee/subscriptions/buy_addons_shared/constants'; import { CUSTOMERSDOT_CLIENT } from 'ee/subscriptions/buy_addons_shared/constants';
import { import { mockDefaultCache, mockOrderPreview } from 'ee_jest/subscriptions/mock_data';
mockCiMinutesPlans,
mockDefaultCache,
mockOrderPreview,
} from 'ee_jest/subscriptions/mock_data';
export function createMockApolloProvider(mockResponses = {}, dataset = {}) { export function createMockApolloProvider(mockResponses = {}, dataset = {}) {
const { const {
plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockCiMinutesPlans } }), plansQueryMock,
orderPreviewQueryMock = jest orderPreviewQueryMock = jest
.fn() .fn()
.mockResolvedValue({ data: { orderPreview: mockOrderPreview } }), .mockResolvedValue({ data: { orderPreview: mockOrderPreview } }),
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment