CSR-417-fix: fix for address-vehicles page which stopped working

This commit is contained in:
Adam Caouette 2022-06-22 21:18:17 -04:00
parent f0748c4c0b
commit e390ae7ac7
4 changed files with 25 additions and 20 deletions

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");

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: {

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,
});

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
},
},