CSR-120: add vehicleBanner component

src/commonComponents/vehicleBanner/vehicleBanner.spec.js

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import vehicleBanner from './vehicleBanner';
+
+describe('vehicleBanner with no props', () => {
+
+    const wrapper = mount(vehicleBanner, {
+        propsData: {}
+    });
+
+    it('renders the blurrycar image', () => {
+        expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
+    })
+});
+
+describe('vehicleBanner with isBlurred true', () => {
+
+    const wrapper = mount(vehicleBanner, {
+        propsData: {
+            isBlurred: true,
+            carId: "00test"
+        }
+    });
+
+    it('renders the blurrycar image', () => {
+        expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
+    })
+});
+
+describe('vehicleBanner with valid src image', () => {
+    
+    const wrapper = mount(vehicleBanner, {
+        propsData: {
+            carId: "00test"
+        }
+    });
+    
+    it('does not render the blurry image', () => {
+        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+    })
+});
+

src/commonComponents/vehicleBanner/vehicleBanner.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="vehicle_banner mb-3">
+    <img
+      class="vehicle-image img-fluid"
+      :class="carId"
+      :src="imgSrc"
+      v-if="!isBlurred && imgSrc"
+    />
+    <img
+      class="vehicle-image img-fluid blurrycar"
+      src='@/assets/img/blurrycar.png'
+      v-else
+    />
+  </div>
+</template>
+
+<script>
+import { mockEvoxCall } from "@/global-methods";
+
+export default {
+  name: "vehicle-banner",
+  props: {
+    isBlurred: {
+      type: Boolean,
+      default: false
+    },
+    carId: String
+  },
+  computed: {
+    imgSrc: function () {
+      return mockEvoxCall(this.carId);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .vehicle-image {
+    max-width: 290px;
+  }
+</style>

src/global-methods.js

@@ -30,3 +30,25 @@ export default {
     });
   },
 };
+
+export function mockEvoxCall(carId) {
+  // console.log('running mockEvoxCall...');
+  if (carId) {
+    return "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"
+    // "https://s7g10.scene7.com/is/image/maserati/maserati/international/Models/default/2022/ghibli/gh_front.png?$600x2000$&fmt=png-alpha&fit=constrain";
+  }
+};
+
+export function mockGetCarId(vin, ymmsObj) {
+  // console.log('running mockGetCardId...');
+  if (vin) {
+    // TODO make API call with vin here
+    return "owuetr98";
+  }
+  if (ymmsObj) {
+    // TODO make API call with yearMakeModelStyle object here
+    console.log('ymmsObj: ', ymmsObj)
+    return "fhgmsg";
+  }
+  return;
+}