Merge branch '346620-snapshot-tests-for-storage-and-ci-minutes' into 'master'

Added snapshot tests for CI Minutes & Storage

See merge request gitlab-org/gitlab!78032

ee/spec/frontend/subscriptions/buy_addons_shared/__snapshots__/app_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buy Addons Shared App CI Minutes labels does not show labels if input is invalid 1`] = `
+"Checkout 
+      CI minute packs are only used after you've used your subscription's monthly quota. The additional minutes will roll over month to month and are valid for one year.
+     
+      CI minute pack
+      
+            x 1,000 minutes per pack
+            
+              -1 CI minute packs
+             Total minutes: -1,000     Gitlab Org's CI minutes 
+          -
+         
+      CI minutes pack
+       
+      -
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        -
+        – Total 
+      -
+     
+      Gitlab Org's CI minutes
+     
+      CI minutes pack
+       
+      -
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        -
+        – Total 
+      -"
+`;
+
+exports[`Buy Addons Shared App CI Minutes labels shows labels correctly for 1 pack 1`] = `
+"Checkout 
+      CI minute packs are only used after you've used your subscription's monthly quota. The additional minutes will roll over month to month and are valid for one year.
+     
+      CI minute pack
+      
+            x 1,000 minutes per pack =
+            1,000 CI minutes
+              1 CI minute pack
+             Total minutes: 1,000     Gitlab Org's CI minutes 
+          $10
+         
+      CI minutes pack
+      (x1) 
+      $10
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        $10
+        – Total 
+      $10
+     
+      Gitlab Org's CI minutes
+     
+      CI minutes pack
+      (x1) 
+      $10
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        $10
+        – Total 
+      $10"
+`;
+
+exports[`Buy Addons Shared App CI Minutes labels shows labels correctly for 2 packs 1`] = `
+"Checkout 
+      CI minute packs are only used after you've used your subscription's monthly quota. The additional minutes will roll over month to month and are valid for one year.
+     
+      CI minute pack
+      
+            x 1,000 minutes per pack =
+            2,000 CI minutes
+              2 CI minute packs
+             Total minutes: 2,000     Gitlab Org's CI minutes 
+          $20
+         
+      CI minutes pack
+      (x2) 
+      $20
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        $20
+        – Total 
+      $20
+     
+      Gitlab Org's CI minutes
+     
+      CI minutes pack
+      (x2) 
+      $20
+     
+        $10 per pack of 1,000 minutes
+        Subtotal 
+        $20
+        – Total 
+      $20"
+`;
+
+exports[`Buy Addons Shared App Storage labels does not show labels if input is invalid 1`] = `
+"Checkout  
+      Storage packs
+      
+            x 10 GB per pack
+            
+              -1 storage packs
+             Total storage: -10 GB     Gitlab Org's storage subscription 
+          -
+         
+      Storage pack
+       
+      -
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        -
+        – Total 
+      -
+     
+      Gitlab Org's storage subscription
+     
+      Storage pack
+       
+      -
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        -
+        – Total 
+      -"
+`;
+
+exports[`Buy Addons Shared App Storage labels shows labels correctly for 1 pack 1`] = `
+"Checkout  
+      Storage packs
+      
+            x 10 GB per pack =
+            10 GB of storage
+              1 storage pack
+             Total storage: 10 GB     Gitlab Org's storage subscription 
+          $59.67
+         
+      Storage pack
+      (x1) 
+      $59.67
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        $59.67
+        – Total 
+      $59.67
+     
+      Gitlab Org's storage subscription
+     
+      Storage pack
+      (x1) 
+      $59.67
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        $59.67
+        – Total 
+      $59.67"
+`;
+
+exports[`Buy Addons Shared App Storage labels shows labels correctly for 2 packs 1`] = `
+"Checkout  
+      Storage packs
+      
+            x 10 GB per pack =
+            20 GB of storage
+              2 storage packs
+             Total storage: 20 GB     Gitlab Org's storage subscription 
+          $59.67
+         
+      Storage pack
+      (x2) 
+      $59.67
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        $59.67
+        – Total 
+      $59.67
+     
+      Gitlab Org's storage subscription
+     
+      Storage pack
+      (x2) 
+      $59.67
+     
+        $60 per 10 GB storage pack per year
+       
+      Jul 6, 2020 - Dec 15, 2022
+       Subtotal 
+        $59.67
+        – Total 
+      $59.67"
+`;

ee/spec/frontend/subscriptions/buy_addons_shared/app_spec.js

@@ -3,6 +3,15 @@ import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { pick } from 'lodash';
 import {
+  CI_MINUTES_PER_PACK,
+  I18N_CI_MINUTES_PRICE_PER_UNIT,
+  I18N_CI_MINUTES_PRODUCT_LABEL,
+  I18N_CI_MINUTES_PRODUCT_UNIT,
+  I18N_CI_MINUTES_FORMULA_TOTAL,
+  i18nCIMinutesSummaryTitle,
+  I18N_CI_MINUTES_SUMMARY_TOTAL,
+  I18N_CI_MINUTES_ALERT_TEXT,
+  I18N_CI_MINUTES_TITLE,
   I18N_STORAGE_PRODUCT_LABEL,
   I18N_STORAGE_PRODUCT_UNIT,
   I18N_DETAILS_FORMULA,
@@ -25,7 +34,7 @@ import App from 'ee/subscriptions/buy_addons_shared/components/app.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockApolloProvider } from 'ee_jest/subscriptions/spec_helper';
-import { mockStoragePlans } from 'ee_jest/subscriptions/mock_data';
+import { mockCiMinutesPlans, mockStoragePlans } from 'ee_jest/subscriptions/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -66,10 +75,31 @@ describe('Buy Addons Shared App', () => {
     },
     tags: [planTags.STORAGE_PLAN],
   };
+  const CI_MINUTES_ADDON_PROPS = {
+    config: {
+      alertText: I18N_CI_MINUTES_ALERT_TEXT,
+      formula: I18N_DETAILS_FORMULA,
+      formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
+      formulaTotal: I18N_CI_MINUTES_FORMULA_TOTAL,
+      hasExpiration: false,
+      pricePerUnit: I18N_CI_MINUTES_PRICE_PER_UNIT,
+      productLabel: I18N_CI_MINUTES_PRODUCT_LABEL,
+      productUnit: I18N_CI_MINUTES_PRODUCT_UNIT,
+      quantityPerPack: CI_MINUTES_PER_PACK,
+      summaryTitle: i18nCIMinutesSummaryTitle,
+      summaryTotal: I18N_CI_MINUTES_SUMMARY_TOTAL,
+      title: I18N_CI_MINUTES_TITLE,
+      tooltipNote: '',
+    },
+    tags: [planTags.CI_1000_MINUTES_PLAN],
+  };
   const getStoragePlan = () => pick(mockStoragePlans[0], ['id', 'code', 'pricePerYear', 'name']);
+  const getCiMinutesPlan = () =>
+    pick(mockCiMinutesPlans[0], ['id', 'code', 'pricePerYear', 'name']);
   const findCheckout = () => wrapper.findComponent(Checkout);
   const findOrderSummary = () => wrapper.findComponent(OrderSummary);
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findPriceLabel = () => wrapper.findByTestId('price-per-unit');
   const findQuantityText = () => wrapper.findByTestId('addon-quantity-text');
   const findRootElement = () => wrapper.findByTestId('buy-addons-shared');
@@ -85,12 +115,12 @@ describe('Buy Addons Shared App', () => {
       beforeEach(() => {
         const plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockStoragePlans } });
         const mockApollo = createMockApolloProvider({ plansQueryMock });
-        return createComponent(mockApollo, STORAGE_ADDON_PROPS);
+        createComponent(mockApollo, STORAGE_ADDON_PROPS);
       });
 
       it('should display the root element', () => {
         expect(findRootElement().exists()).toBe(true);
-        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(false);
       });
 
       it('provides the correct props to checkout', () => {
@@ -129,7 +159,7 @@ describe('Buy Addons Shared App', () => {
         await createComponent(mockApollo, STORAGE_ADDON_PROPS);
 
         expect(findRootElement().exists()).toBe(false);
-        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+        expect(findEmptyState().exists()).toBe(true);
       });
 
       it('should display the GlEmptyState for empty plans', async () => {
@@ -139,7 +169,7 @@ describe('Buy Addons Shared App', () => {
         await createComponent(mockApollo, STORAGE_ADDON_PROPS);
 
         expect(findRootElement().exists()).toBe(false);
-        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+        expect(findEmptyState().exists()).toBe(true);
       });
 
       it('should display the GlEmptyState for plans data of wrong type', async () => {
@@ -149,7 +179,7 @@ describe('Buy Addons Shared App', () => {
         await createComponent(mockApollo, STORAGE_ADDON_PROPS);
 
         expect(findRootElement().exists()).toBe(false);
-        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+        expect(findEmptyState().exists()).toBe(true);
       });
     });
 
@@ -161,7 +191,7 @@ describe('Buy Addons Shared App', () => {
         await createComponent(mockApollo, STORAGE_ADDON_PROPS);
 
         expect(findRootElement().exists()).toBe(false);
-        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+        expect(findEmptyState().exists()).toBe(true);
       });
     });
 
@@ -177,6 +207,7 @@ describe('Buy Addons Shared App', () => {
         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');
+        expect(wrapper.text()).toMatchSnapshot();
       });
 
       it('shows labels correctly for 2 packs', async () => {
@@ -188,6 +219,8 @@ describe('Buy Addons Shared App', () => {
         );
         expect(findSummaryLabel().text()).toBe('2 storage packs');
         expect(findSummaryTotal().text()).toBe('Total storage: 20 GB');
+        expect(findPriceLabel().text()).toBe('$60 per 10 GB storage pack per year');
+        expect(wrapper.text()).toMatchSnapshot();
       });
 
       it('does not show labels if input is invalid', async () => {
@@ -195,6 +228,116 @@ describe('Buy Addons Shared App', () => {
         await createComponent(mockApollo, STORAGE_ADDON_PROPS);
 
         expect(findQuantityText().text()).toMatchInterpolatedText('x 10 GB per pack');
+        expect(wrapper.text()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('CI Minutes', () => {
+    describe('when data is received', () => {
+      beforeEach(() => {
+        const plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockCiMinutesPlans } });
+        const mockApollo = createMockApolloProvider({ plansQueryMock });
+        createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+      });
+
+      it('should display the root element', () => {
+        expect(findRootElement().exists()).toBe(true);
+        expect(findEmptyState().exists()).toBe(false);
+      });
+
+      it('provides the correct props to checkout', () => {
+        expect(findCheckout().props()).toMatchObject({
+          plan: { ...getCiMinutesPlan, isAddon: true },
+        });
+      });
+
+      it('provides the correct props to order summary', () => {
+        expect(findOrderSummary().props()).toMatchObject({
+          plan: { ...getCiMinutesPlan, isAddon: true },
+          title: I18N_CI_MINUTES_TITLE,
+        });
+      });
+    });
+
+    describe('when data is not received', () => {
+      it('should display the GlEmptyState for empty data', async () => {
+        const mockApollo = createMockApolloProvider({
+          plansQueryMock: jest.fn().mockResolvedValue({ data: null }),
+        });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findRootElement().exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(true);
+      });
+
+      it('should display the GlEmptyState for empty plans', async () => {
+        const mockApollo = createMockApolloProvider({
+          plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: null } }),
+        });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findRootElement().exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(true);
+      });
+
+      it('should display the GlEmptyState for plans data of wrong type', async () => {
+        const mockApollo = createMockApolloProvider({
+          plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: {} } }),
+        });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findRootElement().exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(true);
+      });
+    });
+
+    describe('when an error is received', () => {
+      it('should display the GlEmptyState', async () => {
+        const mockApollo = createMockApolloProvider({
+          plansQueryMock: jest.fn().mockRejectedValue(new Error('An error happened!')),
+        });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findRootElement().exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(true);
+      });
+    });
+
+    describe('labels', () => {
+      const plansQueryMock = jest.fn().mockResolvedValue({ data: { plans: mockCiMinutesPlans } });
+      it('shows labels correctly for 1 pack', async () => {
+        const mockApollo = createMockApolloProvider({ plansQueryMock });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findQuantityText().text()).toMatchInterpolatedText(
+          'x 1,000 minutes per pack = 1,000 CI minutes',
+        );
+        expect(findSummaryLabel().text()).toBe('1 CI minute pack');
+        expect(findSummaryTotal().text()).toBe('Total minutes: 1,000');
+        expect(findPriceLabel().text()).toBe('$10 per pack of 1,000 minutes');
+        expect(wrapper.text()).toMatchSnapshot();
+      });
+
+      it('shows labels correctly for 2 packs', async () => {
+        const mockApollo = createMockApolloProvider({ plansQueryMock }, { quantity: 2 });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findQuantityText().text()).toMatchInterpolatedText(
+          'x 1,000 minutes per pack = 2,000 CI minutes',
+        );
+        expect(findSummaryLabel().text()).toBe('2 CI minute packs');
+        expect(findSummaryTotal().text()).toBe('Total minutes: 2,000');
+        expect(findPriceLabel().text()).toBe('$10 per pack of 1,000 minutes');
+        expect(wrapper.text()).toMatchSnapshot();
+      });
+
+      it('does not show labels if input is invalid', async () => {
+        const mockApollo = createMockApolloProvider({ plansQueryMock }, { quantity: -1 });
+        await createComponent(mockApollo, CI_MINUTES_ADDON_PROPS);
+
+        expect(findQuantityText().text()).toMatchInterpolatedText('x 1,000 minutes per pack');
+        expect(wrapper.text()).toMatchSnapshot();
       });
     });
   });