Merge branch 'develop' into feature/Digital/SSR-261

src/layouts/capability-questions/capability-questions.spec.js

@@ -0,0 +1,402 @@
+// Components
+import capabilityQuestions from "@/layouts/capability-questions/capability-questions";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+import baseMixin from "../../mixins/base-mixin";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { nextTick } from "vue";
+
+// 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(),
+}));
+
+const baseStoreGettersPageData = () => {
+    return {
+        partsOrQuestions: [
+            {
+                parts: [
+                    {
+                        childPartQuestions: [],
+                    },
+                ],
+                capabilityQuestions: [
+                    {
+                        questionSequence: 1,
+                        questionText:
+                            "Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
+                        answers: [
+                            {
+                                answerResult1: "DYNAMIC",
+                                answerResult2: "1",
+                                answerText: "Yes",
+                                nextQuestionSequence: null,
+                                answerResult: "DYNAMIC",
+                            },
+                            {
+                                answerResult1: "Unknown",
+                                answerResult2: "0",
+                                answerText: "No",
+                                nextQuestionSequence: null,
+                                answerResult: "Unknown",
+                            },
+                        ],
+                    },
+                ],
+                partQuestions: [],
+                questions: [],
+                glassLocation: "Windshield",
+                glassName: "Single",
+                answerKey: "Windshield-Single",
+                answerData: null,
+            },
+        ],
+    };
+};
+const baseStoreGettersDamage = () => {
+    return {
+        partsQuestionAnswers: [
+            {
+                glassLocation: "Windshield",
+                glassName: "Single",
+                result: "FW04848",
+                answeredQuestions: [
+                    {
+                        questionText:
+                            "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+                        selectedAnswer: "1|nextQuestion|3|Yes",
+                        selectedAnswerText: "Yes",
+                        questionNum: 1,
+                    },
+                    {
+                        questionText:
+                            "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
+                        selectedAnswer: "2|nextQuestion|3|Yes",
+                        selectedAnswerText: "Yes",
+                        questionNum: 2,
+                    },
+                ],
+            },
+        ],
+    };
+};
+useMainStore().pageData = baseStoreGettersPageData;
+useMainStore().damage = baseStoreGettersDamage;
+
+describe("capabilityQuestions.vue", () => {
+    describe("method arePagePrerequisitesValid...", () => {
+        test("Should return true for valid page requisites if pageData exists", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBe(true);
+
+            wrapper.unmount();
+        });
+
+        test("Should return false for valid page requisites if partsOrQuestions in pageData is missing", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            useMainStore().pageData  = jest.fn(() => {
+                return undefined;
+            });
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBeFalsy();
+
+            wrapper.unmount();
+        });
+
+        test("Should be at least one item in partsOrQuestions", () => {
+            // Arrange
+            useMainStore().pageData = jest.fn(() => {
+                return {
+                    partsOrQuestions: [],
+                };
+            });
+            useMainStore().damage = baseStoreGettersDamage;
+
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBeFalsy();
+
+            wrapper.unmount();
+        });
+    });
+
+    describe("watch on selectedAnswers should be set up...", () => {
+        test("Should trigger handleAnswerUpdates if watched data changes", async () => {
+            // Arrange
+            useMainStore().pageData = baseStoreGettersPageData;
+            useMainStore().damage = baseStoreGettersDamage;
+            const { wrapper } = setupMocks({});
+            const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates");
+
+            // Act
+            wrapper.setData({
+                selectedAnswers: {
+                    "Windshield-Single": {
+                        answerResult: "FW04848",
+                        answeredQuestions: [
+                            {
+                                questionText:
+                                    "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+                                selectedAnswer: "1|nextQuestion|3|Yes",
+                                selectedAnswerText: "Yes",
+                                questionNum: 1,
+                            },
+                            {
+                                questionText:
+                                    "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
+                                selectedAnswer: "2|nextQuestion|3|Yes",
+                                selectedAnswerText: "Yes",
+                                questionNum: 2,
+                            },
+                        ],
+                        index: 0,
+                    },
+                },
+            });
+
+            await nextTick();
+
+            //Assert
+            expect(spy).toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
+    });
+
+    describe("forwardButtonAction", () => {
+        test("Should clear out answerData", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                    questions: [],
+                    parts: [
+                        {
+                            childPartQuestions: [{}],
+                        },
+                    ],
+                },
+            ];
+            wrapper.vm.dispatchStoreAction = jest.fn(() => {
+                return {
+                    data: [],
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.questionsData[0].answerData).toEqual({});
+
+            wrapper.unmount();
+        });
+
+        test("Should save to pinia store", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                    questions: [],
+                    parts: [
+                        {
+                            childPartQuestions: [],
+                        },
+                    ],
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            await nextTick();
+
+            //Assert
+            expect(wrapper.vm.saveCapabilityQuestionAnswers).toHaveBeenCalled;
+            wrapper.unmount();
+        });
+        test("Should call GET_PARTS_OR_QUESTIONS API", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                    questions: [],
+                    parts: [
+                        {
+                            childPartQuestions: [],
+                        },
+                    ],
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            await nextTick();
+
+            //Assert
+            expect(wrapper.vm.getPartsOrQuestions).toHaveBeenCalled;
+
+            wrapper.unmount();
+        });
+
+        test("Should trigger navigateForward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                    questions: [],
+                    parts: [
+                        {
+                            childPartQuestions: [],
+                        },
+                    ],
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
+    });
+});
+
+function setupMocks({
+    mountOptionsMockData = {
+        router: {
+            navigate: jest.fn(),
+        },
+        actionList: [
+            {
+                actionName: "saveCapabilityQuestionAnswers",
+                data: {},
+            },
+            {
+                actionName: "getPartsOrQuestions",
+                data: {},
+            },
+        ],
+        route: {
+            query: {
+                issPage: "capability-questions",
+            },
+        },
+        data() {
+            return {
+                computedSwitcher: [
+                    {
+                        glassLocation: "Windshield",
+                        glassName: "Single",
+                        answerData: {
+                            answerResult: "FW04848",
+                            answeredQuestions: [],
+                        },
+                    },
+                ],
+            };
+        },
+        questionsData: {
+            get() {
+                return this.computedSwitcher;
+            },
+            set(val) {
+                this.computedSwitcher = val;
+            },
+        },
+    },
+}) {
+
+    useMainStore().getPartsOrQuestions = jest.fn(() => {
+        return {
+            data: {
+                partsOrQuestions: [],
+            }
+        };
+    });
+    const mountOptions = getMountOptions({
+        ...mountOptionsMockData,
+        mixins: [baseMixin, vehicleQuestionsMixin],
+    });
+    mountOptions["attachTo"] = document.body;
+
+    const wrapper = shallowMount(capabilityQuestions, mountOptions);
+
+    return { wrapper };
+}

src/layouts/capability-questions/capability-questions.vue

@@ -1,33 +1,21 @@
 <template>
   <Form
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
+    @invalidSubmit="onInvalidSubmit" ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <questionsPageLayout
-      <siteHeader
+            isRequired
-        cmsWidgetName="SiteHeaderWidget"
+            ref="questionsPageLayout"
-      />
+            :isMetaValid="meta.valid"
-      <vehicleBanner
+            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
-        cmsWidgetName="VehicleBannerWidget"
+            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
-        :displayGenericVehicleImage="false"
+            :questionsData="questionsData"
-        class="mb-3"
+            validationRules="questions-required"
-      />
+            v-model="selectedAnswers"
-      <siteSubHeader
+            @forwardButtonAction="forwardButtonAction"
-        cmsWidgetName="SiteSubHeaderWidget"
+            @back-click="navigateBack"
-      />
+            :index="currentGlassIndex" />
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <p>Placeholder for capability-questions page</p>
-
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
   </Form>
 </template>
 <script>
@@ -37,24 +25,29 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
-import { Form } from 'vee-validate';
+import { issPageValues } from "@/router/router-constants/issPage-values";
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import { Form, defineRule } from "vee-validate";
-import siteHeader from '@/iss-components/site-header/site-header.vue';
+import { required } from "@/helpers/validation-rules";
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import { useMainStore } from "@/store";
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
   name: 'capability-questions',
-  mixins: [baseFormMixin],
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
   components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
     Form,
-    vehicleBanner,
+    questionsPageLayout
   },
   data() {
-    return {};
+    return {
+      questionsData: [],
+            selectedAnswers: {},
+            currentGlassIndex: 0,
+    };
   },
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -73,18 +66,105 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  computed: {
+        AlertFewMoreQuestionsHeader() {
+            return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
+        },
+        AlertFewMoreQuestionsCopy() {
+            return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
+        },
+        partsOrQuestionsData() {
+            return useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS)
+                .partsOrQuestions;
+        },
+    },
+    mounted() {
+    this.getInitialQuestionData();
+   
+  },
   methods: {
-    arePagePrerequisiteValid() {
+    arePagePrerequisitesValid() {
-      return true;
+      const capabilityQuestionsFromPageData = useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS);
+            return (
+              capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) &&
+                capabilityQuestionsFromPageData?.partsOrQuestions?.some(
+                    (part) => part?.capabilityQuestions?.length > 0)
+            );
     },
-    backButtonAction() {
+    getInitialQuestionData() {
-      /**
+         // get any questions that were already answered
-       * this.navigationScenarios comes from base-mixin
+         const alreadyAnsweredQuestions = useMainStore().damage.capabilityQuestionAnswers;
-       */
+            this.questionsData = this.partsOrQuestionsData
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                .filter((x) => x.capabilityQuestions)
+                .map((glass, index) => {
+                    // NOTE: questions for property "questions" can differ between layouts
+                    glass.questions = glass.capabilityQuestions;
+                    glass.answerKey = glass.glassLocation + "-" + glass.glassName;
+                    // reset selectedAnswers for this glass
+                    this.selectedAnswers[glass.answerKey] = [];
+                    const updatedGlass = this.setupInitialData(
+                        glass,
+                        index,
+                        alreadyAnsweredQuestions
+                    );
+                    // Set up watch for each set of glass questions
+                    this.$watch(
+                        "selectedAnswers." + glass.answerKey,
+                        (newValue) => {
+                            if (newValue && Object.keys(newValue).length > 0) {
+                                this.handleAnswerUpdates(newValue, glass.answerKey);
+                            }
+                        },
+                        { deep: true }
+                    );
+                    return updatedGlass;
+                });
+      },
+    async forwardButtonAction() {
+      const questionAnswersArray = this.questionsData.map((glass) => {
+                // get answerResult2 of returned answer
+                let selectedAnswerResult2;
+                glass.questions.forEach((q) => {
+                    const idx = q.answers.findIndex(
+                        (a) => a.answerResult === glass.answerData.answerResult
+                    );
+                    if (idx !== -1) {
+                        selectedAnswerResult2 = q.answers[idx].answerResult2;
+                    }
+                });
+                return {
+                  glassLocation: glass.glassLocation,
+                    glassName: glass.glassName,
+                    result: glass.answerData.answerResult,
+                    result1: glass.answerData.answerResult,
+                    result2: selectedAnswerResult2,
+                    answeredQuestions: glass.answerData.answeredQuestions,
+                    isSuppressedPart: glass.isSuppressedPart,
+                };
+            });
+            // clear out answerData for future page loads; must occur prior to store save
+            this.questionsData.forEach((glass) => {
+                glass.answerData = {};
+            });
+            // save to store as order.damage.moldingQuestionArrays (array)
+            await this.mainStore.saveCapabilityQuestionAnswers(questionAnswersArray);
+            // get parts from the capabilityQuestionAnswers
+            const partsOrQuestions = this.partsOrQuestionsData;
+            for (let answer of questionAnswersArray) {
+                    partsOrQuestions.find((partOrQuestion) => {
+                    return (
+                        partOrQuestion.glassLocation === answer.glassLocation &&
+                        partOrQuestion.glassName === answer.glassName
+                    );
+                }).parts[0].childParts = [
+                    {
+                        partNumber: answer.partNum,
+                    },
+                ];
+            }
+            this.navigateForward(partsOrQuestions, null);
+    
     },
-    async forwardButtonAction() {},
-    resetDependentState() {},
   },
 };
 </script>

src/store/index.js

@@ -395,7 +395,6 @@ export const useMainStore = defineStore({
             endpoint: `${endpoints.GetCapabilityQuestions.url}/${carId}/${partNumber}`,
         });
       },
-
       lookupVehicleByVin(vin) {
         return globalMethods.callHttpClient({
           method: endpoints.LookupVehicleByVin.method,
@@ -736,6 +735,29 @@ export const useMainStore = defineStore({
         // Save new values
         this.updateMoldingQuestionAnswers(moldingQuestionAnswersArray);
       },
+      saveCapabilityQuestionAnswers(capabilityQuestionAnswersArray) {
+        const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
+          this.order.damage.capabilityQuestionAnswers, 
+          "result"
+        );
+        const sortedCapabilityQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
+          capabilityQuestionAnswersArray, 
+          "result"
+        );
+        const haveCapabilityQuestionAnswersChanged = 
+          sortedPreviousResultsArray?.length !== sortedCapabilityQuestionAnswersArray.length ||
+          !sortedPreviousResultsArray?.every(
+            (x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result
+          );
+        
+        if (haveCapabilityQuestionAnswersChanged) {
+          this.updateGlassParts(null);
+          this.updateSupportingItems(null);
+        }
+
+        // Save new values
+        this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray);
+      },
      
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);