diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 610fd9b6..5a80175f 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -27,6 +27,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/styles", method: "GET", }, + GetVehicle: { + url: "/vehicle/api/v1/vehicle/lookup", + method: "GET", + }, LogExperimentExposureIfAssigned: { url: "/experiments/api/v1/experiments/log-exposure", method: "POST", diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index 84000425..3338132e 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -90,7 +90,7 @@ }, watch: { selectedMake(make) { - this.mainStore.updateVehicleMake(make); + this.mainStore.updateVehicleMake( make ); this.$router.navigate( this.navigationScenarios.SELECTED_MAKE, this.$route diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 7cfcdb38..986d4bed 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -83,7 +83,7 @@ watch: { selectedModel(model) { - this.mainStore.updateVehicleModel(model); + this.mainStore.updateVehicleModel( model ); this.$router.navigate( this.navigationScenarios.SELECTED_MODEL, this.$route diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index f02b8306..1ce939af 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -76,11 +76,13 @@ export default { watch: { selectedStyle(style) { - this.mainStore.updateVehicleStyle(style); - this.$router.navigate( - this.navigationScenarios.SELECTED_STYLE, - this.$route - ); + this.mainStore.updateVehicleStyle( style ); + this.mainStore.setVehicle().then(() => { + this.$router.navigate( + this.navigationScenarios.SELECTED_STYLE, + this.$route + ); + }); }, }, diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 96fa0804..876c619d 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -69,7 +69,8 @@ watch: { selectedYear(year) { const parsedYear = parseInt(year); - this.mainStore.updateVehicleYear(parsedYear); + this.mainStore.updateVehicleYear( parsedYear ); + this.$router.navigate( this.navigationScenarios.SELECTED_YEAR, this.$route diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 8c280c03..e003e989 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -1,7 +1,6 @@ import { mapStores } from "pinia"; import { useMainStore } from "@/store"; -; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; import { vehicleCategories } from "@/constants/vehicle-categories.js"; import { queryStrings } from "@/constants/query-strings"; diff --git a/src/store/index.js b/src/store/index.js index 8d7646e4..8653686c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -190,34 +190,87 @@ export const useMainStore = defineStore({ }); }, - // Vehicle API Actions - updateVehicleYear(year) + setVehicle() { + return globalMethods + .callHttpClient({ + methods: endpoints.GetVehicle.method, + endpoint: `${endpoints.GetVehicle.url}/${this.order.vehicle.year}/${this.order.vehicle.make}/${this.order.vehicle.model}/${this.order.vehicle.style}`, + payload: {}, + }) + .then((response) => { + updateVehicle(response.vehicle); + return response; + }); + }, + + updateVehicle(vehicle) { + this.order.vehicle = { ...this.order.vehicle, ...vehicle }; + }, + + resetVehicleState() { - if (this.order.vehicle.year !== year) { + this.order.vehicle.year = null; + this.order.vehicle.make = null; + this.order.vehicle.model = null; + this.order.vehicle.style = null; + this.order.vehicle.carId = null; + this.order.vehicle.category = null; + this.order.vehicle.vin = null; + this.order.vehicle.imageUrl = null; + this.order.vehicle.imageVifNumber = null; + this.order.vehicle.imageColor = null; + }, + + updateVehicleYear(year) { + if(this.order.vehicle.year != year) + { + this.resetVehicleState(); this.order.vehicle.year = year; } }, - updateVehicleMake(make) - { - if (this.order.vehicle.make !== make) { + updateVehicleMake(make) { + if(this.order.vehicle.make != make) + { + const year = this.order.vehicle.year; + + this.resetVehicleState(); + + this.order.vehicle.year = year; this.order.vehicle.make = make; } }, - updateVehicleModel(model) - { - if (this.order.vehicle.model !== model) { + updateVehicleModel(model) { + if(this.order.vehicle.model != model) + { + const year = this.order.vehicle.year; + const make = this.order.vehicle.make; + + this.resetVehicleState(); + + this.order.vehicle.year = year; + this.order.vehicle.make = make; this.order.vehicle.model = model; } }, - updateVehicleStyle(style) - { - if (this.order.vehicle.style !== style) { + updateVehicleStyle(style) { + if(this.order.vehicle.style != style) + { + const year = this.order.vehicle.year; + const make = this.order.vehicle.make; + const model = this.order.vehicle.model; + + this.resetVehicleState(); + + this.order.vehicle.year = year; + this.order.vehicle.make = make; + this.order.vehicle.model = model; this.order.vehicle.style = style; } }, + addEventToBus (event) { this.applicationUser.eventBus.push(event); }, diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 68b7adc8..daeb4efc 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -1,6 +1,7 @@ -import { useMainStore } from "./" +import { useMainStore } from "./@store"; import { createApp } from 'vue'; import { createPinia } from "pinia"; +import globalMethods from "@/global-methods"; import App from '@/App.vue'; @@ -21,7 +22,7 @@ describe("Store", () => { it("Should Store Vehicle Year", () => { let testYear = "2001"; - store.order.vehicle.year = testYear; + store.updateVehicleYear(testYear); expect(store.order.vehicle.year).toEqual(testYear); }); @@ -82,4 +83,61 @@ describe("Store", () => { expect(actual).toEqual(event.eventValue); }); + it("UpdateVehicle should merge vehicle with response object", () => { + store.order.vehicle = { + year: 2020, + make: "Honda", + model: "Civic", + style: "4 door sedan", + carId: null, + category: null, + vin: null, + imageUrl: null, + imageVifNumber: null, + imageColor: null, + }; + + const response = {data: { + "carId": "CR00069299", + "category": "CAR", + "year": 2020, + "make": "Honda", + "model": "Civic", + "style": "4 door sedan", + "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13996/13996_cc0320_032_WX.jpg", + "imageVifNumber": "13996", + "imageVifColor": "white" + } + }; + + store.updateVehicle(response.data); + + expect(store.order.vehicle.imageUrl).toEqual(response.data.imageUrl); + expect(store.order.vehicle.imageVifNumber).toEqual(response.data.imageVifNumber); + expect(store.order.vehicle.imageVifColor).toEqual(response.data.imageVifColor); + }); + + it("setVehicle should call globalMethods.callHttpClient", () => { + store.order.vehicle = jest.fn(); + + const response = {data: { + "carId": "CR00069299", + "category": "CAR", + "year": 2020, + "make": "Honda", + "model": "Civic", + "style": "4 door sedan", + "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13996/13996_cc0320_032_WX.jpg", + "imageVifNumber": "13996", + "imageVifColor": "white" + } + }; + + globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response)); + + store.setVehicle(); + + expect(globalMethods.callHttpClient).toHaveBeenCalled(); + }); + }); \ No newline at end of file