added tests, increased code coverage

jest.config.js

@@ -18,7 +18,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 85,
+      statements: 87,
     },
   },
 };

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

@@ -1,16 +1,34 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+// Components
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.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";
+
+// Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
-    settleAllPromises: jest.fn(),
+  settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+  getters: {
+    vehicle: {
+      carId: "C00000000"
+    }
+  }
 }));
 
 describe("vehicle-damage.vue", () => {
@@ -18,7 +36,7 @@ describe("vehicle-damage.vue", () => {
 
     //Arrange
     const pageHeaderWidgetHeaderText = "Select Damage";
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
@@ -32,94 +50,120 @@ describe("vehicle-damage.vue", () => {
 });
 
 describe("vehicle-damage.vue", () => {
-    test("Page logo image is initailized with api data", async (done) => {
+  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
-      vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
-  
-      //Assert
-      apiPromise.finally(() => {
-        expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
-        done();
-      });
-    });
-  });
 
-  describe("vehicle-damage.vue", () => {
+    //Arrange
-    test("Vehicle image is initailized with api data", async (done) => {
+    const SiteHeaderWidget = {
-  
+      LogoImage:
-      //Arrange
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-      const VehicleBannerWidget = {
+    }
-        GenericVehicleImage:
+    const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget });
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+
-      }
+    //Act
-      const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
-  
+
-      //Act
+    //Assert
-      vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+    apiPromise.finally(() => {
-  
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
-      //Assert
+      done();
-      apiPromise.finally(() => {
-        expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
-        done();
-      });
     });
   });
+});
+
+describe("vehicle-damage.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
+    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-damage.vue", () => {
+  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
 
 function setupMocks({
-    pageHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
-    mountOptionsMockData = {},
+  mountOptionsMockData = {},
-  }) {
+}) {
-    
+
-    //Mock api responses
+  //Mock api responses
-    baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-    baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
+  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-      return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] });
+    return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] });
-    });
+  });
-    const apiResponses = {
+  const apiResponses = {
-      cmsContent: {
+    cmsContent: {
-        FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+      FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
-        VehicleBannerWidget: 
+      VehicleBannerWidget:
-        {
+      {
-          GenericVehicleImage:
+        GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-        },
-        FunnelHeaderWidget: 
-        {
-          LogoImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-        },
       },
-      damageOptions: ['Front Window', 'Back Window', 'Side Window'],
+      FunnelHeaderWidget:
-    };
+      {
-    const apiPromise = Promise.resolve(apiResponses);
+        LogoImage:
-    settleAllPromises.mockImplementation(() => apiPromise);
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-  
+      },
-    //Mock damage initialize methods
+    },
-    funnelHeader.methods = {
+    damageOptions: ['Front Window', 'Back Window', 'Side Window'],
-      initializeComponent: jest.fn(),
+  };
-    };
+
-    vehicleBanner.methods = {
+  const apiPromise = Promise.resolve(apiResponses);
-      initializeComponent: jest.fn(),
+
-    };
+  settleAllPromises.mockImplementation(() => apiPromise);
-    funnelSubHeader.methods = {
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-      initializeComponent: jest.fn(),
+
-    };
+  //Mock damage initialize methods
-    const mountOptions = getMountOptions(mountOptionsMockData);
+  funnelHeader.methods = {
-    const wrapper = shallowMount(vehicleDamage, mountOptions);
+    initializeComponent: jest.fn(),
-    const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  };
-    funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+
-    const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBanner.methods = {
-    vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+    initializeComponent: jest.fn(),
-    const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  };
-    funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+
-  
+  funnelSubHeader.methods = {
-    return { wrapper, apiPromise };
+    initializeComponent: jest.fn(),
-  }
+  };
+
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleDamage, mountOptions);
+
+  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.spec.js

@@ -9,11 +9,11 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 
-// Mock Store
+
 jest.mock("@/store", () => ({
   getters: {
-    vehicle: { 
+    vehicle: {
-      year: 2019,
+      year: 2019
     }
   }
 }));
@@ -28,6 +28,9 @@ jest.mock("@/helpers/layout-helper.js", () => ({
   settleAllPromises: jest.fn(),
 }));
 
+beforeEach(() => {
+  jest.resetModules();
+});
 
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
@@ -40,7 +43,7 @@ describe("vehicle-make.vue", () => {
       makeQuestionInitialData: makeQuestionInitialData,
     });
 
-    
+
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
 
@@ -58,7 +61,7 @@ describe("vehicle-make.vue", () => {
     //Arrange
     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));
 
@@ -79,7 +82,7 @@ describe("vehicle-make.vue", () => {
         "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));
 
@@ -100,7 +103,7 @@ describe("vehicle-make.vue", () => {
         "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));
 
@@ -124,7 +127,7 @@ describe("vehicle-make.vue", () => {
         },
       },
     });
-    
+
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
     wrapper.vm.backButtonAction();
@@ -139,13 +142,10 @@ describe("vehicle-make.vue", () => {
 });
 
 describe("vehicle-make.vue", () => {
-  test("arePagePrerequisitesValid", async (done) => {
+  test("Year set, arePagePrerequisitesValid should be true ", async () => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks({
+    const { wrapper } = setupMocks({});
-      pageHeaderWidgetHeaderText: "Select a make to get started",
-      mountOptionsMockData: {},
-    });
 
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
@@ -154,10 +154,7 @@ describe("vehicle-make.vue", () => {
     await nextTick();
 
     //Assert
-    apiPromise.finally(() => {
+    expect(arePagePrerequisitesValid).toBe(true);
-      expect(arePagePrerequisitesValid).toBe(true);
-      done();
-    });
   });
 });
 
@@ -187,7 +184,7 @@ function setupMocks({
     },
     makeQuestionInitialData: makeQuestionInitialData,
   };
-  
+
   const apiPromise = Promise.resolve(apiResponses);
 
   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());

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

@@ -78,7 +78,6 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     arePagePrerequisitesValid() {
-      console.log(store.getters.vehicle);
       return store.getters.vehicle.year !== null;
     },
   },

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

@@ -1,25 +1,45 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+// Components
-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";
+
+// Supporting files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
   settleAllPromises: jest.fn(),
 }));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+  getters: {
+    vehicle: {
+      make: "Acura"
+    }
+  }
+}));
+
 describe("vehicle-model.vue", () => {
   test("Model question component is initized with api data", async (done) => {
     //Arange
     const buttonQuestionContent = { QuestionText: "What model is your vehicle?" };
     const modelQuestionInitialData = ["accord", "civic", "insight"];
-    const { wrapper, apiPromise } = setupMocks( { 
+    const { wrapper, apiPromise } = setupMocks({
-      buttonQuestionContent: buttonQuestionContent, 
+      buttonQuestionContent: buttonQuestionContent,
       modelQuestionInitialData: modelQuestionInitialData,
-    } );
+    });
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
     //Assert
@@ -33,7 +53,7 @@ describe("vehicle-model.vue", () => {
   test("Page header is initailized with api data", async (done) => {
     //Arrange
     const pageHeaderWidgetHeaderText = "Select a model to get started";
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
     //Assert
@@ -50,7 +70,7 @@ describe("vehicle-model.vue", () => {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
     }
-    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+    const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget });
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
     //Assert
@@ -67,7 +87,7 @@ describe("vehicle-model.vue", () => {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
     }
-    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+    const { wrapper, apiPromise } = setupMocks({ VehicleBannerWidget: VehicleBannerWidget });
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
     //Assert
@@ -80,7 +100,7 @@ describe("vehicle-model.vue", () => {
 describe("vehicle-model.vue", () => {
   test("BackButtonAction triggers a router.navigate change", async (done) => {
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { 
+    const { wrapper, apiPromise } = setupMocks({
       pageHeaderWidgetHeaderText: "Select a model to get started",
       mountOptionsMockData: {
         router: {
@@ -99,6 +119,23 @@ describe("vehicle-model.vue", () => {
     });
   });
 });
+describe("vehicle-model.vue", () => {
+  test("Make set, arePagePrerequisitesValid should be true ", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
+
 function setupMocks({
   buttonQuestionContent = {},
   modelQuestionInitialData = {},
@@ -110,21 +147,24 @@ function setupMocks({
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleModelQuestion: buttonQuestionContent,
-      VehicleBannerWidget: 
+      VehicleBannerWidget:
-        {
+      {
-          GenericVehicleImage:
+        GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-        },
+      },
-      FunnelHeaderWidget: 
+      FunnelHeaderWidget:
-        {
+      {
-          LogoImage:
+        LogoImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-        },
+      },
     },
     modelQuestionInitialData: modelQuestionInitialData,
   };
   const apiPromise = Promise.resolve(apiResponses);
+
   settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
   //Mock model question methods
   modelQuestion.methods = {
     loadInitialData: jest.fn(),
@@ -141,13 +181,18 @@ function setupMocks({
   };
   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-style/vehicle-style.spec.js

@@ -1,19 +1,37 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+// Components
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { storeActions } from "@/constants/store-actions";
 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";
+
+// Supporting files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
   settleAllPromises: jest.fn(),
 }));
 
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+  getters: {
+    vehicle: {
+      model: "TL"
+    }
+  }
+}));
+
 describe("vehicle-style.vue", () => {
   test("Style question component is initized with api data", async (done) => {
 
@@ -162,6 +180,22 @@ describe("vehicle-style.vue", () => {
   });
 });
 
+describe("vehicle-style.vue", () => {
+  test("Model set, arePagePrerequisitesValid should be true ", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
 function setupMocks({
   vehicleStyleQuestionCmsContent = {},
   styleQuestionInitialData = {},
@@ -187,31 +221,42 @@ function setupMocks({
     },
     styleQuestionInitialData: styleQuestionInitialData,
   };
+
   const apiPromise = Promise.resolve(apiResponses);
+
   settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
   //Mock style question methods
   styleQuestion.methods = {
     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;
 

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

@@ -77,6 +77,24 @@ describe("vehicle-year.vue", () => {
   });
 });
 
+
+describe("vehicle-year.vue", () => {
+  test("arePagePrerequisitesValid should be true ", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
+
 function setupMocks({
   vehicleYearQuestionCmsContent = {},
   yearQuestionInitialData = {},

src/mixins/base-mixin.spec.js

@@ -1,6 +1,8 @@
 import baseMixin from "@/mixins/base-mixin";
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
+import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import store from "@/store";
 
 describe("baseMixin.js", () => {
@@ -23,7 +25,54 @@ describe("baseMixin.js", () => {
 
     expect(store.dispatch).toBeCalledWith(type, payload);
   });
+
+  test("computed: storeActions should be equal to import object", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+
+    // Act
+    let storeActionsForTest = mixIn.computed.storeActions();
+
+    // Assert
+    expect(storeActionsForTest).toEqual(storeActions);
+  });
+
+  test("computed: storeMutations should be equal to import object", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+
+    // Act
+    let storeMutationsForTest = mixIn.computed.storeMutations();
+
+    // Assert
+    expect(storeMutationsForTest).toEqual(storeMutations);
+  });
+
+  test("computed: navigationScenarios should be equal to import object", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+
+    // Act
+    let navigationScenariosForTest = mixIn.computed.navigationScenarios();
+
+    // Assert
+    expect(navigationScenariosForTest).toEqual(navigationScenarios);
+  });
+  
+  test("computed: widgetNames should be equal to import object", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+
+    // Act
+    let widgetNamesForTest = mixIn.computed.widgetNames();
+
+    // Assert
+    expect(widgetNamesForTest).toEqual(widgetNames);
+  });
+
 });
+
+
 function getMixInInstance({ isDispatchSuccess = true }) {
   // Mock Store
   const storeDispatch = jest.fn();