CSR-762 Add tests, fix some buttonsInfo logic

src/common-components/button-question/button-question.vue

@@ -2,13 +2,9 @@
 <template>
     <div
         :class="
-            isOverflowScrollable
+            isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
-                ? 'button-question button-question-overflow'
-                : 'button-question'
         ">
-        <div
+        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
-            v-if="questionText && answers && answers.length > 0"
-            class="question-text d-flex">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
@@ -51,8 +47,7 @@
                             :textPosition="textPosition"
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
-                            v-model="selectedValues"
+                            v-model="selectedValues" />
-                            />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
                             <div
@@ -68,9 +63,7 @@
             </fieldset>
         </div>
         <div class="row form-test-error mt-1">
-            <error-message
+            <error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
-                :name="formatString(groupName)"
-                v-if="!suppressError"></error-message>
         </div>
     </div>
 </template>
@@ -164,31 +157,19 @@ export default {
 
             return classes;
         },
-        getColLength() {
-            if (this.isWide) {
-                return "12";
-            } else {
-                return "";
-            }
-        },
         buttonsInfo() {
-            return (Array.isArray(this.answers) ? this.answers : [])?.map(
+            return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
-                (answer) => ({
+                buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
-                    buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
+                altText: answer.altText ?? (answer.Name ? answer.Name : answer),
-                    altText:
+                buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
-                        answer.altText ?? (answer.Name ? answer.Name : answer),
+                buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
-                    buttonLabelSubCopy:
+                buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                        answer.buttonLabelSubCopy ?? answer.SubText,
+                groupName: this.formatString(this.groupName),
-                    buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
+                value:
-                    buttonImageId: answer.buttonImageId ?? answer.ImageId,
+                    answer.value ??
-                    groupName: this.formatString(this.groupName),
+                    (this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
-                    value:
+                    (typeof answer === "string" ? answer : null),
-                        answer.value ??
+            }));
-                        (this.useTextForValue
-                            ? answer.Text
-                            : answer.Name ?? answer),
-                })
-            );
         },
         selectedValues: {
             get() {
@@ -196,30 +177,12 @@ export default {
             },
             set(selectedAnswers) {
                 this.$emit("update:modelValue", selectedAnswers);
-            }
+            },
-        }
+        },
     },
     methods: {
         formatString(str) {
-            return str?.replace(" ", "-");
+            return str?.replaceAll(" ", "-");
-        },
-        getValue(answer) {
-            if (this.useTextForValue) {
-                return answer.Text;
-            }
-            return answer.Name ? answer.Name : answer;
-        },
-        getAnswerString(answer, prop = "Name") {
-            switch (typeof answer) {
-                case "string":
-                case "number":
-                case "boolean":
-                    return this.formatString(answer.toString());
-                default:
-                    return answer[prop]
-                        ? this.formatString(answer[prop])
-                        : this.formatString(answer.toString());
-            }
         },
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;

src/router/index.js

@@ -239,6 +239,8 @@ function navigateToUrl(url, optionalQuery = {}) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
 
+  externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
+
   window.location.assign(externalUrl);
 }