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

CSR-735 | Update list-button-horizontal
This commit is contained in:
scottkiener 2022-08-29 11:39:21 -04:00 committed by GitHub
commit 82bb777543
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 10 deletions

View file

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

View file

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

View file

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