Merge pull request #47 from Safelite/feature/CSR-120_vehicle-banner-2

Feature/CSR-120 vehicle banner

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();
+    });
+});

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="vehicle_banner mb-3">
+    <img
+      class="vehicle-image img-fluid"
+      :src="vehicleImageSrc"
+      v-if="vehicleImageSrc"
+      alt=""
+    />
+    <img
+      class="vehicle-image img-fluid blurrycar"
+      src='@/assets/img/blurrycar.png'
+      alt=""
+      v-else
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "vehicle-banner",
+  computed: {
+      vin () {
+        return this.$store.state.order.vehicle.vin;
+      },
+      ymms () {
+        return {
+          year: this.$store.state.order.vehicle.year,
+          make: this.$store.state.order.vehicle.make,
+          model: this.$store.state.order.vehicle.model,
+          style: this.$store.state.order.vehicle.style
+        }
+      }
+  },
+  props: {
+    passedCarId: String
+  },
+  data() {
+      return {
+          years: [],
+          carId: '',
+          vehicleImageSrc: '',
+      };
+  },
+  created() {
+    if (this.passedCarId && this.passedCarId.length > 0) {
+      this.getVehicleImage(this.passedCarId)
+    } else if (this.vin && this.vin.length > 0) {
+      this.getCarIdWithVin(this.vin)
+    } else if (!Object.values(this.ymms).includes(null) && !Object.values(this.ymms).includes('')) {
+      this.getCarIdWithYmms(this.ymms)
+    }
+  },
+  methods: {
+    getCarIdWithYmms(ymms) {  // retrieve carId with YMMS object
+      this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_YMMS, ymms).then((response) => {
+        const carId = response.data[0].CarId;
+        this.getVehicleImage(carId)
+      });
+    },
+    getCarIdWithVin(vin) {  // retrieve carId with VIN string
+      this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_VIN, vin).then((response) => {
+        const carId = response.data[0].CarId;
+        this.getVehicleImage(carId)
+      });
+    },
+    getVehicleImage(carId) {  // look up evox with carId
+      this.dispatchNonBlockingStoreAction(this.storeActions.GET_EVOX_IMAGE, {relativeUrl: "https://mockey.qa.sagaws.net/service/evox-image?carId=" + carId}).then((response) => {
+        if (response.data && response.data.imgSrc) {
+          this.vehicleImageSrc = response.data.imgSrc;
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .vehicle-image {
+    max-width: 290px;
+  }
+</style>

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 };

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 };

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 };
 }
-

src/layouts/component-test/component-test.vue

@@ -182,7 +182,7 @@
       </div>
     </div>
     <div class="row my-2">
-      <div class="col">
+        <div class="col">
         <alert
         alertClass="alert-warning"
         alertHeadline="Warning Alert"
@@ -221,6 +221,21 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="d-flex align-items-center">
+        <vehicleBanner
+          passedCarId=""
+        />
+        <vehicleBanner
+          passedCarId="CR00068434"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -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 {

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: {},
+      });
+    },
   },
 });