CSR-120: updates to move CMS logic into parent vehicle-year layout

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

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>

src/layouts/component-test/component-test.vue

@@ -314,12 +314,8 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner
+        <vehicleBanner genericVehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
-          passedCarId=""
+        <vehicleBanner passedCarId="CR00068434" />
-        />
-        <vehicleBanner
-          passedCarId="CR00068434"
-        />
       </div>
     </div>
   </div>

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]

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