From c98a7a3f5d890c39a4976e78d3f83555ac40ac5b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 2 Dec 2021 10:27:49 -0500
Subject: [PATCH 1/3] CSR-120: update with CMS content for blurry vehicle image

---
 .../vehicle-banner/vehicle-banner.spec.js     | 36 +++++++++++++++++++
 .../vehicle-banner/vehicle-banner.vue         | 26 +++++++++++---
 src/constants/widget-names.js                 |  1 +
 3 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index 316c9225d..470410842 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/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");
+    });
+
 });
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 9d91beb74..c1376710b 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/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>
 
diff --git a/src/constants/widget-names.js b/src/constants/widget-names.js
index bad1390c6..ed8c1a8a6 100644
--- a/src/constants/widget-names.js
+++ b/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 };

From b248a3169a26ded6f1a92028bc8e3d5ed0824b66 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 2 Dec 2021 11:39:13 -0500
Subject: [PATCH 2/3] CSR-120: updates to move CMS logic into parent
 vehicle-year layout

---
 .../vehicle-banner/vehicle-banner.spec.js     | 35 -------------------
 .../vehicle-banner/vehicle-banner.vue         | 21 ++---------
 src/layouts/component-test/component-test.vue |  8 ++---
 src/layouts/vehicle-year/vehicle-year.spec.js |  1 +
 src/layouts/vehicle-year/vehicle-year.vue     |  4 ++-
 5 files changed, 8 insertions(+), 61 deletions(-)

diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index 470410842..2194b4140 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -5,11 +5,6 @@ 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 = {
         state: {
@@ -51,17 +46,6 @@ 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);
@@ -158,23 +142,4 @@ 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");
-    });
-
 });
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index c1376710b..36642288d 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -16,9 +16,6 @@
 </template>
 
 <script>
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-
 export default {
   name: "vehicle-banner",
   computed: {
@@ -35,19 +32,17 @@ export default {
       },
   },
   props: {
-    passedCarId: String
+    passedCarId: String,
+    genericVehicleImageSrc: String
   },
   data() {
       return {
           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) {
@@ -76,18 +71,6 @@ export default {
         }
       });
     },
-    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>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index c64a3fe0a..ff80496fc 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -314,12 +314,8 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner
-          passedCarId=""
-        />
-        <vehicleBanner
-          passedCarId="CR00068434"
-        />
+        <vehicleBanner genericVehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
+        <vehicleBanner passedCarId="CR00068434" />
       </div>
     </div>
   </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index d3fd4fe77..60d3b8353 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -19,6 +19,7 @@ describe("vehicle-year.vue", () => {
       getPageContent: {
         PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
         RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+        VehicleBannerWidget: [{ GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" }],
         isCmsContentReady: true,
       },
       getVehicleYear: [2023, 2022, 2021]
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 8c0c24004..e47c1b219 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,7 +1,7 @@
 <template v-if="isCmsContentReady">
   <div class="select-car">
     <div class="select-car-form rounded text-center">
-      <vehicleBanner />
+      <vehicleBanner :genericVehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
       <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>
@@ -27,6 +27,7 @@ export default {
       pageHeaderWidgets: {},
       radioQuestionWidgets: {},
       vehicleYears: [],
+      vehicleBannerWidget: {}
     };
   },
   computed: {},
@@ -54,6 +55,7 @@ export default {
       next((vm) => {
         vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
         vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.vehicleBannerWidget = resultMap.getPageContent.VehicleBannerWidget[0];
         vm.vehicleYears = resultMap.getVehicleYear;
       });      
     });

From 2273567856854971637e48a08233607fe1c812b9 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 2 Dec 2021 11:41:18 -0500
Subject: [PATCH 3/3] CSR-120: remove unneeded line

---
 src/common-components/vehicle-banner/vehicle-banner.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index 2194b4140..316c9225d 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -3,7 +3,6 @@ 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";
 
 describe('vehicleBanner', () => {
     const $store = {