Created vehicle-banner and added to vehicle-year for testing

src/common-components/site-sub-header/site-sub-header.spec.js

@@ -7,7 +7,7 @@ describe("site sub header", () => {
     const mockMixin = {
         methods: {
             getCmsContent: jest.fn().mockImplementation(()=> {
-            return subHeaderText;
+                return subHeaderText;
             })
         }
     }

src/common-components/vehicle-banner/vehicle-banner.spec.js

@@ -0,0 +1,127 @@
+import { shallowMount } from "@vue/test-utils";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import vehicleBanner from "./vehicle-banner";
+import { useMainStore } from "@/store";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import { mapStores } from "pinia";
+import App from '@/App.vue';
+
+
+const cmsData = { VehicleBannerWidget: 
+  {
+    "GenericVehicleImage": "blurred-image.jpg",
+    "GenericVehicleImageFilePath": "images/default-source/default-album/blurred-image.jpg",
+    "CarUnmatchedVehicleIcon": "car-placeholder.jpg",
+    "TruckUnmatchedVehicleIcon": "truck-placeholder.jpg",
+    "VanUnmatchedVehicleIcon": "van-placeholder.jpg",
+    "CommercialVanUnmatchedVehicleIcon": "commercial-placeholder.jpg",
+    "SuvUnmatchedVehicleIcon": "suv-placeholder.jpg"
+  }
+}
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+const store = useMainStore();
+
+const mockMixin = {
+  
+  methods: {
+    getCmsContent(widgetName, fieldName) {
+      return cmsData[widgetName][fieldName];
+    },
+  },
+  computed: {
+    ...mapStores(useMainStore),
+    vehicleCategories() {
+      return vehicleCategories;
+    },
+  }
+}
+
+describe("vehicleBanner", () => {
+
+  test("renders the blurrycar image", async () => {
+    
+    const wrapper = shallowMount(vehicleBanner, {
+        propsData: {
+          displayGenericVehicleImage: true,
+          cmsWidgetName: "VehicleBannerWidget",
+        },
+        mixins: [mockMixin]
+    });
+
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+
+  test("renders expected vehicle image", async () => {
+    
+    store.order.vehicle.imageUrl = "url_to_vehicle_image";
+
+    const wrapper = shallowMount(vehicleBanner, {
+        propsData: {
+          displayGenericVehicleImage: false,
+          cmsWidgetName: "VehicleBannerWidget",
+        },
+        mixins: [mockMixin]
+    });
+
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "url_to_vehicle_image");
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+
+  });
+
+  test("should render car icon when imageUrl is null and category is default", async () => {
+
+    store.order.vehicle.imageUrl = null;
+
+    const wrapper = shallowMount(vehicleBanner, {
+        propsData: {
+          displayGenericVehicleImage: false,
+          cmsWidgetName: "VehicleBannerWidget",
+        },
+        mixins: [mockMixin]
+    });
+    
+    var iconUrl = wrapper.vm.vehicleImageToDisplay;
+
+    expect(iconUrl).toEqual("car-placeholder.jpg");
+    wrapper.unmount();
+  });
+
+  
+  const params = [["CAR", "car-placeholder.jpg"],
+    ["TRUCK", "truck-placeholder.jpg"],
+    ["VAN", "van-placeholder.jpg"],
+    ["COMMERCIAL VAN", "commercial-placeholder.jpg"],
+    ["SUV", "suv-placeholder.jpg"],
+    ["OTHER", "car-placeholder.jpg"]];
+    
+  test.each(params)("renders an icon instead of an image for %s and %s", async (category, expectedIcon) => {
+
+    store.order.vehicle.imageUrl = null;
+    store.order.vehicle.category = category;
+
+    const wrapper = shallowMount(vehicleBanner, {
+        propsData: {
+          displayGenericVehicleImage: false,
+          cmsWidgetName: "VehicleBannerWidget",
+        },
+        mixins: [mockMixin]
+    });
+
+    var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
+
+    expect(vehicleIcon).toEqual(expectedIcon);
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+
+});
+
+
+

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="vehicle_banner mb-3 text-center">
+    <img
+      class="vehicle-image img-fluid"
+      :src="vehicleImageToDisplay"
+      alt=""
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "vehicle-banner",
+  props: {
+    displayGenericVehicleImage: {
+      type: Boolean,
+      required: true,
+    },
+    cmsWidgetName: String,
+  },
+  computed: {
+    vehicleImageToDisplay(){
+        if (this.displayGenericVehicleImage){
+          return this.genericVehicleImage;  
+        }
+  
+        const imageUrl = this.mainStore.order.vehicle.imageUrl;
+        if (!imageUrl || imageUrl === "NULL"){
+          return this.getUnmatchedVehicleIcon();
+        }
+
+        return imageUrl;
+    },
+    genericVehicleImage(){
+      return this.getCmsContent(this.cmsWidgetName, 'GenericVehicleImage');
+    },
+    carUnmatchedVehicleIcon(){
+      return this.getCmsContent(this.cmsWidgetName, 'CarUnmatchedVehicleIcon');
+    },
+    truckUnmatchedVehicleIcon(){
+      return this.getCmsContent(this.cmsWidgetName, 'TruckUnmatchedVehicleIcon');
+    },
+    vanUnmatchedVehicleIcon(){
+      return this.getCmsContent(this.cmsWidgetName, 'VanUnmatchedVehicleIcon');
+    },
+    commercialUnmatchedVehicleIcon(){
+      return this.getCmsContent(this.cmsWidgetName, 'CommercialVanUnmatchedVehicleIcon');
+    },
+    suvUnmatchedVehicleIcon(){
+      return this.getCmsContent(this.cmsWidgetName, 'SuvUnmatchedVehicleIcon');
+    }
+  },
+  methods: {
+    getUnmatchedVehicleIcon(){
+       switch(this.mainStore.order.vehicle.category){
+          case this.vehicleCategories.CAR:
+            return this.carUnmatchedVehicleIcon;
+          case this.vehicleCategories.SUV:
+            return this.suvUnmatchedVehicleIcon;
+          case this.vehicleCategories.TRUCK:
+            return this.truckUnmatchedVehicleIcon;
+          case this.vehicleCategories.VAN:
+            return this.vanUnmatchedVehicleIcon;
+          case this.vehicleCategories.COMMERCIALVAN:
+            return this.commercialUnmatchedVehicleIcon;
+          default:
+            return this.carUnmatchedVehicleIcon;
+       }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.vehicle-image {
+  max-width: 290px;
+  object-fit: cover;
+  width: 100%;
+  height: 132px;
+}
+</style>

src/layouts/vehicle-year/vehicle-year.vue

@@ -3,6 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
+          <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage="true"/>
           <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
           <div class="fade-on-route-transition">
             <yearQuestion 
@@ -22,6 +23,7 @@
   import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
   import siteHeader from "@/common-components/site-header/site-header";
   import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
   
   // Supporting files
   import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -68,6 +70,7 @@
       yearQuestion,
       siteHeader,
       siteSubHeader,
+      vehicleBanner,
     },
   };
   </script>