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..844d53077 --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -0,0 +1,61 @@ +import { shallowMount, enableAutoUnmount } from '@vue/test-utils'; +import vehicleBanner from './vehicle-banner'; +import { getMountOptions } from "@/helpers/unit-test-helper.js" + +describe('vehicleBanner', () => { + // Arrange + const mountOptions = getMountOptions({ + actionList: [ + { + actionName: "lookupVehicleByYmms", + data: [ + { + CarId: "CR00068434" + } + ] + }, + { + actionName: "lookupVehicleByVin", + data: [ + { + CarId: "CR00068434" + } + ] + }, + { + actionName: "getEvoxImage", + data: { + imgSrc: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" + } + } + ] + }); + enableAutoUnmount(afterEach) + + // Act + const wrapper = shallowMount(vehicleBanner, { + ...mountOptions + }); + + // Assert + it('renders the blurrycar image when vehicleImageSrc is not present', () => { + expect(wrapper.find('img').attributes('class')).toContain('blurrycar'); + }); + + // Assert + it('does not render the blurrycar image when vehicleImageSrc exists', async () => { + await wrapper.setData({ 'vehicleImageSrc': 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg' }); + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + }); + + // Assert + it('does not render the blurrycar image when passedCarId is set', async () => { + await wrapper.setProps({ 'passedCarId': 'CR00068434' }); + setTimeout(() => { + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); + }, 500); + }); + +}); 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..92e0ef47c --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -0,0 +1,92 @@ + + + + + \ No newline at end of file diff --git a/src/commonComponents/vehicleBanner/vehicleBanner.spec.js b/src/commonComponents/vehicleBanner/vehicleBanner.spec.js deleted file mode 100644 index 00f9bec45..000000000 --- a/src/commonComponents/vehicleBanner/vehicleBanner.spec.js +++ /dev/null @@ -1,52 +0,0 @@ -import { mount, enableAutoUnmount, flushPromises } from '@vue/test-utils'; -import vehicleBanner from './vehicleBanner'; -import { nextTick } from 'vue'; -import { getMountOptions } from "@/helpers/unit-test-helper.js" - -describe('vehicleBanner', () => { - // Arrange - const mountOptions = getMountOptions({ - actionList: [ - { - actionName: "getMockPageData", - data: { - imgData: "" - } - } - ] - }); - enableAutoUnmount(afterEach) - - // Act - const wrapper = mount(vehicleBanner, { - ...mountOptions - }); - - // Assert - it('renders the blurrycar image when no vehicleImageSrc is found', () => { - expect(wrapper.find('img').attributes('class')).toContain('blurrycar'); - }); - - it('renders the blurrycar image when isBlurred is true', async () => { - await wrapper.setData("test string"); - await wrapper.setProps({ isBlurred: true }); - - // timeout needed for image call to have time to return with a vehicleSrcImage - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).toContain('blurrycar'); - }, 500); - }); - - it('renders an actual car image when vehicleImageSrc is found and isBlurred is false', async () => { - await wrapper.setData("test string"); - await wrapper.setProps({ isBlurred: false}); - await flushPromises(); // including this doesn't appear to matter - await nextTick(); // including this doesn't appear to matter - - // timeout needed for image call to have time to return with a vehicleSrcImage - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); - }, 500); - - }); -}); diff --git a/src/commonComponents/vehicleBanner/vehicleBanner.vue b/src/commonComponents/vehicleBanner/vehicleBanner.vue deleted file mode 100644 index 6039160b7..000000000 --- a/src/commonComponents/vehicleBanner/vehicleBanner.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - - - \ 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/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index e3e75dc06..2c9557413 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -78,21 +78,13 @@
h6 Heading
-
-
-
- -
-
-
-
-
- +
+ -
@@ -105,7 +97,7 @@ import buttonSecondary from "@/ux-components/button-secondary/button-secondary"; import radioCard from "@/ux-components/radio-card/radio-card"; import listButton from "@/ux-components/list-button/list-button"; import radioList from "@/ux-components/radio-list/radio-list"; -import vehicleBanner from "@/commonComponents/vehicleBanner/vehicleBanner"; +import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; export default { name: "App", components: { @@ -114,6 +106,7 @@ export default { radioCard, listButton, radioList, + vehicleBanner }, data() { return { diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue deleted file mode 100644 index 24ce0e4e9..000000000 --- a/src/layouts/componentTest/componentTest.vue +++ /dev/null @@ -1,255 +0,0 @@ - - - diff --git a/src/store/index.js b/src/store/index.js index 74831d570..0976690b7 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -77,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, @@ -116,5 +132,12 @@ export default createStore({ payload: {}, }); }, + getEvoxImage(context, { relativeUrl }) { + return globalMethods.callMockHttpClient({ + method: endpoints.GetPageData.method, + endpoint: relativeUrl, + payload: {}, + }); + }, }, });