From 5481bac095530d828a6be292072f914d4201cead Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Tue, 6 Jun 2023 13:26:37 -0400 Subject: [PATCH 1/8] WIP --- src/layouts/policy-vehicles/policy-vehicles.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index a85cc583..be5f17dc 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -8,7 +8,7 @@
- + Date: Tue, 6 Jun 2023 18:04:21 -0400 Subject: [PATCH 2/8] display correct vehicle image WIP --- .../policy-vehicles/policy-vehicles.vue | 56 ++++++++++++++++--- 1 file changed, 49 insertions(+), 7 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index be5f17dc..42144ec4 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -50,9 +50,13 @@ export default { mixins: [BaseFormMixin], data() { return { - selectedVehicleVin: "", - bailout: false - } + selectedVehicleVin: "", + displayGeneric: false, + bailout: false + } + }, + mounted() { + useMainStore().resetVehicleState(); }, async beforeRouteEnter(to, from, next) { @@ -146,10 +150,48 @@ export default { VehiclesFromApi() { return useMainStore().pageData(issPageValues.POLICY_VEHICLES); }, - displayGeneric() { - return this.selectedVehicleVin && !this.selectedStyle; - } - }, + selectedVehicle() { + const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin); + return vehicle; + }, + //displayGeneric() { + // const selectedVehicle = useMainStore().lookupVehicleByVin(this.selectedVehicleVin); + // const styleOptions = this.mainStore.getVehicleStyles( + // selectedVehicle.year, + // selectedVehicle.make, + // selectedVehicle.model, + // ); + + + // const styleOptions = this.selectedVehicle.style; + + // if (styleOptions.length > 1) { + // return true; + // } + // return false; + //} + }, + watch: { + async selectedVehicleVin(value) { + const vehicle = await this.lookupVehicleByVin(value); + if (value === "Vehicle not listed") { + this.mainStore.resetVehicleState(); + } + this.mainStore.updateVehicle(vehicle.data); + + const styleOptions = await this.mainStore.getVehicleStyles( + vehicle.data.year, + vehicle.data.make, + vehicle.data.model + ) + + if (styleOptions.length > 1) { + this.displayGeneric = true; + } + + } + + }, components: { siteHeader, siteFooter, From b4f3117f41fbfb519d8fcd35d1ce1512a1d94b11 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Wed, 7 Jun 2023 11:00:39 -0400 Subject: [PATCH 3/8] refactor --- .../policy-vehicles/policy-vehicles.vue | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index 42144ec4..92a33108 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -51,11 +51,12 @@ export default { data() { return { selectedVehicleVin: "", - displayGeneric: false, + displayGeneric: true, bailout: false } }, mounted() { + // clear previously selected vehicle so that the blurred vehicle image displays on page entry useMainStore().resetVehicleState(); }, async beforeRouteEnter(to, from, next) @@ -173,24 +174,30 @@ export default { }, watch: { async selectedVehicleVin(value) { - const vehicle = await this.lookupVehicleByVin(value); if (value === "Vehicle not listed") { + // clear previously selected vehicle and image this.mainStore.resetVehicleState(); + this.displayGeneric = true; } - this.mainStore.updateVehicle(vehicle.data); - + + else { + // get vehicle details from selected vin + const vehicle = await this.lookupVehicleByVin(value); + // save selected vehicle to the store + this.mainStore.updateVehicle(vehicle.data); + this.displayGeneric = false; + const styleOptions = await this.mainStore.getVehicleStyles( vehicle.data.year, vehicle.data.make, vehicle.data.model ) - + // if there is more than 1 style for the selected vehicle, display blurred image if (styleOptions.length > 1) { this.displayGeneric = true; } - + } } - }, components: { siteHeader, From 042a732d04680579e06c3171dd33893064e382c8 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Wed, 7 Jun 2023 16:19:04 -0400 Subject: [PATCH 4/8] all scenarios besides 1B --- .../policy-vehicles/policy-vehicles.vue | 37 ++++++++----------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index 92a33108..83b56e02 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -154,23 +154,7 @@ export default { selectedVehicle() { const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin); return vehicle; - }, - //displayGeneric() { - // const selectedVehicle = useMainStore().lookupVehicleByVin(this.selectedVehicleVin); - // const styleOptions = this.mainStore.getVehicleStyles( - // selectedVehicle.year, - // selectedVehicle.make, - // selectedVehicle.model, - // ); - - - // const styleOptions = this.selectedVehicle.style; - - // if (styleOptions.length > 1) { - // return true; - // } - // return false; - //} + }, }, watch: { async selectedVehicleVin(value) { @@ -183,19 +167,30 @@ export default { else { // get vehicle details from selected vin const vehicle = await this.lookupVehicleByVin(value); + + if (vehicle.error) { + this.mainStore.resetVehicleState(); + this.displayGeneric = true; + } + // save selected vehicle to the store this.mainStore.updateVehicle(vehicle.data); - this.displayGeneric = false; - + this.displayGeneric = true; + const styleOptions = await this.mainStore.getVehicleStyles( vehicle.data.year, vehicle.data.make, vehicle.data.model ) - // if there is more than 1 style for the selected vehicle, display blurred image - if (styleOptions.length > 1) { + + // if there is more than 1 style for the selected vehicle, display generic/blurred image + if (styleOptions.data.length > 1) { this.displayGeneric = true; } + else { + // display clear image of vehicle + this.displayGeneric = false; + } } } }, From e85852bd451ec94596ee1cb8612df6c45890cae8 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 8 Jun 2023 10:53:02 -0400 Subject: [PATCH 5/8] updates --- src/layouts/policy-vehicles/policy-vehicles.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index 83b56e02..82ab834f 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -168,6 +168,7 @@ export default { // get vehicle details from selected vin const vehicle = await this.lookupVehicleByVin(value); + // handle error in case vehicle info doesn't come back for selected VIN if (vehicle.error) { this.mainStore.resetVehicleState(); this.displayGeneric = true; @@ -184,7 +185,7 @@ export default { ) // if there is more than 1 style for the selected vehicle, display generic/blurred image - if (styleOptions.data.length > 1) { + if (styleOptions?.data?.length > 1) { this.displayGeneric = true; } else { From 7e23c40602ef28db42a3341acf3ed233e070628b Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 8 Jun 2023 16:10:47 -0400 Subject: [PATCH 6/8] autoselect if only one vehicle on policy --- src/layouts/policy-vehicles/policy-vehicles.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index 82ab834f..f38516f6 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -56,8 +56,7 @@ export default { } }, mounted() { - // clear previously selected vehicle so that the blurred vehicle image displays on page entry - useMainStore().resetVehicleState(); + this.autoSelectIfOneVehicle(); }, async beforeRouteEnter(to, from, next) { @@ -127,8 +126,12 @@ export default { }, }; } - }, - + }, + autoSelectIfOneVehicle() { + if (this.VehiclesFromApi.length == 1) { + this.selectedVehicleVin = this.VehiclesFromApi[0].vin; + } + } }, computed:{ VehiclesForQuestions() { @@ -165,7 +168,7 @@ export default { } else { - // get vehicle details from selected vin + // get vehicle details from selected VIN const vehicle = await this.lookupVehicleByVin(value); // handle error in case vehicle info doesn't come back for selected VIN @@ -177,7 +180,8 @@ export default { // save selected vehicle to the store this.mainStore.updateVehicle(vehicle.data); this.displayGeneric = true; - + + // get the style(s) associated with the selected YMM const styleOptions = await this.mainStore.getVehicleStyles( vehicle.data.year, vehicle.data.make, From 0fecc0d98968108641a4582f03618236a001c177 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 8 Jun 2023 16:11:12 -0400 Subject: [PATCH 7/8] unit test update --- src/layouts/policy-vehicles/policy-vehicles.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.spec.js b/src/layouts/policy-vehicles/policy-vehicles.spec.js index 1d2f6875..7f45d1cf 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.spec.js +++ b/src/layouts/policy-vehicles/policy-vehicles.spec.js @@ -87,7 +87,7 @@ describe("policy-vehicles.vue", () => { // Act await wrapper.setData({ - selectedVehicleVin: vehicleSelectionOptions.VEHICLE_NOT_LISTED, + selectedVehicleVin: "Vehicle not listed", }); await wrapper.vm.forwardButtonAction(); From 3da066f807e87dbadd06a995c5a8a17f38543278 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 12 Jun 2023 11:04:12 -0400 Subject: [PATCH 8/8] added unit test for auto selecting vehicle --- .../policy-vehicles/policy-vehicles.spec.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles.spec.js b/src/layouts/policy-vehicles/policy-vehicles.spec.js index 7f45d1cf..5cecac66 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.spec.js +++ b/src/layouts/policy-vehicles/policy-vehicles.spec.js @@ -4,7 +4,6 @@ import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { useMainStore } from "@/store"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; -import {vehicleSelectionOptions} from "@/constants/vehicle-selection-options"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; // Mock fetchCmsContentForPage @@ -33,17 +32,6 @@ describe("policy-vehicles.vue", () => { //Assert expect(wrapper.vm.$router.navigate).toBeCalled(); }); - test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => { - // Arrange - const { wrapper } = setupMocks({}); - - // Act - await wrapper.vm.backButtonAction(); - - //Assert - expect(wrapper.vm.$router.navigate).toBeCalled(); - }); - test("Selected vehicle VIN do match vehicles listed in our system (CarIDs) found then navigate forward to vehicle-damage page.", async () => { //Arrange const { wrapper } = setupMocks({}); @@ -99,6 +87,16 @@ describe("policy-vehicles.vue", () => { {} ); }); + test("first vehicle is auto-selected if only one vehicle on policy", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.selectedVehicleVin).toBe("5NMS3CADXLH233004"); + }); }); function setupMocks({ @@ -109,15 +107,15 @@ function setupMocks({ useMainStore().applicationUser = { pageData: { "policy-vehicles": - [ - { - vehicleMake: "Hyundai", - vehicleModel: "Santa Fe", - vehicleStyle: "4 door utility", - vehicleYear: 2020, - vin: "5NMS3CADXLH233004", - }, - ], + [ + { + vehicleMake: "Hyundai", + vehicleModel: "Santa Fe", + vehicleStyle: "4 door utility", + vehicleYear: 2020, + vin: "5NMS3CADXLH233004", + }, + ], } }; useMainStore().lookupVehicleByVin = jest.fn().mockImplementation(() => {