From ef1502445c063375e6854d7d7f28d33e11ae78b2 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 11 Mar 2022 10:10:46 -0500 Subject: [PATCH 1/4] CSR-319: rearrange form markup location / move submit fns into mixin --- .../vehicle-damage/vehicle-damage.spec.js | 35 ------------------- src/layouts/vehicle-damage/vehicle-damage.vue | 33 ++++++----------- src/mixins/base-mixin.js | 21 ++++++++++- src/mixins/base-mixin.spec.js | 32 +++++++++++++++++ 4 files changed, 62 insertions(+), 59 deletions(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 348da20ad..e6ce4e85d 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -782,41 +782,6 @@ describe("vehicle-damage.vue", () => { }); }); -describe("vehicle-damage.vue", () => { - test("when onInvalidSubmit is triggered with errors focus will be put on the first element with an error", async () => { - - //Arrange - const { wrapper } = setupMocks({}); - const mockedValidationPayload = { - values: {}, - errors: { - driverSideOptions: 'Please select window', - passengerSideOptions: 'Please select window' - }, - results: {}, - } - const newObj = document.createElement('input'); - newObj.setAttribute("id", "testInput"); - newObj.setAttribute("data-focus-target", "driverSideOptions"); - document.body.appendChild(newObj); - const testInputElement = document.getElementById("testInput"); - - //Act - vehicleDamage.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-damage" } }, - undefined, - (c) => c(wrapper.vm) - ); - wrapper.vm.onInvalidSubmit(mockedValidationPayload); - await nextTick(); - const focusedEl = document.activeElement; - - //Assert - expect(testInputElement).toBe(focusedEl); - }); -}); - // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE // BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST // diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 20c498198..3c02b44bf 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -1,15 +1,15 @@ - - From 0bcd842affb608284c3151e15ed868ec12459b71 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 11 Mar 2022 10:40:50 -0500 Subject: [PATCH 3/4] CSR-319: remove console logs / comments --- src/mixins/base-mixin.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 451738c37..f54909d06 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -23,20 +23,13 @@ export default { }, onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior onInvalidSubmit({ values, errors, results }) { - console.log('errors: ', errors) - // {DamageLocationQuestion: 'Please select damage location'} - // {driverSideOptions: 'Please select window', passengerSideOptions: 'Please select window'} - - // identify the first error field and put focus on it // 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 + "']"; const el = document.querySelector(qsString); - console.log('el is: ', el) el && el.focus(); } }, From acc9518675b0e50e4c23ce60a6cb48ff8421112c Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 15 Mar 2022 13:21:42 -0400 Subject: [PATCH 4/4] CSR-319: fix syncing error between selectedValues and validation values --- .../list-button-horizontal.vue | 9 +++++++-- .../list-button/list-button.spec.js | 7 ++++++- src/ux-components/list-button/list-button.vue | 18 +++++++++++++++--- src/ux-components/list-card/list-card.spec.js | 15 +++++++++++++++ src/ux-components/list-card/list-card.vue | 11 ++++++++--- 5 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 8ef069c2b..68aceec51 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -109,11 +109,15 @@ export default { const fieldOptions = { type: inputType, checkedValue: props.value, + potentialInitialValue: props.selectedValues, }; - if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) { - fieldOptions['initialValue'] = fieldOptions.checkedValue; + // Set initialValue for validation setup if pre-selected + // NOTE: props.selectedValues could be an array of strings, or an array of integers... + if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) { + fieldOptions['initialValue'] = fieldOptions.potentialInitialValue; } + const { checked, handleChange, @@ -124,6 +128,7 @@ export default { checked, handleChange, errors, + fieldOptions, // only need to expose this for unit test purposes }; }, }; diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index 18707e45f..7cc885b49 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -166,11 +166,15 @@ describe("list-button.vue", () => { isRequired: true, isWide: false, modelValue: ["List Card Checkbox"], + buttonID: 'list-card-id' }, }); + wrapper.vm.handleCheckChange(); + // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]); + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: 'list-card-id'}]); + }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { @@ -192,4 +196,5 @@ describe("list-button.vue", () => { // Assert expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + }); diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 3a8e65fc0..caef528de 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -100,7 +100,13 @@ export default { handleCheckChange(newValue, oldValue){ const isInitialization = typeof(oldValue) === 'function'; if (!isInitialization) { - this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() }); + const emitEvent = { + checkValue: this.checkValue, + value: this.value.toString(), + buttonId: this.buttonID.toString(), + }; + this.$emit('isCheckedChanged', emitEvent); + this.$emit("update:modelValue", emitEvent); } }, }, @@ -109,14 +115,19 @@ export default { }, setup(props) { const inputType = props.isMultiSelect ? "checkbox" : "radio"; + const fieldOptions = { type: inputType, checkedValue: props.value, + potentialInitialValue: props.selectedValues, }; - if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) { - fieldOptions['initialValue'] = fieldOptions.checkedValue; + // Set initialValue for validation setup if pre-selected + // NOTE: props.selectedValues could be an array of strings, or an array of integers... + if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) { + fieldOptions['initialValue'] = fieldOptions.potentialInitialValue; } + const { checked, handleChange, @@ -127,6 +138,7 @@ export default { checked, handleChange, errors, + fieldOptions, // only need to expose this for unit test purposes }; }, }; diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 743392ee8..11f24abbb 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -232,5 +232,20 @@ describe("list-card.vue", () => { expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + it("Should set an initial value for validation if selectedValues include the value", async () => { + // Arrange + const wrapper = shallowMount(listCard, { + propsData: { + value: "Windshield", + groupName: "radio 1", + modelValue: ["Windshield"], + selectedValues: ["Windshield"], + }, + }); + + // Assert + expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]); + }); + }); diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 8e88c4b68..d3a1fc712 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -58,6 +58,7 @@