Add unit tests for summary_details.vue

ee/app/assets/javascripts/subscriptions/buy_minutes/components/order_summary/summary_details.vue

@@ -63,22 +63,22 @@ export default {
 <template>
   <div>
     <div class="d-flex justify-content-between bold gl-mt-3 gl-mb-3">
-      <div class="js-selected-plan">
+      <div data-testid="selected-plan">
         {{ sprintf($options.i18n.selectedPlanText, { selectedPlanText }) }}
-        <span v-if="quantity > 0" class="js-quantity">{{
+        <span v-if="quantity > 0" data-testid="quantity">{{
           sprintf($options.i18n.quantity, { quantity })
         }}</span>
       </div>
-      <div class="js-amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
+      <div data-testid="amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
     </div>
-    <div class="text-secondary js-per-unit">
+    <div class="text-secondary" data-testid="price-per-unit">
       {{
         sprintf($options.i18n.pricePerUnitPerYear, {
           selectedPlanPrice: selectedPlanPrice.toLocaleString(),
         })
       }}
     </div>
-    <div v-if="purchaseHasExpiration" class="text-secondary js-dates">
+    <div v-if="purchaseHasExpiration" class="text-secondary" data-testid="subscription-period">
       {{
         sprintf($options.i18n.dates, {
           startDate: formatDate(startDate),
@@ -90,17 +90,17 @@ export default {
       <div class="border-bottom gl-mt-3 gl-mb-3"></div>
       <div class="d-flex justify-content-between text-secondary">
         <div>{{ $options.i18n.subtotal }}</div>
-        <div class="js-total-ex-vat">{{ formatAmount(totalExVat, quantity > 0) }}</div>
+        <div data-testid="total-ex-vat">{{ formatAmount(totalExVat, quantity > 0) }}</div>
       </div>
       <div class="d-flex justify-content-between text-secondary">
         <div>{{ $options.i18n.tax }}</div>
-        <div class="js-vat">{{ formatAmount(vat, quantity > 0) }}</div>
+        <div data-testid="vat">{{ formatAmount(vat, quantity > 0) }}</div>
       </div>
     </div>
     <div class="border-bottom gl-mt-3 gl-mb-3"></div>
     <div class="d-flex justify-content-between bold gl-font-lg">
       <div>{{ $options.i18n.total }}</div>
-      <div class="js-total-amount">{{ formatAmount(totalAmount, quantity > 0) }}</div>
+      <div data-itestid="total-amount">{{ formatAmount(totalAmount, quantity > 0) }}</div>
     </div>
   </div>
 </template>

ee/spec/frontend/subscriptions/buy_minutes/components/order_summary/summary_details_spec.js

+import { shallowMount } from '@vue/test-utils';
+import SummaryDetails from 'ee/subscriptions/buy_minutes/components/order_summary/summary_details.vue';
+
+describe('SummaryDetails', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    return shallowMount(SummaryDetails, {
+      propsData: {
+        vat: 8,
+        totalExVat: 10,
+        selectedPlanText: 'Test',
+        selectedPlanPrice: 10,
+        totalAmount: 10,
+        quantity: 1,
+        ...props,
+      },
+    });
+  };
+
+  const findQuantity = () => wrapper.find('[data-testid="quantity"]');
+  const findSubscriptionPeriod = () => wrapper.find('[data-testid="subscription-period"]');
+  const findTotalExVat = () => wrapper.find('[data-testid="total-ex-vat"]');
+  const findVat = () => wrapper.find('[data-testid="vat"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders the plan name', () => {
+      expect(wrapper.find('[data-testid="selected-plan"]').text()).toMatchInterpolatedText(
+        'Test plan (x1)',
+      );
+    });
+
+    it('renders the price per unit', () => {
+      expect(wrapper.find('[data-testid="price-per-unit"]').text()).toBe('$10 per pack per year');
+    });
+  });
+
+  describe('when quantity is greater then zero', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders quantity', () => {
+      expect(findQuantity().isVisible()).toBe(true);
+      expect(findQuantity().text()).toBe('(x1)');
+    });
+  });
+
+  describe('when quantity is less or equal to zero', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ quantity: 0 });
+    });
+
+    it('does not render quantity', () => {
+      expect(wrapper.find('[data-testid="quantity"]').exists()).toBe(false);
+    });
+  });
+
+  describe('when subscription has expiration', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ purchaseHasExpiration: true });
+    });
+
+    it('renders subscription period', () => {
+      expect(findSubscriptionPeriod().isVisible()).toBe(true);
+      expect(findSubscriptionPeriod().text()).toBe('Jul 6, 2020 - Jul 6, 2021');
+    });
+  });
+
+  describe('when subscription does not have expiration', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ purchaseHasExpiration: false });
+    });
+
+    it('does not render subscription period', () => {
+      expect(findSubscriptionPeriod().exists()).toBe(false);
+    });
+  });
+
+  describe('when tax rate is applied', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ taxRate: 8 });
+    });
+
+    it('renders tax fields', () => {
+      expect(findTotalExVat().isVisible()).toBe(true);
+      expect(findTotalExVat().text()).toBe('$10');
+
+      expect(findVat().isVisible()).toBe(true);
+      expect(findVat().text()).toBe('$8');
+    });
+  });
+
+  describe('when tax rate is not applied', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('does not render tax fields', () => {
+      expect(findTotalExVat().exists()).toBe(false);
+      expect(findVat().exists()).toBe(false);
+    });
+  });
+});