diff --git a/src/helpers/service-location-helper.spec.js b/src/helpers/service-location-helper.spec.js index 9b1920fba..ac3eace06 100644 --- a/src/helpers/service-location-helper.spec.js +++ b/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"); 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 7e5aaff8c..f7a2238c8 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 @@ -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 }) { 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 ba7cc2fab..644a875d3 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 @@ -7,6 +7,7 @@ v-html="mobileLocationLinkPromptText">
({ - settleAllPromises: jest.fn(), +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(() => { + return Promise.resolve("content"); + }), })); -jest.mock("@/helpers/cms-content-helper", () => ({ - fetchCmsContentForPage: jest.fn(), -})); +const mockGetPricedMobileFeePart = (mockServiceZipCode) => { + 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, - city: undefined, - state: undefined, - zipCode: undefined, + address: "5555 Sulgrave Dr", + city: "New Albany", + state: "OH", + 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(); - wrapper.vm.resetServiceZipCode(newServiceZipCodeQuestion); + serviceZipCodeComponent.vm.$emit("update:modelValue", 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 = { - zipCode: "61606", - state: "IL", + wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn(); + wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn(); + + 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 - wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn(); - wrapper.vm.serviceZipCodeQuestion = newServiceZipCodeQuestion; + const newServiceZipCodeInfo = { + state: "OH", + 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( - newServiceZipCodeQuestion.zipCode - ); + expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo); }); }); }); @@ -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; diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 6c7849216..ca6065d45 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -6,7 +6,7 @@ @@ -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; - // ( - // store.getters.lineItems.supportingItems !== null && - // store.getters.order.serviceLocation.zipCode !== null && - // store.getters.payment.isInsurance !== null - // ); + return ( + store.getters.lineItems.supportingItems !== null && + store.getters.order.serviceLocation.zipCode !== 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) { - this.serviceZipCodeQuestion.state = newValue.state; - this.serviceZipCodeQuestion.zipCode = newValue.zipCode; - this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable; + resetServiceZipCode(updatedServiceZipInfo) { + this.serviceZipCodeQuestion.state = updatedServiceZipInfo.state; + this.serviceZipCodeQuestion.zipCode = updatedServiceZipInfo.zipCode; + 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,