jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partially there

Browse source
This commit is contained in:
Jason Wheeler 2023-05-19 10:51:35 -04:00
parent 1cab44cf62
commit c400d7908f
5 changed files with 166 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -66,6 +66,9 @@ export default {
default: default:
return this.carUnmatchedVehicleIcon; return this.carUnmatchedVehicleIcon;
} }
},
forceRerender() {
this.componentKey += 1;
} }
} }
}; };

54
src/layouts/entry-page/entry-page.spec.js Normal file
View file

@ -0,0 +1,54 @@
// Components
import entryPage from "@/layouts/entry-page/entry-page.vue";
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
// 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(),
setupModalLinks: jest.fn(),
}));
describe('entry-page.vue', () => {
test('should render', () => {
const queryString = 'policynumber="123456"'
const { wrapper } = setupMocks(queryString);
console.log(wrapper.vm.$route.query);
expect(wrapper).toBeTruthy();
})
});
function setupMocks(queryString) {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
},
route: { queryString }
});
const wrapper = shallowMount(
entryPage,
mountOptions
);
const apiResponses = {};
settleAllPromises.mockImplementation(() => apiResponses);
fetchCmsContentForPage.mockImplementation (() => {});
return { wrapper };
};

33
src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue
View file

@ -1,9 +1,10 @@
<template> <template>
<dropdownQuestion <dropdownQuestion
:options="values" :options="values"
disableAutoFill disableAutoFill
placeHolderText="Select an option" placeHolderText="Select an option"
v-model="selectedValue" v-model="selectedValue"
:isDisabled="!values.length"
/> />
</template> </template>
@ -16,30 +17,26 @@ export default {
data() { data() {
return { return {
values: [], values: [],
selectedIndex: null,
}; };
}, },
props: { props: {
modelValue: String, modelValue: String,
updateValues: Function, updateValues: Function,
}, },
components: { components: {
dropdownQuestion dropdownQuestion
}, },
computed: { computed: {
selectedValue: { selectedValue: {
get: function() { get() {
return this.modelValue?.toString(); return this.selectedIndex?.toString();
}, },
set: function(newValue) { set(newValue) {
if(newValue) this.selectedIndex = newValue;
{ newValue = newValue ? this.values[newValue] : null;
const val = this.values[newValue] this.$emit("update:modelValue", newValue);
this.$emit("update:modelValue", val);
}
else
{
this.$emit("update:modelValue", null);
}
} }
}, },
}, },

162
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles position-relative"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
@ -8,20 +8,59 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/> <vehicleQuestion
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/> ref="vehicleYearQuestion"
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/> class="px-4 mb-2 mt-4"
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" /> v-model="selectedYear"
<siteFooter cmsWidgetName="VehicleYearQuestion"
class="mx-4" :updateValues="updateYearValues"
cmsWidgetName="SiteFooterWidget" validationRules="year-required"
@ForwardClicked="forwardButtonAction" inputId="yearQuestionField"
:isForwardActionDisabled="!meta.valid" />
@back-clicked="backButtonAction" <vehicleQuestion
ref="siteFooter" ref="vehicleMakeQuestion"
/> class="px-4 mb-2 mt-4"
v-model="selectedMake"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
validationRules="make-required"
inputId="makeQuestionField"
/>
<vehicleQuestion
ref="vehicleModelQuestion"
class="px-4 mb-2 mt-4"
v-model="selectedModel"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
validationRules="model-required"
inputId="modelQuestionField"
/>
<vehicleQuestion
ref="vehicleStyleQuestion"
class="px-4 mb-2 mt-4"
v-model="selectedStyle"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
validationRules="style-required"
inputId="styleQuestionField"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3"
ref="banner"
/>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
ref="siteFooter"
/>
</div> </div>
</div> </div>
</div> </div>
@ -42,10 +81,10 @@ import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicl
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
// Supporting files // Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import baseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule, useForm } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
@ -57,107 +96,92 @@ defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default { export default {
name: "vehicle-selection", name: "vehicle-selection",
mixins: [BaseFormMixin], mixins: [baseFormMixin],
data() { data() {
return { return {
selectedYear: null, selectedYear: null,
selectedMake: null, selectedMake: null,
selectedModel: null, selectedModel: null,
selectedStyle: null, selectedStyle: null,
displayGeneric: true
}; };
}, },
props:{ props:{
cmsWidgetName:String, cmsWidgetName:String,
validationRules:String, validationRules:String,
}, },
setup() {
const { meta, validate, resetForm } = useForm();
return {
meta,
validate,
resetForm,
};
},
mounted(){ mounted(){
this.Years.getNewValues(); this.$refs["vehicleYearQuestion"].getNewValues();
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: "cmsContent",
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
let resultMap = await settleAllPromises(promiseResultMap); let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
watch: { watch: {
selectedYear(value) { selectedYear(value) {
this.mainStore.updateVehicleYear(value); this.mainStore.updateVehicleYear(value);
if(value) if(value)
{ {
this.Makes.getNewValues(); this.$refs["vehicleMakeQuestion"].getNewValues();
} }
else{ else{
this.Makes.clearValues(); this.$refs["vehicleMakeQuestion"].clearValues();
} }
}, },
selectedMake(value) { selectedMake(value) {
this.mainStore.updateVehicleMake(value); this.mainStore.updateVehicleMake(value);
if(value) if(value)
{ {
this.Models.getNewValues(); this.$refs["vehicleModelQuestion"].getNewValues();
} }
else{ else{
this.Models.clearValues(); this.$refs["vehicleModelQuestion"].clearValues();
} }
}, },
selectedModel(value) { selectedModel(value) {
this.mainStore.updateVehicleModel(value); this.mainStore.updateVehicleModel(value);
if(value) if(value)
{ {
this.Styles.getNewValues(); this.$refs["vehicleStyleQuestion"].getNewValues();
} }
else{ else{
this.Styles.clearValues(); this.$refs["vehicleStyleQuestion"].clearValues();
} }
}, },
selectedStyle(value) { selectedStyle(value) {
this.mainStore.updateVehicleStyle(value); this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
this.$nextTick(() => {this.displayGeneric = false; this.$refs["banner"].forceRerender();});
}, },
}, },
computed:{
Years(){
return this.$refs["vehicleYearQuestion"];
},
Makes(){
return this.$refs["vehicleMakeQuestion"];
},
Models(){
return this.$refs["vehicleModelQuestion"];
},
Styles(){
return this.$refs["vehicleStyleQuestion"];
}
},
methods: { methods: {
handleValueChange(thisQuestion, nextQuestion, storeMethod, index)
{
if(index === 0)
{
storeMethod(null);
nextQuestion.clearValues();
}
else{
storeMethod(thisQuestion.values[index]);
nextQuestion.getNewValues();
}
},
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return true; return true;
}, },

2
src/main.js
View file

@ -38,7 +38,7 @@ useMainStore().populateInitialState();
// Additional Vue items to setup // Additional Vue items to setup
vueApp.use(router); vueApp.use(router);
vueApp.use(Maska); vueApp.use(Maska);
vueApp.use(LoadScript); vueApp.use(LoadScript);
vueApp.mixin(baseMixin); vueApp.mixin(baseMixin);
vueApp.mixin(analyticsMixin); vueApp.mixin(analyticsMixin);
vueApp.mixin(experimentMixin); vueApp.mixin(experimentMixin);