From 6e901a69183b573e3b408c2514cebdc851f2fe85 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 15 Sep 2022 14:44:50 -0400 Subject: [PATCH 01/84] CSR-762 Add mini test --- .../button-question/button-question.vue | 153 +++++++++++++----- src/common-components/test-button.vue | 35 ++++ src/layouts/test.vue | 56 +++++++ src/mixins/button-mixin.js | 61 +++++++ src/router/index.js | 6 + src/ux-components/list-card/list-card.vue | 4 +- 6 files changed, 276 insertions(+), 39 deletions(-) create mode 100644 src/common-components/test-button.vue create mode 100644 src/layouts/test.vue create mode 100644 src/mixins/button-mixin.js diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 91ad272a0..624f4185a 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,18 +1,60 @@ @@ -59,8 +109,9 @@ import listButton from "@/ux-components/list-button/list-button"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import listCard from "@/ux-components/list-card/list-card"; -import { ErrorMessage } from 'vee-validate'; +import { ErrorMessage } from "vee-validate"; import radio from "@/ux-components/radio/radio"; +import testButton from "@/common-components/test-button.vue"; export default { name: "buttonQuestion", @@ -90,7 +141,8 @@ export default { isOverflowScrollable: Boolean, isWide: Boolean, isCashOrInsurance: Boolean, - modelValue: [Array, String], + modelValue: [Array, Number, String], + value: [Number, String], validationRules: String, suppressError: Boolean, useTextForValue: Boolean, @@ -100,11 +152,9 @@ export default { getFieldSetClasses() { if (this.isOverflowScrollable) { return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"; - } - else if (this.buttonType == "listCard") { + } else if (this.buttonType == "listCard") { return "w-100"; - } - else { + } else { return ""; } }, @@ -117,11 +167,11 @@ export default { case "listButtonHorizontal": classes = "d-flex flex-row p-0"; break; - case 'listCard': + case "listCard": classes = "row g-2 justify-content-center"; break; - case 'radio': - classes = 'ui-radio d-flex' + case "radio": + classes = "ui-radio d-flex"; break; } return classes; @@ -129,7 +179,7 @@ export default { getComponentWrapperClasses() { let classes = ""; - classes += this.isWide ? "col-12" : "col"; + classes += this.isWid ? "col-12" : "col"; if (this.buttonType == "radio") { classes += " radio-button-container"; @@ -137,28 +187,31 @@ export default { return classes; }, - getColLength(){ - if(this.isWide) { - return "12" + getColLength() { + if (this.isWide) { + return "12"; } else { return ""; } }, selectedValues: { - get: function() { + get: function () { return this.modelValue; }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } + set: function (newValue) { + // this.$emit("update:modelValue", newValue); + }, }, }, methods: { formatString(str) { - return str.replace(" ", "-"); + console.log(str); + return str?.replace(" ", "-"); }, - getValue(answer){ - if (this.useTextForValue) { return answer.Text } + getValue(answer) { + if (this.useTextForValue) { + return answer.Text; + } return answer.Name ? answer.Name : answer; }, getAnswerString(answer, prop = "Name") { @@ -168,24 +221,49 @@ export default { case "boolean": return this.formatString(answer.toString()); default: - return answer[prop] ? this.formatString(answer[prop]) : this.formatString(answer.toString()); + return answer[prop] + ? this.formatString(answer[prop]) + : this.formatString(answer.toString()); } }, handleCheckedChanged(val) { - if(this.selectingInitiatesLoad) { + if (this.selectingInitiatesLoad) { this.selectedValues = val.value; } else { - if(Array.isArray(this.selectedValues)) { + if (Array.isArray(this.selectedValues)) { const newSelectedValues = this.selectedValues; - val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); + val.checkValue + ? newSelectedValues.push(val.value) + : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); this.selectedValues = newSelectedValues; - } - else { + } else { this.selectedValues = val.value; } } this.$emit("isCheckedChanged", val); }, + handleSelectionChange(event, value) { + console.log(value) + console.log("BQ handleSelectionChange: ", event) + let isChecked = event.target.checked; + if (this.isMultiSelect && this.modelValue instanceof Array) { + let newValue = [...this.modelValue]; + const toggledValue = event.target.value; + console.log("A: ", this.modelValue) + console.log("isChecked: ", isChecked) + console.log("value: ", event.target.value) + if (isChecked) { + newValue.push(toggledValue); + } else { + newValue.splice(newValue.indexOf(toggledValue), 1); + } + console.log("handleCheckboxChange: ", newValue); + this.$emit("update:modelValue", newValue); + } else { + console.log("handleRadioChange: ", isChecked); + this.$emit("update:modelValue", value); + } + }, }, components: { listButton, @@ -193,6 +271,7 @@ export default { listCard, ErrorMessage, radio, + testButton, }, }; @@ -231,9 +310,9 @@ export default { .vehicle-parts { .question-text { span { - font-size: .875rem; + font-size: 0.875rem; text-align: left; - margin: 0 0 .5rem 0; + margin: 0 0 0.5rem 0; } } .question-text { diff --git a/src/common-components/test-button.vue b/src/common-components/test-button.vue new file mode 100644 index 000000000..64c252d72 --- /dev/null +++ b/src/common-components/test-button.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/layouts/test.vue b/src/layouts/test.vue new file mode 100644 index 000000000..018fd0875 --- /dev/null +++ b/src/layouts/test.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js new file mode 100644 index 000000000..2281b3f2c --- /dev/null +++ b/src/mixins/button-mixin.js @@ -0,0 +1,61 @@ +export default { + model: { + prop: "modelValue", + event: "change", + }, + props: { + value: { + type: [String, Number], + required: true, + }, + modelValue: { + type: [Array, String, Number], + required: true, + }, + isMultiSelect: Boolean, + isWide: Boolean, + buttonImage: String, + buttonImageId: String, + buttonLabel: { + type: String, + required: true, + }, + isRequired: { + type: Boolean, + required: true, + }, + buttonLabelSubCopy: { + type: String, + required: true, + }, + groupName: { + type: String, + required: true, + }, + }, + data() {}, + methods: { + handleSelectionChange(event) { + let isChecked = event.target.checked; + if (this.isMultiSelect && this.modelValue instanceof Array) { + let newValue = [...this.modelValue]; + if (isChecked && !newValue.includes(this.value)) { + newValue.push(this.value); + } else { + newValue.splice(newValue.indexOf(this.value), 1); + } + this.$emit("change", newValue); + } else { + this.$emit("change", isChecked); + } + }, + }, + computed: { + isChecked() { + if (this.isMultiSelect && this.modelValue instanceof Array) { + this.modelValue.includes(this.value); + } + return this.modelValue === this.value; + }, + }, +}; diff --git a/src/router/index.js b/src/router/index.js index 4daa23613..7d23fb4bb 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config"; // Components import quote from "@/layouts/quote/quote.vue"; +import test from "@/layouts/test" const routes = [ { @@ -30,6 +31,11 @@ const routes = [ name: "quote", component: quote, }, + { + path: "/test", // This is a temporary route for testing. + name: "test", + component: test, + }, { path: "/", name: "root", diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index c0c2a71c9..4664be3e4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -76,7 +76,7 @@ export default { buttonLabel: String, //Required: Label text isRequired: Boolean, //Required: is aria-required required or not? altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily. - buttonID: String, //Required: Unique + buttonID: String, // TODO KO We don't use this //Required: Unique groupName: String, //Rquired: Unique buttonLabelSubCopy: String, //Optional: sub text value: { @@ -84,7 +84,7 @@ export default { type: String, default: "", }, - colLength: String, + // colLength: String, validationRules: String, selectedValues: [Array, String], hasError: Boolean, From ace997bbf56191e75cecbf7d69d473ffd74c602f Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 15 Sep 2022 17:30:46 -0400 Subject: [PATCH 02/84] CSR-762 WIP --- .../button-question/button-question.vue | 66 +++--- .../button-wrapper/button-wrapper.vue | 28 +++ src/common-components/test-button.vue | 35 --- src/layouts/test.vue | 29 ++- src/mixins/button-mixin.js | 29 ++- src/ux-components/list-button/list-button.vue | 213 ++++++++++-------- 6 files changed, 235 insertions(+), 165 deletions(-) create mode 100644 src/common-components/button-wrapper/button-wrapper.vue delete mode 100644 src/common-components/test-button.vue diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 624f4185a..3300e4fe6 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -42,7 +42,7 @@ v-for="answer in answers" :key="answer.Name ? answer.Name : answer" > - + @@ -33,15 +54,15 @@ export default { sampleAnswers: [ { Text: "Part 1", - Value: "PART1", + Name: "PART1", }, { Text: "Part 2", - Value: "PART2", + Name: "PART2", }, { Text: "Part 3", - Value: "PART3", + Name: "PART3", }, ], selectedMultiselectValues: [], diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 2281b3f2c..22ed53d5b 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -1,4 +1,5 @@ export default { + emits: ["change"], model: { prop: "modelValue", event: "change", @@ -32,22 +33,36 @@ export default { type: String, required: true, }, + validationRules: { + type: String, + required: true, + }, + classes: [String, Array, Object], }, - data() {}, methods: { handleSelectionChange(event) { + console.log(event); + console.log(this.value); + console.log(this.modelValue); let isChecked = event.target.checked; + console.log("BM value: ", this.value); + let valueToEmit; if (this.isMultiSelect && this.modelValue instanceof Array) { let newValue = [...this.modelValue]; - if (isChecked && !newValue.includes(this.value)) { + if (isChecked && !this.modelValue.includes(this.value)) { newValue.push(this.value); } else { newValue.splice(newValue.indexOf(this.value), 1); } - this.$emit("change", newValue); + + valueToEmit = newValue; } else { - this.$emit("change", isChecked); + valueToEmit = isChecked; } + + console.log("ButtonWrapper is emitting: ", valueToEmit); + this.$emit("change", valueToEmit); + // this.$emit("change", event); }, }, computed: { @@ -57,5 +72,11 @@ export default { } return this.modelValue === this.value; }, + inputType() { + return this.isMultiSelect ? "checkbox" : "radio"; + }, + buttonId() { + return JSON.stringify(this.value); + }, }, }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index e51d5cc77..e91c2380c 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,14 +1,8 @@ + + \ No newline at end of file diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 8889a0fdc..bfb0de678 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,5 +1,7 @@ diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index f5a42eefe..2bd49498f 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -3,14 +3,21 @@
- +
- +
@@ -26,7 +33,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; -import { storeMutations } from "@/constants/store-mutations"; import { storeActions } from "@/constants/store-actions"; import store from "@/store"; @@ -75,7 +81,7 @@ export default { ); }, arePagePrerequisitesValid() { - if (store.getters.vehicle.year){ + if (store.getters.vehicle.year) { return true; } return false; @@ -84,7 +90,7 @@ export default { watch: { selectedMake(make) { - this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); + this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); this.$router.navigateWithSaving( this.navigationScenarios.SELECTED_MAKE, this.$route diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 096f4d70c..bf21cec35 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 @@ :answers="models" groupName="ChooseVehicleModel" textPosition="text-start" - v-model="selectedValue" + v-model="selectedModel" isRequired /> @@ -23,7 +23,8 @@ export default { name: "model-question", data() { return { - models: Array, + models: [], + selectedModel: null }; }, props: { @@ -34,14 +35,6 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValue: { - get: function() { - return this.modelValue - }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } - } }, components: { buttonQuestion, @@ -57,5 +50,10 @@ export default { this.models = initialData; }, }, + watch: { + selectedModel(selectedModel) { + this.$emit("update:modelValue", selectedModel); + } + } }; diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 4e6e90798..bfc51ea0e 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 @@ :answers="styles" groupName="ChooseVehicleStyle" textPosition="text-start" - v-model="selectedValue" + v-model="selectedStyle" isRequired /> @@ -23,7 +23,8 @@ export default { name: "style-question", data() { return { - styles: Array, + styles: [], + selectedStyle: null }; }, props: { @@ -34,14 +35,6 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValue: { - get: function() { - return this.modelValue - }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } - } }, components: { buttonQuestion, @@ -61,5 +54,10 @@ export default { this.styles = initialData; }, }, + watch: { + selectedStyle(selectedStyle) { + this.$emit("update:modelValue", selectedStyle); + } + } }; diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index bfb0de678..57f4b5bcb 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,18 +1,16 @@ @@ -26,7 +24,7 @@ export default { data() { return { years: [], - selectedValue: null + selectedYear: null, }; }, props: { @@ -37,17 +35,9 @@ export default { buttonQuestion, }, computed: { - questionText(){ - return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + questionText() { + return this.getCmsContent(this.cmsWidgetName, "QuestionText"); }, - // selectedValue: { - // get: function() { - // return this.modelValue - // }, - // set: function(newValue) { - // this.$emit("update:modelValue", newValue); - // } - // } }, methods: { loadInitialData() { @@ -60,5 +50,10 @@ export default { this.years = initialData; }, }, + watch: { + selectedYear(selectedYear) { + this.$emit("update:modelValue", selectedYear) + } + } }; diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 609a40399..146b5b6b3 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -33,10 +33,7 @@ export default { type: String, required: true, }, - validationRules: { - type: String, - required: true, - }, + validationRules: String, classes: [String, Array, Object], }, methods: { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 0923d071a..ec0d0cf43 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -85,7 +85,10 @@ export default { screenReaderOnlyText: String, selectingInitiatesLoad: Boolean, loaderColor: String, - loaderPosition: String, + loaderPosition: { + type: String, + default: "right" + }, hasError: Boolean, valueToLogType: String, }, diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index 9b3473eb1..1d6c83bce 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -27,6 +27,8 @@ export default { \ No newline at end of file + 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 16d67b3ee..2b5c148ed 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 @@ :groupName="groupName" buttonType="listCard" isRequired - v-model="selectedValues" + v-model="selectedDamageLocations" validationRules="damage-location-required" /> @@ -27,7 +27,8 @@ export default ({ name: "damageLocationQuestion", data(){ return { - damageOptions: Object, + damageOptions: {}, + selectedDamageLocations: [] } }, props: { @@ -47,14 +48,6 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, - selectedValues: { - get: function() { - return this.modelValue; - }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } - }, damageOptionsMap(){ return { Windshield: true, @@ -80,5 +73,11 @@ export default ({ components: { buttonQuestion, }, + watch: { + selectedDamageLocations(selectedDamageLocations) { + console.log("DLQ: ", selectedDamageLocations) + this.$emit("update:modelValue", selectedDamageLocations) + } + } }) \ No newline at end of file diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 146b5b6b3..6c9b138ec 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -1,78 +1,5 @@ +import { queryStrings } from "@/constants/query-strings"; + export default { - emits: ["change"], - model: { - prop: "modelValue", - event: "change", - }, - props: { - value: { - type: [String, Number], - required: true, - }, - modelValue: { - type: [Array, String, Number], - required: true, - }, - isMultiSelect: Boolean, - isWide: Boolean, - buttonImage: String, - buttonImageId: String, - buttonLabel: { - type: String, - required: true, - }, - isRequired: { - type: Boolean, - required: true, - }, - buttonLabelSubCopy: { - type: String, - required: true, - }, - groupName: { - type: String, - required: true, - }, - validationRules: String, - classes: [String, Array, Object], - }, - methods: { - handleSelectionChange(event) { - console.log(event); - console.log(this.value); - console.log(this.modelValue); - let isChecked = event.target.checked; - console.log("BM value: ", this.value); - let valueToEmit; - if (this.isMultiSelect && this.modelValue instanceof Array) { - let newValue = [...this.modelValue]; - if (isChecked && !this.modelValue.includes(this.value)) { - newValue.push(this.value); - } else { - newValue.splice(newValue.indexOf(this.value), 1); - } - - valueToEmit = newValue; - } else { - valueToEmit = this.value; - } - - console.log("ButtonWrapper is emitting: ", valueToEmit); - this.$emit("change", valueToEmit); - }, - }, - computed: { - isChecked() { - if (this.isMultiSelect && this.modelValue instanceof Array) { - this.modelValue.includes(this.value); - } - return this.modelValue === this.value; - }, - inputType() { - return this.isMultiSelect ? "checkbox" : "radio"; - }, - buttonId() { - return `${this.groupName} ${JSON.stringify(this.value)}`; - }, - }, + }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index ec0d0cf43..4e6a9d683 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -28,16 +28,13 @@ :classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]" @change="(e) => $emit('change', e)" > --> - +
@@ -214,8 +212,8 @@ export default { input[type="radio"], input[type="checkbox"] { position: static; //override bootstrap - height: 0; - opacity: 0; + // height: 0; + // opacity: 0; &:focus-visible + .list-button-content { box-shadow: 0 0 0 2.5px $blue; diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 4664be3e4..f2a47e1e4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,73 +1,84 @@ diff --git a/src/common-components/button-wrapper/button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue similarity index 76% rename from src/common-components/button-wrapper/button-wrapper.vue rename to src/common-components/input-button-wrapper/input-button-wrapper.vue index 126876415..59f614710 100644 --- a/src/common-components/button-wrapper/button-wrapper.vue +++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue @@ -1,5 +1,9 @@ diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index b9f2310ad..34758a85d 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -9,7 +9,7 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="true" + :selectOnKeypress="false" isRequired />
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 f35a29bd9..5fb41f2f6 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -168,7 +168,6 @@ export default { From b14ca820ac0b61653df72cfb5f92d6e28ed87bb4 Mon Sep 17 00:00:00 2001 From: Katie Date: Wed, 21 Sep 2022 15:29:01 -0400 Subject: [PATCH 20/84] CSR-762 Fix estimate page, start on question-chain --- .../button-question/button-question.vue | 7 ++-- .../input-button-wrapper.vue | 9 ++--- .../question-chain/question-chain.vue | 40 +++++++++++++++++-- src/layouts/estimate/estimate.vue | 5 +-- src/layouts/part-questions/part-questions.vue | 9 ++++- src/ux-components/list-button/list-button.vue | 1 + 6 files changed, 54 insertions(+), 17 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 5b0808a9c..5fe1aa6e4 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -261,9 +261,10 @@ export default { // this.$emit("isCheckedChanged", val); // }, handleAnswerChange(eventValue) { - // console.log({ - // bqEvent: eventValue - // }) + console.log({ + bqEvent: eventValue + }) + this.$emit("change", eventValue); this.$emit("update:modelValue", eventValue); }, }, diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue index 3fd39fbcf..57fe58505 100644 --- a/src/common-components/input-button-wrapper/input-button-wrapper.vue +++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue @@ -102,7 +102,7 @@ export default { // const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked; if (this.isChecked) { - console.log("HI THERE"); + // console.log("HI THERE"); this.handleChange(this.modelValue); } }, @@ -241,7 +241,7 @@ export default { this.valueToEmit = newValue; } else { - console.log("not multi"); + // console.log("not multi"); this.valueToEmit = this.value; } @@ -253,7 +253,7 @@ export default { // } }, handleClick(e) { - console.log("handleClick"); + // console.log("handleClick"); this.handleSelectionChange(e); // console.log("HC"); // console.log({ @@ -335,8 +335,7 @@ export default { }; - - From 87a4389e1395e03b85d1e72a09099ee6c29cc882 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 22 Sep 2022 11:32:45 -0400 Subject: [PATCH 22/84] CSR-762 Cleanup --- .../base-input-button.vue} | 150 +---- .../button-question/button-question.vue | 99 +--- .../cash-or-insurance-question.vue | 25 +- .../windshield-chip-count-question.vue | 16 - src/mixins/vehicle-questions-mixin.js | 1 - .../list-button-horizontal.vue | 538 ++++++++---------- src/ux-components/list-button/list-button.vue | 372 ++++-------- src/ux-components/list-card/list-card.vue | 164 +----- src/ux-components/radio/radio.vue | 68 +-- 9 files changed, 403 insertions(+), 1030 deletions(-) rename src/common-components/{input-button-wrapper/input-button-wrapper.vue => base-input-button/base-input-button.vue} (50%) diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/base-input-button/base-input-button.vue similarity index 50% rename from src/common-components/input-button-wrapper/input-button-wrapper.vue rename to src/common-components/base-input-button/base-input-button.vue index 57fe58505..54fcc3b7d 100644 --- a/src/common-components/input-button-wrapper/input-button-wrapper.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -3,12 +3,6 @@ :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :for="buttonId" @mousedown.left="handleEventAction('click', $event)"> - - click, keypress - // space => keypressSubmit, keypress - // arrow left/right => keypress - - // if selectOnKeypress (YMMS) - // if click => emit event - // if space/enter => emit event - // if arrow => emit event - // else (!selectOnKeypress) - // if click => emit event - // if space/enter => emit event - // if arrow => handleSelection - - // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) { - // this.handleClick(e); - // } - // else { - // this.handleSelectionChange(e); - // } }, handleSelectionChange(e) { - // console.log("HSC"); - // console.log(e); - // console.log(this.value); - // console.log(this.modelValue); - // let isChecked = event.target.checked; - // console.log("BM value: ", this.value); - // let valueToEmit; - // console.log("isMultiselect") - // console.log(this.isMultiSelect) - // console.log({ - // modelValue: this.modelValue, - // isMultiselect: this.isMultiSelect - // }) if ( this.isMultiSelect && (this.modelValue instanceof Array || this.modelValue == null) ) { let newValue = this.modelValue ? [...this.modelValue] : []; - // console.log("newValue", newValue) - // console.log({ - // newValue: newValue, - // // isChecked: isChecked - // }) if (!newValue.includes(this.value)) { - // console.log("isChecked") newValue.push(this.value); } else { - // console.log("isn't checked") newValue.splice(newValue.indexOf(this.value), 1); } this.valueToEmit = newValue; } else { - // console.log("not multi"); this.valueToEmit = this.value; } - console.log("handlingChange", this.valueToEmit); this.handleChange(this.valueToEmit); this.pushClickEventToGA(); - // if (this.selectOnKeypress) { - // this.handleClick(e) - // } }, handleClick(e) { - // console.log("handleClick"); this.handleSelectionChange(e); - // console.log("HC"); - // console.log({ - // eventEmitting: e, - // valueToEmit: this.valueToEmit, - // }); this.$emit("change", this.valueToEmit); }, pushClickEventToGA() { @@ -284,7 +161,7 @@ export default { return this.isMultiSelect ? "checkbox" : "radio"; }, buttonId() { - return `${this.groupName} ${JSON.stringify(this.value)}`; + return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`; }, }, setup(props) { @@ -294,41 +171,18 @@ export default { type: inputType, validateOnValueUpdate: false, validateOnMount: false, - // checkedValue: props.value, - // potentialInitialValue: props.selectedValues, }; - // 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 { handleChange, errors, value } = useField( - // toRef(props, "groupName"), - // toRef(props, "validationRules"), - // fieldOptions - // ); - - console.log(props.validationRules); - const { handleChange, meta, errors, value } = useField( toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions ); - // const validateValue = value; - return { handleChange, errors, meta, - // validateValue, fieldOptions, // only need to expose this for unit test purposes }; }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 2fece851c..51dd15f77 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -52,34 +52,6 @@ :textPosition="textPosition" :selectOnKeypress="selectOnKeypress" @change="handleAnswerChange" /> - -
({ + buttonLabel: answer.Text ?? answer, + altText: answer.Name ? answer.Name : answer, + buttonLabelSubCopy: answer.SubText, + buttonImage: answer.AnswerImageUrl, + buttonImageId: answer.ImageId, + groupName: this.formatString(this.groupName), + value: this.useTextForValue + ? answer.Text + : answer.Name ?? answer, + })); // TODO KO temporary. It should always just be an array - return (Array.isArray(this.answers) ? this.answers : [])?.map( - (answer) => ({ - buttonLabel: answer.Text ?? answer, - altText: answer.Name ? answer.Name : answer, - buttonLabelSubCopy: answer.SubText, - buttonImage: answer.AnswerImageUrl, - buttonImageId: answer.ImageId, - groupName: this.formatString(this.groupName), - value: this.useTextForValue - ? answer.Text - : answer.Name ?? answer, - }) - ); + // return (Array.isArray(this.answers) ? this.answers : [])?.map( + // (answer) => ({ + // buttonLabel: answer.Text ?? answer, + // altText: answer.Name ? answer.Name : answer, + // buttonLabelSubCopy: answer.SubText, + // buttonImage: answer.AnswerImageUrl, + // buttonImageId: answer.ImageId, + // groupName: this.formatString(this.groupName), + // value: this.useTextForValue + // ? answer.Text + // : answer.Name ?? answer, + // }) + // ); }, }, methods: { @@ -249,26 +224,10 @@ export default { : this.formatString(answer.toString()); } }, - // handleCheckedChanged(val) { - // if (this.selectingInitiatesLoad) { - // this.selectedValues = val.value; - // } else { - // if (Array.isArray(this.selectedValues)) { - // const newSelectedValues = this.selectedValues; - // val.checkValue - // ? newSelectedValues.push(val.value) - // : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); - // this.selectedValues = newSelectedValues; - // } else { - // this.selectedValues = val.value; - // } - // } - // this.$emit("isCheckedChanged", val); - // }, handleAnswerChange(primaryAnswerValue) { console.log({ - bqEvent: primaryAnswerValue - }) + bqEvent: primaryAnswerValue, + }); this.primaryValue = primaryAnswerValue; this.$emit("change", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue index b2431406d..3e96fba94 100644 --- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue +++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue @@ -6,39 +6,40 @@ buttonType="listButtonHorizontal" v-model="selectedValues" isCashOrInsurance - isRequired - /> + isRequired />
\ No newline at end of file +}; + diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue index f0aa82252..af063722f 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue @@ -24,21 +24,11 @@ export default ({ name: "windshieldOptions", mixins: [buttonQuestionWrapperMixin], props: { - // modelValue: Number, groupName: String, isAvailable: Boolean, validationRules: String, cmsWidgetName: String, }, - // methods: { - // // TODO KO is this being used? Always three options - // updateSelectedValues() { - // // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER - // if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { - // this.selectedValues = [this.answersToDisplay[0].Name]; - // } - // }, - // }, computed: { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); @@ -47,12 +37,6 @@ export default ({ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, }, - // watch: { - // isAvailable(val) { - // // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE - // val && this.updateSelectedValues(); - // } - // }, components: { buttonQuestion, } diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js index 49d5f2a40..2c409e102 100644 --- a/src/mixins/vehicle-questions-mixin.js +++ b/src/mixins/vehicle-questions-mixin.js @@ -115,7 +115,6 @@ export default { // if single parts only const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions); // save to store lineItems.glassParts - // TODO KO self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts); self.$refs.loadingModal.showModal(); 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 5fb41f2f6..d8a9584fc 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,35 +1,35 @@ diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 85c85d140..72f7329ae 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,276 +1,140 @@ diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index edd9dddfd..d05655619 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,5 +1,5 @@ @@ -260,9 +117,6 @@ export default { input[type="checkbox"], input[type="radio"] { - // opacity: 0; - // width: 0; - // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it position: absolute; + .list-card-content { diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 8a136c2d2..5f1f81b38 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -1,6 +1,5 @@ From 25a27563ab42158887a984c9b5aa3fa28f1103a2 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 22 Sep 2022 14:00:44 -0400 Subject: [PATCH 23/84] CSR-762 Add shared props --- .../base-input-button/base-input-button.vue | 39 ++++---- .../button-question/button-question.vue | 51 +++++------ .../question-chain/question-chain.vue | 22 +---- src/layouts/estimate/estimate.spec.js | 1 - src/layouts/test.vue | 91 ------------------- .../damage-location-question.vue | 1 - .../replace-options-question.vue | 15 --- src/layouts/vehicle-damage/vehicle-damage.vue | 18 ---- .../windshield-damage-type-question.vue | 21 ----- .../windshield-options/windshield-options.vue | 5 - .../glass-part-question.vue | 10 +- src/layouts/vehicle-year/vehicle-year.vue | 1 - src/mixins/input-button-wrapper-mixin.js | 35 +++++++ src/router/index.js | 6 -- .../list-button-horizontal.vue | 50 +--------- src/ux-components/list-button/list-button.vue | 25 ++--- src/ux-components/list-card/list-card.vue | 36 +------- src/ux-components/radio/radio.vue | 22 +---- 18 files changed, 105 insertions(+), 344 deletions(-) delete mode 100644 src/layouts/test.vue create mode 100644 src/mixins/input-button-wrapper-mixin.js diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 54fcc3b7d..5a8883557 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -3,6 +3,7 @@ :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :for="buttonId" @mousedown.left="handleEventAction('click', $event)"> + + :key="answer.value ? answer.value : answer"> ({ - buttonLabel: answer.Text ?? answer, - altText: answer.Name ? answer.Name : answer, - buttonLabelSubCopy: answer.SubText, - buttonImage: answer.AnswerImageUrl, - buttonImageId: answer.ImageId, - groupName: this.formatString(this.groupName), - value: this.useTextForValue - ? answer.Text - : answer.Name ?? answer, - })); + console.log({ + answers: this.answers, + isArray: Array.isArray(this.answers), + }); // TODO KO temporary. It should always just be an array - // return (Array.isArray(this.answers) ? this.answers : [])?.map( - // (answer) => ({ - // buttonLabel: answer.Text ?? answer, - // altText: answer.Name ? answer.Name : answer, - // buttonLabelSubCopy: answer.SubText, - // buttonImage: answer.AnswerImageUrl, - // buttonImageId: answer.ImageId, - // groupName: this.formatString(this.groupName), - // value: this.useTextForValue - // ? answer.Text - // : answer.Name ?? answer, - // }) - // ); + return (Array.isArray(this.answers) ? this.answers : [])?.map( + (answer) => ({ + buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, + altText: + answer.altText ?? (answer.Name ? answer.Name : answer), + buttonLabelSubCopy: + answer.buttonLabelSubCopy ?? answer.SubText, + buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, + buttonImageId: answer.buttonImageId ?? answer.ImageId, + groupName: this.formatString(this.groupName), + value: + answer.value ?? (this.useTextForValue + ? answer.Text + : answer.Name ?? answer), + }) + ); }, }, methods: { @@ -225,9 +221,6 @@ export default { } }, handleAnswerChange(primaryAnswerValue) { - console.log({ - bqEvent: primaryAnswerValue, - }); this.primaryValue = primaryAnswerValue; this.$emit("change", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 5e9ebd97c..71d517e77 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -56,13 +56,13 @@ export default { questionSequence: q.questionSequence, answers: q.answers.map((a) => { return { - Text: a.answerText, + buttonLabel: a.answerText, // Name will either be nextQuestionSequence or answerResult // Name will be used by list-button as the input value. // It must be a single string or number, so concatenating together a string with // 4 pieces of data separated by pipe characters: // question number|type of answer|answer value|answer text - Name: a.nextQuestionSequence ? + value: a.nextQuestionSequence ? q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText : q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText, nextQuestionSequence: a.nextQuestionSequence, @@ -78,10 +78,6 @@ export default { } }); - console.log({ - modelValue: this.modelValue, - questions: this.questions - }) if (!this.modelValue?.length > 0 && this.questions.length > 0) { // set this.currentQuestionNum to first valid question this.currentQuestionNum = this.questions[0].questionSequence; @@ -93,10 +89,6 @@ export default { }, methods: { handleAnswer(question, returnedAnswer) { - console.log({ - returnedAnswer: returnedAnswer - }) - question.answerSelected = returnedAnswer; /* returnedAnswer example format: @@ -108,17 +100,11 @@ export default { */ const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer); - console.log({ - isQuestionChainComplete: isQuestionChainComplete - }) if (isQuestionChainComplete) { this.$emit("update:modelValue", isQuestionChainComplete); } }, getQuestionChainAnswerIfComplete(returnedAnswer) { // this method will return either a final answer or Boolean false - console.log("getQuestionChainAnswerIfComplete: ", { - returnedAnswer: returnedAnswer - }) if (!returnedAnswer) { return false } // Example returnedAnswers: @@ -153,10 +139,6 @@ export default { } }); - console.log({ - questionType: questionType, - returnedAnswerArray: returnedAnswerArray - }) // return false if there's a nextQuestion... or return an object with final answers (truthy) if (questionType === "nextQuestion") { diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js index 5bfb2e517..379ab76f7 100644 --- a/src/layouts/estimate/estimate.spec.js +++ b/src/layouts/estimate/estimate.spec.js @@ -168,7 +168,6 @@ describe("estimate.vue", () => { store.commit(storeMutations.UPDATE_IS_REPAIR, null); // Act - console.log(store.getters.damage) let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); // Assert diff --git a/src/layouts/test.vue b/src/layouts/test.vue deleted file mode 100644 index 51a236485..000000000 --- a/src/layouts/test.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - 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 7f57cbe15..6e8962d1c 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 @@ -77,7 +77,6 @@ export default ({ }, watch: { selectedValue(selectedValue) { - // console.log("DLQ: ", selectedValue) this.$emit("update:modelValue", selectedValue) } } 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 3b8e6d803..0741607bc 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 @@ -47,14 +47,11 @@ export default ({ this.replaceOptions = replaceOptions; }, updateSelectedValues() { - console.log("UPDATING FOR ", this.groupName) // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER // ex: BackGlass stationary - // console.log(this.answersToDisplay) if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { const selectedAnswer = this.answersToDisplay[0].Name; this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer; - console.log("HIIIIII2", this.selectedValue) } }, }, @@ -65,14 +62,6 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, - // selectedValues: { - // get: function() { - // return this.modelValue; - // }, - // set: function(newValue) { - // this.$emit("update:modelValue", newValue); - // } - // }, answersToDisplay(){ const filteredAnswers = Array.isArray(this.answersFromCms) ? this.answersFromCms.filter(ans => @@ -98,10 +87,6 @@ export default ({ val && this.updateSelectedValues(); }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { - console.log({ - groupName: this.groupName, - shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion - }) if (!shouldDisplayReplaceOptionsQuestion) { this.selectedValue = []; } diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index f05f9a65f..efcfaa5b8 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -268,17 +268,6 @@ export default { getRearReplaceOptionsFromStore(){ var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(glass => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName; - // store.getters.damage.glassToReplace?.forEach(glass => { - // if (glass.glassLocation === damageLocationsSelected.REAR){ - // rearReplaceOptions.push(glass.glassName); - // } - // }); - - console.log({ - glassToReplace: store.getters.damage.glassToReplace, - rearReplaceOptions: rearReplaceOptions - }) - return rearReplaceOptions; }, @@ -290,7 +279,6 @@ export default { selectedWindshieldChipCount: this.selectedWindshieldOptions.selectedWindshieldChipCount }, false); - console.log(this.selectedGlassToReplace()) return this.navigateForward(); }, @@ -325,9 +313,6 @@ export default { } if (this.isRearWindowDamageLocation) { - console.log({ - selectedRearReplaceOptions: this.selectedRearReplaceOptions - }) selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: this.selectedRearReplaceOptions}); } @@ -378,9 +363,6 @@ export default { hasSplitSingleConflict() { if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false; - console.log({ - selectedWindshieldOptions: this.selectedWindshieldOptions - }) return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield => { return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase(); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue index 2df1f7f78..3b2c431f6 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -23,7 +23,6 @@ export default ({ name: "windshieldDamageTypeQuestion", mixins: [buttonQuestionWrapperMixin], props: { - // modelValue: String, groupName: String, isAvailable: Boolean, suppressError: Boolean, @@ -37,29 +36,9 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, - // selectedValues: { - // get: function() { - // return this.modelValue; - // }, - // set: function(newValue) { - // this.$emit("update:modelValue", newValue); - // } - // }, }, components: { buttonQuestion, }, - // watch: { - // isAvailable(isAvailable) { - // if (!isAvailable) { - // // console.log({ - // // isAvailable: isAvailable - // // }) - // // console.log("updating") - // this.selectedValue = null; - // // this.$emit("update:modelValue", null); - // } - // } - // } }) \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index d02873a63..f22370d69 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -96,9 +96,6 @@ export default ({ }, getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){ // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL) - console.log("GETWINDSHIELDOPTIONS", { - selectedValues: this.selectedValues - }) return { selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType, selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount, @@ -112,7 +109,6 @@ export default ({ return this.modelValue; }, set: function(newValue) { - // console.log("HIIII", newValue) this.$emit("update:modelValue", newValue); } }, @@ -137,7 +133,6 @@ export default ({ return this.selectedValues.selectedWindshieldReplaceOptions; }, set: function(newValue) { - console.log("HIIII", newValue) this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValue, null, newValue); } }, diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 34b04750f..9147076c8 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -97,9 +97,9 @@ export default { let tintOptions = []; Object.keys(this.featureListData).forEach((tintOption) => { tintOptions.push({ - Name: tintOption, - Text: tintOption, - AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage( + value: tintOption, + buttonLabel: tintOption, + buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage( this.glassLocation, tintOption )}`), @@ -201,10 +201,6 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - console.log({ - alreadyPopulatedPartsData: this.alreadyPopulatedPartsData, - alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData - }) this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color; } }); diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index fe8c2dc00..fe9f6f30c 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -88,7 +88,6 @@ export default { watch: { selectedYear(year) { - console.log("selectedYear: ", year) const parsedYear = parseInt(year); this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear); this.$router.navigateWithSaving( diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js new file mode 100644 index 000000000..02009c385 --- /dev/null +++ b/src/mixins/input-button-wrapper-mixin.js @@ -0,0 +1,35 @@ +export default { + props: { + modelValue: [Array, String, Number], + value: [String, Number], + isMultiSelect: Boolean, + groupName: String, + buttonLabel: [Number, String], + buttonLabelSubCopy: String, + buttonImage: String, + altText: String, + textPosition: String, + screenReaderOnlyText: String, + valueToLogType: String, + validationRules: String, + isWide: Boolean + }, + data() { + return { + selectedValue: null, + }; + }, + mounted() { + this.selectedValue = this.modelValue; + }, + methods: { + handleAnswerChange(e) { + this.$emit("change", e); + }, + }, + watch: { + selectedValue(selectedValue) { + this.$emit("update:modelValue", selectedValue); + }, + }, +}; diff --git a/src/router/index.js b/src/router/index.js index d31d32e29..9dd7b2acf 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,7 +23,6 @@ import { applicationConfig } from "../constants/application-config"; // Components import quote from "@/layouts/quote/quote.vue"; -import test from "@/layouts/test" const routes = [ { @@ -31,11 +30,6 @@ const routes = [ name: "quote", component: quote, }, - { - path: "/test", // This is a temporary route for testing. - name: "test", - component: test, - }, { path: "/", name: "root", 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 d8a9584fc..da33751f3 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,15 +1,10 @@ diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 5f1f81b38..7851de56e 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -1,11 +1,8 @@ diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 12f2743b2..3473ee179 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -5,6 +5,8 @@ @focusin="handleFocus" @focusout="handleBlur" @mousedown.left="handleEventAction('click', $event)"> + lastValuePushedToGa: {{ lastValuePushedToGa }}
+ go to another button > go back to original > tab out + // shouldn't do anything, but it does because wasThisValueJustPushedToGa gets set to false? + // console.log("---inputButtonClicked: ", { + // value: this.value, + // // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa + // }); + // const lastValuePushedToGa = this.wasThisValueJustPushedToGa ? this.value : null; + // this.wasThisValueJustPushedToGa = false; + + this.$emit("inputButtonClicked", this.valueToEmit); }, onFocusCallbackForRoot() { // console.log("onFocusCallbackForRoot: ", { @@ -200,19 +214,41 @@ export default { onFocusCallback: this.onFocusCallbackForRoot, }); }, - pushClickEventToGA(eventType) { - if (this.isMultiSelect || !eventType) { - console.log("PUSHING: ", this.value); + + // TODO KO NOTES + // base-input-button has the value to push to GA and the click vs focus events + // but button-question would have to keep track of the button group's last held value + // is there a way to make each individual button hold the group's last held value + // WITHOUT listening to an event on each component that uses the button? + + pushClickEventToGA(source) { + if (source == "test") { + // this.wasThisValueJustPushedToGa = true; + // this.$emit("update:lastValuePushedToGa", this.value) + console.log("------------------PUSHING 1: ", this.value); + // this.$emit("gaClickEventPushed", this.value) + this.setLastValuePushedToGa(this.value) + + // this.wasPushedToGa = true } else { - if (eventType === this.eventTypes.CLICK) { - console.log("PUSHING: ", this.value); - } else { - if ( - this.isChecked && - this.lastValuePushedToGa != this.value - ) { - console.log("PUSHING: ", this.value); - } + // console.log("PCETGA: ", { + // lastValuePushedToGa: this.lastValuePushedToGa, + // isChecked: this.isChecked, + // value: this.value, + // // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa + // }); + if ( + !this.isValueSelectedOnClick && + this.isChecked && + // !this.wasThisValueJustPushedToGa && + this.lastValuePushedToGa != this.value + ) { + // this.$emit("update:lastValuePushedToGa", this.value) + // this.wasPushedToGa = true + // this.wasThisValueJustPushedToGa = true; + console.log("------------------PUSHING 2: ", this.value); + // this.$emit("gaClickEventPushed", this.value) + this.setLastValuePushedToGa(this.value) } } diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 2f4d1ec43..fbf819cd2 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -34,7 +34,6 @@ }}
- lastValuePushedToGa: {{ lastValuePushedToGa }}
@@ -130,8 +130,8 @@ export default { return { selectedValues: "", // lastFocusedInputGroup: "", - lastPushedGaEventValue: null, - mostRecentlySelectedValue: null, + lastValuePushedToGa: null, + // mostRecentlySelectedValue: null, }; }, computed: { @@ -229,9 +229,12 @@ export default { : this.formatString(answer.toString()); } }, - handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) { + handleAnswerChange(selectedAnswers) { this.selectedValues = selectedAnswers; - this.mostRecentlySelectedValue = mostRecentlySelectedValue; + // if (lastValuePushedToGa) { + // this.lastValuePushedToGa = lastValuePushedToGa; + // // console.log("BQ lastValuePushedToGa: ", lastValuePushedToGa); + // } // if (this.isValueSelectedOnClick) { // this.pushClickEventToGA(); @@ -240,7 +243,10 @@ export default { this.$emit("buttonQuestionChange", selectedAnswers); this.$emit("update:modelValue", selectedAnswers); }, -///////////////////////////// + ///////////////////////////// + setLastValuePushedToGa(lastValuePushedToGa) { + this.lastValuePushedToGa = lastValuePushedToGa; + }, // onFocusCallbackForRoot() { // console.log("onFocusCallbackForRoot: ", { // isValueSelectedOnClick: this.isValueSelectedOnClick, @@ -297,7 +303,7 @@ export default { // this.valueToLogType // ); // }, -////////////////////////////////// + ////////////////////////////////// // pushClickEventToGA() { // // const valueToPushToGa = // // value?.toString() ?? this.selectedValues?.toString(); diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index fdf5b3fd1..cfda08c27 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -9,7 +9,7 @@ export default { buttonImage: String, altText: { type: String, - default: "" + default: "", }, textPosition: String, screenReaderOnlyText: String, @@ -18,22 +18,25 @@ export default { isWide: Boolean, isRequired: { type: Boolean, - default: true + default: true, }, // pushClickEventToGA: Function, - lastValuePushedToGa: [String, Number] + lastValuePushedToGa: [String, Number], + setLastValuePushedToGa: Function }, methods: { handleAnswerChange(e) { if (this.preHandleAnswerChange) { - this.preHandleAnswerChange(e.selectedAnswers) + this.preHandleAnswerChange(e); } - - this.$emit("change", e.selectedAnswers); - // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa); + + // console.log("IBWM: ", e) + this.$emit("change", e); + // if (e.lastValuePushedToGa) { + // console.log("sup") + // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa); + // } }, - - }, // computed: { // selectedValueHandler: { From 9b95effca5624a4b8cc9b50ec4eb387cd4ff4853 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 7 Oct 2022 15:48:17 -0400 Subject: [PATCH 55/84] CSR-762 GA Cleanup --- src/common-components/base-input-button/base-input-button.vue | 3 +-- src/common-components/button-question/button-question.vue | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 76948d4f6..c487b9702 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -23,7 +23,6 @@ diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index e3a5fa7cf..dd03be1c4 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -204,9 +204,7 @@ export default { const partNumber = this.alreadyPopulatedPartsData[key].partNumber; g.parts.forEach((p) => { if (p.partNumber === partNumber) { - this.glassParts[g.glassLocation + "-" + g.glassName] = { - [g.glassLocation]: [partNumber], - }; + this.glassParts[g.glassLocation + "-" + g.glassName] = p; } }); }); From afa94625f70b2a0170361e59191a73051180dd8a Mon Sep 17 00:00:00 2001 From: Katie Date: Tue, 11 Oct 2022 16:52:07 -0400 Subject: [PATCH 59/84] CSR-762 Fix tests --- .../base-input-button.spec.js | 78 ++++++++++--------- .../base-input-button/base-input-button.vue | 2 +- .../replace-options-question.spec.js | 2 +- .../vehicle-parts/vehicle-parts.spec.js | 13 +++- src/ux-components/list-card/list-card.spec.js | 8 ++ src/ux-components/radio/radio.spec.js | 36 +++++---- 6 files changed, 86 insertions(+), 53 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 37e6ccc19..190448df9 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -215,33 +215,28 @@ describe("baseInputButton.vue", () => { ); }); - test( - "focus and click enter on a radio button => inputButtonClicked is emitted with correct value", - async () => { - // Arrange - const { wrapper } = setupMocks({ - mockData: { - propsData: { - isMultiSelect: false, - value: "Hi", - }, + test("focus and click enter on a radio button => inputButtonClicked is emitted with correct value", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "Hi", }, - }); + }, + }); - const input = wrapper.find("input"); + const input = wrapper.find("input"); - // Act - await input.trigger("keypress", { key: "enter" }); + // Act + await input.trigger("keypress", { key: "enter" }); - // Assert - expect(wrapper.emitted()).toHaveProperty( - "inputButtonClicked" - ); - expect( - wrapper.emitted()["inputButtonClicked"][0][0] - ).toEqual("Hi"); - } - ); + // Assert + expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( + "Hi" + ); + }); }); }); @@ -249,27 +244,33 @@ describe("baseInputButton.vue", () => { describe("handleEventAction", () => {}); describe("handleSelectionChange", () => { - test.todo("handleChange is called with valueToEmit") + test.todo("handleChange is called with valueToEmit"); describe("checkbox", () => { - test.todo("modelValue is null => valueToEmit is correct value") + test.todo("modelValue is null => valueToEmit is correct value"); - test.todo("modelValue is undefined => valueToEmit is correct value") - test.todo("modelValue is empty => valueToEmit is correct value") + test.todo( + "modelValue is undefined => valueToEmit is correct value" + ); + test.todo( + "modelValue is empty => valueToEmit is correct value" + ); - test.todo("modelValue is not empty and does not contain this button's value => valueToEmit is correct value") - test.todo("modelValue is not empty and does contain this button's value => valueToEmit is correct value") - }) + test.todo( + "modelValue is not empty and does not contain this button's value => valueToEmit is correct value" + ); + test.todo( + "modelValue is not empty and does contain this button's value => valueToEmit is correct value" + ); + }); - describe("radio", () => { - - }) + describe("radio", () => {}); }); describe("handleClick", () => { - test.todo("handleSelectChange is also called") + test.todo("handleSelectChange is also called"); - test.todo("inputButtonClicked is emitted with valueToEmit") + test.todo("inputButtonClicked is emitted with valueToEmit"); }); }); @@ -490,6 +491,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { groupName: "groupName", modelValue: mockData.propsData?.isMultiSelect ? [] : "", value: "5", + setLastValuePushedToGa: () => {}, // should override the above if they exist ...mockData.propsData, }, @@ -499,6 +501,12 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { ? shallowMount(baseInputButton, mountMockData) : mount(baseInputButton, mountMockData); + wrapper.vm.pushEventToGA = jest.fn(); + wrapper.vm.$route = { + query: {}, + }; + wrapper.vm.GaActions = {} + return { wrapper }; } diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index c17d6c6d3..8cd50278e 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -185,7 +185,7 @@ export default { }, buttonId() { return `${this.groupName?.replace(" ", "-")}-${this.value - .toString() + ?.toString() ?.replace(" ", "-")}`; }, isValueSelectedOnClick() { diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js index 411bf4e90..aa6ecb06d 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js @@ -56,7 +56,7 @@ describe("replace-options-question.vue", () => { //Act wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm); - expect(wrapper.vm.selectedReplaceOptions).toEqual([]); + expect(wrapper.vm.selectedValues).toEqual([]); }); }); diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index d1eaa8df6..62d54c71f 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -183,7 +183,16 @@ describe("vehicle-parts.vue", () => { await nextTick(); //Assert - expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } }); + expect(wrapper.vm.glassParts).toEqual({ + "Rear-Stationary": { + partNumber: "DB12209YPYNOEM", + description: "heated glass, solar, 1 hole", + color: "Gray Tint Privacy", + requiresRecalibration: false, + requiresCapabilityQuestions: false, + childParts: null + } + }); }); test("User had part questions > BackButtonAction triggers a router.navigateWithoutSaving change with correct scenario", async () => { @@ -509,6 +518,8 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.$refs.loadingModal.showModal = jest.fn(); + // wrapper.vm.$refs.onSubmit = jest.fn(); + // wrapper.vm.$refs.onInvalidSubmit = jest.fn(); return { wrapper, apiPromise }; } diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 19c5d01c2..41d3555e2 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -14,6 +14,7 @@ describe("list-card.vue", () => { groupID: "checkbox-demo-1", groupName: "Checkbox 1", buttonImage: "windshield-damage.svg", + value: "test value", }, }); @@ -32,6 +33,7 @@ describe("list-card.vue", () => { groupID: "radio-demo-1", groupName: "radio 1", buttonImage: "windshield-damage.svg", + value: "test value", }, }); @@ -51,6 +53,7 @@ describe("list-card.vue", () => { groupName: "radio 1", buttonImage: "windshield-damage.svg", buttonLabelSubCopy: "Test", + value: "test value", }, }); @@ -70,6 +73,7 @@ describe("list-card.vue", () => { groupName: "radio 1", buttonImage: "windshield-damage.svg", buttonLabelSubCopy: "Test", + value: "test value", }, }); @@ -89,6 +93,7 @@ describe("list-card.vue", () => { groupName: "radio 1", buttonImage: "windshield-damage.svg", isRequired: true, + value: "test value", }, }); @@ -110,6 +115,7 @@ describe("list-card.vue", () => { isRequired: true, isWide: true, buttonLabelSubCopy: "", + value: "test value", }, }); @@ -134,6 +140,7 @@ describe("list-card.vue", () => { isRequired: true, isWide: true, buttonLabelSubCopy: "Button Subcopy", + value: "test value", }, }); @@ -159,6 +166,7 @@ describe("list-card.vue", () => { buttonImage: "windshield-damage.svg", isRequired: true, isWide: false, + value: "test value", }, }); diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js index 520fd9daf..83cc22b5a 100644 --- a/src/ux-components/radio/radio.spec.js +++ b/src/ux-components/radio/radio.spec.js @@ -6,12 +6,16 @@ import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; describe("radio.vue", () => { it("Should have correct group name", async () => { // Arrange - let { wrapper } = setupMocks({}); + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: { + groupName: "radio-button-test", + value: "test value", + }, + }, + }); // Act - await wrapper.setProps({ - groupName: "radio-button-test", - }); const input = wrapper.find("input"); // Assert @@ -20,12 +24,16 @@ describe("radio.vue", () => { it("Should have correct label text", async () => { // Act - let { wrapper } = setupMocks({}); + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: { + buttonLabel: "label text", + value: "test value", + }, + }, + }); // Arrange - await wrapper.setProps({ - buttonLabel: "label text", - }); const paragraph = wrapper.find("p"); // Assert @@ -39,6 +47,7 @@ describe("radio.vue", () => { // Arrange await wrapper.setProps({ screenReaderOnlyText: "screenreader text", + value: "test value", }); const paragraph = wrapper.find(".sr-only"); @@ -48,13 +57,10 @@ describe("radio.vue", () => { }); function setupMocks({ mountOptionsMockData = {} }) { - const wrapper = mount( - radio, - getMountOptions({ - ...mountOptionsMockData, - mixins: [inputButtonWrapperMixin], - }) - ); + const wrapper = mount(radio, { + ...mountOptionsMockData, + mixins: [inputButtonWrapperMixin], + }); return { wrapper }; } From d695ab2c6458e523e33fcf710eccae63207ace15 Mon Sep 17 00:00:00 2001 From: Katie Date: Wed, 12 Oct 2022 13:46:18 -0400 Subject: [PATCH 60/84] CSR-762 Edit prettier file --- .prettierrc | 3 +- .../base-input-button.spec.js | 592 ++++++++++++++++-- .../base-input-button/base-input-button.vue | 15 +- 3 files changed, 547 insertions(+), 63 deletions(-) diff --git a/.prettierrc b/.prettierrc index 21209f49e..548cc94c4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "tabWidth": 4, - "bracketSameLine": true + "bracketSameLine": true, + "printWidth": 100 } \ No newline at end of file diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 190448df9..1cb244997 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -76,9 +76,7 @@ describe("baseInputButton.vue", () => { await wrapper.trigger("click"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "X", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["X"]); }); }); @@ -99,22 +97,16 @@ describe("baseInputButton.vue", () => { await wrapper.trigger("click"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "X" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("X"); }); }); }); describe("keyboard navigation and events", () => { describe("checkbox", () => { - test.todo( - "focus on a checkbox => inputButtonClicked is not emitted" - ); + test.todo("focus on a checkbox => inputButtonClicked is not emitted"); - test.todo( - "blur from a checkbox => inputButtonClicked is not emitted" - ); + test.todo("blur from a checkbox => inputButtonClicked is not emitted"); test("change event fired from checkbox => inputButtonClicked is emitted with correct value", async () => { // Arrange @@ -133,9 +125,7 @@ describe("baseInputButton.vue", () => { await input.trigger("change"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "Hi", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); }); test("focus and click space on a checkbox => inputButtonClicked is not emitted", async () => { @@ -155,9 +145,7 @@ describe("baseInputButton.vue", () => { await input.trigger("keypress", { key: "space" }); // Assert - expect(wrapper.emitted()).not.toHaveProperty( - "inputButtonClicked" - ); + expect(wrapper.emitted()).not.toHaveProperty("inputButtonClicked"); }); test("focus and click enter on a checkbox => inputButtonClicked is emitted with correct value", async () => { @@ -177,20 +165,14 @@ describe("baseInputButton.vue", () => { await input.trigger("keypress", { key: "enter" }); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "Hi", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); }); }); describe("radio", () => { - test.todo( - "focus on a radio button => inputButtonClicked is not emitted" - ); + test.todo("focus on a radio button => inputButtonClicked is not emitted"); - test.todo( - "blur from a radio button => inputButtonClicked is not emitted" - ); + test.todo("blur from a radio button => inputButtonClicked is not emitted"); test("focus and click space on a radio button => inputButtonClicked is emitted with correct value", async () => { // Arrange @@ -210,9 +192,7 @@ describe("baseInputButton.vue", () => { // Assert expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "Hi" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); }); test("focus and click enter on a radio button => inputButtonClicked is emitted with correct value", async () => { @@ -233,44 +213,546 @@ describe("baseInputButton.vue", () => { // Assert expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "Hi" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); }); }); }); describe("methods", () => { - describe("handleEventAction", () => {}); + describe("handleEventAction", () => { + describe("isMultiSelect", () => { + test("eventType === eventTypes.CLICK => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("click", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.ENTER => call handleClick and handlePushClickEventToGACheck", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("enter", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE => call handleClick and handlePushClickEventToGACheck", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.MOUNT => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("mount", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.SPACE => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("space", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + }); + + describe("!isMultiSelect", () => { + test("eventType === eventTypes.CLICK => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("click", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.ENTER => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("enter", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.SPACE => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("space", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.MOUNT => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("mount", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE && selectOnKeypress => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + selectOnKeypress: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE && !selectOnKeypress => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + selectOnKeypress: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + }); + }); describe("handleSelectionChange", () => { - test.todo("handleChange is called with valueToEmit"); + const isCheckbox = [ + [true, ["Hi"]], + [false, "Hi"], + ]; + test.each(isCheckbox)( + "handleChange is called with valueToEmit", + (isMultiSelect, resultingValueToEmit) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Hi", + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(resultingValueToEmit); + } + ); describe("checkbox", () => { - test.todo("modelValue is null => valueToEmit is correct value"); + test("modelValue is null => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: null, + }, + }, + }); - test.todo( - "modelValue is undefined => valueToEmit is correct value" - ); - test.todo( - "modelValue is empty => valueToEmit is correct value" - ); + wrapper.vm.handleChange = jest.fn(); - test.todo( - "modelValue is not empty and does not contain this button's value => valueToEmit is correct value" - ); - test.todo( - "modelValue is not empty and does contain this button's value => valueToEmit is correct value" + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is undefined => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: undefined, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is empty => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: [], + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is not empty and does not contain this button's value => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: ["Hello"], + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Bello"]); + }); + + // testing when value is at start/middle/end of modelValue + const modelValues = [ + [["Bello", "Hello", "Mello"]], + [["Hello", "Bello", "Mello"]], + [["Hello", "Mello", "Bello"]], + ]; + test.each(modelValues)( + "modelValue is not empty and does contain this button's value => valueToEmit is correct value", + (modelValue) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: modelValue, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Mello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Mello"]); + } ); }); - describe("radio", () => {}); + describe("radio", () => { + const modelValues = [null, undefined, "Bello", "Hello"]; + test.each(modelValues)( + "regardless of modelValue, set valueToEmit to correct value", + (modelValue) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "Bello", + modelValue: modelValue, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual("Bello"); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith("Bello"); + } + ); + }); }); describe("handleClick", () => { - test.todo("handleSelectChange is also called"); + const isCheckbox = [[true], [false]]; + test.each(isCheckbox)("handleSelectionChange is also called", async (isMultiSelect) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Bello", + }, + }, + }); - test.todo("inputButtonClicked is emitted with valueToEmit"); + wrapper.vm.handleSelectionChange = jest.fn(); + await wrapper.setData({ valueToEmit: "HELLO WORLD" }); + + // Act + wrapper.vm.handleClick({ myEvent: "Test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" }); + }); + + test.each(isCheckbox)("inputButtonClicked is emitted with valueToEmit", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Bello", + }, + }, + }); + + wrapper.vm.handleSelectionChange = jest.fn(); + await wrapper.setData({ valueToEmit: "HELLO WORLD" }); + + // Act + wrapper.vm.handleClick({ myEvent: "Test" }); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("HELLO WORLD"); + }); + }); + + describe("handlePushClickEventToGACheck", () => { + test.todo(""); + }); + + describe("pushClickEventToGA", () => { + test.only("pushEventToGA is called correctly", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + value: "Bello", + setLastValuePushedToGa: jest.fn(), + }, + route: { + query: { + fmgPage: "myPage", + }, + }, + }, + }); + + console.log(wrapper.vm.$route) + + wrapper.vm.pushEventToGA = jest.fn(); + wrapper.setData({ + GaActions: { + CLICKED: "Clicked", + }, + }); + + // Act + wrapper.vm.pushClickEventToGA(); + + // Assert + expect(wrapper.vm.pushEventToGA).toHaveBeenCalledWith( + "myPage", + "Clicked", + "Bello", + true, + undefined + ); + expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("Bello"); + }); + + test.todo("set last value pushed to GA"); }); }); @@ -413,9 +895,7 @@ describe("baseInputButton.vue", () => { // Assert const inputElement = wrapper.find("input"); expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC"); - expect(inputElement.attributes().id).toBe( - "my-test-name-Aaa-BBB-CcC" - ); + expect(inputElement.attributes().id).toBe("my-test-name-Aaa-BBB-CcC"); }); test("groupName and value combo yield correct id for input button with number value", () => { @@ -472,7 +952,9 @@ describe("baseInputButton.vue", () => { }); }); -// TODO KO look at how I tested groups of these in SFA (making sure selecting one radio changes the value, etc, that this acts like a regular input aside from a different emitted event) +// TODO KO look at how I tested groups of these in SFA +// (making sure selecting one radio changes the value, etc, +// that this acts like a regular input aside from a different emitted event) function setupMocks({ mockData = {}, shouldShallowMount = true }) { const baseInputButtonWrapper = { @@ -505,7 +987,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { wrapper.vm.$route = { query: {}, }; - wrapper.vm.GaActions = {} + wrapper.vm.GaActions = {}; return { wrapper }; } diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 8cd50278e..b5899a3a8 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -4,7 +4,7 @@ :for="buttonId" @focusin="handleFocus" @focusout="handleBlur" - @mousedown.left="handleEventAction('click', $event)"> + @mousedown.left="handleEventAction(eventTypes.CLICK, $event)"> + @keypress.space="handleEventAction(eventTypes.SPACE, $event)" + @keypress.enter="handleEventAction(eventTypes.ENTER, $event)" + @change="handleEventAction(eventTypes.CHANGE, $event)" /> @@ -124,7 +124,7 @@ export default { } this.valueToEmit = newValue; - } else { + } else if (!this.isMultiSelect) { this.valueToEmit = this.value; } @@ -146,9 +146,10 @@ export default { }); }, handlePushClickEventToGACheck(source) { + // if from a click or click-like event if (source === this.eventTypes.CLICK) { this.pushClickEventToGA(); - } else { + } else { // if from tabbing around if ( !this.isValueSelectedOnClick && this.isChecked && @@ -167,7 +168,7 @@ export default { this.valueToLogType ); - this.setLastValuePushedToGa(this.value); + this.setLastValuePushedToGa(value ?? this.value); }, }, computed: { From f8531348701e481ad9cc2ea8fb7a82024d810513 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 13 Oct 2022 09:58:01 -0400 Subject: [PATCH 61/84] CSR-762 tests WIP --- .../base-input-button.spec.js | 72 +++++++++++-------- 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 1cb244997..3f1b03d9c 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -1,5 +1,6 @@ import { shallowMount, mount } from "@vue/test-utils"; import baseInputButton from "./base-input-button"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin" describe("baseInputButton.vue", () => { describe("general", () => { @@ -713,7 +714,7 @@ describe("baseInputButton.vue", () => { }); describe("pushClickEventToGA", () => { - test.only("pushEventToGA is called correctly", () => { + test("pushEventToGA is called correctly", () => { // Arrange const { wrapper } = setupMocks({ mockData: { @@ -721,17 +722,11 @@ describe("baseInputButton.vue", () => { value: "Bello", setLastValuePushedToGa: jest.fn(), }, - route: { - query: { - fmgPage: "myPage", - }, - }, }, }); - console.log(wrapper.vm.$route) + console.log(wrapper.vm.$route); - wrapper.vm.pushEventToGA = jest.fn(); wrapper.setData({ GaActions: { CLICKED: "Clicked", @@ -950,6 +945,25 @@ describe("baseInputButton.vue", () => { }); }); }); + + describe("integration testing", () => { + describe("checkbox", () => { + test.only("click on both => both are selected", async () => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + isMultiSelect: true + }) + console.log(wrapper.html()) + + // Act + const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"}) + await buttonWrappers[0].trigger("click") + + // Assert + expect(wrapper.vm.value).toEqual(["value1"]) + }) + }) + }); }); // TODO KO look at how I tested groups of these in SFA @@ -957,15 +971,6 @@ describe("baseInputButton.vue", () => { // that this acts like a regular input aside from a different emitted event) function setupMocks({ mockData = {}, shouldShallowMount = true }) { - const baseInputButtonWrapper = { - components: { baseInputButton }, - template: '', - data() { - return { - myValue: "", - }; - }, - }; const mountMockData = { ...mockData, propsData: { @@ -985,7 +990,9 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { wrapper.vm.pushEventToGA = jest.fn(); wrapper.vm.$route = { - query: {}, + query: { + fmgPage: "myPage", + }, }; wrapper.vm.GaActions = {}; @@ -994,28 +1001,31 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { function setupBaseInputButtonWrapper({ mockData = {} }) { const baseInputButtonWrapper = { + name: "baseInputButtonWrapper", components: { baseInputButton }, template: - '
', + '
Test
', data() { return { - myValue: "", isMultiSelect: mockData.isMultiSelect, }; }, - - // const parentComponent = mount({ - // data() { - // return { - // value: "value1", - // } - // }, - // template: '
', - // components: { baseInputButton } - // }) + mixins: [inputButtonWrapperMixin] }; - const wrapper = mount(baseInputButtonWrapper, {}); + let parentComponentTemplate = "
" + parentComponentTemplate += `` + parentComponentTemplate += `` + parentComponentTemplate += `
` + const wrapper = mount({ + data() { + return { + value: mockData.initialValue, + } + }, + template: parentComponentTemplate, + components: { baseInputButtonWrapper } + }) return { wrapper }; } From 4f5c71dcf9f629654787536a9322eaad8dfb2fc4 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 13 Oct 2022 15:01:05 -0400 Subject: [PATCH 62/84] CSR-762 Refactor to use v-model --- .../base-input-button/base-input-button.vue | 7 +------ .../button-question/button-question.vue | 9 ++------- src/mixins/input-button-wrapper-mixin.js | 19 ++++++++++++------- .../list-button-horizontal.vue | 2 +- src/ux-components/list-button/list-button.vue | 2 +- src/ux-components/list-card/list-card.vue | 2 +- src/ux-components/radio/radio.vue | 2 +- 7 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 8cd50278e..c7c2291ce 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -30,11 +30,6 @@ import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; export default { name: "base-input-button", - emits: ["change", "inputButtonClicked"], - model: { - prop: "modelValue", - event: "change", - }, props: { // ...inputButtonWrapperMixin.props value: { @@ -132,7 +127,7 @@ export default { }, handleClick(e) { this.handleSelectionChange(e); - this.$emit("inputButtonClicked", this.valueToEmit); + this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { this.$root.handleInputFocus({ diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index a20ff376e..eb198c93f 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -45,7 +45,6 @@ :groupName="answer.groupName" :isMultiSelect="isMultiSelect" :value="answer.value" - :modelValue="modelValue" :selectingInitiatesLoad="selectingInitiatesLoad" :isWide="isWide" :validationRules="validationRules" @@ -54,7 +53,8 @@ :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount" - @inputButtonClicked="handleAnswerChange" /> + v-model="selectedValues" + />
+ v-model="selectedValue">
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 44ead9b3f..54ef98b35 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -2,7 +2,7 @@ + v-model="selectedValue">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index c49c4ce05..7e27a6476 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -5,7 +5,7 @@ 'list-card w-100 rounded-3 d-flex align-items-center h-100', { horizontal: isWide }, ]" - @inputButtonClicked="handleAnswerChange"> + v-model="selectedValue">
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index ea72d6895..0d120de39 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -3,7 +3,7 @@ v-bind="$props" buttonWrapperClasses="ui-radio form-check" inputClasses="form-check-input" - @inputButtonClicked="handleAnswerChange"> + v-model="selectedValue">

{{ buttonLabel }}

{{ From 054b3b2456b1ba271c78c2fd827c63a393359969 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 13 Oct 2022 16:51:05 -0400 Subject: [PATCH 63/84] CSR-762 Temporarily lower code coverage threshold --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index ded486df9..4af0d88cc 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,7 +28,7 @@ module.exports = { testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - statements: 85, + statements: 80, // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, From cbfd62e3a827cb56c67bc6c39fe1b0ce312618b5 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:07:59 -0400 Subject: [PATCH 64/84] CSR-762 Remove pushing GA on autoselect --- src/App.vue | 42 ++----------------- .../base-input-button/base-input-button.vue | 17 ++++---- .../button-question/button-question.vue | 2 - src/helpers/analytics-helper.js | 34 +++++++++++++++ .../glass-part-question.vue | 6 +-- src/mixins/analytics-mixin.js | 4 +- src/mixins/input-button-wrapper-mixin.js | 1 - 7 files changed, 48 insertions(+), 58 deletions(-) create mode 100644 src/helpers/analytics-helper.js diff --git a/src/App.vue b/src/App.vue index c934ee244..e43e85c84 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,48 +11,12 @@ diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index c7c2291ce..e58e826cc 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,6 +26,10 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; +import { + handleInputFocus, + handleInputBlur, +} from "@/helpers/analytics-helper"; import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; export default { @@ -59,7 +63,6 @@ export default { isRequired: Boolean, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - shouldPushClickEventToGAOnMount: Boolean, }, data() { return { @@ -68,11 +71,7 @@ export default { }, mounted() { if (this.isChecked) { - if (this.shouldPushClickEventToGAOnMount) { - this.handleEventAction(this.eventTypes.MOUNT) - } else { - this.handleChange(this.modelValue); - } + this.handleChange(this.modelValue); } }, methods: { @@ -92,7 +91,6 @@ export default { case this.eventTypes.CLICK: case this.eventTypes.ENTER: case this.eventTypes.SPACE: - case this.eventTypes.MOUNT: this.handleClick(e); this.handlePushClickEventToGACheck( this.eventTypes.CLICK @@ -130,12 +128,12 @@ export default { this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { - this.$root.handleInputFocus({ + handleInputFocus({ groupName: this.groupName, }); }, handleBlur() { - this.$root.handleInputBlur({ + handleInputBlur({ groupName: this.groupName, onFocusCallback: this.handlePushClickEventToGACheck, }); @@ -192,7 +190,6 @@ export default { ENTER: "enter", SPACE: "space", CLICK: "click", - MOUNT: "mount" }; }, }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index eb198c93f..1b75e8d9d 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -52,7 +52,6 @@ :selectOnKeypress="selectOnKeypress" :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" - :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount" v-model="selectedValues" /> @@ -122,7 +121,6 @@ export default { type: Boolean, default: true, }, - shouldPushClickEventToGAOnMount: Boolean }, data() { return { diff --git a/src/helpers/analytics-helper.js b/src/helpers/analytics-helper.js new file mode 100644 index 000000000..b03d86191 --- /dev/null +++ b/src/helpers/analytics-helper.js @@ -0,0 +1,34 @@ +let lastFocusedInputGroupName = ""; +let onFocusCallback = null; + +const handleChildFocus = (e) => { + const targetType = e.target.type; + if (targetType !== "radio" && targetType !== "checkbox") { + handleInputFocus({ + groupName: null, + }); + } +} + +const handleInputFocus = (e) => { + if ( + e && + lastFocusedInputGroupName !== e.groupName && + onFocusCallback + ) { + onFocusCallback(); + } +} + +const handleInputBlur = (e) => { + if (e) { + lastFocusedInputGroupName = e.groupName; + onFocusCallback = e.onFocusCallback; + } +} + +export { + handleChildFocus, + handleInputFocus, + handleInputBlur +} \ No newline at end of file diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 14f707818..d45c8cddb 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -27,9 +27,7 @@ isRequired :groupName="`${glassLocation}-${glassName}-${selectedTint}`" :validationRules="partValidationRules" - :shouldPushClickEventToGAOnMount=" - shouldPushClickEventToGAOnMount - " /> + />
@@ -57,7 +55,6 @@ export default { glassColorQuestion: "", glassFeatureQuestion: "", selectedTint: "", - shouldPushClickEventToGAOnMount: true, }; }, props: { @@ -224,7 +221,6 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - this.shouldPushClickEventToGAOnMount = false; this.selectedTint = this.modelValue?.color } }); diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 6eb18e462..4ff24f968 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -48,6 +48,8 @@ export default { pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) { const currentPageName = getPageNameByQueryString(); const labelToLog = getValueToLog(label, valueToLogType); + + console.log("PUSHING: ", labelToLog) const eventToBePushed = { 'event': GaEvents.GENERIC_EVENT, 'category': category, @@ -140,7 +142,7 @@ export default { noSession() { return getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000'; - } + }, }, computed: { analyticsPageEvents() { diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index eae27c2fe..628ccec96 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -22,7 +22,6 @@ export default { }, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - shouldPushClickEventToGAOnMount: Boolean, }, computed: { selectedValue: { From cf14826a94b54b1b6034396bc54224203abdce79 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:24:55 -0400 Subject: [PATCH 65/84] CSR-762 Prevent pushing GA click when tabbing through preloaded page with radio buttons --- src/common-components/base-input-button/base-input-button.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index e58e826cc..767d96649 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -143,6 +143,7 @@ export default { this.pushClickEventToGA(); } else { if ( + this.valueToEmit && !this.isValueSelectedOnClick && this.isChecked && this.lastValuePushedToGa != this.value From 9ee87f343782ec0e84ef085e4c22c27120096600 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:29:11 -0400 Subject: [PATCH 66/84] CSR-762 Fix null check --- src/common-components/base-input-button/base-input-button.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 767d96649..fa4db2647 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -143,7 +143,7 @@ export default { this.pushClickEventToGA(); } else { if ( - this.valueToEmit && + this.valueToEmit !== null && !this.isValueSelectedOnClick && this.isChecked && this.lastValuePushedToGa != this.value From b2a81875d2f37d94f5191170e5176eb002679e10 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:51:55 -0400 Subject: [PATCH 67/84] CSR-762 Use shared props between base-input-button and input-button-wrapper-mixin --- .../base-input-button/base-input-button.vue | 29 ++---------------- .../button-functionality-props.js | 30 +++++++++++++++++++ src/mixins/input-button-wrapper-mixin.js | 15 ++-------- 3 files changed, 35 insertions(+), 39 deletions(-) create mode 100644 src/common-components/base-input-button/button-functionality-props.js diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index fa4db2647..0792333a6 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -30,39 +30,14 @@ import { handleInputFocus, handleInputBlur, } from "@/helpers/analytics-helper"; -import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; +import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { name: "base-input-button", props: { - // ...inputButtonWrapperMixin.props - value: { - type: [String, Number], - required: true, - }, - modelValue: { - type: [Array, String, Number], - required: true, - }, - isMultiSelect: Boolean, - groupName: { - type: String, - required: true, - }, - validationRules: { - type: String, - default: "", - }, + ...inputButtonProps, buttonWrapperClasses: [String, Array, Object], inputClasses: [String, Array, Object], - valueToLogType: String, - selectOnKeypress: { - type: Boolean, - default: true, - }, - isRequired: Boolean, - lastValuePushedToGa: [String, Number], - setLastValuePushedToGa: Function, }, data() { return { diff --git a/src/common-components/base-input-button/button-functionality-props.js b/src/common-components/base-input-button/button-functionality-props.js new file mode 100644 index 000000000..9bc6aeb25 --- /dev/null +++ b/src/common-components/base-input-button/button-functionality-props.js @@ -0,0 +1,30 @@ +export const inputButtonProps = { + value: { + type: [String, Number], + required: true, + }, + modelValue: { + type: [Array, String, Number], + required: true, + }, + isMultiSelect: Boolean, + groupName: { + type: String, + required: true, + }, + validationRules: { + type: String, + default: "", + }, + valueToLogType: String, + isRequired: { + type: Boolean, + default: true, + }, + lastValuePushedToGa: [String, Number], + setLastValuePushedToGa: Function, + selectOnKeypress: { + type: Boolean, + default: true, + }, +} \ No newline at end of file diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index 628ccec96..866e5d1d6 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -1,9 +1,8 @@ +import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; + export default { props: { - modelValue: [Array, String, Number], - value: [String, Number], - isMultiSelect: Boolean, - groupName: String, + ...inputButtonProps, buttonLabel: [Number, String], buttonLabelSubCopy: String, buttonImage: String, @@ -13,15 +12,7 @@ export default { }, textPosition: String, screenReaderOnlyText: String, - valueToLogType: String, - validationRules: String, isWide: Boolean, - isRequired: { - type: Boolean, - default: true, - }, - lastValuePushedToGa: [String, Number], - setLastValuePushedToGa: Function, }, computed: { selectedValue: { From c70bbf665cc75a78b20e4b3b69b491da5cd75eb9 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 08:27:25 -0400 Subject: [PATCH 68/84] CSR-762 Cleanup --- .../base-input-button/base-input-button.spec.js | 2 -- src/common-components/button-question/button-question.vue | 1 - .../vehicle-damage/side-door-options/side-door-options.vue | 2 +- .../windshield-options/windshield-options.vue | 6 +++--- src/store/index.js | 7 ++----- 5 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 37e553391..ed76b319d 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -473,8 +473,6 @@ describe.skip("baseInputButton.vue", () => { }); }); -// TODO KO look at how I tested groups of these in SFA (making sure selecting one radio changes the value, etc, that this acts like a regular input aside from a different emitted event) - function setupMocks({ mockData = {}, shouldShallowMount = true }) { const baseInputButtonWrapper = { components: { baseInputButton }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 1b75e8d9d..45616f849 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -177,7 +177,6 @@ export default { } }, buttonsInfo() { - // TODO KO temporary. It should always just be an array return (Array.isArray(this.answers) ? this.answers : [])?.map( (answer) => ({ buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue index 9af96c117..99f644d6f 100644 --- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue @@ -57,7 +57,7 @@ export default ({ name: "sideDoorOptions", props: { groupName: String, - modelValue: [Array, Object], // TODO Does this take an array? + modelValue: Object, selectedDamageLocations: Array, cmsWidgetName: String, }, diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 31b008760..8081bb2b2 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => { return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || - (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || - (selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1); + (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || + (selectedDamageLocations[0].length === 1); }); defineRule("repair-only", (value) => { return value.toString() === damageLocationsSelected.REPAIR; @@ -83,7 +83,7 @@ export default ({ }, props: { - modelValue: [Object, String], // TODO Does this take a string? + modelValue: Object, selectedDamageLocations: Array, hasRepairReplaceConflict: Boolean, hasSplitSingleConflict: Boolean, diff --git a/src/store/index.js b/src/store/index.js index 1d6e68482..8d2f6b309 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1044,11 +1044,8 @@ export const actions = { ); const isWindshieldRepairTheSame = isWindshieldRepair === context.state.order.damage.isRepair; - const isChipCountTheSame = Array.isArray(selectedWindshieldChipCount) //TODO: fix the underlying components so this is never an array - ? selectedWindshieldChipCount[0] === - context.state.order.damage.numberOfChips - : selectedWindshieldChipCount === - context.state.order.damage.numberOfChips; + + const isChipCountTheSame = selectedWindshieldChipCount === context.state.order.damage.numberOfChips; const isDamageChanging = !isGlassToReplaceTheSame || From bdefe442359f9f073fc4479508f11018eb109860 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 08:44:48 -0400 Subject: [PATCH 69/84] CSR-762 Fix back glass bug --- .../replace-options-question/replace-options-question.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 d4da8cd1b..503c30cb8 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 @@ -25,7 +25,7 @@ export default ({ name: "replaceOptionsQuestion", data(){ return { - replaceOptions: [], + replaceOptions: this.isMultiSelect ? [] : "", } }, props: { @@ -46,7 +46,7 @@ export default ({ updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { - this.selectedValues = [this.answersToDisplay[0].Name]; + this.selectedValues = this.isMultiSelect ? [this.answersToDisplay[0].Name] : this.answersToDisplay[0].Name; } }, }, @@ -91,7 +91,7 @@ export default ({ }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { if (!shouldDisplayReplaceOptionsQuestion) { - this.selectedValues = []; + this.selectedValues = this.isMultiSelect ? [] : ""; } } }, From 0e3b1d79b830ca15b05cd335a22c7fd273ea11aa Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 09:36:19 -0400 Subject: [PATCH 70/84] CSR-762 Remove redundant property' --- .../base-input-button/base-input-button.vue | 11 ++++------- .../base-input-button/button-functionality-props.js | 4 ++-- .../button-question/button-question.vue | 5 ----- .../vehicle-make/make-question/make-question.vue | 1 - .../vehicle-model/model-question/model-question.vue | 1 - .../vehicle-style/style-question/style-question.vue | 1 - .../vehicle-year/year-question/year-question.vue | 1 - src/mixins/analytics-mixin.js | 1 - 8 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 0792333a6..71da03d85 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,10 +26,7 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; -import { - handleInputFocus, - handleInputBlur, -} from "@/helpers/analytics-helper"; +import { handleInputFocus, handleInputBlur } from "@/helpers/analytics-helper"; import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { @@ -72,9 +69,9 @@ export default { ); break; case this.eventTypes.CHANGE: - this.selectOnKeypress - ? this.handleClick(e) - : this.handleSelectionChange(e); + this.selectingInitiatesLoad + ? this.handleSelectionChange(e) + : this.handleClick(e); break; } } diff --git a/src/common-components/base-input-button/button-functionality-props.js b/src/common-components/base-input-button/button-functionality-props.js index 9bc6aeb25..b9a63c925 100644 --- a/src/common-components/base-input-button/button-functionality-props.js +++ b/src/common-components/base-input-button/button-functionality-props.js @@ -23,8 +23,8 @@ export const inputButtonProps = { }, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - selectOnKeypress: { + selectingInitiatesLoad: { type: Boolean, - default: true, + default: false, }, } \ No newline at end of file diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 45616f849..56ab5abd7 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -49,7 +49,6 @@ :isWide="isWide" :validationRules="validationRules" :textPosition="textPosition" - :selectOnKeypress="selectOnKeypress" :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" v-model="selectedValues" @@ -117,10 +116,6 @@ export default { suppressError: Boolean, useTextForValue: Boolean, valueToLogType: String, - selectOnKeypress: { - type: Boolean, - default: true, - }, }, data() { return { diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index c2a7cd2d2..28246814f 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleMake" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 393df6fc9..bc20bdc6a 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleModel" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index bf8fd3d07..806f7ac41 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleStyle" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 06af5ce64..6851f282c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 4ff24f968..e773c6a01 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -49,7 +49,6 @@ export default { const currentPageName = getPageNameByQueryString(); const labelToLog = getValueToLog(label, valueToLogType); - console.log("PUSHING: ", labelToLog) const eventToBePushed = { 'event': GaEvents.GENERIC_EVENT, 'category': category, From 132f39e2de2446a16ccfc18dbc65ba955527b6b4 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 11:27:23 -0400 Subject: [PATCH 71/84] CSR-762 Rename and move around GA logic --- src/App.vue | 6 ++-- .../base-input-button/base-input-button.vue | 8 ++--- src/helpers/analytics-helper.js | 34 ------------------- src/helpers/input-button-focus-helper.js | 34 +++++++++++++++++++ 4 files changed, 41 insertions(+), 41 deletions(-) delete mode 100644 src/helpers/analytics-helper.js create mode 100644 src/helpers/input-button-focus-helper.js diff --git a/src/App.vue b/src/App.vue index e43e85c84..7c7bfd559 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,17 +5,17 @@ name="route-fade" mode="out-in"> - + diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 71da03d85..1fb1f9bc5 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,7 +26,7 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; -import { handleInputFocus, handleInputBlur } from "@/helpers/analytics-helper"; +import { handleButtonComponentFocus, handleInputComponentBlur } from "@/helpers/input-button-focus-helper"; import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { @@ -100,14 +100,14 @@ export default { this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { - handleInputFocus({ + handleButtonComponentFocus({ groupName: this.groupName, }); }, handleBlur() { - handleInputBlur({ + handleInputComponentBlur({ groupName: this.groupName, - onFocusCallback: this.handlePushClickEventToGACheck, + onButtonQuestionLostFocusCallback: this.handlePushClickEventToGACheck, }); }, handlePushClickEventToGACheck(source) { diff --git a/src/helpers/analytics-helper.js b/src/helpers/analytics-helper.js deleted file mode 100644 index b03d86191..000000000 --- a/src/helpers/analytics-helper.js +++ /dev/null @@ -1,34 +0,0 @@ -let lastFocusedInputGroupName = ""; -let onFocusCallback = null; - -const handleChildFocus = (e) => { - const targetType = e.target.type; - if (targetType !== "radio" && targetType !== "checkbox") { - handleInputFocus({ - groupName: null, - }); - } -} - -const handleInputFocus = (e) => { - if ( - e && - lastFocusedInputGroupName !== e.groupName && - onFocusCallback - ) { - onFocusCallback(); - } -} - -const handleInputBlur = (e) => { - if (e) { - lastFocusedInputGroupName = e.groupName; - onFocusCallback = e.onFocusCallback; - } -} - -export { - handleChildFocus, - handleInputFocus, - handleInputBlur -} \ No newline at end of file diff --git a/src/helpers/input-button-focus-helper.js b/src/helpers/input-button-focus-helper.js new file mode 100644 index 000000000..77bd175ad --- /dev/null +++ b/src/helpers/input-button-focus-helper.js @@ -0,0 +1,34 @@ +let lastFocusedInputGroupName = ""; +let onButtonQuestionLostFocusCallback = null; + +const handleAnyComponentFocus = (e) => { + const targetType = e.target.type; + if (targetType !== "radio" && targetType !== "checkbox") { + invokeButtonQuestionLostFocusCallback(); + } +}; + +const handleButtonComponentFocus = (e) => { + if (e && lastFocusedInputGroupName !== e.groupName) { + invokeButtonQuestionLostFocusCallback(); + } +}; + +const handleInputComponentBlur = (e) => { + if (e) { + lastFocusedInputGroupName = e.groupName; + onButtonQuestionLostFocusCallback = e.onButtonQuestionLostFocusCallback; + } +}; + +const invokeButtonQuestionLostFocusCallback = () => { + if (onButtonQuestionLostFocusCallback) { + onButtonQuestionLostFocusCallback(); + } +}; + +export { + handleAnyComponentFocus, + handleButtonComponentFocus, + handleInputComponentBlur, +}; From ce5727a75081032749268dbcebeaeea8883d5456 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 11:33:55 -0400 Subject: [PATCH 72/84] CSR-762 Name change, add comments --- src/App.vue | 2 +- .../base-input-button/base-input-button.vue | 2 +- ...on-focus-helper.js => button-question-focus-helper.js} | 8 ++++++++ 3 files changed, 10 insertions(+), 2 deletions(-) rename src/helpers/{input-button-focus-helper.js => button-question-focus-helper.js} (70%) diff --git a/src/App.vue b/src/App.vue index 7c7bfd559..9ee03e8dd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,7 +11,7 @@