CSR-120: update with CMS content for blurry vehicle image

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

@@ -3,6 +3,12 @@ import vehicleBanner from './vehicle-banner';
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 import { nextTick } from 'vue';
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({ 
+    settleAllPromises: jest.fn()
+}));
 
 describe('vehicleBanner', () => {
     const $store = {
@@ -45,6 +51,17 @@ describe('vehicleBanner', () => {
         ]
     };
 
+    // Our mock data for our call to settleAllPromises
+    const mockData = {
+        getPageContent: {
+            VehicleBannerWidget: [{ GenericVehicleImage: "testurl" }],
+            isCmsContentReady: true,
+        }
+    }
+
+    // our mock implementation of settleAllPromises
+    settleAllPromises.mockImplementation(() => { return Promise.resolve(mockData);});
+
     test('renders the blurrycar image when vehicleImageSrc is not present', () => {
         // Arrange
         const mountOptions = getMountOptions(actionList);
@@ -141,4 +158,23 @@ describe('vehicleBanner', () => {
         wrapper.unmount();
     });
 
+    test("vehicle-banner.vue should render data from CMS", async () => {
+        // Arrange
+        const mountOptions = getMountOptions(actionList);
+        mountOptions.global.mocks = {
+            ...mountOptions.global.mocks,
+            $store
+        }
+        // Act
+        const wrapper = shallowMount(vehicleBanner, {
+            ...mountOptions
+        });
+        // Call method getGenericVehicleImage on the component.
+        await wrapper.vm.getGenericVehicleImage();
+        // Wait for the DOM to update.
+        await nextTick(); 
+        // Assert
+        expect(wrapper.vm.genericVehicleImageSrc).toEqual("testurl");
+    });
+
 });

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

@@ -8,7 +8,7 @@
     />
     <img
       class="vehicle-image img-fluid blurrycar"
-      src='@/assets/img/blurrycar.png'
+      :src="genericVehicleImageSrc"
       alt=""
       v-else
     />
@@ -16,6 +16,9 @@
 </template>
 
 <script>
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
 export default {
   name: "vehicle-banner",
   computed: {
@@ -28,8 +31,8 @@ export default {
           make: this.$store.state.order.vehicle.make,
           model: this.$store.state.order.vehicle.model,
           style: this.$store.state.order.vehicle.style
-        }
+        };
-      }
+      },
   },
   props: {
     passedCarId: String
@@ -39,9 +42,12 @@ export default {
           years: [],
           carId: '',
           vehicleImageSrc: '',
+          genericVehicleImageSrc: '',
       };
   },
   created() {
+    this.getGenericVehicleImage();
+
     if (this.passedCarId && this.passedCarId.length > 0) {
       this.getVehicleImage(this.passedCarId)
     } else if (this.vin && this.vin.length > 0) {
@@ -69,8 +75,20 @@ export default {
           this.vehicleImageSrc = response.data.imgSrc;
         }
       });
+    },
+    getGenericVehicleImage() {  // retrieve generic blurry vehicle image
+      const contentPromise = fetchCmsContentForPage("vehicle-year");
+      const promiseResultMap = [
+        {
+          resultKey: "getPageContent",
+          promise: contentPromise,
+        }
+      ];
+      settleAllPromises(promiseResultMap).then((resultMap) => {
+        this.genericVehicleImageSrc = resultMap.getPageContent.VehicleBannerWidget[0].GenericVehicleImage;
+      });
     }
-  }
+  },
 }
 </script>
 

src/constants/widget-names.js

@@ -1,6 +1,7 @@
 const widgetNames = {
   PAGE_HEADER_WIDGET: "PageHeaderWidget",
   RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
+  VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
 };
 
 export { widgetNames };