Merge pull request #124 from Safelite/feature/CSR-121-Cleanup-v2

Changes requested via jira

src/common-components/button-question/button-question.vue

@@ -6,7 +6,7 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+      <fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
         <legend class="sr-only">{{groupName}}</legend>
           <listButton v-for="answer in answers" :key="answer"
             :buttonID="answer"
@@ -20,7 +20,7 @@
             textPosition="text-start"
             :isRequired="true"
             :value="modelValue"
-            screenReaderOnlyText=" opens new window"
+            screenReaderOnlyText="(opens new window)"
           />
       </fieldset>
     </div>
@@ -52,7 +52,7 @@ export default {
 .button_question {
   height: calc(100vh - 280px);
 
-  .car_list {
+  .overflow-scroll {
     // Height will be determined by overall height of content above list
     height: calc(100% - 320px);
     -webkit-overflow-scrolling: touch;

src/common-components/funnel-header/funnel-header.spec.js

@@ -7,13 +7,19 @@ describe("funnelHeader", () => {
 
     // Act
     const wrapper = shallowMount(funnelHeader, {
-      propsData: {
+      setData: {
         imageSrc: "image_url",
       },
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("img")).toBeTruthy();
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  imageSrc: 'image_url'
+};  

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

@@ -10,12 +10,15 @@
 <script>
 export default {
   name: "funnel-header",
-  props: {
-    imageSrc: {
-      type: String,
-      required: true,
-      default: "",
-    },
+  data() {
+    return {
+      imageSrc: '',
+    }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.imageSrc = cmsContent.LogoImage;
+    }
   },
 };
 </script>

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -2,16 +2,21 @@ import { shallowMount } from "@vue/test-utils";
 import FunnelSubHeader from "./funnel-sub-header";
 
 describe("FunnelSubHeader.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+  it("Should render the 'text' data value as a span value for the header span text value.", async () => {
     // Act
-    const wrapper = shallowMount(FunnelSubHeader, {
-      propsData: {
-        text: "FunnelSubHeader Content",
-      },
+    const wrapper = shallowMount(FunnelSubHeader);
+    await wrapper.setData ({
+      text: "FunnelSubHeader Content",
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  HeaderText: 'FunnelSubHeader Content'
+};  

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

@@ -8,9 +8,8 @@
         <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
-        :backButtonAccessibleText="backButtonAccessibleText"
       />
-    </h5>
+      </h5>
     </div>
   </div>
 </template>
@@ -20,15 +19,25 @@ import buttonBack from "@/ux-components/button-back/button-back";
 
 export default {
   name: "FunnelSubHeader",
+  data() {
+    return {
+      text: '',
+    }
+  },
   props: {
-    text: String,
     hasBackButton: Boolean,
+    backButtonUrl: String,
     backButtonAccessibleText: String,
     backButtonAction: Function,
   },
   components: {
     buttonBack,
-  }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.text = cmsContent.HeaderText;
+    }
+  },
 };
 </script>
 

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

@@ -2,18 +2,23 @@ import { shallowMount } from "@vue/test-utils";
 import vehicleBanner from "./vehicle-banner";
 
 describe("vehicleBanner", () => {
-  test("renders the blurrycar image", () => {
+  test("renders the blurrycar image", async () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(vehicleBanner, {
-      propsData: {
-        vehicleImageSrc: "image_url",
-      },
+    const wrapper = shallowMount(vehicleBanner);
+    await wrapper.setData ({
+      vehicleImageSrc: "image_url",
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  GenericVehicleImage: 'image_url'
+};  

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

@@ -11,12 +11,15 @@
 <script>
 export default {
   name: "vehicle-banner",
-  props: {
-    vehicleImageSrc: {
-      type: String,
-      required: true,
-      default: "",
-    },
+  data() {
+    return {
+      vehicleImageSrc: '',
+    }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.vehicleImageSrc = cmsContent.GenericVehicleImage;
+    }
   },
 };
 </script>

src/layouts/vehicle-make/make-question/make-question.vue

@@ -12,6 +12,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "make-question",
@@ -30,7 +31,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,60 @@ describe("vehicle-make.vue", () => {
 });
 
 describe("vehicle-make.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a make to get started" });
+    const pageHeaderWidgetHeaderText = "Select a make to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a make to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -55,7 +100,7 @@ describe("vehicle-make.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      funnelSubHeaderWidgetHeaderText: "Select a make to get started",
+      pageHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +124,14 @@ describe("vehicle-make.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -111,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-            :text="funnelSubHeaderWidget.HeaderText"
+            ref="funnelSubHeader"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
             :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedMake: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
       });
     });

src/layouts/vehicle-model/model-question/model-question.vue

@@ -12,9 +12,11 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "model-question",
+  mixins: [baseMixin],
   data() {
     return {
       questionText: null,
@@ -30,7 +32,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
 import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,86 @@ describe("vehicle-model.vue", () => {
 });
 
 describe("vehicle-model.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
-    //Arange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a model to get started" });
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select a model to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a model to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a model to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       done();
     });
   });
@@ -53,13 +124,14 @@ describe("vehicle-model.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   modelQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -84,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleModel, mountOptions);
   const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
   modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }

src/layouts/vehicle-model/vehicle-model.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-          :text="funnelSubHeaderWidget.HeaderText"
+          ref="funnelSubHeader"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Make"
           :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedModel: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
       });
     });

src/layouts/vehicle-style/style-question/style-question.vue

@@ -12,6 +12,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "style-question",
@@ -30,7 +31,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: store.getters.vehicle.make, model: store.getters.vehicle.model});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -1,6 +1,9 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
@@ -33,18 +36,60 @@ describe("vehicle-style.vue", () => {
 });
 
 describe("vehicle-style.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a style to get started" });
+    const pageHeaderWidgetHeaderText = "Select a style to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a style to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -55,7 +100,7 @@ describe("vehicle-style.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      funnelSubHeaderWidgetHeaderText: "Select a style to get started",
+      pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +124,14 @@ describe("vehicle-style.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   styleQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -111,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleStyle, mountOptions);
   const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
   styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }

src/layouts/vehicle-style/vehicle-style.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-          :text="funnelSubHeaderWidget.HeaderText"
+          ref="funnelSubHeader"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Model"
           :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedStyle: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
       });
     });

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,42 @@ describe("vehicle-year.vue", () => {
 });
 
 describe("vehicle-year.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page logo image is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a year to get started" });
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
 
     //Act
     vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a year to get started");
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-year.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -53,14 +80,14 @@ describe("vehicle-year.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -85,10 +112,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-            :text="funnelSubHeaderWidget.HeaderText" 
             class="Header" 
+            ref="funnelSubHeader"
         />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
@@ -28,9 +28,6 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedYear: null,
     };
   },
@@ -54,12 +51,11 @@ export default {
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
-
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
       });
     });

src/layouts/vehicle-year/year-question/year-question.vue

@@ -10,8 +10,8 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 // Supporting files
-import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "year-question",
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

src/mixins/base-mixin.js

@@ -1,3 +1,4 @@
+import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
@@ -9,20 +10,13 @@ export default {
     };
   },
   methods: {
-    // dispatchBlockingStoreAction(type, payload) {
-    //   // globalMethods.showWaitingModal(true);
-
-    //   return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-    //     // globalMethods.showWaitingModal(false);
-    //   });
-    // },
-    dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
+    dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
       // Encode the payload if required
       if (encodePayload) {
         encodeUriData(payload);
       }
 
-      return this.$store.dispatch(type, payload);
+      return store.dispatch(type, payload);
     },
   },
   computed: {

src/mixins/base-mixin.spec.js

@@ -1,38 +1,37 @@
 import baseMixin from "@/mixins/base-mixin";
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
 
 describe("baseMixin.js", () => {
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = {};
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = { make: "Alfa Romeo/Chrysler" };
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 });
 function getMixInInstance({ isDispatchSuccess = true }) {
   // Mock Store
-  const store = {
-    dispatch: jest.fn(),
-  };
+  const storeDispatch = jest.fn();
 
   if (isDispatchSuccess) {
-    store.dispatch.mockReturnValue(Promise.resolve());
+    storeDispatch.mockReturnValue(Promise.resolve());
   } else {
-    store.dispatch.mockReturnValue(Promise.reject());
+    storeDispatch.mockReturnValue(Promise.reject());
   }
 
   // Mock Route
@@ -45,7 +44,7 @@ function getMixInInstance({ isDispatchSuccess = true }) {
   // Attach mocks to mixin
   const baseMixIn = baseMixin;
   baseMixIn.methods.$route = route;
-  baseMixIn.methods.$store = store;
+  store.dispatch = storeDispatch;
   baseMixIn.methods.storeActions = storeActions;
   baseMixIn.methods.widgetNames = widgetNames;
 

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -33,7 +33,6 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
-      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -42,7 +42,6 @@ export default {
   },
   data() {
     return {
-      isError: false,
       isLoaderDisplayed: false,
     };
   },