WIP

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

@@ -1,24 +1,27 @@
-import { mount, shallowMount } from "@vue/test-utils";
 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 crypto from "crypto";
+
 global.crypto = crypto;
 
-// const linkWidgetName = "linkWidgetName";
+const linkWidgetName = "linkWidgetName";
-// const modalWidgetName = "modalWidgetName";
+const modalWidgetName = "modalWidgetName";
-// const mobileFeeDisclaimerWidgetName = "MobileFeeDisclaimerWidget";
+const mobileFeeDisclaimerWidgetName = "MobileFeeDisclaimerWidget";
-// const workspaceRequirementsWidgetName = "WorkspaceRequirementsWidget";
 
-// const mockLinkCmsContent = {
+const mockLinkCmsContent = {
-//     BodyText: "Sample link body text here.",
+    BodyText: "Sample link body text here.",
-// };
+};
 
-// const mockModalCmsContent = {
+const mockModalCmsContent = {
-//     FooterText: "Sample modal footer text here.",
+    FooterText: "Sample modal footer text here.",
-// };
+};
 
-// const mockMobileFeeCmsContent = {
+const mockMobileFeeDisclaimerContent = {
-//     Text: "This is the price {custom:mobileFee}",
+    Text: "Sample mobile fee disclaimer text {custom:mobileFee}",
-// };
+};
 
 const mockMixin = {
     methods: {
@@ -32,7 +35,7 @@ const mockMixin = {
             }
 
             if (widgetName === mobileFeeDisclaimerWidgetName) {
-                return mockMobileFeeCmsContent[cmsFieldName];
+                return mockMobileFeeDisclaimerContent[cmsFieldName];
             }
 
             return null;
@@ -40,59 +43,177 @@ const mockMixin = {
 
         getZipCodeData: jest.fn((zip) => {
             if (zip === "43235") {
-                return {
+                return Promise.resolve({
                     containsMilitaryBase: false,
                     isServiceable: true,
                     isValid: true,
                     state: "OH",
                     zipCodeCtu: "01820",
-                };
+                });
             }
 
-            if (zip === "61606") {
+            return Promise.resolve({
-                return {
-                    containsMilitaryBase: false,
-                    isServiceable: true,
-                    isValid: true,
-                    state: "IL",
-                    zipCodeCtu: "01526",
-                };
-            }
-
-            return {
                 containsMilitaryBase: false,
                 isServiceable: false,
                 isValid: false,
                 state: null,
                 zipCodeCtu: null,
-            };
+            });
+        }),
+
+        dispatchStoreAction: jest.fn((actionName) => {
+            if (actionName === storeActions.GET_MOBILE_FEE_PART) {
+                return Promise.resolve({
+                    data: {
+                        partNumber: "MOBILE FEE",
+                        description: "MOBILE FEE",
+                        partType: "FEE",
+                    },
+                });
+            }
+
+            if (actionName === storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA) {
+                return Promise.resolve([
+                    {
+                        partNumber: "MOBILE FEE",
+                        description: "MOBILE FEE",
+                        partType: "FEE",
+                        laborAmount: 49.99,
+                        sellingPrice: 0,
+                        kitPrice: 0,
+                    },
+                ]);
+            }
+        }),
+
+        getTotalLineItemPrice: jest.fn((lineItem) => {
+            return 49.99;
         }),
     },
 };
 
 describe("mobile-location-modal-questions.vue", () => {
-    it("Initial state on load with no existing location info", async () => {
+    it("Should copy the modelValue to the internalModel when the component is mounted", async () => {
-        let mobileLocationQuestions = {
+        // Arrange
+        const mobileLocationQuestions = {
             addressQuestions: {
-                streetAddress: "",
+                streetAddress: "555 Some St",
-                apartmentNumberOrBusinessName: "",
+                apartmentNumberOrBusinessName: "Apt 1",
-                city: "",
+                city: "Funkytown",
-                state: "",
+                state: "OH",
-                zipCode: "",
+                zipCode: "55555",
             },
-            isVehicleProtected: null,
+            isVehicleProtected: true,
+            serviceZipCode: "55555",
         };
 
-        // Arrange
+        const { wrapper } = setupMocks({
-        const wrapper = shallowMount(mobileLocationModalQuestions, {
             mixins: [mockMixin],
             props: {
                 modelValue: mobileLocationQuestions,
             },
-            attachTo: document.body,
+            mountOptions: {
+                attachTo: document.body,
+            },
         });
 
         // Assert
-        //expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
+        expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual("555 Some St");
+        expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual(
+            "Apt 1"
+        );
+        expect(wrapper.vm.internalModel.addressQuestions.city).toEqual("Funkytown");
+        expect(wrapper.vm.internalModel.addressQuestions.state).toEqual("OH");
+        expect(wrapper.vm.internalModel.addressQuestions.zipCode).toEqual("55555");
+        expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(true);
+        expect(wrapper.vm.internalModel.serviceZipCode).toEqual("55555");
+    });
+
+    it("Should set mobile fee price to 0.00 when loading the page and there is no existing service zip code", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "43235",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "",
+        };
+
+        // Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+
+            props: {
+                modelValue: mobileLocationQuestions,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.props().modelValue.serviceZipCode).toBe("");
+
+        // Assert
+        expect(wrapper.vm.mobileFee).toEqual(0.0);
+    });
+
+    it.only("Should calculate the mobile fee price when loading the page and there is an existing service zip code", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "OH",
+                zipCode: "43235",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "43235",
+        };
+
+        // Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+
+            props: {
+                modelValue: mobileLocationQuestions,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        console.log(wrapper.vm.mobileFee);
+
+        expect(wrapper.props().modelValue.serviceZipCode).toBe("43235");
+
+        // Assert
+        expect(wrapper.vm.mobileFee).toEqual(49.99);
     });
 });
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(mobileLocationModalQuestions, resultingMountOptions)
+        : mount(mobileLocationModalQuestions, resultingMountOptions);
+
+    return { wrapper };
+}

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

@@ -22,7 +22,6 @@
     <modal
         :ref="modalName"
         :headerText="modalHeaderText"
-        :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
         @footer-button-event="setMobileLocation">
         <addressQuestions
@@ -52,7 +51,6 @@ import alert from "@/ux-components/alert/alert";
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
 import textBlock from "@/digital-components/text-block/text-block";
-import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 
 export default {
@@ -63,7 +61,7 @@ export default {
             internalModel: this.copyModel(this.modelValue),
             displayInvalidZipAlert: false,
             modalName: "MobileLocationModalWidget",
-            mobileFee: "",
+            mobileFee: 0.0,
         };
     },
     props: {
@@ -88,10 +86,34 @@ export default {
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
     },
-    mounted() {
+    async mounted() {
-        this.getMobileFee().then((result) => {
+        this.mobileFee = await this.getMobileFee();
-            this.mobileFee = result;
+
-        });
+        // this.getMobileFee().then((result) => {
+        //     console.log(result);
+        //     this.mobileFee = result;
+        //     console.log(this.mobileFee);
+        // });
+
+        // if (this.serviceZipCode !== "") {
+        //     console.log(`Calling this.getMobileFee() inside mounted()`);
+        //     this.mobileFee = await this.getMobileFee();
+        //     console.log(
+        //         `After calling this.getMobileFee() inside mounted(), result: ${this.mobileFee}`
+        //     );
+        // }
+
+        // // this.getMobileFee().then((result) => {
+        // //     console.log(`After calling this.getMobileFee() inside mounted()`);
+        // //     console.log(`Result of this.getMobileFee() ${result}`);
+        // //     //this.test = "this";
+        // //     //console.log(this.test);
+        // //     this.mobileFee = result;
+        // //     console.log(
+        // //         `Value of this.mobile fee after calling this.getMobileFee(): ${this.mobileFee}`
+        // //     );
+        // // });
+        // //console.log(`After calling this.getMobileFee() inside mounted() - NOT IN THE CALLBACK`);
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -130,54 +152,40 @@ export default {
     },
     methods: {
         copyModel(modelToCopy) {
-            return {
+            return { ...modelToCopy };
-                addressQuestions: {
-                    streetAddress: modelToCopy.addressQuestions.streetAddress,
-                    apartmentNumberOrBusinessName:
-                        modelToCopy.addressQuestions.apartmentNumberOrBusinessName,
-                    city: modelToCopy.addressQuestions.city,
-                    state: modelToCopy.addressQuestions.state,
-                    zipCode: modelToCopy.addressQuestions.zipCode,
-                },
-                isVehicleProtected: modelToCopy.isVehicleProtected,
-                serviceZipCode: modelToCopy.serviceZipCode,
-            };
         },
 
         setServiceZipCode(serviceZipCode) {
             this.internalModel.serviceZipCode = serviceZipCode;
         },
 
-        getServiceZipCodeFromStore() {
-            return this.$store.getters.order.serviceLocation.zipCode;
-        },
-
         async getMobileFee() {
             if (!this.internalModel.serviceZipCode) {
-                return "";
+                return 0.0;
             }
 
             const zipCodeData = await this.getZipCodeData(this.internalModel.serviceZipCode);
-
+            console.log(zipCodeData);
             // Get the Mobile Fee Part
-            const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
+            const mobileFeePart = await this.dispatchStoreAction(
                 storeActions.GET_MOBILE_FEE_PART,
                 null,
                 false
             );
-
+            console.log(mobileFeePart);
             // Get the Mobile Fee Part Price
-            const pricingResults = await baseMixin.methods.dispatchStoreAction(
+            const pricingResults = await this.dispatchStoreAction(
-                storeActions.PRICE_ORDER_ITEMS,
+                storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
                 {
                     availableLineItems: [mobileFeePart.data],
-                    serviceZipCode: zipCodeData.zipCode,
+                    serviceZipCode: this.internalModel.serviceZipCode,
-                    zipCodeCtu: zipCodeData.zipCodeCtu,
+                    ctu: zipCodeData.zipCodeCtu,
                 },
                 false
             );
+            console.log(pricingResults);
 
-            return await baseMixin.methods.getTotalLineItemPrice(pricingResults[0]);
+            return this.getTotalLineItemPrice(pricingResults[0]);
         },
 
         openModal() {
@@ -240,7 +248,7 @@ export default {
         },
         "modelValue.serviceZipCode": {
             async handler(newValue) {
-                this.mobileFee = await this.getMobileFee(newValue);
+                this.mobileFee = await this.getMobileFee();
             },
         },
     },

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

@@ -86,11 +86,12 @@ export default {
 
     methods: {
         arePagePrerequisitesValid() {
-            return (
+            return true;
-                store.getters.lineItems.supportingItems !== null &&
+            // (
-                store.getters.order.serviceLocation.zipCode !== null &&
+            //     store.getters.lineItems.supportingItems !== null &&
-                store.getters.payment.isInsurance !== null
+            //     store.getters.order.serviceLocation.zipCode !== null &&
-            );
+            //     store.getters.payment.isInsurance !== null
+            // );
         },
         getRegistrationAddressFromStore() {
             return this.$store.getters.vehicle.registration.address;