Merge branch 'develop' into feature/digital/SSR-480
This commit is contained in:
Katie Kroell
commit
d36532c0b2
18 changed files with 11 additions and 1571 deletions
|
|
@ -20,6 +20,7 @@
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-close"
|
class="btn-close"
|
||||||
@mousedown="closeModal"
|
@mousedown="closeModal"
|
||||||
|
@keypress.space="closeModal"
|
||||||
aria-label="Close"></button>
|
aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body ps-5 pe-5 pb-4 pt-0">
|
<div class="modal-body ps-5 pe-5 pb-4 pt-0">
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
class="form-control"
|
class="form-control"
|
||||||
v-model.trim="value"
|
v-model.trim="value"
|
||||||
v-maska="mask"
|
v-maska="mask"
|
||||||
v-on:focus="blurInput"
|
@keydown="preventDateInput"
|
||||||
:type="type"
|
:type="type"
|
||||||
:ref="inputId"
|
:ref="inputId"
|
||||||
:id="inputId"
|
:id="inputId"
|
||||||
|
|
@ -139,11 +139,15 @@ export default {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
blurInput() {
|
preventDateInput(evt) {
|
||||||
if (this.$refs.dateOfLossField) {
|
if (this.type === "date") {
|
||||||
this.$refs.dateOfLossField.blur();
|
if (/\d/.test(evt.key)) {
|
||||||
}
|
evt.stopPropagation();
|
||||||
}
|
evt.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
|
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
||||||
import { useMainStore } from "@/store";
|
|
||||||
|
|
||||||
|
|
||||||
describe("make-question.vue", () => {
|
|
||||||
|
|
||||||
test("Data from store api are used as radio question answers.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper, cmsContent } = setupMocks({
|
|
||||||
dataFromStoreApi: ["honda", "ford", "dodge"],
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
|
|
||||||
makeQuestion.methods.initializeComponent.call(
|
|
||||||
wrapper.vm,
|
|
||||||
initialData
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
const buttonQuestionComponent = await wrapper.findComponent({
|
|
||||||
name: "buttonQuestion",
|
|
||||||
});
|
|
||||||
expect(buttonQuestionComponent.attributes("answers")).toBe(
|
|
||||||
"honda,ford,dodge"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Selected make is emitted upon selection.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({ modelValueProp: "honda" });
|
|
||||||
const makeToSelect = "ford";
|
|
||||||
|
|
||||||
//Act
|
|
||||||
wrapper.setValue({ selectedMake: makeToSelect });
|
|
||||||
await wrapper.vm.$nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
|
|
||||||
{ selectedMake: "ford" },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
modelValueProp = "1900",
|
|
||||||
cmsQuestionText = "CMS text goes here",
|
|
||||||
dataFromStoreApi = [],
|
|
||||||
}) {
|
|
||||||
//Mock store
|
|
||||||
const mountOptions = getMountOptions();
|
|
||||||
|
|
||||||
const store = useMainStore();
|
|
||||||
store.getVehicleMakes = jest.fn(() => dataFromStoreApi);
|
|
||||||
|
|
||||||
|
|
||||||
mountOptions.propsData = {
|
|
||||||
modelValue: modelValueProp,
|
|
||||||
};
|
|
||||||
const wrapper = shallowMount(makeQuestion, mountOptions);
|
|
||||||
|
|
||||||
//Mock CMS content
|
|
||||||
const cmsContent = {
|
|
||||||
QuestionText: cmsQuestionText,
|
|
||||||
};
|
|
||||||
return { wrapper, cmsContent };
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<buttonQuestion
|
|
||||||
class="radioQuestion"
|
|
||||||
isOverflowScrollable
|
|
||||||
selectingInitiatesLoad
|
|
||||||
:questionText="questionText"
|
|
||||||
:answers="makes"
|
|
||||||
groupName="ChooseVehicleMake"
|
|
||||||
textPosition="text-start"
|
|
||||||
v-model="selectedValue"
|
|
||||||
isRequired
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
||||||
import { useMainStore } from '@/store';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "make-question",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
makes: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: String,
|
|
||||||
cmsWidgetName: String,
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
buttonQuestion,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
questionText(){
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
|
||||||
},
|
|
||||||
selectedValue: {
|
|
||||||
get: function() {
|
|
||||||
return this.modelValue
|
|
||||||
},
|
|
||||||
set: function(newValue) {
|
|
||||||
this.$emit("update:modelValue", newValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadInitialData() {
|
|
||||||
return useMainStore().getVehicleMakes();
|
|
||||||
},
|
|
||||||
initializeComponent(initialData) {
|
|
||||||
this.makes = initialData;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,154 +0,0 @@
|
||||||
// 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";
|
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
|
|
||||||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
|
|
||||||
|
|
||||||
// Mock fetchCmsContentForPage
|
|
||||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
|
||||||
fetchCmsContentForPage: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Mock our module for promises.
|
|
||||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
|
||||||
settleAllPromises: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("vehicle-make.vue", () => {
|
|
||||||
|
|
||||||
test("Make question component is initized with api data", async () => {
|
|
||||||
//Arrange
|
|
||||||
const makeQuestionInitialData = ["honda", "ford", "dodge"];
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
makeQuestionInitialData: makeQuestionInitialData,
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleMake.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-make" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
|
||||||
makeQuestionInitialData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
test("BackButtonAction triggers a router.navigate change", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
pageHeaderWidgetHeaderText: "Select a make to get started",
|
|
||||||
mountOptionsMockData: {
|
|
||||||
router: {
|
|
||||||
navigate: jest.fn(),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleMake.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-make" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
wrapper.vm.backButtonAction();
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Year set, arePagePrerequisitesValid should be true ", () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({});
|
|
||||||
useMainStore().order.vehicle.year = 2001;
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleMake.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-make" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(arePagePrerequisitesValid).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
vehicleMakeQuestionCmsContent = {},
|
|
||||||
makeQuestionInitialData = {},
|
|
||||||
pageHeaderWidgetHeaderText = {},
|
|
||||||
mountOptionsMockData = {},
|
|
||||||
}) {
|
|
||||||
//Mock api responses
|
|
||||||
const apiResponses = {
|
|
||||||
cmsContent: {
|
|
||||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
|
||||||
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
|
|
||||||
VehicleBannerWidget: {
|
|
||||||
GenericVehicleImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
|
||||||
},
|
|
||||||
SiteHeaderWidget: {
|
|
||||||
LogoImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
makeQuestionInitialData: makeQuestionInitialData,
|
|
||||||
};
|
|
||||||
|
|
||||||
const apiPromise = Promise.resolve(apiResponses);
|
|
||||||
|
|
||||||
settleAllPromises.mockImplementation(() => apiPromise);
|
|
||||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
|
||||||
|
|
||||||
//Mock make question methods
|
|
||||||
makeQuestion.methods = {
|
|
||||||
loadInitialData: jest.fn(),
|
|
||||||
initializeComponent: jest.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
|
||||||
const wrapper = shallowMount(vehicleMake, mountOptions);
|
|
||||||
|
|
||||||
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
|
|
||||||
makeQuestionWrapper.vm.initializeComponent =
|
|
||||||
makeQuestion.methods.initializeComponent;
|
|
||||||
|
|
||||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
|
||||||
|
|
||||||
return { wrapper, apiPromise };
|
|
||||||
}
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-container-grouped-styles position-relative">
|
|
||||||
<div class="fade-on-route-transition position-relative">
|
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
<div class="select-car">
|
|
||||||
<div class="container-fluid pb-2 px-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="select-car-form rounded text-center">
|
|
||||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
|
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
|
|
||||||
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
|
|
||||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Components
|
|
||||||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
|
|
||||||
import siteHeader from "@/iss-components/site-header/site-header";
|
|
||||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
|
||||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
|
||||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
|
||||||
|
|
||||||
// Supporting files
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'vehicle-make',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedMake: null,
|
|
||||||
shouldHideForwardButton: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
async beforeRouteEnter(to, from, next) {
|
|
||||||
// Call APIs
|
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
||||||
const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
|
|
||||||
|
|
||||||
// Settle promises and get results
|
|
||||||
const promiseResultMap = [
|
|
||||||
{
|
|
||||||
resultKey: "cmsContent",
|
|
||||||
promise: cmsContentPromise,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
resultKey: "makeQuestionInitialData",
|
|
||||||
promise: makeQuestionInitialDataPromise,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
let resultMap = await settleAllPromises(promiseResultMap);
|
|
||||||
|
|
||||||
// Call the "next" function to complete the transition to this page.
|
|
||||||
next((vm) => {
|
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
|
||||||
vm.$refs.makeQuestion.initializeComponent(
|
|
||||||
resultMap.makeQuestionInitialData
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
backButtonAction() {
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.CLICKED_BACK,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
arePagePrerequisitesValid() {
|
|
||||||
if (this.mainStore.order.vehicle.year){
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
makeQuestion,
|
|
||||||
siteHeader,
|
|
||||||
siteSubHeader,
|
|
||||||
vehicleBanner,
|
|
||||||
siteFooter
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
selectedMake(make) {
|
|
||||||
this.mainStore.updateVehicleMake( make );
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.SELECTED_MAKE,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
|
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
||||||
import { useMainStore } from "@/store";
|
|
||||||
|
|
||||||
describe("model-question.vue", () => {
|
|
||||||
test("Selected model is emitted upon selection.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({ modelValueProp: "Accord" });
|
|
||||||
const modelToSelect = "Civic";
|
|
||||||
|
|
||||||
//Act
|
|
||||||
wrapper.setValue({ selectedModel: modelToSelect });
|
|
||||||
await wrapper.vm.$nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
|
|
||||||
{ selectedModel: "Civic" },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe("model-question.vue", () => {
|
|
||||||
test("Data from store api are used as radio question answers.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper, cmsContent } = setupMocks({
|
|
||||||
dataFromStoreApi: ["accord", "civic", "insight"],
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
|
|
||||||
modelQuestion.methods.initializeComponent.call(
|
|
||||||
wrapper.vm,
|
|
||||||
initialData
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
const buttonQuestionComponent = await wrapper.findComponent({
|
|
||||||
name: "buttonQuestion",
|
|
||||||
});
|
|
||||||
expect(buttonQuestionComponent.attributes("answers")).toBe(
|
|
||||||
"accord,civic,insight"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
modelValueProp = "1900",
|
|
||||||
cmsQuestionText = "CMS text goes here",
|
|
||||||
dataFromStoreApi = [],
|
|
||||||
}) {
|
|
||||||
//Mock store
|
|
||||||
const store = useMainStore();
|
|
||||||
store.getVehicleModels = jest.fn(() => dataFromStoreApi);
|
|
||||||
|
|
||||||
const mountOptions = getMountOptions();
|
|
||||||
|
|
||||||
//Mock props
|
|
||||||
mountOptions.propsData = {
|
|
||||||
modelValue: modelValueProp,
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = shallowMount(modelQuestion, mountOptions);
|
|
||||||
|
|
||||||
//Mock CMS content
|
|
||||||
const cmsContent = {
|
|
||||||
QuestionText: cmsQuestionText,
|
|
||||||
};
|
|
||||||
return { wrapper, cmsContent };
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<buttonQuestion
|
|
||||||
class="radioQuestion"
|
|
||||||
isOverflowScrollable
|
|
||||||
selectingInitiatesLoad
|
|
||||||
:questionText="questionText"
|
|
||||||
:answers="models"
|
|
||||||
groupName="ChooseVehicleModel"
|
|
||||||
textPosition="text-start"
|
|
||||||
v-model="selectedValue"
|
|
||||||
isRequired
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
||||||
import { useMainStore } from '@/store';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "model-question",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
models: Array,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
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().getVehicleModels();
|
|
||||||
},
|
|
||||||
initializeComponent(initialData) {
|
|
||||||
this.models = initialData;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
// Components
|
|
||||||
import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
|
|
||||||
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
|
|
||||||
|
|
||||||
// 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";
|
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
|
||||||
|
|
||||||
// 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(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("vehicle-model.vue", () => {
|
|
||||||
test("Model question component is initized with api data", async () => {
|
|
||||||
//Arange
|
|
||||||
const modelQuestionInitialData = ["accord", "civic", "insight"];
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
modelQuestionInitialData: modelQuestionInitialData,
|
|
||||||
});
|
|
||||||
//Act
|
|
||||||
vehicleModel.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-model" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
|
||||||
modelQuestionInitialData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("vehicle-model.vue", () => {
|
|
||||||
test("BackButtonAction triggers a router.navigate change", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
pageHeaderWidgetHeaderText: "Select a model to get started",
|
|
||||||
mountOptionsMockData: {
|
|
||||||
router: {
|
|
||||||
navigate: jest.fn(),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
//Act
|
|
||||||
vehicleModel.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-model" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
wrapper.vm.backButtonAction();
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("vehicle-model.vue", () => {
|
|
||||||
test("Make set, arePagePrerequisitesValid should be true ", () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({});
|
|
||||||
useMainStore().order.vehicle.make = "Honda";
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleModel.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-model" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(arePagePrerequisitesValid).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
buttonQuestionContent = {},
|
|
||||||
modelQuestionInitialData = {},
|
|
||||||
pageHeaderWidgetHeaderText = {},
|
|
||||||
mountOptionsMockData = {},
|
|
||||||
}) {
|
|
||||||
//Mock api responses
|
|
||||||
const apiResponses = {
|
|
||||||
cmsContent: {
|
|
||||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
|
||||||
VehicleModelQuestion: buttonQuestionContent,
|
|
||||||
VehicleBannerWidget: {
|
|
||||||
GenericVehicleImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
|
||||||
},
|
|
||||||
SiteHeaderWidget: {
|
|
||||||
LogoImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
modelQuestionInitialData: modelQuestionInitialData,
|
|
||||||
};
|
|
||||||
const apiPromise = Promise.resolve(apiResponses);
|
|
||||||
|
|
||||||
settleAllPromises.mockImplementation(() => apiPromise);
|
|
||||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
|
||||||
|
|
||||||
//Mock model question methods
|
|
||||||
modelQuestion.methods = {
|
|
||||||
loadInitialData: jest.fn(),
|
|
||||||
initializeComponent: jest.fn(),
|
|
||||||
};
|
|
||||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
|
||||||
const wrapper = shallowMount(vehicleModel, mountOptions);
|
|
||||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
|
||||||
|
|
||||||
const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
|
|
||||||
modelQuestionWrapper.vm.initializeComponent =
|
|
||||||
modelQuestion.methods.initializeComponent;
|
|
||||||
|
|
||||||
return { wrapper, apiPromise };
|
|
||||||
}
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-container-grouped-styles position-relative">
|
|
||||||
<div class="fade-on-route-transition position-relative">
|
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
<div class="select-car">
|
|
||||||
<div class="container-fluid pb-2 px-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="select-car-form rounded text-center">
|
|
||||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
|
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
|
|
||||||
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
|
|
||||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Components
|
|
||||||
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
|
|
||||||
import siteHeader from "@/iss-components/site-header/site-header";
|
|
||||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
|
||||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
|
||||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
|
||||||
|
|
||||||
// Supporting files
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "vehicle-model",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedModel: null,
|
|
||||||
shouldHideForwardButton: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async beforeRouteEnter(to, from, next) {
|
|
||||||
// Call APIs
|
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
||||||
const modelQuestionInitialDataPromise =
|
|
||||||
modelQuestion.methods.loadInitialData();
|
|
||||||
|
|
||||||
// Settle promises and get results
|
|
||||||
const promiseResultMap = [
|
|
||||||
{
|
|
||||||
resultKey: "cmsContent",
|
|
||||||
promise: cmsContentPromise,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
resultKey: "modelQuestionInitialData",
|
|
||||||
promise: modelQuestionInitialDataPromise,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
|
||||||
|
|
||||||
// Call the "next" function to complete the transition to this page.
|
|
||||||
next((vm) => {
|
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
|
||||||
vm.$refs.modelQuestion.initializeComponent(
|
|
||||||
resultMap.modelQuestionInitialData
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
backButtonAction() {
|
|
||||||
// route to move backwards
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.CLICKED_BACK,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
arePagePrerequisitesValid()
|
|
||||||
{
|
|
||||||
if(this.mainStore.order.vehicle.make){
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
backButtonAccessibleText()
|
|
||||||
{
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
selectedModel(model) {
|
|
||||||
this.mainStore.updateVehicleModel( model );
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.SELECTED_MODEL,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
modelQuestion,
|
|
||||||
siteHeader,
|
|
||||||
siteSubHeader,
|
|
||||||
vehicleBanner,
|
|
||||||
siteFooter
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
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 { useMainStore } from "@/store";
|
|
||||||
|
|
||||||
|
|
||||||
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");
|
|
||||||
});
|
|
||||||
|
|
||||||
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({
|
|
||||||
modelValueProp = "1900",
|
|
||||||
cmsQuestionText = "CMS text goes here",
|
|
||||||
dataFromStoreApi = [],
|
|
||||||
}) {
|
|
||||||
//Mock store
|
|
||||||
const mountOptions = getMountOptions();
|
|
||||||
|
|
||||||
const store = useMainStore();
|
|
||||||
store.getVehicleStyles = jest.fn(() => dataFromStoreApi);
|
|
||||||
|
|
||||||
mountOptions.propsData = {
|
|
||||||
modelValue: modelValueProp,
|
|
||||||
};
|
|
||||||
const wrapper = shallowMount(styleQuestion, mountOptions);
|
|
||||||
|
|
||||||
//Mock CMS content
|
|
||||||
const cmsContent = {
|
|
||||||
QuestionText: cmsQuestionText,
|
|
||||||
};
|
|
||||||
return { wrapper, cmsContent };
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<template>
|
|
||||||
<buttonQuestion
|
|
||||||
class="radioQuestion"
|
|
||||||
isOverflowScrollable
|
|
||||||
selectingInitiatesLoad
|
|
||||||
:questionText="questionText"
|
|
||||||
:answers="styles"
|
|
||||||
groupName="ChooseVehicleStyle"
|
|
||||||
textPosition="text-start"
|
|
||||||
v-model="selectedValue"
|
|
||||||
isRequired />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import buttonQuestion from "@/digital-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>
|
|
||||||
|
|
@ -1,211 +0,0 @@
|
||||||
// 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";
|
|
||||||
import router from "@/router";
|
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
|
|
||||||
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
|
|
||||||
|
|
||||||
jest.mock("@/router", () => ({
|
|
||||||
overrideNavigation: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// 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(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("vehicle-style.vue", () => {
|
|
||||||
|
|
||||||
test("Style question component is initized with api data", async () => {
|
|
||||||
//Arrange
|
|
||||||
const styleQuestionInitialData = ["2 Door", "4 Door"];
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
styleQuestionInitialData: styleQuestionInitialData,
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleStyle.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-style" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
|
||||||
styleQuestionInitialData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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(),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleStyle.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-style" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
wrapper.vm.backButtonAction();
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Model set, arePagePrerequisitesValid should be true ", () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({ });
|
|
||||||
|
|
||||||
useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null }
|
|
||||||
|
|
||||||
//Act
|
|
||||||
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
|
||||||
|
|
||||||
//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"],
|
|
||||||
});
|
|
||||||
|
|
||||||
useMainStore().applicationUser.pageData = {
|
|
||||||
"part-questions": null,
|
|
||||||
"vehicle-make": {},
|
|
||||||
"vehicle-model": {},
|
|
||||||
"vehicle-style": {},
|
|
||||||
}
|
|
||||||
|
|
||||||
useMainStore().updateVehicleStyle = jest.fn();
|
|
||||||
useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())
|
|
||||||
|
|
||||||
// Act
|
|
||||||
await vehicleStyle.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-style" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(useMainStore().updateVehicleStyle).toHaveBeenCalledWith("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"],
|
|
||||||
});
|
|
||||||
|
|
||||||
useMainStore().updateVehicleStyle = jest.fn();
|
|
||||||
useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())
|
|
||||||
|
|
||||||
useMainStore().applicationUser.pageData = {
|
|
||||||
"part-questions": null,
|
|
||||||
"vehicle-make": {},
|
|
||||||
"vehicle-model": {},
|
|
||||||
"vehicle-style": {},
|
|
||||||
"vehicle-damage": {},
|
|
||||||
}
|
|
||||||
|
|
||||||
// Act
|
|
||||||
await vehicleStyle.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-style" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(useMainStore().updateVehicleStyle).not.toHaveBeenCalledWith("2 door sedan");
|
|
||||||
expect(router.overrideNavigation).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
vehicleStyleQuestionCmsContent = {},
|
|
||||||
styleQuestionInitialData = {},
|
|
||||||
pageHeaderWidgetHeaderText = {},
|
|
||||||
mountOptionsMockData = {},
|
|
||||||
}) {
|
|
||||||
//Mock api responses
|
|
||||||
const apiResponses = {
|
|
||||||
cmsContent: {
|
|
||||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
|
||||||
VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
|
|
||||||
VehicleBannerWidget: {
|
|
||||||
GenericVehicleImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
|
||||||
},
|
|
||||||
SiteHeaderWidget: {
|
|
||||||
LogoImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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(),
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
|
||||||
const wrapper = shallowMount(vehicleStyle, mountOptions);
|
|
||||||
|
|
||||||
const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
|
|
||||||
styleQuestionWrapper.vm.initializeComponent =
|
|
||||||
styleQuestion.methods.initializeComponent;
|
|
||||||
|
|
||||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
|
||||||
|
|
||||||
return { wrapper, apiPromise };
|
|
||||||
}
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-container-grouped-styles position-relative">
|
|
||||||
<div class="fade-on-route-transition position-relative">
|
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
<div class="select-car">
|
|
||||||
<div class="container-fluid pb-2 px-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="select-car-form rounded text-center">
|
|
||||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
|
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
|
|
||||||
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
|
|
||||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Components
|
|
||||||
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
|
|
||||||
import siteHeader from "@/iss-components/site-header/site-header";
|
|
||||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
|
||||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
|
||||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
|
||||||
|
|
||||||
// Supporting files
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
||||||
import { issPageValues } from "@/router/router-constants/issPage-values"
|
|
||||||
import { useMainStore } from "@/store";
|
|
||||||
import router from "@/router";
|
|
||||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "vehicle-style",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedStyle: null,
|
|
||||||
shouldHideForwardButton: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
const visitedVehicleDamage = useMainStore().pageData(issPageValues.VEHICLE_DAMAGE) ? true : false;
|
|
||||||
|
|
||||||
// If we have exactly one style then navigate directly to vehicle-damage
|
|
||||||
if (resultMap.styleQuestionInitialData.length === 1 && !visitedVehicleDamage) {
|
|
||||||
useMainStore().updateVehicleStyle(resultMap.styleQuestionInitialData[0]);
|
|
||||||
|
|
||||||
useMainStore().setVehicle().then(() => {
|
|
||||||
router.overrideNavigation(navigationScenarios.SELECTED_STYLE, to, next, true);
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
next((vm) => {
|
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
|
||||||
vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
backButtonAction() {
|
|
||||||
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.mainStore.setVehicle().then(() => {
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.SELECTED_STYLE,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
styleQuestion,
|
|
||||||
siteHeader,
|
|
||||||
siteSubHeader,
|
|
||||||
vehicleBanner,
|
|
||||||
siteFooter
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
backButtonAccessibleText()
|
|
||||||
{
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
||||||
import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
|
|
||||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
|
||||||
import baseMixin from "@/mixins/base-mixin.js";
|
|
||||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
||||||
import { nextTick } from "vue";
|
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
|
||||||
|
|
||||||
|
|
||||||
// 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(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("vehicle-year.vue", () => {
|
|
||||||
test("Year question component is initized with api data", async() => {
|
|
||||||
//Arrange
|
|
||||||
const yearQuestionInitialData = ["2023", "2022", "2021"];
|
|
||||||
const { wrapper, apiPromise } = setupMocks({
|
|
||||||
yearQuestionInitialData: yearQuestionInitialData,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleYear.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-year" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
return apiPromise.finally(() => {
|
|
||||||
try {
|
|
||||||
expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(
|
|
||||||
yearQuestionInitialData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw e
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("vehicle-year.vue", () => {
|
|
||||||
test("arePagePrerequisitesValid should be true ", () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
vehicleYear.beforeRouteEnter.call(
|
|
||||||
wrapper.vm,
|
|
||||||
{ query: { issPage: "vehicle-make" } },
|
|
||||||
undefined,
|
|
||||||
(c) => c(wrapper.vm)
|
|
||||||
);
|
|
||||||
|
|
||||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(arePagePrerequisitesValid).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
vehicleYearQuestionCmsContent = {},
|
|
||||||
yearQuestionInitialData = {},
|
|
||||||
pageHeaderWidgetHeaderText = {},
|
|
||||||
mountOptionsMockData = {},
|
|
||||||
}) {
|
|
||||||
//Mock api responses
|
|
||||||
const apiResponses = {
|
|
||||||
cmsContent: {
|
|
||||||
SiteSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText },
|
|
||||||
VehicleYearQuestion: vehicleYearQuestionCmsContent,
|
|
||||||
VehicleBannerWidget: {
|
|
||||||
GenericVehicleImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
|
||||||
},
|
|
||||||
SiteHeaderWidget: {
|
|
||||||
LogoImage:
|
|
||||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yearQuestionInitialData: yearQuestionInitialData,
|
|
||||||
};
|
|
||||||
const apiPromise = Promise.resolve(apiResponses);
|
|
||||||
|
|
||||||
settleAllPromises.mockImplementation(() => apiPromise);
|
|
||||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
|
||||||
|
|
||||||
//Mock year question methods
|
|
||||||
yearQuestion.methods = {
|
|
||||||
loadInitialData: jest.fn(),
|
|
||||||
initializeComponent: jest.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
|
||||||
const wrapper = shallowMount(vehicleYear, mountOptions);
|
|
||||||
|
|
||||||
const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
|
|
||||||
yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
|
|
||||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
|
||||||
|
|
||||||
return { wrapper, apiPromise };
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-container-grouped-styles position-relative">
|
|
||||||
<div class="fade-on-route-transition position-relative">
|
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
<div class="select-car">
|
|
||||||
<div class="container-fluid pb-2 px-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="select-car-form rounded text-center">
|
|
||||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
|
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
|
||||||
<yearQuestion v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
|
|
||||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Components
|
|
||||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
|
||||||
import siteHeader from "@/iss-components/site-header/site-header";
|
|
||||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
|
||||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
|
||||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
|
||||||
|
|
||||||
// Supporting files
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "vehicle-year",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedYear: null,
|
|
||||||
shouldHideForwardButton: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
|
|
||||||
async beforeRouteEnter(to, from, next) {
|
|
||||||
// Call APIs
|
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
||||||
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
|
|
||||||
|
|
||||||
// Settle promises and get results
|
|
||||||
const promiseResultMap = [
|
|
||||||
{
|
|
||||||
resultKey: "cmsContent",
|
|
||||||
promise: cmsContentPromise,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
resultKey: "yearQuestionInitialData",
|
|
||||||
promise: yearQuestionInitialDataPromise,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
let resultMap = await settleAllPromises(promiseResultMap);
|
|
||||||
|
|
||||||
// Call the "next" function to complete the transition to this page.
|
|
||||||
next((vm) => {
|
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
|
||||||
vm.$refs.yearQuestion.initializeComponent(
|
|
||||||
resultMap.yearQuestionInitialData
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
selectedYear(year) {
|
|
||||||
const parsedYear = parseInt(year);
|
|
||||||
this.mainStore.updateVehicleYear( parsedYear );
|
|
||||||
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.SELECTED_YEAR,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
arePagePrerequisitesValid() {
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
backButtonAction() {
|
|
||||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
yearQuestion,
|
|
||||||
siteHeader,
|
|
||||||
siteSubHeader,
|
|
||||||
vehicleBanner,
|
|
||||||
siteFooter
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
||||||
import { useMainStore } from "@/store";
|
|
||||||
|
|
||||||
describe("year-question.vue", () => {
|
|
||||||
test("Selected year is emitted upon selection.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper } = setupMocks({ modelValueProp: 2020 });
|
|
||||||
const yearToSelect = 2021;
|
|
||||||
|
|
||||||
//Act
|
|
||||||
wrapper.setValue({ modelValue: yearToSelect });
|
|
||||||
await wrapper.vm.$nextTick();
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
|
|
||||||
{ modelValue: 2021 },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("year-question.vue", () => {
|
|
||||||
test("Data from store api are used as radio question answers.", async () => {
|
|
||||||
//Arrange
|
|
||||||
const { wrapper, cmsContent } = setupMocks({
|
|
||||||
dataFromStoreApi: [2023, 2022, 2021],
|
|
||||||
});
|
|
||||||
|
|
||||||
//Act
|
|
||||||
const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
|
|
||||||
yearQuestion.methods.initializeComponent.call(
|
|
||||||
wrapper.vm,
|
|
||||||
initialData
|
|
||||||
);
|
|
||||||
|
|
||||||
//Assert
|
|
||||||
const buttonQuestionComponent = await wrapper.findComponent({
|
|
||||||
name: "buttonQuestion",
|
|
||||||
});
|
|
||||||
expect(buttonQuestionComponent.attributes("answers")).toBe(
|
|
||||||
"2023,2022,2021"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function setupMocks({
|
|
||||||
modelValueProp = 1900,
|
|
||||||
cmsQuestionText = "CMS text goes here",
|
|
||||||
dataFromStoreApi = [],
|
|
||||||
}) {
|
|
||||||
|
|
||||||
const mountOptions = getMountOptions();
|
|
||||||
|
|
||||||
const store = useMainStore();
|
|
||||||
store.getVehicleYears = jest.fn(() => dataFromStoreApi);
|
|
||||||
//Mock props
|
|
||||||
mountOptions.propsData = {
|
|
||||||
modelValue: modelValueProp,
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = shallowMount(yearQuestion, mountOptions);
|
|
||||||
|
|
||||||
//Mock CMS content
|
|
||||||
const cmsContent = {
|
|
||||||
QuestionText: cmsQuestionText,
|
|
||||||
};
|
|
||||||
return { wrapper, cmsContent };
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<buttonQuestion
|
|
||||||
class="radioQuestion"
|
|
||||||
isOverflowScrollable
|
|
||||||
selectingInitiatesLoad
|
|
||||||
:questionText="questionText"
|
|
||||||
:answers="years"
|
|
||||||
groupName="ChooseVehicleYear"
|
|
||||||
textPosition="text-start"
|
|
||||||
v-model="selectedValue"
|
|
||||||
isRequired
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
||||||
import { useMainStore } from '@/store';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "year-question",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
years: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: Number,
|
|
||||||
cmsWidgetName: String,
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
buttonQuestion,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
questionText(){
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
|
||||||
},
|
|
||||||
selectedValue: {
|
|
||||||
get: function() {
|
|
||||||
return this.modelValue
|
|
||||||
},
|
|
||||||
set: function(newValue) {
|
|
||||||
this.$emit("update:modelValue", newValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadInitialData() {
|
|
||||||
return useMainStore().getVehicleYears();
|
|
||||||
},
|
|
||||||
initializeComponent(initialData) {
|
|
||||||
this.years = initialData;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue