From a7ab6738199919348c7d709f66a0176c989b60ae Mon Sep 17 00:00:00 2001 From: hiteshkumar87 Date: Mon, 17 Feb 2025 14:41:27 +0530 Subject: [PATCH] CASH-170 code optimization with single event setMobileLocationAndProceed --- .../mobile-location-modal-questions.spec.js | 17 +++------ .../mobile-location-modal-questions.vue | 13 ++----- .../service-location/service-location.spec.js | 35 ++++++------------- .../service-location/service-location.vue | 30 +++++++--------- 4 files changed, 31 insertions(+), 64 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 91f26b64d..f38262005 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 updated-mobile-location-questions on setMobileLocation for a valid address and vehicle protection answer", async () => { + it("Should emit setMobileLocationAndProceed on setMobileLocation for a valid address and vehicle protection answer", async () => { // Arrange const mobileLocationQuestions = { addressQuestions: { @@ -240,26 +240,19 @@ 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(); // Assert - expect(wrapper.emitted()["updated-mobile-location-questions"]).toBeTruthy(); - expect(wrapper.emitted()["updated-mobile-location-questions"][0][0]).toBe( + expect(wrapper.emitted()["setMobileLocationAndProceed"]).toBeTruthy(); + expect(wrapper.emitted()["setMobileLocationAndProceed"][0][0]).toStrictEqual( newMobileLocationQuestions ); }); - it("Should not emit updated-mobile-location-questions on setMobileLocation for an invalid address zip code", async () => { + it("Should not emit setMobileLocationAndProceed on setMobileLocation for an invalid address zip code", async () => { // Arrange const mobileLocationQuestions = { addressQuestions: { @@ -302,7 +295,7 @@ describe("mobile-location-modal-questions.vue", () => { await wrapper.vm.setMobileLocation(); // Assert - expect(wrapper.emitted("updated-mobile-location-questions")).not.toBeTruthy(); + expect(wrapper.emitted("setMobileLocationAndProceed")).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 dadbaff8b..4672cca7f 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 @@ -97,8 +97,7 @@ export default { "updated-mobile-fee-part", "updated-contains-military-base", "updated-bill-to-account-number", - "mobileLocationSelected", - "updated-mobile-location-questions", + "setMobileLocationAndProceed", ], data() { return { @@ -287,15 +286,7 @@ export default { this.$emit("updated-bill-to-account-number", billToAccountNumber); } // 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); - }); + this.$emit("setMobileLocationAndProceed", this.internalModel); }, }, watch: { diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index b29ec604b..01008c49c 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -438,6 +438,7 @@ describe("service-location.vue", () => { ref: "serviceZipCodeQuestion", }); serviceZipCodeComponent.resetMobileFeePart = jest.fn(); + wrapper.vm.forwardButtonAction = jest.fn(); const mobileLocationQuestions = { addressQuestions: { @@ -450,7 +451,6 @@ describe("service-location.vue", () => { isVehicleProtected: null, }; wrapper.vm.mobileLocationQuestions = mobileLocationQuestions; - const newMobileLocationQuestions = { addressQuestions: { streetAddress: "5555 Sulgrave Dr", @@ -464,21 +464,13 @@ describe("service-location.vue", () => { // Act - // 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", + await mobileLocationQuestionsComponent.vm.$emit( + "setMobileLocationAndProceed", 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); @@ -505,7 +497,7 @@ describe("service-location.vue", () => { ref: "serviceZipCodeQuestion", }); serviceZipCodeComponent.resetMobileFeePart = jest.fn(); - + wrapper.vm.forwardButtonAction = jest.fn(); const mobileLocationQuestions = { addressQuestions: { streetAddress: "", @@ -545,21 +537,13 @@ describe("service-location.vue", () => { // Act - // 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", + await mobileLocationQuestionsComponent.vm.$emit( + "setMobileLocationAndProceed", 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); @@ -581,6 +565,7 @@ describe("service-location.vue", () => { ref: "mobileLocationQuestions", }); mobileLocationQuestionsComponent.resetComponent = jest.fn(); + wrapper.vm.forwardButtonAction = jest.fn(); const serviceZipCodeComponent = wrapper.findComponent({ ref: "serviceZipCodeQuestion", @@ -599,7 +584,10 @@ describe("service-location.vue", () => { }; // Act - mobileLocationQuestionsComponent.vm.$emit("update:modelValue", mobileLocationQuestions); + mobileLocationQuestionsComponent.vm.$emit( + "setMobileLocationAndProceed", + mobileLocationQuestions + ); // Assert expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile"); @@ -1432,6 +1420,5 @@ function setupMocks({ mountOptionsMockData = {} }) { const mountOptions = getMountOptions(mountOptionsMockData); const wrapper = shallowMount(serviceLocation, mountOptions); wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; - return { wrapper, apiPromise }; } diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 47cf5262e..033339ebe 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -93,12 +93,11 @@ @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" modalWidgetName="MobileLocationModalWidget" - @mobileLocationSelected="forwardButtonAction" /> + @setMobileLocationAndProceed="setMobileLocationQuestions" /> { - this.shopProviderData = result.data; - this.selectedProvider = new Provider( - this.shopProviderData.mobileProviderNumber - ); - }); - } - this.setMobileLocation(newValue); - //handle promise - newValue.resolve?.(); - }, }, isServiceableMobile() { if (this.isRecalibrationServiceableMobile !== null) { @@ -488,8 +474,18 @@ export default { 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 }; + async setMobileLocationQuestions(newValue) { + if (newValue.addressQuestions.zipCode !== this.zipCode) { + await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => { + this.shopProviderData = result.data; + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + }); + } + this.setMobileLocation(newValue); + //proceed to next page + this.forwardButtonAction(); }, getServiceAddressFromStore() { return store.getters.order.serviceLocation.address;