From 5e661111e1e6ce778545facdcf2c8237da340a60 Mon Sep 17 00:00:00 2001 From: hiteshkumar87 Date: Tue, 11 Feb 2025 13:51:03 +0530 Subject: [PATCH] CASH-170 creating async function as the computed property can not directly handle asynchronous operations or promises. --- .../mobile-location-modal-questions.spec.js | 21 ++++++++---- .../mobile-location-modal-questions.vue | 24 ++++++++++---- .../service-location/service-location.spec.js | 32 ++++++++++++++++--- .../service-location/service-location.vue | 12 +++++-- 4 files changed, 69 insertions(+), 20 deletions(-) diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js index 863a04c82..91f26b64d 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js +++ b/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 () => { diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index d88bd53e2..dadbaff8b 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/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: { diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 54f28a89c..b29ec604b 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/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); }); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 9addea705..47cf5262e 100644 --- a/src/layouts/service-location/service-location.vue +++ b/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; },