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

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

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

2
src/main.js
View file

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