Merge pull request #6675 from Countly/QT-332

[QT-332] Added data-test-id for conditions-drawer, conditions and parameters-drawer html files

Author: can-angun

plugins/remote-config/frontend/public/templates/conditions-drawer.html

@@ -5,12 +5,13 @@
   :title="title"
   ref="clyDrawer"
   :saveButtonLabel="saveButtonLabel"
-  v-bind="controls">
+  v-bind="controls" test-id="condition-drawer">
   <template v-slot:default="drawerScope">
     <cly-form-step id="conditions-drawer">
       <div class="cly-vue-drawer-step__section">
-        <cly-form-field name="condition-name" v-slot="validation" :subheading="i18n('placeholder.condition-name')" :label="i18n('remote-config.condition-name')" rules="required|regex:^[a-zA-Z0-9 ]+$">
+        <cly-form-field name="condition-name" test-id="condition-drawer-name-label" v-slot="validation" :subheading="i18n('placeholder.condition-name')" :label="i18n('remote-config.condition-name')" rules="required|regex:^[a-zA-Z0-9 ]+$">
           <el-input
+            test-id="condition-drawer-name-input"
             v-model="drawerScope.editedObject.condition_name"
             :placeholder="i18n('remote-config.condition.name.placeholder')">
           </el-input>
@@ -19,14 +20,15 @@
           </div>
         </cly-form-field>
         <div class="bu-pt-3 bu-mt-2 bu-pb-1">
-          <el-checkbox class="text-smallish"
+          <el-checkbox test-id="condition-drawer-use-desc-checkbox" class="text-smallish"
             v-bind:label="i18n('remote-config.use.description')"
             v-model="useDescription"
             >
           </el-checkbox>
           <div class="bu-pt-3 cly-vue-remote-config-conditions-drawer" v-if="useDescription">
-            <cly-form-field name="description" :label="i18n('remote-config.conditions.description')" rules="required">
+            <cly-form-field test-id="condition-drawer-description-label" name="description" :label="i18n('remote-config.conditions.description')" rules="required">
               <textarea
+                data-test-id="condition-drawer-description-input"
                 class="input"
                 v-model="drawerScope.editedObject.condition_description"
                 :placeholder="i18n('remote-config.conditions.description.placeholder')">
@@ -35,7 +37,7 @@
           </div>
         </div>
         <div class="bu-py-4">
-          <div class="text-big font-weight-bold bu-mb-1">
+          <div data-test-id="condition-drawer-color-tag-label" class="text-big font-weight-bold bu-mb-1">
             {{i18n('remote-config.condition.color.tag')}}
           </div>
           <cly-color-tag :tags="colorTag"  :defaultTag="defaultTag" v-model="selectedTag"></cly-color-tag>
@@ -53,12 +55,13 @@
           </el-input>
         </div>
         <div class="bu-pt-4">
-          <div class="font-weight-bold text-big bu-mb-1">
+          <div data-test-id="condition-drawer-condition-definition-label" class="font-weight-bold text-big bu-mb-1">
             {{i18n('remote-config.condition-definition')}}
           </div>
           <div>
             <validation-provider name="condition-definition" rules="required" v-slot="v">
-            <cly-qb-segmentation 
+            <cly-qb-segmentation
+              test-id="condition-drawer" 
               ref="qb"
               :class="{'is-error': v.errors.length > 0}"
               :additional-properties="additionalProperties"

plugins/remote-config/frontend/public/templates/conditions.html

@@ -4,34 +4,34 @@
   >
     <template v-slot:header-right>
       <div class="bu-level-item" v-if="hasCreateRight">
-        <el-button @click="create" type="success" size="small" icon="el-icon-circle-plus">Add Condition</el-button>
+        <el-button data-test-id="add-condition-button" @click="create" type="success" size="small" icon="el-icon-circle-plus">Add Condition</el-button>
       </div>
     </template>
   </cly-header>
   <cly-main>
-    <cly-datatable-n :rows="tableRows" :force-loading="isTableLoading" class="cly-vue-remote-config-conditions-table"  :row-class-name="tableRowClassName">
+    <cly-datatable-n test-id="condition" :rows="tableRows" :force-loading="isTableLoading" class="cly-vue-remote-config-conditions-table"  :row-class-name="tableRowClassName">
       <template v-slot="scope">
         <el-table-column  prop="condition_name" :label="i18n('remote-config.condition-name')" sortable="custom">
           <template v-slot="rowScope">
             <div>
-              <div class="cly-vue-remote-config-conditions-drawer__margin-bottom"> {{rowScope.row.condition_name}}</div>
-              <div class="color-cool-gray-40 text-small">  {{rowScope.row.used_in_parameters}} {{i18n('remote-config.conditions.parameter.affected')}}</div>
+              <div :data-test-id="'datatable-condition-name-' + rowScope.$index" class="cly-vue-remote-config-conditions-drawer__margin-bottom"> {{rowScope.row.condition_name}}</div>
+              <div :data-test-id="'datatable-condition-parameter-affect-' + rowScope.$index" class="color-cool-gray-40 text-small">  {{rowScope.row.used_in_parameters}} {{i18n('remote-config.conditions.parameter.affected')}}</div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="condition_description" :label="i18n('remote-config.description')">
+        <el-table-column test-id="condition" prop="condition_description" :label="i18n('remote-config.description')">
           <template v-slot:default="rowScope">
-            {{displayDescription(rowScope.row.condition_description)}}
+            <div :data-test-id="'datatable-condition-description-' + rowScope.$index"> {{displayDescription(rowScope.row.condition_description)}}</div>
           </template>
         </el-table-column>
-        <el-table-column prop="condition_definition" :label="i18n('remote-config.definition')">
+        <el-table-column test-id="condition" prop="condition_definition" :label="i18n('remote-config.definition')">
           <template v-slot:default="rowScope">
-            <div v-html="rowScope.row.condition_definition"></div>
+            <div :data-test-id="'datatable-condition-description-' + rowScope.$index" v-html="rowScope.row.condition_definition"></div>
           </template>
         </el-table-column>
-        <el-table-column prop="seed_value" :label="i18n('remote-config.seed-value')">
+        <el-table-column test-id="condition" prop="seed_value" :label="i18n('remote-config.seed-value')">
           <template v-slot:default="rowScope">
-            {{rowScope.row.seed_value || "Default"}}
+            <div :data-test-id="'datatable-condition-seed-value-' + rowScope.$index"> {{rowScope.row.seed_value || "Default"}}</div>
           </template>
         </el-table-column>
         <el-table-column type="options" v-if="hasUpdateRight || hasDeleteRight">

plugins/remote-config/frontend/public/templates/parameters-drawer.html

@@ -26,14 +26,15 @@
           </div>
         </cly-form-field>
         <div class="bu-pt-3 bu-mt-2 bu-pb-1">
-          <el-checkbox class="text-smallish"
+          <el-checkbox test-id="parameter-description" class="text-smallish"
             v-bind:label="i18n('remote-config.use.description')"
             v-model="showDescription"
             >
           </el-checkbox>
           <div class="bu-pt-3 cly-vue-remote-config-conditions-drawer" v-if="showDescription">
-            <cly-form-field name="description" :label="i18n('remote-config.parameter.description')" rules="required">
+            <cly-form-field test-id="parameter-description" name="description" :label="i18n('remote-config.parameter.description')" rules="required">
               <textarea
+                data-test-id="parameter-description-input"
                 class="input"
                 v-model="drawerScope.editedObject.description"
                 :placeholder="i18n('remote-config.parameter.description.placeholder')">
@@ -77,6 +78,7 @@
               </remote-config-add-condition>
             </draggable>
             <cly-select-x
+              test-id="add-value-for-condition"
               ref="selectX"
               @change="handleSelect"
               v-model="currentConditionValue"
@@ -91,7 +93,7 @@
               </template>
               <template v-slot:action>
                 <div class="bu-ml-3">
-                  <el-button type="success" size="small" @click="showConditionDialog" icon="el-icon-circle-plus">{{i18n('remote-config.parameter.conditions.new.condition')}}
+                  <el-button data-test-id="new-condition-button" type="success" size="small" @click="showConditionDialog" icon="el-icon-circle-plus">{{i18n('remote-config.parameter.conditions.new.condition')}}
                   </el-button>
                 </div>
               </template>