From bc07b2419a87d7a7159f0bf95d446a5c84ea3deb Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Wed, 2 Nov 2022 14:25:02 -0400
Subject: [PATCH 1/3] page functions

---
 .../site-sub-header/site-sub-header.vue       |   1 +
 src/constants/endpoints.js                    |   6 +-
 src/layouts/vehicle-model/vehicle-model.vue   |   2 +-
 .../style-question/style-question.spec.js     |  79 ++++++
 .../style-question/style-question.vue         |  54 ++++
 .../vehicle-style/vehicle-style.spec.js       | 256 ++++++++++++++++++
 src/layouts/vehicle-style/vehicle-style.vue   |  98 +++++++
 src/router/router-constants/issPage-values.js |   3 +-
 .../router-constants/navigation-scenarios.js  |   1 +
 src/router/router-constants/routing-table.js  |  15 +-
 src/store/index.js                            |  15 +
 11 files changed, 526 insertions(+), 4 deletions(-)
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.spec.js
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.vue
 create mode 100644 src/layouts/vehicle-style/vehicle-style.spec.js
 create mode 100644 src/layouts/vehicle-style/vehicle-style.vue

diff --git a/src/common-components/site-sub-header/site-sub-header.vue b/src/common-components/site-sub-header/site-sub-header.vue
index c394d214..6f3ab085 100644
--- a/src/common-components/site-sub-header/site-sub-header.vue
+++ b/src/common-components/site-sub-header/site-sub-header.vue
@@ -45,6 +45,7 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
 <style lang="scss" scoped>
 h5 {
   line-height: 32px;
+  max-width: 300px;
 
   button {
     color: inherit;
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 642fc752..c4c5d876 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -20,7 +20,11 @@ const endpoints = {
     method: "GET",
   },
   GetVehicleModels: {
-    url: "/vehicle/api/v1/vehicle/Models",
+    url: "/vehicle/api/v1/vehicle/models",
+    method: "GET",
+  },
+  GetVehicleStyles: {
+    url: "/vehicle/api/v1/vehicle/styles",
     method: "GET",
   }
 };
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 76bb35b2..e8019416 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -84,7 +84,7 @@
   
     watch: {
       selectedModel(model) {
-        this.mainStore.updateVehicleYear(model);
+        this.mainStore.updateVehicleModel(model);
         this.$router.navigate(
           this.navigationScenarios.SELECTED_MODEL,
           this.$route
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
new file mode 100644
index 00000000..c0230131
--- /dev/null
+++ b/src/layouts/vehicle-style/style-question/style-question.spec.js
@@ -0,0 +1,79 @@
+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";
+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({
+            dataFromStoreApi: ["2 Door", "4 Door"],
+        });
+
+        //Act
+        const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
+        styleQuestion.methods.initializeComponent.call(wrapper.vm, initialData);
+
+        //Assert
+        const buttonQuestionComponent = await wrapper.findComponent({
+            name: "buttonQuestion",
+        });
+        expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
+    });
+});
+
+function setupMocks({
+    modelValueProp = "1900",
+    cmsQuestionText = "CMS text goes here",
+    dataFromStoreApi = [],
+}) {
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } };
+    const mountOptions = getMountOptions({
+        store: {
+            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
+    const cmsContent = {
+        QuestionText: cmsQuestionText,
+    };
+    return { wrapper, cmsContent };
+}
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
new file mode 100644
index 00000000..d8178371
--- /dev/null
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -0,0 +1,54 @@
+<template>
+    <buttonQuestion
+        class="radioQuestion"
+        isOverflowScrollable
+        selectingInitiatesLoad
+        :questionText="questionText"
+        :answers="styles"
+        groupName="ChooseVehicleStyle"
+        textPosition="text-start"
+        v-model="selectedValue"
+        isRequired />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import { useMainStore } from '@/store';
+
+export default {
+    name: "style-question",
+    data() {
+        return {
+            styles: [],
+        };
+    },
+    props: {
+        modelValue: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+    methods: {
+        loadInitialData() {
+            return useMainStore().getVehicleStyles();
+        },
+        initializeComponent(initialData) {
+            this.styles = initialData;
+        },
+    },
+};
+</script>
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
new file mode 100644
index 00000000..f7dacb6b
--- /dev/null
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -0,0 +1,256 @@
+// 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", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+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) => {
+        //Arrange
+        const styleQuestionInitialData = ["2 Door", "4 Door"];
+        const { wrapper, apiPromise } = setupMocks({
+            styleQuestionInitialData: styleQuestionInitialData,
+        });
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        //Assert
+        apiPromise.finally(() => {
+            expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+                styleQuestionInitialData
+            );
+            done();
+        });
+    });
+
+    test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
+        //Arrange
+        const { wrapper, apiPromise } = setupMocks({
+            pageHeaderWidgetHeaderText: "Select a style to get started",
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn(),
+                    navigateWithSaving: jest.fn(),
+                    navigateWithoutSaving: jest.fn(),
+                },
+            },
+        });
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+        wrapper.vm.backButtonAction();
+        await nextTick();
+
+        //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({});
+
+        //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);
+    });
+
+    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({
+    vehicleStyleQuestionCmsContent = {},
+    styleQuestionInitialData = {},
+    pageHeaderWidgetHeaderText = {},
+    mountOptionsMockData = {},
+}) {
+    //Mock api responses
+    const apiResponses = {
+        cmsContent: {
+            FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+            VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
+            VehicleBannerWidget: {
+                GenericVehicleImage:
+                    "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",
+            },
+        },
+        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(),
+    };
+
+    store.commit = jest.fn();
+    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;
+
+    return { wrapper, apiPromise };
+}
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
new file mode 100644
index 00000000..c77d0fb5
--- /dev/null
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="page-container-grouped-styles">
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="select-car">
+            <div class="select-car-form rounded text-center">
+                <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+                <siteSubHeader
+                    cmsWidgetName="SiteSubHeaderWidget"
+                    :hasBackButton="true"
+                    @click-event="backButtonAction" />
+                <div class="fade-on-route-transition">
+                    <styleQuestion
+                        v-model="selectedStyle"
+                        ref="styleQuestion"
+                        cmsWidgetName="VehicleStyleQuestion" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import siteHeader from "@/common-components/site-header/site-header";
+import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+
+export default {
+    name: "vehicle-style",
+    data() {
+        return {
+            selectedStyle: null,
+        };
+    },
+
+    computed: {},
+
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "styleQuestionInitialData",
+                promise: styleQuestionInitialDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        arePagePrerequisitesValid() {
+            if (this.mainStore.order.vehicle.model) {
+                return true;
+            }
+            return false;
+        },
+    },
+
+    watch: {
+        selectedStyle(style) {
+            this.mainStore.updateVehicleStyle(style);
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_STYLE,
+                this.$route
+            );
+        },
+    },
+
+    components: {
+        styleQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+    },
+};
+</script>
diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js
index 1fe10c52..07ea81bd 100644
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@@ -3,6 +3,7 @@ export const issPageValues = {
     WELCOME_PAGE: "welcome-page",
     VEHICLE_MAKE: "vehicle-make",
     VEHICLE_YEAR: "vehicle-year",
-    VEHICLE_MODEL: "vehicle-model"
+    VEHICLE_MODEL: "vehicle-model",
+    VEHICLE_STYLE: "vehicle-style",
   };
   
\ No newline at end of file
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 01a1d7a8..816f0fd2 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -7,6 +7,7 @@ const navigationScenarios = {
     SELECTED_YEAR: "SELECTED_YEAR",
     SELECTED_MAKE: "SELECTED_MAKE",
     SELECTED_MODEL: "SELECTED_MODEL",
+    SELECTED_STYLE: "SELECTED_STYLE",
     
     // TESTING
     CLICKED_TEST: "CLICKED_TEST"
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 106a103f..4263b29c 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -39,7 +39,20 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.SELECTED_MODEL,
-          destinationUrl: "https://www.google.com"
+          destinationIssPageValue: issPageValues.VEHICLE_STYLE,
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.VEHICLE_STYLE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.VEHICLE_MODEL,
+        },
+        {
+          scenario: navigationScenarios.SELECTED_STYLE,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE,
         }
       ]
     },
diff --git a/src/store/index.js b/src/store/index.js
index 769a36fd..caaf8cbb 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -99,6 +99,14 @@ export const useMainStore = defineStore({
         });
       },
 
+      getVehicleStyles() {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetVehicleStyles.method,
+          endpoint: `${endpoints.GetVehicleStyles.url}/${this.order.vehicle.year}/${this.order.vehicle.make}/${this.order.vehicle.model}`,
+          payload: {},
+        });
+      },
+
       // Vehicle API Actions
       updateVehicleYear(year) 
       {
@@ -121,6 +129,13 @@ export const useMainStore = defineStore({
         }
       },
 
+      updateVehicleStyle(style) 
+      {
+        if (this.order.vehicle.style !== style) {
+          this.order.vehicle.style = style;
+        }
+      },
+
       // populate initial state
       populateInitialState()
       {

From 6c8c3db0fc8553cd54fbee0c9096a7c1b77d43b7 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Wed, 2 Nov 2022 14:48:33 -0400
Subject: [PATCH 2/3] updated tests

---
 src/layouts/vehicle-make/vehicle-make.spec.js |   3 +-
 .../style-question/style-question.spec.js     |  57 +++----
 .../vehicle-style/vehicle-style.spec.js       | 157 +++---------------
 src/layouts/vehicle-style/vehicle-style.vue   |   3 -
 4 files changed, 45 insertions(+), 175 deletions(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 72d3a604..20b8df9b 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/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 };
 }
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
index c0230131..bbb2bd70 100644
--- a/src/layouts/vehicle-style/style-question/style-question.spec.js
+++ b/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";
-jest.mock(
-    "@/store",
-    () => {
-        return {};
-    },
-    { virtual: true }
-);
+import { useMainStore } from "@/store";
+
 
 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);
-    store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } };
-    const mountOptions = getMountOptions({
-        store: {
-            dispatch: store.dispatch,
-            getters: store.getters,
-        },
-    });
+    const mountOptions = getMountOptions();
+
+    const store = useMainStore();
+    store.getVehicleStyles =  jest.fn(() => dataFromStoreApi);
 
-    //Mock props
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn(),
-        },
-    };
     mountOptions.propsData = {
         modelValue: modelValueProp,
     };
-    mountOptions.mixins = [mockMixin];
     const wrapper = shallowMount(styleQuestion, mountOptions);
 
     //Mock CMS content
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index f7dacb6b..b584f74c 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/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();
-    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 mountOptions = getMountOptions(mountOptionsMockData);
     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 };
 }
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index c77d0fb5..531c6693 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/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() {

From 6fe6628decf5b1fb9eb299db6a234304a3486ba2 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Thu, 3 Nov 2022 10:17:42 -0400
Subject: [PATCH 3/3] commit

---
 src/layouts/vehicle-style/vehicle-style.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index b584f74c..dca24943 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -73,7 +73,7 @@ describe("vehicle-style.vue", () => {
 
         //Assert
         apiPromise.finally(() => {
-            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
         });
     });