jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding groupname to buttons buttonIDs to ensure they are unique, and adjusting button emits to emit button value

Browse source
This commit is contained in:
Max 2022-02-22 10:28:02 -05:00
parent 6534c5da19
commit 830c474955
9 changed files with 36 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common-components/button-question/button-question.spec.js
View file

@ -53,7 +53,7 @@ describe("buttonQuestion.vue", () => {
answers: ["2022", "2021", "2020"], answers: ["2022", "2021", "2020"],
isMultiSelect: false isMultiSelect: false
}); });
const val = {isChecked: true, buttonId: "2021", } const val = {checkValue: true, value: "2021", }
wrapper.vm.handleCheckedChanged(val); wrapper.vm.handleCheckedChanged(val);
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]); expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@ -69,7 +69,7 @@ describe("buttonQuestion.vue", () => {
isMultiSelect: true, isMultiSelect: true,
} }
}); });
const val = {isChecked: true, buttonId: "2019", } const val = {checkValue: true, value: "2019", }
wrapper.vm.handleCheckedChanged(val); wrapper.vm.handleCheckedChanged(val);
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]); expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);

14
src/common-components/button-question/button-question.vue
View file

@ -12,7 +12,7 @@
v-for="answer in answers" v-for="answer in answers"
:key="answer.Name ? answer.Name : answer" :key="answer.Name ? answer.Name : answer"
@isCheckedChanged="handleCheckedChanged" @isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? answer.Name : answer" :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
:value="answer.Name ? answer.Name : answer" :value="answer.Name ? answer.Name : answer"
:buttonLabel="answer.Text ? answer.Text : answer" :buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText" :buttonLabelSubCopy="answer.SubText"
@ -29,7 +29,7 @@
:altText="answer.Name ? answer.Name : answer" :altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText="(opens new window)"
:colLength="getColLength" :colLength="getColLength"
:selectedButtonIDs="selectedValues" :selectedValues="selectedValues"
data-test="button" data-test="button"
:validationRules="validationRules" :validationRules="validationRules"
/> />
@ -124,11 +124,13 @@ export default {
handleCheckedChanged(val) { handleCheckedChanged(val) {
if(this.isMultiSelect) { if(this.isMultiSelect) {
// Add or remove item to array of data to emit // Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues; if(Array.isArray(this.selectedValues)) {
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); const newSelectedValues = this.selectedValues;
this.selectedValues = newSelectedValues; val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
this.selectedValues = newSelectedValues;
}
} else { } else {
this.selectedValues = [val.buttonId]; this.selectedValues = [val.value];
} }
}, },
}, },

6
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -161,7 +161,7 @@ describe("list-button-horizontal.vue", () => {
propsData: { propsData: {
isRadioHorizontal: true, isRadioHorizontal: true,
buttonLabel: "Windshield", buttonLabel: "Windshield",
buttonID: "List Card Checkbox", value: "List Card Checkbox",
groupID: "radio-demo-1", groupID: "radio-demo-1",
groupName: "radio 1", groupName: "radio 1",
buttonImage: "windshield-damage.svg", buttonImage: "windshield-damage.svg",
@ -172,7 +172,7 @@ describe("list-button-horizontal.vue", () => {
}); });
wrapper.vm.handleCheckChange(); wrapper.vm.handleCheckChange();
// Assert // Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]); expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
}); });
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -189,7 +189,7 @@ describe("list-button-horizontal.vue", () => {
isWide: false, isWide: false,
modelValue: ["List Card Checkbox"], modelValue: ["List Card Checkbox"],
isMultiSelect: false, isMultiSelect: false,
selectedButtonIDs: ["Car-Front"] selectedValues: ["Car-Front"]
}, },
}); });
// Assert // Assert

10
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -9,7 +9,7 @@
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
:name="groupName" :name="groupName"
:value="buttonID" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
v-model="checkValue" v-model="checkValue"
@ -69,7 +69,7 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
selectedButtonIDs: [Array, String], selectedValues: [Array, String],
hasError: Boolean, hasError: Boolean,
}, },
data() { data() {
@ -79,8 +79,8 @@ export default {
}; };
}, },
created(){ created(){
if(this.selectedButtonIDs){ if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0]; this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
} }
}, },
methods: { methods: {
@ -97,7 +97,7 @@ export default {
handleCheckChange(newValue, oldValue){ handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function'; const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) { if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() }); this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
} }
} }
}, },

6
src/ux-components/list-button/list-button.spec.js
View file

@ -159,7 +159,7 @@ describe("list-button.vue", () => {
propsData: { propsData: {
isRadioHorizontal: true, isRadioHorizontal: true,
buttonLabel: "Windshield", buttonLabel: "Windshield",
buttonID: "List Card Checkbox", value: "List Card Checkbox",
groupID: "radio-demo-1", groupID: "radio-demo-1",
groupName: "radio 1", groupName: "radio 1",
buttonImage: "windshield-damage.svg", buttonImage: "windshield-damage.svg",
@ -170,7 +170,7 @@ describe("list-button.vue", () => {
}); });
wrapper.vm.handleCheckChange(); wrapper.vm.handleCheckChange();
// Assert // Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]); expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
}); });
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -186,7 +186,7 @@ describe("list-button.vue", () => {
isRequired: true, isRequired: true,
isWide: false, isWide: false,
modelValue: ["List Card Checkbox"], modelValue: ["List Card Checkbox"],
selectedButtonIDs: ["Car-Front"] selectedValues: ["Car-Front"]
}, },
}); });
// Assert // Assert

10
src/ux-components/list-button/list-button.vue
View file

@ -9,7 +9,7 @@
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
:name="groupName" :name="groupName"
:value="buttonID" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
v-model="checkValue" v-model="checkValue"
@ -71,7 +71,7 @@ export default {
type: [String, Number], type: [String, Number],
default: "", default: "",
}, },
selectedButtonIDs: [Array, String], selectedValues: [Array, String],
hasError: Boolean, hasError: Boolean,
}, },
data() { data() {
@ -81,8 +81,8 @@ export default {
}; };
}, },
created(){ created(){
if(this.selectedButtonIDs){ if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0]; this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
} }
}, },
methods: { methods: {
@ -99,7 +99,7 @@ export default {
handleCheckChange(newValue, oldValue){ handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function'; const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) { if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() }); this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
} }
}, },
}, },

8
src/ux-components/list-card/list-card.spec.js
View file

@ -197,7 +197,7 @@ describe("list-card.vue", () => {
propsData: { propsData: {
isRadioHorizontal: true, isRadioHorizontal: true,
buttonLabel: "Windshield", buttonLabel: "Windshield",
buttonID: "List Card Checkbox", value: "List Card Checkbox",
groupID: "radio-demo-1", groupID: "radio-demo-1",
groupName: "radio 1", groupName: "radio 1",
buttonImage: "windshield-damage.svg", buttonImage: "windshield-damage.svg",
@ -208,7 +208,7 @@ describe("list-card.vue", () => {
}); });
wrapper.vm.handleCheckChange(); wrapper.vm.handleCheckChange();
// Assert // Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]); expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
}); });
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@ -217,14 +217,14 @@ describe("list-card.vue", () => {
propsData: { propsData: {
isRadioHorizontal: true, isRadioHorizontal: true,
buttonLabel: "Windshield", buttonLabel: "Windshield",
buttonID: "List Card Checkbox", value: "List Card Checkbox",
groupID: "radio-demo-1", groupID: "radio-demo-1",
groupName: "radio 1", groupName: "radio 1",
buttonImage: "windshield-damage.svg", buttonImage: "windshield-damage.svg",
isRequired: true, isRequired: true,
isWide: false, isWide: false,
modelValue: ["List Card Checkbox"], modelValue: ["List Card Checkbox"],
selectedButtonIDs: ["Car-Front"] selectedValues: ["Car-Front"]
}, },
}); });
// Assert // Assert

10
src/ux-components/list-card/list-card.vue
View file

@ -8,7 +8,7 @@
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
:name="groupName" :name="groupName"
:value="buttonID" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
@click="handleChange(value)" @click="handleChange(value)"
@ -70,7 +70,7 @@ export default {
}, },
colLength: String, colLength: String,
validationRules: String, validationRules: String,
selectedButtonIDs: [Array, String], selectedValues: [Array, String],
hasError: Boolean, hasError: Boolean,
}, },
data(){ data(){
@ -79,8 +79,8 @@ export default {
} }
}, },
created(){ created(){
if(this.selectedButtonIDs){ if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0]; this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
} }
}, },
computed: { computed: {
@ -100,7 +100,7 @@ export default {
handleCheckChange(newValue, oldValue){ handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function'; const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) { if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() }); this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
} }
} }
}, },

2
src/ux-components/radio/radio.vue
View file

@ -54,7 +54,7 @@ export default {
handleCheckChange(newValue, oldValue){ handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function'; const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) { if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() }); this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
} }
} }
}, },