Minor treak and unit tests

jest.config.js

@@ -31,5 +31,5 @@ module.exports = {
     },
   },
   // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
-  silent: true,
+  //silent: true,
 };

src/layouts/service-location/service-location.spec.js

@@ -7,10 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper";
 
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import {
+import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-    getServiceabilityDetails,
-    Provider,
-} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 // Define Mocks
 jest.mock("@/helpers/cms-content-helper", () => ({
@@ -21,7 +18,7 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 
 jest.mock("./classes/provider");
 
-const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
+let mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     let mobileFeePart = {};
 
     if (mockServiceZipCode === "43235") {
@@ -38,7 +35,7 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     return Promise.resolve(mobileFeePart);
 };
 
-const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+let mockGetServiceabilityDetails = (mockServiceZipCode) => {
     const serviceabilityDetails = {
         isGlassServiceableInshop: true,
         isRecalibrationServiceableInshop: true,
@@ -49,6 +46,17 @@ const mockGetServiceabilityDetails = (mockServiceZipCode) => {
     return Promise.resolve(serviceabilityDetails);
 };
 
+let mockGetShopProviderData = (mockServiceZipCode) => {
+    const result = {
+        data: {
+            mobileProviderNumber: "001820",
+            shopProviders: [{}],
+        },
+    };
+
+    return Promise.resolve(result);
+};
+
 jest.mock(
     "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
     () => ({
@@ -58,6 +66,9 @@ jest.mock(
         getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
             return mockGetServiceabilityDetails(mockServiceZipCode);
         }),
+        getShopProviderData: jest.fn((mockServiceZipCode) => {
+            return mockGetShopProviderData(mockServiceZipCode);
+        }),
     })
 );
 
@@ -554,14 +565,13 @@ describe("service-location.vue", () => {
         describe("should be logical AND when recalibration is defined.", () => {
             test("T & T => T", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -582,14 +592,13 @@ describe("service-location.vue", () => {
 
             test("T & F => F", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -610,14 +619,13 @@ describe("service-location.vue", () => {
 
             test("F & T => F", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -638,14 +646,13 @@ describe("service-location.vue", () => {
 
             test("F & F => F", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -666,14 +673,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be true if mobile is true and inshop is false.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -695,14 +701,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be false if mobile is false.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -724,14 +729,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be false if inShop is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -753,14 +757,13 @@ describe("service-location.vue", () => {
 
             test("displayNoShopsAlert should be true if inShop is false and mobile is false", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -782,14 +785,13 @@ describe("service-location.vue", () => {
 
             test("displayNoShopsAlert should be false if inShop is true and mobile is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -811,14 +813,13 @@ describe("service-location.vue", () => {
 
             test("displayNoShopsAlert should be false if inShop is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -840,14 +841,13 @@ describe("service-location.vue", () => {
 
             test("displayNoShopsAlert should be false if mobile is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -869,14 +869,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableInshopOnly should be true if inshop is true and mobile is false", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -898,14 +897,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableInshopOnly should be false if inshop is false", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -927,14 +925,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableInshopOnly should be false if mobile is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -956,14 +953,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 

src/layouts/service-location/service-location.vue

@@ -19,8 +19,7 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         linkWidgetName="ServiceZipLinkWidget"
-                        modalWidgetName="ServiceZipModalWidget"
+                        modalWidgetName="ServiceZipModalWidget" />
-                     />
 
                     <alert
                         ref="alertMilitaryBaseZip"
@@ -86,8 +85,7 @@
                         validationRules="mobile-location-required"
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
-                        modalWidgetName="MobileLocationModalWidget"
+                        modalWidgetName="MobileLocationModalWidget" />
-                    />
 
                     <shopQuestion
                         ref="shopQuestion"
@@ -189,7 +187,10 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const zipCodeDataPromise = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location");
+        const zipCodeDataPromise = baseMixin.methods.getZipCodeData(
+            serviceZipCode,
+            "service-location"
+        );
 
         const serviceabilityDetailsPromise = getServiceabilityDetails(
             serviceZipCode,
@@ -276,8 +277,10 @@ export default {
                 if (newValue.addressQuestions.zipCode !== this.zipCode) {
                     getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
                         this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber);
+                        this.selectedProvider = new Provider(
-                    });                    
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    });
                 }
 
                 this.setMobileLocation(newValue);
@@ -504,8 +507,10 @@ export default {
                 if (newValue === "Mobile") {
                     getShopProviderData(this.zipCode).then(async (result) => {
                         this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber);
+                        this.selectedProvider = new Provider(
-                    }); 
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    });
                 } else {
                     this.selectedProvider = new Provider();
                 }

src/layouts/service-location/shop-question/shop-question.spec.js

@@ -61,6 +61,7 @@ const mockCmsContent = {
 
 const cmsWidgetName = "ShopQuestionWidget";
 const shopQuestionInitialData = {
+    mobileProviderNumber: "001820",
     shopProviders: [
         {
             address: {
@@ -162,15 +163,18 @@ describe("shop-question.vue", () => {
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
                 isDisplayed: true,
+                shopProviderData: null,
             },
             mountOptions: {
                 attachTo: document.body,
             },
         });
 
-        // Act
+        await wrapper.setProps({
-        wrapper.vm.initializeComponent(shopQuestionInitialData);
+            shopProviderData: shopQuestionInitialData,
+        });
 
+        // Act
         await wrapper.vm.$nextTick();
         await wrapper.vm.$nextTick();
 
@@ -199,47 +203,6 @@ describe("shop-question.vue", () => {
     });
 
     it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
-        // Arrange
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                modelValue: {
-                    address: {
-                        city: "POWELL",
-                        country: "US",
-                        state: "OH",
-                        streetAddress: "3938 POWELL RD",
-                        zipCode: "43065",
-                    },
-                    distanceInMiles: 16.2690495685233,
-                    providerNumber: "003341",
-                },
-                serviceZipCode: "43081",
-                selectedAppointmentType: "Dropoff",
-                cmsWidgetName: cmsWidgetName,
-                isDisplayed: true,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        // Act
-        wrapper.vm.initializeComponent(shopQuestionInitialData);
-
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick();
-
-        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
-
-        // Assert
-        expect(showMoreShopsLink.exists()).toBe(true);
-        expect(showMoreShopsLink.isVisible()).toBe(true);
-    });
-
-    it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
         // Arrange
         const alsoShopQuestionInitialData = {
             shopProviders: [
@@ -276,6 +239,17 @@ describe("shop-question.vue", () => {
                     distanceInMiles: 11.738869544543,
                     providerNumber: "003343",
                 },
+                {
+                    address: {
+                        city: "COLUMBUS",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "1670 HARMON AVE",
+                        zipCode: "43223",
+                    },
+                    distanceInMiles: 15.9727889297435,
+                    providerNumber: "006747",
+                },
             ],
         };
 
@@ -297,6 +271,7 @@ describe("shop-question.vue", () => {
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
                 isDisplayed: true,
+                shopProviderData: null,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -304,14 +279,89 @@ describe("shop-question.vue", () => {
         });
 
         // Act
-        wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
+        await wrapper.setProps({
+            shopProviderData: shopQuestionInitialData,
+        });
 
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
         await wrapper.vm.$nextTick();
 
         const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
 
         // Assert
-        expect(showMoreShopsLink.exists()).toBe(false);
+        expect(showMoreShopsLink.exists()).toBeTruthy();
+        expect(showMoreShopsLink.isVisible()).toBeTruthy();
+    });
+
+    it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
+        // Arrange
+        const alsoShopQuestionInitialData = {
+            shopProviders: [
+                {
+                    address: {
+                        city: "WESTERVILLE",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "4403 EXECUTIVE PKWY",
+                        zipCode: "43081",
+                    },
+                    distanceInMiles: 5.16769294095201,
+                    providerNumber: "003335",
+                },
+                {
+                    address: {
+                        city: "WORTHINGTON",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "760 DEARBORN PARK LN",
+                        zipCode: "43085",
+                    },
+                    distanceInMiles: 10.5865432478478,
+                    providerNumber: "001820",
+                },
+            ],
+        };
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+                isDisplayed: true,
+                shopProviderData: null,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+        
+        // Act
+        await wrapper.setProps({
+            shopProviderData: alsoShopQuestionInitialData,
+        });
+
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBeFalsy();
     });
 
     it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
@@ -355,6 +405,7 @@ describe("shop-question.vue", () => {
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
                 isDisplayed: true,
+                shopProviderData: null,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -362,7 +413,9 @@ describe("shop-question.vue", () => {
         });
 
         // Act
-        wrapper.vm.initializeComponent(shopQuestionInitialData);
+        await wrapper.setProps({
+            shopProviderData: shopQuestionInitialData,
+        });
 
         await wrapper.vm.$nextTick();
 
@@ -384,7 +437,7 @@ describe("shop-question.vue", () => {
 
         await wrapper.vm.$nextTick();
 
-        showMoreShopsLink.trigger("click");
+        showMoreShopsLink.trigger("click-event");
 
         await wrapper.vm.$nextTick();
 
@@ -443,6 +496,7 @@ describe("shop-question.vue", () => {
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
+                shopProviderData: null,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -450,7 +504,9 @@ describe("shop-question.vue", () => {
         });
 
         // Act
-        wrapper.vm.initializeComponent(shopQuestionInitialData);
+        await wrapper.setProps({
+            shopProviderData: shopQuestionInitialData,
+        });
 
         await wrapper.vm.$nextTick();
         await wrapper.vm.$nextTick();
@@ -468,15 +524,18 @@ describe("shop-question.vue", () => {
                 modelValue: null,
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
+                shopProviderData: null,
             },
             mountOptions: {
                 attachTo: document.body,
             },
         });
 
-        // Act
+        await wrapper.setProps({
-        await wrapper.vm.initializeComponent(shopQuestionInitialData);
+            shopProviderData: shopQuestionInitialData,
+        });
 
+        // Act
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.answers.length).toEqual(3);

src/layouts/service-location/shop-question/shop-question.vue

@@ -30,7 +30,7 @@
                 linkType="text"
                 :text="showMoreShopsLinkText"
                 href="#!"
-                @click-event="getNextShopsFromList"
+                @click-event="getNextShopsFromList(3)"
                 :aria-label="showMoreShopsLinkText" />
         </div>
     </transition>
@@ -43,8 +43,6 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import shopListButton from "./shop-list-button/shop-list-button";
 import textLink from "@/ux-components/text-link/text-link";
 
-import { storeActions } from "@/constants/store-actions.js";
-
 // Supporting files
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
@@ -75,7 +73,7 @@ export default {
             default: () => null,
         },
         selectedAppointmentType: String,
-        shopProviderData: Array,
+        shopProviderData: Object,
         cmsWidgetName: String,
         validationRules: String,
         isDisplayed: Boolean,
@@ -127,23 +125,6 @@ export default {
         },
     },
     methods: {
-        // loadInitialData(serviceZipCode) {
-        //     return this.loadData(serviceZipCode);
-        // },
-        // loadData(serviceZipCode) {
-        //     return getShopProviders(serviceZipCode);
-        //     // return baseMixin.methods.dispatchStoreActionWithLogging(
-        //     //     storeActions.GET_PROVIDERS,
-        //     //     {
-        //     //         serviceZipCode: serviceZipCode,
-        //     //     },
-        //     //     "service-location"
-        //     // );
-        // },
-        // initializeComponent(shopQuestionInitialData) {
-        //     this.shopProviders = shopQuestionInitialData.shopProviders;
-        //     this.$emit("updated-shop-list", shopQuestionInitialData);
-        // },
         async getNextShopsFromList(numberToGet = 3) {
             const shopIterator = (array, n) => {
                 const l = array.length;