diff --git a/src/assets/img/blurrycar.png b/src/assets/img/blurrycar.png new file mode 100644 index 000000000..00fdc2145 Binary files /dev/null and b/src/assets/img/blurrycar.png differ diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js new file mode 100644 index 000000000..296f62e11 --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -0,0 +1,148 @@ +import { shallowMount } from '@vue/test-utils'; +import vehicleBanner from './vehicle-banner'; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { storeActions } from "@/constants/store-actions"; + +describe('vehicleBanner', () => { + const $store = { + state: { + order: { + vehicle: { + vin: null, + year: null, + make: null, + model: null, + style: null + } + } + } + }; + const actionList = { + actionList: [ + { + actionName: storeActions.LOOKUP_VEHICLE_BY_YMMS, + data: [ + { + CarId: "CR00068434" + } + ] + }, + { + actionName: storeActions.LOOKUP_VEHICLE_BY_VIN, + data: [ + { + CarId: "CR00068434" + } + ] + }, + { + actionName: storeActions.GET_EVOX_IMAGE, + data: { + imgSrc: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" + } + } + ] + }; + + test('renders the blurrycar image when vehicleImageSrc is not present', async () => { + // Arrange + const mountOptions = getMountOptions(actionList); + mountOptions.global.mocks = { + ...mountOptions.global.mocks, + $store + } + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions + }); + // Assert + expect(wrapper.find('img').attributes('class')).toContain('blurrycar'); + wrapper.unmount(); + }); + + test('does not render the blurrycar image when vehicleImageSrc exists', async () => { + // Arrange + const mountOptions = getMountOptions(actionList); + mountOptions.global.mocks = { + ...mountOptions.global.mocks, + $store + } + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions, + data() { + return { + vehicleImageSrc: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" + } + } + }); + // Assert + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + wrapper.unmount(); + }); + + test('does not render the blurrycar image when passedCarId is set', async () => { + // Arrange + const mountOptions = getMountOptions(actionList); + mountOptions.global.mocks = { + ...mountOptions.global.mocks, + $store, + } + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions, + props: { + passedCarId: "CR00068434" + } + }); + // Assert + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + wrapper.unmount(); + }); + + test('does not render the blurrycar image when a YMMS object is found', async () => { + // Arrange + $store.state.order.vehicle.year = "2019" + $store.state.order.vehicle.make = "acura" + $store.state.order.vehicle.model = "rdx" + $store.state.order.vehicle.style = "4 door utility" + const mountOptions = getMountOptions(actionList); + mountOptions.global.mocks = { + ...mountOptions.global.mocks, + $store + } + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions + }); + // Assert + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + wrapper.unmount(); + + }); + + test('does not render the blurrycar image when a VIN is found', async () => { + // Arrange + $store.state.order.vehicle.vin = "1J4GW58S4XC541166"; + const mountOptions = getMountOptions(actionList); + mountOptions.global.mocks = { + ...mountOptions.global.mocks, + $store + } + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions + }); + // Assert + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + wrapper.unmount(); + }); +}); diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue new file mode 100644 index 000000000..05c6df60d --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -0,0 +1,81 @@ + + + + + \ No newline at end of file diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 9ba245c34..1cc1c1187 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -23,6 +23,14 @@ const endpoints = { url: "/content/api/v1/content", method: "GET", }, + LookupVehicleByYmms: { + url: "/vehicle/api/v1/vehicle/Lookup", + method: "GET", + }, + LookupVehicleByVin: { + url: "/vehicle/api/v1/vehicle/Lookup", + method: "POST", + }, }; export { endpoints }; diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 75478ba7e..60300f78c 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -5,6 +5,9 @@ const storeActions = { GET_VEHICLE_MAKES: "getVehicleMakes", GET_VEHICLE_MODELS: "getVehicleModels", GET_VEHICLE_STYLES: "getVehicleStyles", + GET_EVOX_IMAGE: "getEvoxImage", + LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", + LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin" }; export { storeActions }; diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 94027cc05..4919ed730 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -1,4 +1,5 @@ import { storeActions } from "@/constants/store-actions"; +import store from "@/store"; export function getMountOptions(mockData, cmsMockData = null) { // Define our mocks to attached to the 'global' object for Vue/Jest. @@ -29,8 +30,8 @@ export function getMountOptions(mockData, cmsMockData = null) { mocks.storeActions = storeActions; const global = { mocks: mocks, + plugins: [store] }; return { global }; } - diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 157758395..b25a26b8f 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -182,7 +182,7 @@
-
+
+
+
+

Vehicle Banner

+
+
+
+
+ + +
+
@@ -231,6 +246,7 @@ import listButton from "@/ux-components/list-button/list-button"; import radioList from "@/ux-components/radio-list/radio-list"; import alert from "@/ux-components/alert/alert"; + import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; export default { name: "App", components: { @@ -239,7 +255,8 @@ radioCard, listButton, radioList, - alert + alert, + vehicleBanner }, data() { return { diff --git a/src/store/index.js b/src/store/index.js index 7bed83a55..0976690b7 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -22,6 +22,7 @@ export default createStore({ evoxImageId: null, hasSplitWindshieldOption: null, hasBackglassSliderOption: null, + imageSrc: '', registration: { rawAddress: null, zipCode: null, @@ -62,7 +63,11 @@ export default createStore({ experiments: null, } }, - mutations: {}, + mutations: { + updateVehicleImage(state, data) { + state.order.vehicle.imageSrc = data.imgSrc; + }, + }, actions: { // Vehicle API Actions getVehicleYears(context) { @@ -72,6 +77,22 @@ export default createStore({ payload: {}, }); }, + lookupVehicleByYmms(context, { year, make, model, style }) { + return globalMethods.callHttpClient({ + method: endpoints.LookupVehicleByYmms.method, + endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`, + payload: {}, + }); + }, + lookupVehicleByVin(context, { vin }) { + return globalMethods.callHttpClient({ + method: endpoints.LookupVehicleByVin.method, + endpoint: endpoints.LookupVehicleByVin.url, + payload: { + "vin": vin // EX "1J4GW58S4XC541166" + }, + }); + }, getVehicleMakes(context, { year }) { return globalMethods.callHttpClient({ method: endpoints.GetVehicleMakes.method, @@ -111,5 +132,12 @@ export default createStore({ payload: {}, }); }, + getEvoxImage(context, { relativeUrl }) { + return globalMethods.callMockHttpClient({ + method: endpoints.GetPageData.method, + endpoint: relativeUrl, + payload: {}, + }); + }, }, });