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] 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;
       });      
     });