Update tests and add tests for alert

src/layouts/payment-method/payment-method.spec.js

@@ -5,39 +5,70 @@ import paymentMethod from '@/layouts/payment-method/payment-method.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store';
+import issPageValues from '@/router/router-constants/issPage-values';
 import { paymentMethods } from '@/constants/payment-method-constants';
+import queryStrings from '@/constants/query-strings';
 
-function setupMocks() {
+function setupMocks({ customMountOptions = {}, queryString }) {
-    const mountOptions = getMountOptions();
+    const mountOptions = getMountOptions({
+        ...customMountOptions,
+        route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} }
+    });
 
     const wrapper = shallowMount(paymentMethod, mountOptions);
 
-    return { wrapper };
+    return wrapper;
 }
 
 describe('payment-method.vue', () => {
-    test('getting payment method when method is pay later', async () => {
+    describe('Payment Method Type', () => {
+        test('getting payment method when method is pay later', async () => {
         // Arrange
-        const { wrapper } = setupMocks();
+            const wrapper = setupMocks({});
-        const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
+            const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
-        useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
+            useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
 
-        // Act
+            // Act
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+            const paymethod = wrapper.vm.getPaymentMethodFromStore();
 
-        // Assert
+            // Assert
-        expect(paymethod).toBe(payLaterPaymentMethod);
+            expect(paymethod).toBe(payLaterPaymentMethod);
+        });
+        test('getting payment method when method is pay in advance', async () => {
+        // Arrange
+            const wrapper = setupMocks({});
+            const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
+            useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
+
+            // Act
+            const paymethod = wrapper.vm.getPaymentMethodFromStore();
+
+            // Assert
+            expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+        });
     });
-    test('getting payment method when method is pay in advance', async () => {
-        // Arrange
-        const { wrapper } = setupMocks();
-        const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
-        useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
 
-        // Act
+    describe('Pay In Advance Error Alert', () => {
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+        test('show pay in advance error alert when contained in querystring', () => {
+            // Arrange
+            const queryString = {
+                [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.AFTERPAY
+            };
+            const wrapper = setupMocks({ queryString });
 
-        // Assert
+            // Assert
-        expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+            const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
+            expect(payInAdvanceErrorAlert.exists()).toBeTruthy();
+            expect(payInAdvanceErrorAlert.isVisible()).toBeTruthy();
+        });
+
+        test('hide pay in advance error alert when not contained in querystring', () => {
+            // Arrange
+            const wrapper = setupMocks({});
+
+            // Assert
+            const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
+            expect(payInAdvanceErrorAlert.exists()).toBeFalsy();
+        });
     });
 });

src/layouts/payment-method/payment-method.vue

@@ -28,6 +28,7 @@
                 <hr class="mt-0 mb-5" />
                 <alert
                     v-if="displayPayInAdvanceAlert"
+                    name="payInAdvanceErrorAlert"
                     class="my-4"
                     cmsWidgetName="PayInAdvanceErrorAlertWidget"
                     alertClass="alert-danger"