CASH-170

creating async function as the computed property can not directly handle asynchronous operations or promises.

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

@@ -203,7 +203,7 @@ describe("mobile-location-modal-questions.vue", () => {
         expect(wrapper.vm.$refs.MobileLocationModalWidget.openModal).toHaveBeenCalled();
     });
 
-    it("Should emit update:modelValue on setMobileLocation for a valid address and vehicle protection answer", async () => {
+    it("Should emit updated-mobile-location-questions on setMobileLocation for a valid address and vehicle protection answer", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -240,17 +240,26 @@ describe("mobile-location-modal-questions.vue", () => {
         });
         wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
 
+        // Mock the emitEvent function
+        wrapper.vm.emitEvent = jest.fn(async (eventName, payload) => {
+            return new Promise((resolve) => {
+                wrapper.vm.$emit(eventName, newMobileLocationQuestions, resolve);
+                resolve(newMobileLocationQuestions);
+            });
+        });
         // Act
         wrapper.vm.internalModel = newMobileLocationQuestions;
+
         await wrapper.vm.setMobileLocation();
 
-        let expectedEmit = [[newMobileLocationQuestions]];
-
         // Assert
-        expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
+        expect(wrapper.emitted()["updated-mobile-location-questions"]).toBeTruthy();
+        expect(wrapper.emitted()["updated-mobile-location-questions"][0][0]).toBe(
+            newMobileLocationQuestions
+        );
     });
 
-    it("Should not emit update:modelValue on setMobileLocation for an invalid address zip code", async () => {
+    it("Should not emit updated-mobile-location-questions on setMobileLocation for an invalid address zip code", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -293,7 +302,7 @@ describe("mobile-location-modal-questions.vue", () => {
         await wrapper.vm.setMobileLocation();
 
         // Assert
-        expect(wrapper.emitted("update:modelValue")).not.toBeTruthy();
+        expect(wrapper.emitted("updated-mobile-location-questions")).not.toBeTruthy();
     });
 
     it("Should display invalid zip alert for invalid address zip inputs", async () => {

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

@@ -98,6 +98,7 @@ export default {
         "updated-contains-military-base",
         "updated-bill-to-account-number",
         "mobileLocationSelected",
+        "updated-mobile-location-questions",
     ],
     data() {
         return {
@@ -251,10 +252,15 @@ export default {
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
                 this.resetModalButtonStyle();
+                return;
             } else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
                 this.displayMismatchStateAndZipAlert = true;
                 this.resetModalButtonStyle();
-            } else {
+                return;
+            } else if (
+                this.internalModel.addressQuestions.zipCode !==
+                this.modelValue.addressQuestions.zipCode
+            ) {
                 // retrieve mobile fee part
                 const serviceZipCode = this.internalModel.addressQuestions.zipCode;
                 const mobileFeePart = await getPricedMobileFeePart(
@@ -279,13 +285,17 @@ export default {
                 this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
                 this.$emit("updated-mobile-ctu", zipCodeData.zipCodeCtu);
                 this.$emit("updated-bill-to-account-number", billToAccountNumber);
-
-                // update the page level model
-                this.$emit("update:modelValue", this.internalModel);
-
-                //Page advance to Schedule page
-                this.$emit("mobileLocationSelected");
             }
+            // update the page level model
+            await this.emitEvent("updated-mobile-location-questions", this.internalModel);
+
+            this.$emit("mobileLocationSelected");
+        },
+        //creating emitEvent function to raise events with resolve callback to handle events sequencing
+        async emitEvent(eventName, payload) {
+            return new Promise((resolve) => {
+                this.$emit(eventName, payload, resolve);
+            });
         },
     },
     watch: {

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

@@ -463,11 +463,23 @@ describe("service-location.vue", () => {
             };
 
             // Act
-            mobileLocationQuestionsComponent.vm.$emit(
+
-                "update:modelValue",
+            // Mock the emitEvent function
+            mobileLocationQuestionsComponent.vm.emitEvent = jest.fn(async (eventName, payload) => {
+                return new Promise((resolve) => {
+                    mobileLocationQuestionsComponent.vm.$emit(eventName, payload, resolve);
+                });
+            });
+
+            // Trigger the event
+            await mobileLocationQuestionsComponent.vm.emitEvent(
+                "updated-mobile-location-questions",
                 newMobileLocationQuestions
             );
 
+            await wrapper.vm.$nextTick(); // Wait for DOM updates
+            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for promise to resolve
+
             // Assert
             expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
         });
@@ -532,11 +544,23 @@ describe("service-location.vue", () => {
             };
 
             // Act
-            mobileLocationQuestionsComponent.vm.$emit(
+
-                "update:modelValue",
+            // Mock the emitEvent function
+            mobileLocationQuestionsComponent.vm.emitEvent = jest.fn(async (eventName, payload) => {
+                return new Promise((resolve) => {
+                    mobileLocationQuestionsComponent.vm.$emit(eventName, payload, resolve);
+                });
+            });
+
+            // Trigger the event
+            await mobileLocationQuestionsComponent.vm.emitEvent(
+                "updated-mobile-location-questions",
                 newMobileLocationQuestions
             );
 
+            await wrapper.vm.$nextTick(); // Wait for DOM updates
+            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for promise to resolve
+
             // Assert
             expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
         });

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

@@ -93,6 +93,7 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         @updated-mobile-ctu="setCtuForMobile"
+                        @updated-mobile-location-questions="setMobileLocationQuestions"
                         validationRules="mobile-location-required"
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
@@ -296,17 +297,18 @@ export default {
                     isVehicleProtected: this.isVehicleProtected,
                 };
             },
-            set: function (newValue) {
+            async set(newValue) {
                 if (newValue.addressQuestions.zipCode !== this.zipCode) {
-                    getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
+                    await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
                         this.shopProviderData = result.data;
                         this.selectedProvider = new Provider(
                             this.shopProviderData.mobileProviderNumber
                         );
                     });
                 }
-
                 this.setMobileLocation(newValue);
+                //handle promise
+                newValue.resolve?.();
             },
         },
         isServiceableMobile() {
@@ -485,6 +487,10 @@ export default {
         setMobileFeePart(mobileFeePart) {
             this.mobileFeePart = mobileFeePart;
         },
+        //creating async function as the computed property can not directly handle asynchronous operations or promises.
+        async setMobileLocationQuestions(newValue, resolve) {
+            this.mobileLocationQuestions = { ...newValue, resolve };
+        },
         getServiceAddressFromStore() {
             return store.getters.order.serviceLocation.address;
         },