Merge pull request #1110 from Safelite/feature/digital/INSR-8549.1

INSR-8549 Added getServiceabilityDetails changes to service-zip-modal…

src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -1,9 +1,25 @@
 import { mount } from '@vue/test-utils';
 import crypto from 'crypto';
 import serviceZipModalQuestion from '@/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+import { getMountOptions } from '@/helpers/unit-test-helper';
+import { createTestingPinia } from '@pinia/testing';
+import { useMainStore } from '@/store';
+import settleAllPromises from '@/helpers/layout-helper';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import baseMixin from '@/mixins/base-mixin';
 
 global.crypto = crypto;
 
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+// Mock fetchCmsContentForPage
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn()
+}));
+jest.mock('@/global-methods', () => ({
+    callHttpClient: jest.fn()
+}));
+
 jest.mock('@/digital-components/textbox-question/textbox-question', () => ({
     getCmsContent: jest.fn((widgetName, cmsFieldName) => widgetName[cmsFieldName])
 }));
@@ -71,20 +87,48 @@ const mockModalCmsContent = {
     FooterText: 'Sample modal footer text here.'
 };
 
-const mockMixin = {
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}, queryString = {}) {
-    methods: {
+    const mountOptions = getMountOptions({
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+        router: {
-            if (widgetName === linkWidgetName) {
+            navigate: jest.fn()
-                return mockLinkCmsContent[cmsFieldName];
+        },
-            }
+        route: { query: { issPage: 'page-name', ...queryString }, params: {} }
+    });
 
-            if (widgetName === modalWidgetName) {
+    const testingPinia = createTestingPinia({
-                return mockModalCmsContent[cmsFieldName];
+        initialState: {
-            }
+            main: mainInitialState
-            return null;
+        }
-        })
+    });
-    }
+    useMainStore(testingPinia);
-};
+    methodToRunAfterInitializingStore();
+    useMainStore().getServiceabilityDetails = jest.fn().mockReturnValue(mockGetServiceabilityDetails);
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.props = initialData
+
+    const apiResponses = { cmsContent: {} };
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = mount(serviceZipModalQuestion, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn((widgetName, cmsFieldName) => {
+        if (widgetName === linkWidgetName) {
+            return mockLinkCmsContent[cmsFieldName];
+        }
+
+        if (widgetName === modalWidgetName) {
+            return mockModalCmsContent[cmsFieldName];
+        }
+        return null;
+    });
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
+    return { wrapper };
+}
 
 describe('service-zip-modal-question.vue', () => {
     it('Initial state on load with existing location info', async () => {
@@ -94,15 +138,13 @@ describe('service-zip-modal-question.vue', () => {
             zipCode: '43235'
         };
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 linkWidgetName,
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Assert
         expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent.BodyText));
@@ -117,15 +159,13 @@ describe('service-zip-modal-question.vue', () => {
 
         const zip = '43235';
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 mobileFeePart: {},
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;
@@ -147,14 +187,12 @@ describe('service-zip-modal-question.vue', () => {
 
         const zip = '';
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;
@@ -173,14 +211,12 @@ describe('service-zip-modal-question.vue', () => {
 
         const zip = '11111';
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;
@@ -199,14 +235,12 @@ describe('service-zip-modal-question.vue', () => {
 
         const zip = '';
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;
@@ -226,14 +260,12 @@ describe('service-zip-modal-question.vue', () => {
 
         const zip = '123';
 
-        const wrapper = mount(serviceZipModalQuestion, {
+        const { wrapper } = getMountedComponent({},
-            mixins: [mockMixin],
+            {
-            props: {
                 modelValue: serviceZipCodeQuestion,
                 modalWidgetName
-            },
+            }
-            attachTo: document.body
+        );
-        });
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;

src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -38,8 +38,9 @@ import textLink from '@/ux-components/text-link/text-link.vue';
 import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
 import modal from '@/digital-components/modal/modal.vue';
 import alert from '@/ux-components/alert/alert.vue';
+import { useMainStore } from '@/store';
 
-import { getServiceabilityDetails, getZipCodeData } from '@/helpers/service-location-helper';
+import { getZipCodeData } from '@/helpers/service-location-helper';
 
 export default {
     name: 'service-zip-modal-question',
@@ -153,7 +154,7 @@ export default {
                     const serviceZipCode = this.internalModel.zipCode;
 
                     // retrieve serviceability details
-                    const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
+                    const serviceabilityDetails = await useMainStore().getServiceabilityDetails(serviceZipCode);
 
                     // update content related to service zip code
                     this.$emit('updated-serviceability', serviceabilityDetails.data);