updated tests

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

@@ -134,7 +134,8 @@ function setupMocks({
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent =
     makeQuestion.methods.initializeComponent;
-    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
   return { wrapper, apiPromise };
 }

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

@@ -1,31 +1,11 @@
 import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import store from "@/store";
+import { useMainStore } from "@/store";
-jest.mock(
+
-    "@/store",
-    () => {
-        return {};
-    },
-    { virtual: true }
-);
 
 describe("style-question.vue", () => {
-    test("Selected style is emitted upon selection.", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
-        const styleToSelect = "4 Door";
 
-        //Act
-        wrapper.setValue({ selectedStyle: styleToSelect });
-        await wrapper.vm.$nextTick();
-
-        //Assert
-        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedStyle: "4 Door" }]);
-    });
-});
-
-describe("style-question.vue", () => {
     test("Data from store api are used as radio question answers.", async () => {
         //Arrange
         const { wrapper, cmsContent } = setupMocks({
@@ -42,6 +22,20 @@ describe("style-question.vue", () => {
         });
         expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
     });
+    
+    test("Selected style is emitted upon selection.", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
+        const styleToSelect = "4 Door";
+
+        //Act
+        wrapper.setValue({ selectedStyle: styleToSelect });
+        await wrapper.vm.$nextTick();
+
+        //Assert
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedStyle: "4 Door" }]);
+    });
+
 });
 
 function setupMocks({
@@ -50,25 +44,14 @@ function setupMocks({
     dataFromStoreApi = [],
 }) {
     //Mock store
-    store.dispatch = jest.fn(() => dataFromStoreApi);
+    const mountOptions = getMountOptions();
-    store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } };
+
-    const mountOptions = getMountOptions({
+    const store = useMainStore();
-        store: {
+    store.getVehicleStyles =  jest.fn(() => dataFromStoreApi);
-            dispatch: store.dispatch,
-            getters: store.getters,
-        },
-    });
 
-    //Mock props
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn(),
-        },
-    };
     mountOptions.propsData = {
         modelValue: modelValueProp,
     };
-    mountOptions.mixins = [mockMixin];
     const wrapper = shallowMount(styleQuestion, mountOptions);
 
     //Mock CMS content

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

@@ -1,18 +1,16 @@
+// Supporting files
+import { shallowMount } from "@vue/test-utils";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+import { useMainStore } from "@/store";
+
 // Components
 import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
 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";
-import baseMixin from "@/mixins/base-mixin.js";
-import router from "@/router";
-import store from "@/store";
-import { storeMutations } from "@/constants/store-mutations";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -24,17 +22,12 @@ jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
 }));
 
-// Mock fetchCmsContentForPage
-jest.mock("@/router", () => ({
-    overrideNavigation: jest.fn(),
-}));
-
 describe("vehicle-style.vue", () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
 
-    test("Style question component is initized with api data", async (done) => {
+    test("Style question component is initized with api data", async () => {
         //Arrange
         const styleQuestionInitialData = ["2 Door", "4 Door"];
         const { wrapper, apiPromise } = setupMocks({
@@ -44,7 +37,7 @@ describe("vehicle-style.vue", () => {
         //Act
         vehicleStyle.beforeRouteEnter.call(
             wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
+            { query: { issPage: "vehicle-style" } },
             undefined,
             (c) => c(wrapper.vm)
         );
@@ -54,19 +47,16 @@ describe("vehicle-style.vue", () => {
             expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
                 styleQuestionInitialData
             );
-            done();
         });
     });
 
-    test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
+    test("BackButtonAction triggers a router.navigate change", async () => {
         //Arrange
         const { wrapper, apiPromise } = setupMocks({
             pageHeaderWidgetHeaderText: "Select a style to get started",
             mountOptionsMockData: {
                 router: {
                     navigate: jest.fn(),
-                    navigateWithSaving: jest.fn(),
-                    navigateWithoutSaving: jest.fn(),
                 },
             },
         });
@@ -74,7 +64,7 @@ describe("vehicle-style.vue", () => {
         //Act
         vehicleStyle.beforeRouteEnter.call(
             wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
+            { query: { issPage: "vehicle-style" } },
             undefined,
             (c) => c(wrapper.vm)
         );
@@ -84,49 +74,18 @@ describe("vehicle-style.vue", () => {
         //Assert
         apiPromise.finally(() => {
             expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
-            done();
-        });
-    });
-
-    test("setVehicle triggers a dispatchStoreAction commit", async (done) => {
-        //Arrange
-        const { wrapper, apiPromise } = setupMocks({
-            pageHeaderWidgetHeaderText: "Select a style to get started",
-            mountOptionsMockData: {
-                actionList: [
-                    {
-                        actionName: storeActions.SET_VEHICLE,
-                        data: "mockData",
-                    },
-                ],
-            },
-        });
-
-        //Act
-        vehicleStyle.beforeRouteEnter.call(
-            wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
-            undefined,
-            (c) => c(wrapper.vm)
-        );
-        wrapper.vm.setVehicle();
-        await nextTick();
-
-        //Assert
-        apiPromise.finally(() => {
-            expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
-            done();
         });
     });
 
     test("Model set, arePagePrerequisitesValid should be true ", async () => {
         //Arrange
         const { wrapper } = setupMocks({});
+        useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null }
 
         //Act
         vehicleStyle.beforeRouteEnter.call(
             wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
+            { query: { issPage: "vehicle-style" } },
             undefined,
             (c) => c(wrapper.vm)
         );
@@ -137,59 +96,6 @@ describe("vehicle-style.vue", () => {
         //Assert
         expect(arePagePrerequisitesValid).toBe(true);
     });
-
-    test("there is only one vehicle style => autoselect and move to vehicle damage", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({
-            styleQuestionInitialData: ["2 door sedan"],
-        });
-
-        // Act
-        await vehicleStyle.beforeRouteEnter.call(
-            wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
-            undefined,
-            (c) => c(wrapper.vm)
-        );
-
-        // Assert
-        expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan");
-        expect(router.overrideNavigation).toHaveBeenCalled();
-    });
-
-    test("there is only one vehicle style and vehicle-damage was visited => don't autoselect or move to vehicle damage", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({
-            styleQuestionInitialData: ["2 door sedan"],
-            mountOptionsMockData: {
-                store: {
-                    getters: {
-                        applicationUser: {
-                            pageData: {
-                                "part-questions": null,
-                                "vehicle-make": {},
-                                "vehicle-model": {},
-                                "vehicle-style": {},
-                                "vehicle-damage": {},
-                            },
-                        },
-                    },
-                },
-            },
-        });
-
-        // Act
-        await vehicleStyle.beforeRouteEnter.call(
-            wrapper.vm,
-            { query: { fmgPage: "vehicle-style" } },
-            undefined,
-            (c) => c(wrapper.vm)
-        );
-
-        // Assert
-        expect(store.commit).not.toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan");
-        expect(router.overrideNavigation).not.toHaveBeenCalled();
-    });
 });
 
 function setupMocks({
@@ -201,13 +107,13 @@ function setupMocks({
     //Mock api responses
     const apiResponses = {
         cmsContent: {
-            FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+            SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
             VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
             VehicleBannerWidget: {
                 GenericVehicleImage:
                     "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
             },
-            FunnelHeaderWidget: {
+            SiteHeaderWidget: {
                 LogoImage:
                     "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
             },
@@ -226,31 +132,14 @@ function setupMocks({
         initializeComponent: jest.fn(),
     };
 
-    store.commit = jest.fn();
+    const mountOptions = getMountOptions(mountOptionsMockData);
-    store.dispatch = jest.fn();
-    store.getters = mountOptionsMockData.store?.getters ?? {
-        vehicle: {
-            model: "TL",
-        },
-        applicationUser: {
-            pageData: {
-                "part-questions": null,
-                "vehicle-make": {},
-                "vehicle-model": {},
-                "vehicle-style": {},
-            },
-        },
-    };
-
-    const mountOptions = getMountOptions({
-        ...mountOptionsMockData,
-        store,
-    });
     const wrapper = shallowMount(vehicleStyle, mountOptions);
-    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
     const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
-    styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+    styleQuestionWrapper.vm.initializeComponent = 
+        styleQuestion.methods.initializeComponent;
+    
+    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     
     return { wrapper, apiPromise };
 }

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

@@ -39,8 +39,6 @@ export default {
         };
     },
 
-    computed: {},
-
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -67,7 +65,6 @@ export default {
 
     methods: {
         backButtonAction() {
-            // route to move backwards
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         arePagePrerequisitesValid() {