Merge pull request #702 from Safelite/feature/CSR-735

CSR-735 | Update list-button-horizontal

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -29,8 +29,7 @@ export default ({
             get: function() {
                 // Convert to CMS answer name from bool
                 var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
-                // list-button-horizontal expects an array of values
-                return [cmsAnswerValue];
+                return cmsAnswerValue;
             },
             set: function(newValue) {
                 // Convert back to bool for parent component

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -194,7 +194,7 @@ describe("list-button-horizontal.vue", () => {
     });
     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: undefined, checkValue: undefined}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -215,7 +215,7 @@ describe("list-button-horizontal.vue", () => {
       },
     });
     // Assert
-    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+    expect(wrapper.componentVM.checkValue).toEqual(["Car-Front"]);
   });
 
   it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -24,6 +24,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
 
 export default {
@@ -57,14 +58,25 @@ export default {
       checkValue: Boolean,
     };
   },
-  created() {
-    if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
-        : this.selectedValues[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;
     }
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
@@ -123,11 +135,14 @@ export default {
     const {
       handleChange,
       errors,
-    } = useField(props.groupName, props.validationRules, fieldOptions);
+      value
+    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
 
+    const validateValue = value;
     return {
       handleChange,
       errors,
+      validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };
   },