CSR-319: fix syncing error between selectedValues and validation values

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

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

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

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' ]);
+  });
+
 
 });

src/ux-components/list-card/list-card.vue

@@ -58,6 +58,7 @@
 
 <script>
 import { useField } from "vee-validate";
+
 export default {
   name: "listCard",
   props: {
@@ -135,11 +136,14 @@ export default {
 
     const fieldOptions = {
       type: inputType,
-      checkedValue: props.value,
+      checkedValue: props.value, //  EX: "Single" or "Passenger"
+      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 {
@@ -150,6 +154,7 @@ export default {
     return {
       handleChange,
       errors,
+      fieldOptions, // only need to expose this for unit test purposes
     };
   },
 };