Merge pull request #6130 from Countly/QT-278-add-id

[QT-278] Added data test ids to content drawer elements

Author: can-angun

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -378,7 +378,7 @@
                     </el-collapse>  
                 </div>
                 <div v-else>
-                    <div class="cly-vue-content-builder__layout-steps__header text-medium font-weight-bold">{{ header }}</div>
+                    <div class="cly-vue-content-builder__layout-steps__header text-medium font-weight-bold" :data-test-id="'content-drawer-sidebar-step-' + header.toLowerCase().replaceAll(' ', '-')">{{ header }}</div>
                     <slot name="content-builder-layout-steps"></slot>
                 </div>
             </div>
@@ -624,6 +624,11 @@
             value: {
                 default: null,
                 type: [String, Number]
+            },
+            testId: {
+                type: String,
+                default: 'cly-option-swapper-test-id',
+                required: false
             }
         },
 

frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html

@@ -7,6 +7,7 @@
   <div
     v-for="(option, index) in options"
     :key="`cly-option-swapper-option-${index}`"
+    :data-test-id="`cly-option-swapper-option-${testId}-${option.value.toString().toLowerCase()}`"
     v-tooltip="option.tooltip"
     class="cly-option-swapper__option"
     :class="{
@@ -24,4 +25,4 @@
       />
       <span v-else>{{ option.text }}</span>
   </div>
-</div>
+</div>

frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html

@@ -2,6 +2,7 @@
   <div
     v-if="subHeader"
     class="cly-vue-content-builder-sidebar-input__sub-header"
+    :data-test-id="'content-drawer-sidebar-step-' + subHeader.toLowerCase().replaceAll(' ', '-') + '-label'"
   >
     {{ subHeader }}
   </div>
@@ -15,12 +16,14 @@
     <label
       v-if="label"
       class="cly-vue-content-builder-sidebar-input__label"
+      :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label'"
     >
       {{ label }}
       <i
         v-if="isLabelTooltipVisible"
         v-tooltip.left="labelTooltip"
         :class="labelIcon"
+        :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label-tooltip'"
       />
     </label>
     <slot name="content-builder-layout-step">
@@ -38,6 +41,7 @@
         :controls="controlsProp"
         :disabled="disabled"
         :options="options"
+        :test-id="'content-drawer-sidebar-step-' + $attrs.id"
       >
         <template
           v-if="isSuffixVisible"
@@ -88,4 +92,4 @@
       </div>
     </slot>
   </div>
-</div>
+</div>