From a21e7aa2c4819172a03025f7deb96f4d172cc5cc Mon Sep 17 00:00:00 2001 From: Mark Harris Date: Thu, 3 Feb 2022 09:58:44 -0500 Subject: [PATCH 01/17] modelValue refactoring start --- .../button-question/button-question.vue | 10 ++++++++- src/layouts/vehicle-year/vehicle-year.vue | 4 ++-- .../year-question/year-question.vue | 21 ++++++++++++------- src/ux-components/list-button/list-button.vue | 7 +++++-- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7b9654139..84cee026b 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -30,7 +30,7 @@ :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="this.answers.length < 3 ? '' : '-4'" - v-model="modelValue" + v-model="selectedValues" data-test="button" /> @@ -98,6 +98,14 @@ export default { } return classes; }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, }, data(){ return { diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 2ee00e5eb..6dd990b15 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -28,7 +28,7 @@ export default { name: "vehicle-year", data() { return { - selectedYear: [], + selectedYear: String, }; }, computed: {}, @@ -73,7 +73,7 @@ export default { watch: { selectedYear(year) { - + this.$store.commit(this.storeMutations.UPDATE_YEAR, year); this.$router.navigateAfterSave( this.navigationScenarios.SELECTED_YEAR, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 36af97bca..ce79269c6 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Year" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -26,12 +26,24 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, }, emits: ['update:modelValue'], components: { buttonQuestion, }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } + }, methods: { loadInitialData() { return baseMixin.methods.dispatchNonBlockingStoreAction( @@ -44,10 +56,5 @@ export default { this.years = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 449f464af..00e51747d 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -94,8 +94,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, components: { From 268968213e4a59dd62c34ab65f9394a198317536 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 3 Feb 2022 12:42:11 -0500 Subject: [PATCH 02/17] Refactoring v-model to computed values --- .../damage-location-question.vue | 15 +++++++------ .../replace-options-question.vue | 15 +++++++------ src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- .../make-question/make-question.vue | 21 ++++++++++++------- src/layouts/vehicle-make/vehicle-make.vue | 2 +- .../model-question/model-question.vue | 21 ++++++++++++------- src/layouts/vehicle-model/vehicle-model.vue | 2 +- .../style-question/style-question.vue | 21 ++++++++++++------- src/layouts/vehicle-style/vehicle-style.vue | 2 +- .../list-button-horizontal.vue | 7 +++++-- src/ux-components/list-card/list-card.vue | 7 +++++-- 11 files changed, 74 insertions(+), 41 deletions(-) diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index 97c08c3b8..4000a61c7 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -7,7 +7,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="modelValue" + v-model="selectedValues" /> @@ -39,6 +39,14 @@ export default ({ } }, computed: { + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, damageOptionsMap(){ return { Windshield: true, @@ -56,11 +64,6 @@ export default ({ : []; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - } - }, components: { buttonQuestion, } diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index f01f0cd90..2c46d96fd 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -8,7 +8,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="modelValue" + v-model="selectedValues" /> @@ -43,6 +43,14 @@ export default ({ } }, computed: { + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, answersToDisplay(){ return Array.isArray(this.answersFromCms) ? this.answersFromCms.filter(ans => @@ -53,11 +61,6 @@ export default ({ : []; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - } - }, components: { buttonQuestion, } diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 3524c84bc..a681d6120 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -74,7 +74,7 @@ export default { }, data(){ return { - damageLocationQuestionData: [], + damageLocationQuestionData: ["Car-SideDoor"], driverSideOptionsData: [], } }, diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 3bda78285..9eeefb7b5 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Make" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -45,10 +57,5 @@ export default { this.makes = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index fcb6a999d..ff82506e7 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-make", data() { return { - selectedMake: [], + selectedMake: String, }; }, computed: {}, diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index be2c64be5..3e27198b6 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Model" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -45,10 +57,5 @@ export default { this.models = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 9e5c0243d..e5e8bb946 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-model", data() { return { - selectedModel: [], + selectedModel: String, }; }, computed: {}, diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index e44514904..7b316f42a 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Style" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -49,10 +61,5 @@ export default { this.styles = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index 98c86aa93..25594099c 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -32,7 +32,7 @@ export default { name: "vehicle-style", data() { return { - selectedStyle: [], + selectedStyle: String, }; }, computed: {}, 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 967523893..db2f9f382 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -92,8 +92,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, components: { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 7010ee487..3a3afe010 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -94,8 +94,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, setup(props) { From 35530f91993cba636357b6e464ade074257a78fa Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 3 Feb 2022 12:44:13 -0500 Subject: [PATCH 03/17] Taking out preset value for vehicle damage --- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index ec0ccc0a3..9d57e4345 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -72,7 +72,7 @@ export default { }, data(){ return { - damageLocationQuestionData: ["Car-SideDoor"], + damageLocationQuestionData: [], driverSideOptionsData: [], } }, From e6a5648a59979f2deecefa525af3db05a8136ad3 Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 3 Feb 2022 13:06:58 -0500 Subject: [PATCH 04/17] CSR-257 update how button and text link wrap and stack. --- .../funnel-footer/funnel-footer.vue | 30 ++++++++++++++++--- src/layouts/component-test/component-test.vue | 18 +++++------ src/ux-components/button-main/button-main.vue | 3 +- src/ux-components/text-link/text-link.vue | 7 ++--- 4 files changed, 39 insertions(+), 19 deletions(-) diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 05c184b5c..fa09e90af 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -26,15 +26,16 @@
-
-
+
+
+
+
80) { + wrapper.classList.add("justify-content-start"); + wrapper.classList.remove("justify-content-end"); + wrapper.classList.add("justify-content-start"); + wrapper.classList.remove("justify-content-end"); + } else { + wrapper.classList.add("justify-content-end"); + wrapper.classList.remove("justify-content-start"); + } } } }; + + diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 0b8ec119b..6c7df5de1 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -76,7 +76,7 @@
Functioning as Checkbox Checkbox no Description Functioning as Radio Button Radio Button no Description Horizontal Radio Button Radio Button no Description a { color: $blue; - text-decoration: none; - border-bottom: 1px solid $blue; + text-underline-offset: 0.5em; line-height: 26px; padding: 0 0 4px 0; font-weight: 500; @@ -45,7 +44,6 @@ a { } &.navigation-link { color: $black; - border-bottom: 1px solid $black; line-height: 26px; display: inline-flex; text-transform: capitalize; @@ -54,14 +52,13 @@ a { &.footer-link { color: $gray-600; text-decoration: none; - border-bottom: 1px solid transparent; line-height: 20px; padding: 0 0 2px 0; font-weight: 400; font-size: 0.75rem; &:hover { - border-bottom: 1px solid $gray-500; padding: 0 0 2px 0; + text-decoration: underline; } } } From 0cbcbd8212d333dbc455e648aa56b87023ef96cd Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 3 Feb 2022 13:09:27 -0500 Subject: [PATCH 05/17] Remove unneeded code. --- src/common-components/funnel-footer/funnel-footer.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index fa09e90af..c4b949f78 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -81,12 +81,9 @@ export default { checkHeight() { const parentHeight = document.getElementById('infoBox').clientHeight; const wrapper = document.getElementById('stacked'); - const goWide = document.getElementById('go-wide'); if (parentHeight > 80) { wrapper.classList.add("justify-content-start"); wrapper.classList.remove("justify-content-end"); - wrapper.classList.add("justify-content-start"); - wrapper.classList.remove("justify-content-end"); } else { wrapper.classList.add("justify-content-end"); wrapper.classList.remove("justify-content-start"); From 08978f89fc524483fb529beab47769fc5850041d Mon Sep 17 00:00:00 2001 From: FrankRua Date: Thu, 3 Feb 2022 13:18:02 -0500 Subject: [PATCH 06/17] removed ; --- src/router/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 02859e660..133a4106e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -142,7 +142,7 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, } else if (matchingScenarioMap.destinationUrl !== undefined) { navigateToUrl(matchingScenarioMap.destinationUrl); } -}; +} // Get navigation map depending on the scenario and the current 'page' you're on. function getNavigationMap(scenario, currentRoute) { @@ -156,7 +156,7 @@ function getNavigationMap(scenario, currentRoute) { .map((m) => m.maps.filter((map) => map.scenario === scenario)); return matchedQueryValue[0][0]; -}; +} //---------------------------------------------------------- Private Functions ---------------------------------------------------------- From 7ac3b40dbf553760b1b83009c5b58bee804a6137 Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 3 Feb 2022 14:58:20 -0500 Subject: [PATCH 07/17] Remove commented code. --- src/ux-components/button-main/button-main.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index ceda521b8..e44550c30 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -51,7 +51,6 @@ export default { color: $white; transition: all 150ms linear; justify-content: center; - // white-space: nowrap; &:hover { background: linear-gradient( 270deg, From 1fdee103364afa8b39d1d11ac0536c37c51d2542 Mon Sep 17 00:00:00 2001 From: bmauger Date: Fri, 4 Feb 2022 10:20:49 -0500 Subject: [PATCH 08/17] Set button width. --- .../funnel-footer/funnel-footer.spec.js | 32 +++++++++++++++++++ .../funnel-footer/funnel-footer.vue | 2 ++ 2 files changed, 34 insertions(+) diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index f1a885dfd..7528959ff 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -57,4 +57,36 @@ describe("funnel-footer.vue", () => { expect(input.attributes("class")).toContain("btn-primary"); }); + it("Should return class justify-content-end if paddingHeight < 80px", async () => { + // Act + const wrapper = mount(funnelFooter, { + propsData: { + footer: true + }, + }); + + // Assert + const stacked = wrapper.find("#stacked"); + wrapper.vm.paddingHeight = 47; + + // Expect + expect(stacked.attributes('class')).toContain("justify-content-end"); + }); + + it("Should return class justify-content-start if paddingHeight > 80px", async () => { + // Act + const wrapper = mount(funnelFooter, { + propsData: { + footer: true + }, + }); + + // Assert + const stacked = wrapper.find("#stacked"); + wrapper.vm.paddingHeight = 100; + + // Expect + expect(stacked.attributes('class')).toContain("justify-content-start"); + }); + }); diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index c4b949f78..ac3d97269 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -69,6 +69,7 @@ export default { setTimeout(function(){ // Give it a moment to set the date document.getElementById('years').innerHTML += new Date().getFullYear(); }, 100); + this.checkHeight(); }, beforeUnmount() { window.removeEventListener('resize', this.onResize); @@ -96,5 +97,6 @@ export default { From 17e05dcf6623952db4f589677c81e5c25c55506f Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 4 Feb 2022 13:45:54 -0500 Subject: [PATCH 09/17] Cleaning up button emit changes and adjusting unit tests --- .../button-question/button-question.spec.js | 55 ++++++++----------- .../button-question/button-question.vue | 24 ++++---- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- .../make-question/make-question.vue | 2 +- src/layouts/vehicle-make/vehicle-make.vue | 2 +- .../model-question/model-question.vue | 2 +- src/layouts/vehicle-model/vehicle-model.vue | 2 +- .../style-question/style-question.vue | 2 +- src/layouts/vehicle-style/vehicle-style.vue | 2 +- src/layouts/vehicle-year/vehicle-year.vue | 2 +- .../year-question/year-question.spec.js | 2 + .../year-question/year-question.vue | 2 +- .../list-button-horizontal.spec.js | 41 ++++++++++++++ .../list-button-horizontal.vue | 17 +++--- .../list-button/list-button.spec.js | 40 ++++++++++++++ src/ux-components/list-button/list-button.vue | 17 +++--- src/ux-components/list-card/list-card.spec.js | 41 ++++++++++++++ src/ux-components/list-card/list-card.vue | 17 +++--- 18 files changed, 195 insertions(+), 77 deletions(-) diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 67e2f010e..d5608cd62 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -1,5 +1,6 @@ import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/common-components/button-question/button-question"; +import { nextTick } from "vue"; describe("buttonQuestion.vue", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => { @@ -41,44 +42,32 @@ describe("buttonQuestion.vue", () => { }); describe("buttonQuestion.vue", () => { - it("Should trigger event modelValue change on select", async () => { + it("Should trigger event modelValue change to new value on when radio button selected", async () => { // Act const wrapper = shallowMount(buttonQuestion); - await wrapper.setData({ - modelValueAnswers: ["Windshield"], - chosenAnswer: "Windshield" + await wrapper.setProps({ + answers: ["2022", "2021", "2020"], + isMultiSelect: false }); - wrapper.setValue({ answer: wrapper.vm.chosenAnswer }); - await wrapper.vm.$nextTick(); - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => { - // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setData({ - modelValueAnswers: ["Windshield", "BackDoor"] - }); - wrapper.vm.handleCheckedChanged(true); - // Assert - expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object'); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should not trigger event modelValue change on select if checked is false", async () => { - // Act - const wrapper = shallowMount(buttonQuestion); - wrapper.setData({ - modelValueAnswers: ["Front-door"] - }) - const val = {isChecked : false, buttonId: "Front-door"} + const val = {isChecked: true, buttonId: "2021", } wrapper.vm.handleCheckedChanged(val); // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]); + }); +}); + +describe("buttonQuestion.vue", () => { + it("Should add values to array on checkbox click", async () => { + // Act + const wrapper = shallowMount(buttonQuestion); + await wrapper.setProps({ + modelValue: ["2022", "2021", "2020"], + isMultiSelect: true + }); + const val = {isChecked: true, buttonId: "2019", } + wrapper.vm.handleCheckedChanged(val); + // Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]); }); }); diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 84cee026b..7fff5c238 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -30,7 +30,7 @@ :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="this.answers.length < 3 ? '' : '-4'" - v-model="selectedValues" + :selectedButtonIDs="selectedValues" data-test="button" />
@@ -107,23 +107,23 @@ export default { } }, }, - data(){ - return { - modelValueAnswers: [], - } - }, mounted(){ if(Array.isArray(this.answers) && this.answers.length === 1) { - this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]); - this.$emit("update:modelValue", this.modelValueAnswers); + const newSelectedValues = this.selectedValues; + newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]); + this.selectedValues = newSelectedValues; } }, methods: { handleCheckedChanged(val) { - // Add or remove item to array of data to emit - val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1); - const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined; - this.$emit("update:modelValue", answersToEmit); + if(this.isMultiSelect) { + // Add or remove item to array of data to emit + const newSelectedValues = this.selectedValues; + val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); + this.selectedValues = newSelectedValues; + } else { + this.selectedValues = [val.buttonId] + } }, }, components: { diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 9d57e4345..9ec3747f1 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -3,7 +3,7 @@ - +
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 9eeefb7b5..9fb2d6ea1 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -33,7 +33,7 @@ export default { computed: { selectedValueAsArray: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index cd01130b2..023d24023 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-make", data() { return { - selectedMake: String, + selectedMake: null, }; }, computed: {}, diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 3e27198b6..e79b8bafc 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -33,7 +33,7 @@ export default { computed: { selectedValueAsArray: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 732e27eb0..02de04c3b 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-model", data() { return { - selectedModel: String, + selectedModel: null, }; }, computed: {}, diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 7b316f42a..bfec78571 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -33,7 +33,7 @@ export default { computed: { selectedValueAsArray: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index 8f9954f6d..3009a696a 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -32,7 +32,7 @@ export default { name: "vehicle-style", data() { return { - selectedStyle: String, + selectedStyle: null, }; }, computed: {}, diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index cd8ee3982..1b10fba92 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -28,7 +28,7 @@ export default { name: "vehicle-year", data() { return { - selectedYear: String, + selectedYear: null, }; }, computed: {}, diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js index fe0852533..3555e6126 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -72,6 +72,7 @@ describe("year-question.vue", () => { }); }); + function setupMocks({ modelValueProp = "1900", cmsQuestionText = "CMS text goes here", @@ -89,6 +90,7 @@ function setupMocks({ mountOptions.propsData = { modelValue: modelValueProp, }; + const wrapper = shallowMount(yearQuestion, mountOptions); //Mock CMS content diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index ce79269c6..96d047244 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -35,7 +35,7 @@ export default { computed: { selectedValueAsArray: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index c25b169fa..5cbe02e75 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -173,4 +173,45 @@ describe("list-button-horizontal.vue", () => { expect(loader.attributes("style")).toContain("1rem"); }); + + it("Should emit button value on click", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: ["List Card Checkbox"], + }, + }); + wrapper.vm.handleCheckChange(); + // Assert + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]); + }); + + it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: ["List Card Checkbox"], + isMultiSelect: false, + selectedButtonIDs: ["Car-Front"] + }, + }); + // Assert + expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); + }); }); 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 db2f9f382..e3e7c3891 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -12,6 +12,7 @@ :aria-required="isRequired" :data-focus-target="groupName" v-model="checkValue" + @change="handleCheckChange" />