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

CSR-756 Fix validation issue on vehicle-damage page

Browse source
This commit is contained in:
Katie 2022-07-28 15:57:49 -04:00
parent 4a6c9828aa
commit 2588ddc066
5 changed files with 50 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
<div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
<buttonQuestion
isWide
:questionText="questionText"
@ -80,11 +80,19 @@ export default ({
return ans;
});
},
shouldDisplayReplaceOptionsQuestion() {
return this.isAvailable && this.answersToDisplay.length > 0
}
},
watch: {
isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValues = [];
}
}
},
components: {

5
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -46,6 +46,7 @@ import store from "@/store";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
// DEFINE VALIDATION RULES
defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
@ -128,10 +129,10 @@ export default ({
});
},
isDriverSideReplaceOptionsQuestionAvailable(){
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.DRIVERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
},
isPassengerSideReplaceOptionsQuestionAvailable(){
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.PASSENGERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
},
},
components: {

2
src/router/index.js
View file

@ -224,6 +224,8 @@ function navigateToUrl(url, optionalQuery = {}) {
for (const queryKey in optionalQuery) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
}
externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
window.location.assign(externalUrl);
}

21
src/ux-components/list-card/list-card.spec.js
View file

@ -14,7 +14,6 @@ describe("list-card.vue", () => {
groupID: "checkbox-demo-1",
groupName: "Checkbox 1",
buttonImage: "windshield-damage.svg",
modelValue: ["List Card Checkbox"],
},
});
@ -33,7 +32,6 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
modelValue: ["List Card Checkbox"],
},
});
@ -53,7 +51,6 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
modelValue: ["List Card Checkbox"],
},
});
@ -73,7 +70,6 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
modelValue: ["List Card Checkbox"],
},
});
@ -93,7 +89,6 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
buttonLabelSubCopy: "Test",
modelValue: ["List Card Checkbox"],
},
});
@ -113,7 +108,6 @@ describe("list-card.vue", () => {
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
modelValue: ["List Card Checkbox"],
},
});
@ -135,7 +129,6 @@ describe("list-card.vue", () => {
isRequired: true,
isWide: true,
buttonLabelSubCopy: "",
modelValue: ["List Card Checkbox"],
},
});
@ -157,7 +150,6 @@ describe("list-card.vue", () => {
isRequired: true,
isWide: true,
buttonLabelSubCopy: "Button Subcopy",
modelValue: ["List Card Checkbox"],
},
});
@ -178,7 +170,6 @@ describe("list-card.vue", () => {
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
},
});
@ -199,13 +190,13 @@ describe("list-card.vue", () => {
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
buttonID: 'list-card-id'
buttonID: 'list-card-id',
selectedValues: "List Card Checkbox"
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]);
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -220,12 +211,11 @@ describe("list-card.vue", () => {
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
selectedValues: ["Car-Front"]
selectedValues: "Car-Front"
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
expect(wrapper.componentVM.checkValue).toEqual(false);
});
it("Should set an initial value for validation if selectedValues include the value", async () => {
@ -234,7 +224,6 @@ describe("list-card.vue", () => {
propsData: {
value: "Windshield",
groupName: "radio 1",
modelValue: ["Windshield"],
selectedValues: ["Windshield"],
},
});

55
src/ux-components/list-card/list-card.vue
View file

@ -63,7 +63,7 @@
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import { toRef, computed } from "vue";
import { queryStrings } from "@/constants/query-strings";
export default {
@ -87,7 +87,7 @@ export default {
colLength: String,
validationRules: String,
selectedValues: [Array, String],
modelValue: Object,
// modelValue: Object,
hasError: Boolean,
},
data() {
@ -95,19 +95,18 @@ export default {
checkValue: null,
}
},
created() {
if (Array.isArray(this.selectedValues)) {
this.checkValue = this.isMultiSelect
? this.selectedValues.includes(this.value)
: this.selectedValues[0];
}
else if (Array.isArray(this.modelValue)) {
this.checkValue = this.isMultiSelect
? this.modelValue.includes(this.value)
: this.modelValue[0];
mounted() {
if (Array.isArray(this.validateValue)) {
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
if (this.checkValue != isSelectedByValidator) {
this.handleChange(this.value);
}
}
else {
this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
this.checkValue = this.selectedValues == this.value;
}
},
computed: {
@ -124,10 +123,15 @@ export default {
},
},
methods: {
isValueSelectedByArray(arr) {
return this.isMultiSelect
? arr.includes(this.value)
: arr[0];
},
handleInputChange() {
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
handleKeyupArrow() {
if (this.isMultiSelect) {
@ -155,20 +159,14 @@ export default {
this.handleChange(this.value);
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
},
},
watch: {
// Changing this will impact pre-selection data loads on vehicle-parts.
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
modelValue(newVal) {
if (newVal !== undefined) {
this.checkValue = newVal.value;
}
},
// model
selectedValues(newVal) {
if (typeof newVal === "string") {
this.handleChange(newVal);
this.checkValue = newVal == this.value;
}
else if (newVal !== undefined) {
@ -194,11 +192,20 @@ export default {
const {
handleChange,
errors,
checked,
meta,
value
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
// First land on the blank, unselected page, no handleChange
// Land on page with initial values, handleChange
const validateValue = value;
return {
handleChange,
errors,
checked,
meta,
validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},