SSR-141
Capability Questions
This commit is contained in:
Sneha
parent
1af2437a20
commit
39a5385b57
4 changed files with 515 additions and 45 deletions
|
|
@ -64,6 +64,9 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.getbuttonText();
|
||||
},
|
||||
methods: {
|
||||
showThisQuestionChain(glass, i) {
|
||||
// return false if no questions or if suppressed
|
||||
|
|
@ -81,6 +84,11 @@ export default {
|
|||
showLoadingModal() {
|
||||
this.$refs.loadingModal.showModal();
|
||||
},
|
||||
getbuttonText(){
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
`Continue`
|
||||
);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
|
|
|
|||
360
src/layouts/capability-questions/capability-questions.spec.js
Normal file
360
src/layouts/capability-questions/capability-questions.spec.js
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
// 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 handleCompletedQuestionChainAnswers if watched data changes", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers");
|
||||
|
||||
// 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 trigger navigateForward", async () => {
|
||||
// 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: [],
|
||||
};
|
||||
});
|
||||
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 };
|
||||
}
|
||||
|
|
@ -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">
|
||||
<siteHeader
|
||||
cmsWidgetName="SiteHeaderWidget"
|
||||
/>
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
class="mb-3"
|
||||
/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
/>
|
||||
<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>
|
||||
<questionsPageLayout
|
||||
isRequired
|
||||
ref="questionsPageLayout"
|
||||
:isMetaValid="meta.valid"
|
||||
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
|
||||
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
|
||||
:questionsData="questionsData"
|
||||
validationRules="questions-required"
|
||||
v-model="selectedAnswers"
|
||||
@forwardButtonAction="forwardButtonAction"
|
||||
@back-click="navigateBack"
|
||||
:index="currentGlassIndex" />
|
||||
</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 siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
||||
import { issPageValues } from "@/router/router-constants/issPage-values";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { useMainStore } from "@/store";
|
||||
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() {
|
||||
return true;
|
||||
const capabilityQuestionsFromPageData = useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS);
|
||||
return (
|
||||
capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) &&
|
||||
capabilityQuestionsDFromPageData?.partsOrQuestions?.some(
|
||||
(part) => part?.capabilityQuestions?.length > 0)
|
||||
);
|
||||
},
|
||||
backButtonAction() {
|
||||
/**
|
||||
* this.navigationScenarios comes from base-mixin
|
||||
*/
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
getInitialQuestionData() {
|
||||
// get any questions that were already answered
|
||||
const alreadyAnsweredQuestions = useMainStore().damage.capabilityQuestionAnswers;
|
||||
this.questionsData = this.partsOrQuestionsData
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -395,7 +395,6 @@ export const useMainStore = defineStore({
|
|||
endpoint: `${endpoints.GetCapabilityQuestions.url}/${carId}/${partNumber}`,
|
||||
});
|
||||
},
|
||||
|
||||
lookupVehicleByVin(vin) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.LookupVehicleByVin.method,
|
||||
|
|
@ -729,6 +728,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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue