diff --git a/jest.config.js b/jest.config.js index e276f88f4..80bbe9d6d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,7 +13,6 @@ module.exports = { "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", - "!src/layouts/license-plate-lookup/license-plate-lookup.vue", "!src/layouts/vin-lookup/vin-lookup.vue", "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js index c39283d72..453aadf69 100644 --- a/src/helpers/damage-helper.js +++ b/src/helpers/damage-helper.js @@ -1,10 +1,19 @@ import store from "@/store"; +import baseMixin from "@/mixins/base-mixin.js"; +import { storeActions } from "@/constants/store-actions"; export function getDamageString() { return store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location; } -export function compareGlassOptions(newOptions, currentOptions){ +export async function isGlassAvailableForCarId(carId){ + const newGlassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction( + storeActions.GET_DAMAGE_OPTIONS, + { carId: carId } + ); + + const currentGlassOptions = store.getters.damage.glassToReplace; + const optionsMap = { Windshield: "windshieldOptions", Driver: "driverSideOptions", @@ -12,11 +21,11 @@ export function compareGlassOptions(newOptions, currentOptions){ Rear: "backGlassOptions" } - for(const option of currentOptions){ - if(!newOptions[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){ - return true; + for(const option of currentGlassOptions){ + if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){ + return false; } } - return false; + return true; } \ No newline at end of file diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index 581d81bb6..7808ede6d 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -78,7 +78,7 @@ async function getLatestPageForRedirection() { return fmgPageValues.VEHICLE_DAMAGE; } else { if (store.getters.vehicle.vin) { - return fmgPageValues.VIN_LOOKUP; + return fmgPageValues.LICENSE_PLATE_LOOKUP; } else { return fmgPageValues.ESTIMATE; } diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js new file mode 100644 index 000000000..19242c60d --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js @@ -0,0 +1,135 @@ +// Components +import vehicleDamage from "@/layouts/license-plate-lookup/license-plate-lookup.vue"; + +// Supporting Files +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import baseMixin from "@/mixins/base-mixin"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import { shallowMount, flushPromises } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; +import { storeActions } from "@/constants/store-actions"; +import { storeMutations } from "@/constants/store-mutations"; +import store from "@/store"; +import { validate } from "vee-validate"; + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +// Mock Store +jest.mock("@/store", () => ({ + commit: jest.fn(), + dispatch: jest.fn(), + getters: { + vehicle: { + carId: "C00000000", + image: "test.jpg", + payment: { + insuranceCoverage: { + isVerified: false + } + } + }, + eventBusItem: jest.fn(), + damage: { + glassToReplace: [] + }, + }, +})); + +describe("license-plate-lookup.vue", () => { + test("CarId set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + await nextTick(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + +describe("license-plate-lookup.vue", () => { + test("BackButtonAction triggers a router.navigate change", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + + //Act + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); + + wrapper.vm.backButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + + }); +}); + + +function setupMocks({ + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = { + router: { + navigate: jest.fn(), + }, + store: { + getters: { + vehicle: {}, + payment: { insuranceCoverage: { isVerified: false } }, + }, + }, + }, +}) { + //Mock api responses + baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + }, + FunnelHeaderWidget: { + LogoImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + }, + }, + }; + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + + const mountOptions = getMountOptions(mountOptionsMockData); + mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods + + const wrapper = shallowMount(vehicleDamage, mountOptions); + + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + return { wrapper, apiPromise }; +} \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index f76a98c69..92b63811c 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -11,42 +11,42 @@
- +
- +
- +
- +
{ this.$refs.funnelFooter.removeLoader(); - this.vinDoesNotMatchCarId = false; - this.vinNotValid = true; + this.isVinValid = false; + this.isCarIdDifferent = false; return; }); - if ((vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) && (vinLookup.data.vehicle.carId !== this.carIdEntered)) { - this.carIdEntered = vinLookup.data.vehicle.carId; + this.isCarIdDifferent = vinLookup.data.vehicle.carId !== store.getters.vehicle.carId; + + if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) { + this.previouslyEnteredCarId = vinLookup.data.vehicle.carId; this.customAlertData.vehicleInfo = vinLookup.data.vehicle; - this.newCarId = true; - const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction( - storeActions.GET_DAMAGE_OPTIONS, - { carId: vinLookup.data.vehicle.carId } - ); - this.glassOptionsMismatch = compareGlassOptions(glassOptions.data, store.getters.damage.glassToReplace); - this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); + this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); + this.isVinValid = true; + this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); this.$refs.funnelFooter.removeLoader(); - this.vinNotValid = false; - this.vinDoesNotMatchCarId = true; return; } @@ -203,7 +200,7 @@ export default { { carId: vinLookup.data.vehicle.carId, glassArray: store.getters.damage.glassToReplace ? store.getters.damage.glassToReplace : [], - zipCode: this.serviceZip ? this.serviceZip : this.zip, + zipCode: this.serviceZip ? this.serviceZip : this.registrationZip, vin: vinLookup.data.vin }, false @@ -211,7 +208,7 @@ export default { this.navigateForward(partsData); }, navigateForward(partsData){ - if(this.newCarId && this.glassOptionsMismatch){ + if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data); return; } else { @@ -232,9 +229,6 @@ export default { ); }, updateCustomerInfo(vin, vehicleInfo, registrationState) { - if(this.newCarId && this.glassOptionsMismatch){ - store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); - } store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make); @@ -247,7 +241,7 @@ export default { store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate); store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState); - store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.zip); + store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip); store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); }, @@ -255,6 +249,12 @@ export default { watch: { licensePlate() { this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); + }, + registrationZip(){ + this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); + }, + serviceZip(){ + this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); } }, components: {