CSR-78 jest test coverage

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="current_car_info-text">
-    <div
-      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
-    >
-      <h5 class="text-center fw-normal mb-0">
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+      <h5 class="text-center fw-normal mb-0" :class="hasSubText ? 'dark-header' : 'light-header'">
         <span>
           {{ text }}
         </span>
@@ -14,9 +12,7 @@
         />
       </h5>
     </div>
-    <div
-      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
-    >
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
       <p class="text-center small fw-normal mb-0">
         <span>
           {{ subText }}
@@ -40,6 +36,7 @@ export default {
   props: {
     hasBackButton: Boolean,
     backButtonAccessibleText: String,
+    hasSubText: Boolean
   },
   components: {
     buttonBack,
@@ -58,11 +55,22 @@ export default {
 
 <style lang="scss">
 h5 {
-  color: $gray-550;
   line-height: 32px;
 
   button {
     color: inherit;
   }
 }
+
+.dark-header {
+  color: $black;
+}
+
+.light-header {
+  color: $gray-550;
+}
+
+p.small {
+  color: $gray-550
+}
 </style>

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

@@ -1,24 +1,120 @@
 import { shallowMount } from "@vue/test-utils";
 import vehicleBanner from "./vehicle-banner";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
+
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("vehicleBanner", () => {
   test("renders the blurrycar image", async () => {
     // Arrange
-
-    // Act
-    const wrapper = shallowMount(vehicleBanner);
-    await wrapper.setData({
-      vehicleImageSrc: "image_url",
-    });
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: true, imageUrlValue: "NULL" });
+    
+    //Act
     wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
-    expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "image_url");
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
     wrapper.unmount();
   });
 });
 
-//Mock CMS content
-const cmsContent = {
-  GenericVehicleImage: "image_url",
-};
+describe("vehicleBanner", () => {
+  test("renders expected vehicle image", async () => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "url_to_vehicle_image" });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "url_to_vehicle_image");
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+});
+
+describe("vehicleBanner", () => {
+  test("should render car icon when imageUrl is null and category is default", async () => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "NULL" });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+    var iconUrl = wrapper.vm.vehicleImageToDisplay;
+
+    // Assert
+    expect(iconUrl).toEqual( "car_icon_url");
+    wrapper.unmount();
+  });
+});
+
+const params = [["CAR", "car_icon_url"],
+               ["TRUCK", "truck_icon_url"],
+               ["VAN", "van_icon_url"],
+               ["COMMERCIAL VAN", "commercial_van_icon_url"],
+               ["SUV", "suv_icon_url"],
+               ["OTHER", "car_icon_url"]];
+
+describe("vehicleBanner", () => {
+  test.each(params)("renders an icon instead of an image for %s and %s", async (category, expectedIcon) => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: expectedIcon, categoryValue: category });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+    var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
+
+    // Assert
+    expect(wrapper.vm.carUnmatchedVehicleIcon).toEqual(cmsContent.CarUnmatchedVehicleIcon);
+    expect(wrapper.vm.truckUnmatchedVehicleIcon).toEqual(cmsContent.TruckUnmatchedVehicleIcon);
+    expect(wrapper.vm.vanUnmatchedVehicleIcon).toEqual(cmsContent.VanUnmatchedVehicleIcon);
+    expect(wrapper.vm.commercialUnmatchedVehicleIcon).toEqual(cmsContent.CommercialVanUnmatchedVehicleIcon);
+    expect(wrapper.vm.suvUnmatchedVehicleIcon).toEqual(cmsContent.SuvUnmatchedVehicleIcon);
+
+    expect(store.getters.vehicle.category).toEqual(category);
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual(vehicleIcon);
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+});
+
+function setupMocks({
+  displayGenericVehicleImageProp,
+  imageUrlValue,
+  categoryValue = "CAR"
+}) {
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = { displayGenericVehicleImage: displayGenericVehicleImageProp };
+
+  const wrapper = shallowMount(vehicleBanner, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    GenericVehicleImage: "image_url",
+    CarUnmatchedVehicleIcon: "car_icon_url",
+    TruckUnmatchedVehicleIcon: "truck_icon_url",
+    VanUnmatchedVehicleIcon: "van_icon_url",
+    CommercialVanUnmatchedVehicleIcon: "commercial_van_icon_url",
+    SuvUnmatchedVehicleIcon: "suv_icon_url",
+  };
+  return { wrapper, cmsContent };
+}

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

@@ -1,7 +1,7 @@
 <template>
   <div class="vehicle_banner mb-3 text-center">
     <img
-      class="vehicle-image img-fluid blurrycar"
+      class="vehicle-image img-fluid"
       :src="vehicleImageToDisplay"
       alt=""
     />
@@ -50,7 +50,7 @@ export default {
       this.commercialUnmatchedVehicleIcon = cmsContent.CommercialVanUnmatchedVehicleIcon;
       this.suvUnmatchedVehicleIcon = cmsContent.SuvUnmatchedVehicleIcon;
     },
-    getUnmatchedVehicleIcon: function(){
+    getUnmatchedVehicleIcon(){
        switch(this.$store.getters.vehicle.category){
           case this.vehicleCategories.CAR:
             return this.carUnmatchedVehicleIcon;
@@ -58,8 +58,6 @@ export default {
             return this.suvUnmatchedVehicleIcon;
           case this.vehicleCategories.TRUCK:
             return this.truckUnmatchedVehicleIcon;
-          case this.vehicleCategories.PICKUP:
-            return this.truckUnmatchedVehicleIcon;
           case this.vehicleCategories.VAN:
             return this.vanUnmatchedVehicleIcon;
           case this.vehicleCategories.COMMERCIALVAN:

src/helpers/unit-test-helper.js

@@ -1,6 +1,7 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -23,6 +24,7 @@ export function getMountOptions(mockData) {
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
   mocks.navigationScenarios = navigationScenarios;
+  mocks.vehicleCategories = vehicleCategories;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -2,9 +2,7 @@
     <div class="container-fluid shadow rounded-3 p-0 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-        <funnelSubHeader 
-            ref="funnelSubHeader"
-        />
+        <funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
     </div>
 </template>