Addl unit tests for service-location and tests for mobile-location-modal-question

src/helpers/service-location-helper.spec.js

@@ -2,7 +2,8 @@ import { getPricedMobileFeePart } from "./service-location-helper";
 import { storeActions } from "@/constants/store-actions";
 
 const mockStoreActionGetMobileFeePart = storeActions.GET_MOBILE_FEE_PART;
-const mockStoreActionPriceOrderItemsAndSaveServerData = storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA;
+const mockStoreActionPriceOrderItemsAndSaveServerData =
+    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA;
 
 jest.mock("@/mixins/base-mixin.js", () => ({
     methods: {
@@ -40,12 +41,11 @@ jest.mock("@/mixins/base-mixin.js", () => ({
                 ]);
             }
         }),
-
     },
 }));
 
 describe("service-location-helper.js", () => {
-    it("Should return the null if no service zip code is passed in", async() => {
+    it("Should return the null if no service zip code is passed in", async () => {
         // Arrange / Act
         const serviceZipCode = null;
         const expected = null;
@@ -54,9 +54,9 @@ describe("service-location-helper.js", () => {
 
         // Assert
         expect(result).toEqual(expected);
-    });    
+    });
 
-    it("Should return the priced mobile fee part", async() => {
+    it("Should return the priced mobile fee part", async () => {
         // Arrange / Act
         const serviceZipCode = "43235";
         const expected = {
@@ -66,13 +66,13 @@ describe("service-location-helper.js", () => {
             laborAmount: 49.99,
             sellingPrice: 0,
             kitPrice: 0,
-        }
+        };
 
         const result = await getPricedMobileFeePart(serviceZipCode);
 
         // Assert
         expect(result).toEqual(expected);
     });
-})
+});
 
 //test.todo("some test to be written in the future");

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -2,6 +2,7 @@ import mobileLocationModalQuestions from "./mobile-location-modal-questions";
 import { mount, shallowMount } from "@vue/test-utils";
 import { storeActions } from "@/constants/store-actions";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import modal from "@/digital-components/modal/modal";
 
 import crypto from "crypto";
 
@@ -42,7 +43,7 @@ const mockMixin = {
         }),
 
         getZipCodeData: jest.fn((zip) => {
-            if (zip === "43235") {
+            if (zip === "43235" || zip === "55555") {
                 return Promise.resolve({
                     containsMilitaryBase: false,
                     isServiceable: true,
@@ -128,6 +129,213 @@ describe("mobile-location-modal-questions.vue", () => {
         expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(true);
         expect(wrapper.vm.internalModel.serviceZipCode).toEqual("55555");
     });
+
+    it("Should open the modal when the 'Enter your service address' link is clicked", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "55555",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "55555",
+        };
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.MobileLocationModalWidget.openModal = jest.fn();
+        const mobileLocationLink = wrapper.findComponent({ ref: "mobileLocationLink" });
+
+        // // Act
+        await mobileLocationLink.trigger("click-event");
+
+        // // Assert
+        expect(wrapper.vm.$refs.MobileLocationModalWidget.openModal).toHaveBeenCalled();
+    });
+
+    it("Should emit update:modelValue on setMobileLocation for a valid address and vehicle protection answer", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "",
+                apartmentNumberOrBusinessName: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "",
+        };
+
+        const newMobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "55555",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "55555",
+        };
+
+        const wrapper = shallowMount(mobileLocationModalQuestions, {
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+                linkWidgetName: linkWidgetName,
+                modalWidgetName: modalWidgetName,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
+
+        // Act
+        wrapper.vm.internalModel = newMobileLocationQuestions;
+        await wrapper.vm.setMobileLocation();
+
+        let expectedEmit = [[newMobileLocationQuestions]];
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
+    });
+
+    it("Should not emit update:modelValue on setMobileLocation for an invalid address zip code", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "",
+                apartmentNumberOrBusinessName: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "",
+        };
+
+        const newMobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "61000",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "61000",
+        };
+
+        const wrapper = shallowMount(mobileLocationModalQuestions, {
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+                linkWidgetName: linkWidgetName,
+                modalWidgetName: modalWidgetName,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
+
+        // Act
+        wrapper.vm.internalModel = newMobileLocationQuestions;
+        await wrapper.vm.setMobileLocation();
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).not.toBeTruthy();
+    });
+
+    it("Should display invalid zip alert for invalid address zip inputs", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "",
+                apartmentNumberOrBusinessName: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "",
+        };
+
+        const newMobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "11111",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "11111",
+        };
+
+        const wrapper = shallowMount(mobileLocationModalQuestions, {
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+                linkWidgetName: linkWidgetName,
+                modalWidgetName: modalWidgetName,
+            },
+            attachTo: document.body,
+        });
+
+        wrapper.vm.internalModel = newMobileLocationQuestions;
+
+        // Act
+        await wrapper.vm.setMobileLocation();
+
+        // Assert
+        expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
+    });
+
+    it("Should clear the internal model when resetModel is called", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "55555",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "55555",
+        };
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.resetModel();
+
+        // Assert
+        expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual("");
+        expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual("");
+        expect(wrapper.vm.internalModel.addressQuestions.city).toEqual("");
+        expect(wrapper.vm.internalModel.addressQuestions.state).toEqual("");
+        expect(wrapper.vm.internalModel.addressQuestions.zipCode).toEqual("");
+        expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(null);
+    });
 });
 
 function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -7,6 +7,7 @@
             v-html="mobileLocationLinkPromptText"></label>
         <div class="update-mobile-location-text-link">
             <textLink
+                ref="mobileLocationLink"
                 id="mobileLocationLinkPromptId"
                 linkType="text"
                 :text="this.mobileLocationLinkText"
@@ -54,7 +55,7 @@ import textBlock from "@/digital-components/text-block/text-block";
 
 export default {
     name: "mobile-location-modal-questions",
-    emits: ["update:modelValue"], // The component emits an event
+    emits: ["update:modelValue", "updated-zip-code"], // The component emits an event
     data() {
         return {
             internalModel: this.copyModel(this.modelValue),
@@ -135,10 +136,6 @@ export default {
             return { ...modelToCopy };
         },
 
-        setServiceZipCode(serviceZipCode) {
-            this.internalModel.serviceZipCode = serviceZipCode;
-        },
-
         openModal() {
             this.$refs[this.modalName].openModal();
         },

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

@@ -4,24 +4,38 @@ import serviceLocation from "@/layouts/service-location/service-location.vue";
 // Supporting files
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper";
-import baseMixin from "@/mixins/base-mixin";
+
-import { nextTick } from "vue";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper.js";
-import { getMobileFee } from "@/helpers/service-location-helper";
 import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
 
 // Define Mocks
-jest.mock("@/helpers/layout-helper.js", () => ({
+jest.mock("@/helpers/cms-content-helper", () => ({
-    settleAllPromises: jest.fn(),
+    fetchCmsContentForPage: jest.fn(() => {
+        return Promise.resolve("content");
+    }),
 }));
 
-jest.mock("@/helpers/cms-content-helper", () => ({
+const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
-    fetchCmsContentForPage: jest.fn(),
+    let mobileFeePart = {};
-}));
+
+    if (mockServiceZipCode === "43235") {
+        mobileFeePart = {
+            partNumber: "MOBILE FEE",
+            description: "MOBILE FEE",
+            partType: "FEE",
+            laborAmount: 49.99,
+            sellingPrice: 0,
+            kitPrice: 0,
+        };
+    }
+
+    return Promise.resolve(mobileFeePart);
+};
 
 jest.mock("@/helpers/service-location-helper", () => ({
-    getMobileFee: jest.fn(),
+    getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
+        return mockGetPricedMobileFeePart(mockServiceZipCode);
+    }),
 }));
 
 jest.mock("@/store", () => ({
@@ -55,16 +69,43 @@ beforeEach(() => {
         },
         vehicle: {
             registration: {
-                address: undefined,
+                address: "5555 Sulgrave Dr",
-                city: undefined,
+                city: "New Albany",
-                state: undefined,
+                state: "OH",
-                zipCode: undefined,
+                zipCode: "43054",
             },
         },
     };
 });
 
 describe("service-location.vue", () => {
+    describe("beforeRouteEnter", () => {
+        test("on load sets the mobile fee part when an service zip code has already been provided", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            const mobileFeePart = {
+                partNumber: "MOBILE FEE",
+                description: "MOBILE FEE",
+                partType: "FEE",
+                laborAmount: 49.99,
+                sellingPrice: 0,
+                kitPrice: 0,
+            };
+
+            // Act
+            await serviceLocation.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { fmgPage: "serviceLocation" } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            // Assert
+            expect(wrapper.vm.mobileLocationQuestions.mobileFeePart).toStrictEqual(mobileFeePart);
+        });
+    });
+
     describe("arePagePrerequisitesValid", () => {
         test("No prerequisites set: Should return false.", () => {
             const { wrapper } = setupMocks({});
@@ -108,55 +149,147 @@ describe("service-location.vue", () => {
     });
 
     describe("updating service zip", () => {
-        test("resets mobile location when service zip code is updated", () => {
+        test("updates the page model after providing the service zip code", () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            const newZip = "61606";
-
-            // Act
             wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.resetMobileLocation(newZip);
 
-            // Assert
-            expect(wrapper.vm.mobileLocationQuestions.serviceZipCode).toBe(newZip);
-        });
-
-        test.only("updates service zip code serviceZipCodeQuestion when resetServiceZipCode is called", () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
                 isServiceable: true,
             };
 
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+
             // Act
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+            serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
-            wrapper.vm.resetServiceZipCode(newServiceZipCodeQuestion);
 
             // Assert
             expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
         });
 
-        test("resets mobile location in watch for serviceZipCodeQuestion", async () => {
+        test("resets mobile location when service zip code is updated", () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            const newServiceZipCodeQuestion = {
+            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-                zipCode: "61606",
+            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
-                state: "IL",
+
+            const mobileLocationQuestions = {
+                addressQuestions: {
+                    streetAddress: "5555 Sulgrave Dr",
+                    apartmentNumberOrBusinessName: "Apt 1",
+                    city: "New Albany",
+                    state: "OH",
+                    zipCode: "43054",
+                },
+                isVehicleProtected: true,
+                serviceZipCode: "43054",
+                mobileFee: 0,
+            };
+            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
+
+            const newMobileLocationQuestions = {
+                addressQuestions: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                isVehicleProtected: null,
+                serviceZipCode: "43081",
+            };
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+
+            // Act
+            serviceZipCodeComponent.vm.$emit("updated-service-zip-code", "43081");
+
+            // Assert
+            expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
+        });
+    });
+
+    describe("updating mobile location", () => {
+        test("updates the page model after providing the mobile location", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+
+            const mobileLocationQuestions = {
+                addressQuestions: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                isVehicleProtected: null,
+                serviceZipCode: "43081",
+            };
+            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
+
+            const newMobileLocationQuestions = {
+                addressQuestions: {
+                    streetAddress: "5555 Sulgrave Dr",
+                    apartmentNumberOrBusinessName: "Apt 1",
+                    city: "New Albany",
+                    state: "OH",
+                    zipCode: "43054",
+                },
+                isVehicleProtected: true,
+                serviceZipCode: "43054",
+                mobileFee: 0,
+            };
+
+            const mobileLocationComponent = wrapper.findComponent({
+                ref: "mobileLocationModalQuestions",
+            });
+
+            // Act
+            mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
+
+            // Assert
+            expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
+        });
+
+        test("resets service zip code when mobile location is updated", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            const serviceZipCodeInfo = {
+                state: "OH",
+                zipCode: "43054",
                 isServiceable: true,
             };
 
-            // Act
+            const newServiceZipCodeInfo = {
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+                state: "OH",
-            wrapper.vm.serviceZipCodeQuestion = newServiceZipCodeQuestion;
+                zipCode: "43081",
+                isServiceable: true,
+            };
+            wrapper.vm.serviceZipCodeQuestion = serviceZipCodeInfo;
 
-            await wrapper.vm.$nextTick();
+            const mobileLocationComponent = wrapper.findComponent({
+                ref: "mobileLocationModalQuestions",
+            });
+
+            // Act
+            mobileLocationComponent.vm.$emit("updated-zip-code", {
+                state: "OH",
+                zipCode: "43081",
+                isServiceable: true,
+            });
 
             // Assert
-            expect(wrapper.vm.mobileLocationQuestions.serviceZipCode).toStrictEqual(
+            expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
-                newServiceZipCodeQuestion.zipCode
-            );
         });
     });
 });
@@ -166,10 +299,6 @@ function setupMocks({ mountOptionsMockData = {} }) {
 
     const apiPromise = Promise.resolve(apiResponses);
 
-    settleAllPromises.mockImplementation(() => apiPromise);
-    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-    getMobileFee.mockImplementation(() => Promise.resolve());
-
     const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(serviceLocation, mountOptions);
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

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

@@ -6,7 +6,7 @@
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
-                @updated-service-zip-code="resetMobileFeePart"
+                @updated-service-zip-code="resetMobileLocation"
                 ref="serviceZipCodeQuestion"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
@@ -66,13 +66,13 @@ export default {
             },
         };
     },
-    async beforeRouteEnter(to, from, next) {   
+    async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-        const serviceZipCode = store.getters.order.serviceLocation.zipCode;       
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
-        
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -86,9 +86,7 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
-        console.log(resultMap);
+
-        console.log(resultMap.cmsContent);
-        console.log(resultMap.mobileFeePart);
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -97,12 +95,11 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            return true;
+            return (
-            // (
+                store.getters.lineItems.supportingItems !== null &&
-            //     store.getters.lineItems.supportingItems !== null &&
+                store.getters.order.serviceLocation.zipCode !== null &&
-            //     store.getters.order.serviceLocation.zipCode !== null &&
+                store.getters.payment.isInsurance !== null
-            //     store.getters.payment.isInsurance !== null
+            );
-            // );
         },
         setData(mobileFeePart) {
             if (mobileFeePart) {
@@ -149,11 +146,13 @@ export default {
             };
 
             this.$refs.mobileLocationModalQuestions.resetComponent();
+
+            this.resetMobileFeePart(updatedServiceZipCode);
         },
-        resetServiceZipCode(newValue) {
+        resetServiceZipCode(updatedServiceZipInfo) {
-            this.serviceZipCodeQuestion.state = newValue.state;
+            this.serviceZipCodeQuestion.state = updatedServiceZipInfo.state;
-            this.serviceZipCodeQuestion.zipCode = newValue.zipCode;
+            this.serviceZipCodeQuestion.zipCode = updatedServiceZipInfo.zipCode;
-            this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable;
+            this.serviceZipCodeQuestion.isServiceable = updatedServiceZipInfo.isServiceable;
 
             this.resetMobileFeePart(this.serviceZipCodeQuestion.zipCode);
         },
@@ -164,15 +163,6 @@ export default {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },
-    watch: {
-        serviceZipCodeQuestion: {
-            handler(newValue, oldValue) {
-                if (newValue !== oldValue) {
-                    this.resetMobileLocation(newValue.zipCode);
-                }
-            },
-        },
-    },
     components: {
         serviceZipModalQuestion,
         mobileLocationModalQuestions,