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

Merge branch 'develop' into feature/CSR-659

Browse source
This commit is contained in:
Leah Schumann 2022-06-27 08:22:57 -04:00
commit f47d68f5d0
11 changed files with 33 additions and 1497 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
jest.config.js
View file

@ -11,17 +11,9 @@ module.exports = {
"!src/constants/*.js",
"!src/router/**/*.js",
"!src/helpers/unit-test-helper.js",
"!src/layouts/component-test/component-test.vue",
"!src/layouts/form-test/form-test.vue",
"!src/layouts/vin-lookup/vin-lookup.vue",
"!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/part-questions/**/*.vue",
"!src/layouts/reveal/**/*.vue",
"!src/layouts/estimate/**/*.vue",
// TODO REMOVE THESE AFTER WRITING UNIT TESTS
"!src/ux-components/alert/alert.vue",
"!src/helpers/validation-rules.js",
"!src/layouts/reveal/**/*.vue"
// END
], // ! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

1
src/common-components/question-chain/question-chain.vue
View file

@ -24,7 +24,6 @@ export default {
name: "questionChain",
data() {
return {
models: Array,
currentQuestion: 1,
answeredQuestions: [],
};

2
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
View file

@ -39,7 +39,7 @@ describe("addressVehiclesQuestion.vue", () => {
// Act
const localThis = { $emit: jest.fn() }
addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue');
addressVehiclesQuestion.computed.selectedVehicleVinAsArray.set.call(localThis, ['newValue']);
// Assert
expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue");

14
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

@ -5,7 +5,7 @@
groupName="ChooseAddressVehicle"
:questionText="questionText"
:answers="vehicles"
v-model="selectedVehicleVin"
v-model="selectedVehicleVinAsArray"
isRequired=true
:validation-rules="validationRules"
/>
@ -62,16 +62,18 @@ export default {
questionText() {
return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
},
selectedVehicleVin: {
selectedVehicleVinAsArray: {
get: function() {
return this.modelValue;
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
return modelValueAsArray;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null;
this.$emit("update:modelValue", newValueAsScalar);
}
},
selectedVehicle() {
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] );
},
},
components: {

14
src/layouts/address-vehicles/address-vehicles.spec.js
View file

@ -57,7 +57,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
});
wrapper.vm.backButtonAction();
@ -87,7 +87,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
});
await wrapper.vm.forwardButtonAction();
@ -117,7 +117,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
});
await wrapper.vm.forwardButtonAction();
wrapper.vm.$nextTick();
@ -144,7 +144,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
isSelectedGlassAvailableForVehicle: false,
isCarIdDifferent: true,
});
@ -176,7 +176,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
isCarIdDifferent: false,
});
await wrapper.vm.resetDependentState();
@ -194,7 +194,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
isCarIdDifferent: false,
});
await wrapper.vm.resetDependentState();
@ -213,7 +213,7 @@ describe("addressVehicles.vue", () => {
// Act
await wrapper.setData({
selectedVehicleVin: ['5NMS3CADXLH233004'],
selectedVehicleVin: '5NMS3CADXLH233004',
isSelectedGlassAvailableForVehicle: false,
isCarIdDifferent: true,
});

15
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -102,7 +102,7 @@ export default {
},
data() {
return {
selectedVehicleVin: null,
selectedVehicleVin: "",
isCarIdDifferent: false,
isSelectedGlassAvailableForVehicle: true,
};
@ -145,7 +145,7 @@ export default {
return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
},
selectedVehicle() {
return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin );
},
},
methods: {
@ -219,10 +219,13 @@ export default {
},
watch: {
selectedVehicleVin() {
// does this vehicle match the previously selected carId?
this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
selectedVehicleVin: {
handler() {
// does this vehicle match the previously selected carId?
this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
},
deep: true
},
},

1201
src/layouts/component-test/component-test.vue
View file

File diff suppressed because it is too large Load diff

244
src/layouts/form-test/form-test.vue
View file

@ -1,244 +0,0 @@
<template>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<Form
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ values, meta, errors }"
>
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion"
/>
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
class="my-3"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
alertHeadline="You'll need to schedule separate appointments"
alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
:isDismissible="false"
/>
<sideDoorOptions
ref="sideDoorOptions"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
ref="backGlassOptions"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
<funnel-footer
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
<!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION -->
<div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
<p>Current Form, values:</p>
<pre>{{ values }}</pre>
<p>Errors:</p>
<pre>{{ errors }}</pre>
<p>Is Form Valid? (Meta.valid):</p>
<pre>{{ meta.valid }}</pre>
</div>
</Form>
</div>
</template>
<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
import alert from "@/ux-components/alert/alert";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
// DEFINE VALIDATION RULES
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
export default {
name: "form-test",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
const damageOptionsPromise =
baseMixin.methods.dispatchStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: store.getters.vehicle.carId }
);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "damageOptions",
promise: damageOptionsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
});
},
data(){
return {
selectedDamageLocations: [],
sideDoorOptionsData: {
selectedDoorSides: [],
selectedDriverSideReplaceOptions: [],
selectedPassengerSideReplaceOptions: []
},
selectedWindshieldOptions: [],
selectedRearReplaceOptions: [],
}
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
},
onSubmit(values) {
window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
console.log('submitted: ', JSON.stringify(values, null ,2));
},
onInvalidSubmit({ values, errors, results }) {
// identify the first error field and put focus on it
console.log("values: ", values);
console.log("errors: ", errors);
console.log("results: ", results);
// get error names array
const errorNames = errors ? Object.keys(errors) : [];
const firstErrorEl = errorNames[0];
if (firstErrorEl) {
console.log('firstErrorEl: ', firstErrorEl);
const qsString = "[data-focus-target='" + firstErrorEl + "']";
document.querySelector(qsString).focus();
}
},
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
{
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
});
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
{
return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
});
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
{
return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
});
},
isWindshieldRepair() {
if (!this.isWindshieldDamageLocation) return false;
return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
{
return selectedDamageType.toUpperCase() === "REPAIR";
});
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide =>
{
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
});
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide =>
{
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
});
},
hasRepairReplaceConflict() {
return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
},
},
components: {
funnelHeader,
funnelFooter,
vehicleBanner,
funnelSubHeader,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
replaceOptionsQuestion,
Form,
alert,
},
};
</script>

6
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -145,8 +145,8 @@ describe("vehicle-damage.vue", () => {
wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }, { location: "Driver", name: "Back" },
{ location: "Passenger", name: "Quarter" }, { location: "Rear", name: "Stationary" }];
const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" },
{ glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }];
//Act
vehicleDamage.beforeRouteEnter.call(
@ -237,7 +237,7 @@ describe("vehicle-damage.vue", () => {
selectedWindshieldDamageType: ["Replace"]
};
const expectedGlassToReplace = [{ location: "Windshield", name: "Single" },];
const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" },];
//Act
vehicleDamage.beforeRouteEnter.call(

8
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -314,25 +314,25 @@ export default {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
selectedGlassToReplace.push({ location: damageLocationsSelected.WINDSHIELD, name: wsItem});
selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.WINDSHIELD, glassName: wsItem});
})
}
if (this.isDriverSideReplace){
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(driverItem => {
selectedGlassToReplace.push({ location: damageLocationsSelected.DRIVER, name: driverItem});
selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.DRIVER, glassName: driverItem});
})
}
if (this.isPassengerSideReplace){
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(passengerItem => {
selectedGlassToReplace.push({ location: damageLocationsSelected.PASSENGER, name: passengerItem});
selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.PASSENGER, glassName: passengerItem});
})
}
if (this.isRearWindowDamageLocation) {
this.selectedRearReplaceOptions.forEach(rearItem => {
selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: rearItem});
})
}

15
src/router/index.js
View file

@ -18,22 +18,7 @@ import eventBus from "@/helpers/event-bus/event-bus";
import store from "@/store";
import analyticsMixin from "@/mixins/analytics-mixin";
// Components
import ComponentTest from "@/layouts/component-test/component-test.vue";
import FormTest from "@/layouts/form-test/form-test.vue";
const routes = [
{
path: "/component-test", // This is a temporary route for testing.
name: "ComponentTest",
component: ComponentTest,
},
{
path: "/form-test", // This is a temporary route for testing.
name: "FormTest",
component: FormTest,
},
{
path: "/",
name: "root",