Merge pull request #6345 from Countly/QT-310

[QT-310] Added data-test-id for event case.

Author: can-angun

plugins/data-manager/frontend/public/localization/data-manager.properties

@@ -231,7 +231,6 @@ data-manager.last-modified-on = Last modified on
 data-manager.description = Description
 data-manager.first-triggered = First Triggered
 data-manager.segment-name = Segment Name
-data-manager.last-modified = Last modıfıed
 data-manager.delete-event-permanently = Delete event(s) permanently?
 data-manager.delete-event-warning = Warning: This is not reversible
 data-manager.delete-events = Delete Events

plugins/data-manager/frontend/public/templates/create-event-drawer-components.html

@@ -2,23 +2,25 @@
 	<div class="data-manager-create-event__segment bu-my-4 bg-cool-gray-10">
         <div class="bu-px-4 bu-py-5">
             <div class="bu-level">
-                <div class="text-small text-heading bu-level-left bu-level-item text-uppercase bu-mb-3">{{i18n('data-manager.segmentation.details')}}</div>
-                <div @click="removeSegment" class="bu-is-clickable text-small bu-level-item bu-level-right color-red-100">{{i18n('data-manager.segmentation.delete')}}</div>
+                <div :data-test-id="'event-drawer-event-segmentation-segmentation-details-label-' + segmentIndex" class="text-small text-heading bu-level-left bu-level-item text-uppercase bu-mb-3">{{i18n('data-manager.segmentation.details')}}</div>
+                <div :data-test-id="'event-drawer-event-segmentation-delete-segmentation-button-' + segmentIndex" @click="removeSegment" class="bu-is-clickable text-small bu-level-item bu-level-right color-red-100">{{i18n('data-manager.segmentation.delete')}}</div>
             </div>
 
-            <cly-form-field :label="i18n('data-manager.segmentation.key')">
+            <cly-form-field :test-id= "'event-drawer-event-segmentation-segmentation-key-label-'+ segmentIndex" :label="i18n('data-manager.segmentation.key')">
                 <el-input
+                :test-id= "'event-drawer-event-segmentation-event-segmentation-key-input-' + segmentIndex"
                 class="bu-pt-1"
                 v-model="segment.name" 
 		        :placeholder="i18n('data-manager.segmentation.enter.key')">
 		        </el-input>
             </cly-form-field>
 
-            <cly-form-field class="bu-pt-1" :label="i18n('data-manager.segmentation.type')">
-                <el-select style="width: 280px;" v-model="segment.type" :placeholder="i18n('data-manager.segmentation.select.type')">
+            <cly-form-field :test-id= "'event-drawer-event-segmentation-segmentation-type-label-' + segmentIndex" class="bu-pt-1" :label="i18n('data-manager.segmentation.type')">
+                <el-select :test-id="'event-drawer-event-segmentation-segmentation-dropdown-' +segmentIndex" style="width: 280px;" v-model="segment.type" :placeholder="i18n('data-manager.segmentation.select.type')">
                     <el-option
+                      :test-id="'event-drawer-event-segmentation-event-segmentation-type-' + segmentIndex"
                       class="bu-pt-1"
-                      v-for="item in dataTypes"
+                      v-for="(item, idx) in dataTypes"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
@@ -28,14 +30,15 @@
 
 
             <div class="bu-mt-3">
-                <el-checkbox v-model="segment.required" size="medium">
-                    <span class="text-smallish color-cool-gray-100">{{i18n('data-manager.segmentation.required')}}</span>
+                <el-checkbox :test-id="'event-drawer-event-segmentation-required-segmentation-checkbox-' + segmentIndex" v-model="segment.required" size="medium">
+                    <span :test-id="'event-drawer-event-segmentation-required-segmentation-checkbox-label-' + segmentIndex" class="text-smallish color-cool-gray-100">{{i18n('data-manager.segmentation.required')}}</span>
                 </el-checkbox>
             </div>
 
             <div v-if="segment.required" class="text-medium text-heading">
                 <cly-form-field :label="i18n('data-manager.segmentation.description')" class="bu-pb-0">
                     <el-input
+                    :data-test-id="'event-drawer-event-segmentation-required-segmentation-description-input-' + segmentIndex"
                     class="bu-pt-1"
                     v-if="segment.required"
                     type="textarea"
@@ -63,6 +66,7 @@
 			v-model="segments[i]">
 		</data-manager-create-segment-input>
 		<el-button
+            data-test-id="event-drawer-event-segmentation-add-event-segmentation-button"
             class="bg-light-blue-100 color-blue-100"
 			size="small"
 			type="text"

plugins/data-manager/frontend/public/templates/create-events-drawer.html

@@ -8,26 +8,29 @@
     <template v-slot:default="drawerScope">
         <cly-form-step id="create-event-form" name="First Step">
 
-            <cly-form-field :label="i18n('data-manager.event.name')">
+            <cly-form-field test-id="event-drawer-event-name-label" :label="i18n('data-manager.event.name')">
                     <el-input
+                        test-id="event-drawer-event-name-input"
                         v-model="drawerScope.editedObject.name"
                         :placeholder="i18n('data-manager.event.name')">
                     </el-input>
             </cly-form-field>
 
-            <cly-form-field :label="i18n('data-manager.events.key')" rules="required">
+            <cly-form-field test-id="event-drawer-event-key-label" :label="i18n('data-manager.events.key')" rules="required">
                 <el-input
+                test-id="event-drawer-event-key-input"
                 :disabled="drawerScope.editedObject.isEditMode"
                 class="bu-mb-3" 
                 v-model="drawerScope.editedObject.key" 
 			    :placeholder="i18n('data-manager.events.enter-key')">
 			    </el-input>
             </cly-form-field>
 
-            <div class="text-big text-heading bu-mt-2 bu-mb-1">{{i18n('data-manager.events.event-details')}}</div>
+            <div data-test-id="event-drawer-event-details-label" class="text-big text-heading bu-mt-2 bu-mb-1">{{i18n('data-manager.events.event-details')}}</div>
 
-            <cly-form-field :label="i18n('data-manager.events.event-description')" :optional="true">
+            <cly-form-field test-id="event-drawer-event-desc-label" :label="i18n('data-manager.events.event-description')" :optional="true">
                 <el-input
+                data-test-id="event-drawer-event-desc-input"
                 type="textarea"
                 :rows="2"
                 :placeholder="i18n('data-manager.events.enter-event-description')"
@@ -36,8 +39,9 @@
             </cly-form-field>
 
             <div v-if="isDrill">
-                <cly-form-field :label="i18n('data-manager.category')" :optional="true">
+                <cly-form-field test-id="event-drawer-category-label" :label="i18n('data-manager.category')" :optional="true">
                     <cly-select-x
+                        test-id="event-drawer-category-dropdown"
                         class="bu-pt-1"
                         :search-placeholder="i18n('data-manager.search-category')"
                         :placeholder="i18n('data-manager.uncategorized')" 
@@ -52,59 +56,62 @@
 
             <div v-if='drawerScope.editedObject.isEditMode'>
                 <div v-if="isDrill">
-                    <cly-form-field :label="i18n('data-manager.status')">
-                        <el-select class="bu-pt-1" v-model="drawerScope.editedObject.status" >
-                            <el-option v-for="item in statusList" :key="item.value" :value="item.value">
+                    <cly-form-field test-id="event-drawer-status-dropdown-label" :label="i18n('data-manager.status')">
+                        <el-select test-id="event-drawer-status-dropdown" class="bu-pt-1" v-model="drawerScope.editedObject.status" >
+                            <el-option v-for="item in statusList" test-id="event-drawer-status-dropdown" :key="item.value" :value="item.value">
                             </el-option>
                         </el-select>
                     </cly-form-field>
                 </div>
 
-                <cly-form-field :label="i18n('data-manager.visibility')">
-                    <el-select class="bu-pt-1" v-model="drawerScope.editedObject.is_visible" >
-                        <el-option :value=true :label="i18n('data-manager.visible')">
+                <cly-form-field test-id="event-drawer-visibilty-dropdown-label" :label="i18n('data-manager.visibility')">
+                    <el-select test-id="event-drawer-visibilty-dropdown" class="bu-pt-1" v-model="drawerScope.editedObject.is_visible" >
+                        <el-option test-id="event-drawer-visibilty-dropdown" :value=true :label="i18n('data-manager.visible')">
                         </el-option>
-                        <el-option :value=false :label="i18n('data-manager.hidden')">
+                        <el-option test-id="event-drawer-visibilty-dropdown" :value=false :label="i18n('data-manager.hidden')">
                         </el-option>
                     </el-select>
                 </cly-form-field>
 
-                <div class="text-big text-heading bu-mt-4 bu-pt-1">{{i18n('data-manager.events.event-properties')}}</div>
+                <div data-test-id="event-drawer-event-properties-label" class="text-big text-heading bu-mt-4 bu-pt-1">{{i18n('data-manager.events.event-properties')}}</div>
 
-                <cly-form-field class="bu-pt-0" :label="i18n('data-manager.display-name-for-count')" :optional="true" :subheading="i18n('data-manager.display-name-for-count-subheading')">
+                <cly-form-field test-id="event-drawer-display-name-for-count-label" class="bu-pt-0" :label="i18n('data-manager.display-name-for-count')" :optional="true" :subheading="i18n('data-manager.display-name-for-count-subheading')">
                     <el-input
+                    test-id="event-drawer-display-name-for-count-input"
                     v-model="drawerScope.editedObject.count" 
 			        :placeholder="i18n('data-manager.count')">
 			        </el-input>
                 </cly-form-field>
 
-                <cly-form-field :label="i18n('data-manager.display-name-for-sum')" :optional="true" :subheading="i18n('data-manager.display-name-for-sum')">
+                <cly-form-field test-id="event-drawer-display-name-for-sum-label" :label="i18n('data-manager.display-name-for-sum')" :optional="true" :subheading="i18n('data-manager.display-name-for-sum')">
                     <el-input
+                    test-id="event-drawer-display-name-for-sum-input"
                     v-model="drawerScope.editedObject.sum" 
                     :placeholder="i18n('data-manager.sum')">
                     </el-input>
                 </cly-form-field>
 
-                <cly-form-field :label="i18n('data-manager.display-name-for-duration')" :optional="true" :subheading="i18n('data-manager.display-name-for-duration')">
+                <cly-form-field test-id="event-drawer-display-name-for-duration-label" :label="i18n('data-manager.display-name-for-duration')" :optional="true" :subheading="i18n('data-manager.display-name-for-duration')">
                     <el-input
+                    test-id="event-drawer-display-name-for-duration-input"
                     v-model="drawerScope.editedObject.dur" 
                     :placeholder="i18n('data-manager.duration')">
                     </el-input>
                 </cly-form-field>
             </div>
 
             <div v-if="drawerScope.editedObject.isEditMode">
-                <cly-form-field :label="i18n('data-manager.omit-segments')" 
+                <cly-form-field test-id="event-drawer-omit-segments-dropdown-label" :label="i18n('data-manager.omit-segments')" 
                 :tooltip="i18n('data-manager.omit-segments.tooltip')">
-                    <el-select multiple v-model="omitList" >
-                        <el-option v-for="item in drawerScope.editedObject.segments" :key="item.name" :value="item.name">
+                    <el-select test-id="event-drawer-omit-segments-dropdown" multiple v-model="omitList" >
+                        <el-option v-for="item in drawerScope.editedObject.segments" test-id="event-drawer-omit-segments-dropdown" :key="item.name" :value="item.name">
                         </el-option>
                     </el-select>
                 </cly-form-field>
             </div>
 
             <div v-if="isDrill" class="bu-mt-1">
-                <div class="text-big text-heading bu-pt-4">{{i18n('data-manager.event-segmentation')}}</div>
+                <div data-test-id="event-drawer-event-segmentation-label" class="text-big text-heading bu-pt-4">{{i18n('data-manager.event-segmentation')}}</div>
                 <data-manager-create-segment
                 ref="segments"
 			    :max-segments="20"

plugins/data-manager/frontend/public/templates/event-detail.html

@@ -41,7 +41,7 @@ <h3 class="bu-is-capitalized bu-mr-2">{{unescapeHtml(event.name || event.key)}}<
         </template>
         <template v-slot:header-right>
             <div class="bu-mt-6">
-                <el-button v-if="canUserUpdate" @click="handleEdit" size="small" icon="ion-edit">{{i18n('data-manager.edit-event')}}</el-button>
+                <el-button data-test-id="event-detail-page-edit-button" v-if="canUserUpdate" @click="handleEdit" size="small" icon="ion-edit">{{i18n('data-manager.edit-event')}}</el-button>
                 <cly-more-options v-if="canUserDelete" class="bu-ml-2" size="small" @command="handleCommand($event, event.key)">
                     <el-dropdown-item command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                 </cly-more-options>

plugins/data-manager/frontend/public/templates/events-default.html

@@ -43,18 +43,18 @@
                         <a v-bind:href="'#/manage/data-manager/events/events/' + JSON.stringify(rowScope.row.key)" @click="onRowClick(rowScope.row)" class="cly-vue-data-manager__clickable bu-is-clickable color-dark-blue-100">
                             <div :data-test-id="'datatable-manage-events-events-event-name-' + rowScope.$index">{{unescapeHtml(rowScope.row.name || rowScope.row.key || rowScope.row.e)}}</div>
                         </a>
-                        <div v-if="rowScope.row.audit && rowScope.row.audit.userName" class="text-small color-cool-gray-50">Last modified by {{rowScope.row.audit.userName}}</div>
+                        <div v-if="rowScope.row.audit && rowScope.row.audit.userName" :data-test-id="'datatable-manage-events-last-modified-by-label-' + rowScope.$index" class="text-small color-cool-gray-50">Last modified by {{rowScope.row.audit.userName}}</div>
                         <div>
                             <span v-if="isDrill" class="tag-container">
                                 <span v-bind:class="statusClassObject(rowScope.row.status)" class="bu-tag bu-mt-1"> 
                                     <span class="blinker"></span>
                                     <span :data-test-id="'datatable-manage-events-events-status-' + rowScope.$index">{{rowScope.row.status}}</span>
                                 </span>
                             </span>
-                            <span v-if="rowScope.row.is_visible === false" class="cly-vue-data-manager__hidden-icon">
+                            <span v-if="rowScope.row.is_visible === false" :data-test-id="'datatable-manage-events-events-icon-eye-hidden-' + rowScope.$index" class="cly-vue-data-manager__hidden-icon">
                                 <i class="ion-eye-disabled"></i>
                             </span>
-                            <span v-else class="cly-vue-data-manager__hidden-icon"><i class="ion-eye" :data-test-id="'datatable-manage-events-events-ion-eye-' + rowScope.$index"></i></ion-icon></span>
+                            <span v-else class="cly-vue-data-manager__hidden-icon"><i class="ion-eye" :data-test-id="'datatable-manage-events-events-icon-eye-visible-' + rowScope.$index"></i></ion-icon></span>
                             <span v-if="eventTransformationMap && eventTransformationMap[rowScope.row.key]" class="cly-vue-data-manager__transform-icon">
                                 <svg width="12px" height="10px" viewBox="0 0 12 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -99,7 +99,7 @@
                             <div v-if="rowScope.row && rowScope.row.lts">
                                 <div>{{rowScope.row.lastTriggerDate || i18n('data-manager.empty-placeholder') }}</div>
                             </div>
-                            <div v-else>
+                            <div v-else :data-test-id="'datatable-manage-events-events-last-triggered-value-' + rowScope.$index">
                                 {{ i18n('data-manager.empty-placeholder') }}
                             </div>
                         </template>
@@ -186,10 +186,10 @@
     :cancelButtonLabel="i18n('common.no-dont-delete')" 
     :title="i18n('data-manager.delete-events')">
         <template slot-scope="scope">
-            {{i18n('data-manager.delete-event-permanently')}}<br/> 
-            <small class="color-red-100">{{ i18n('data-manager.delete-event-warning') }}</small>
+            <div data-test-id="delete-event-popup-delete-event-permanently-question-label">{{i18n('data-manager.delete-event-permanently')}}<br/></div>
+            <small data-test-id="delete-popup-delete-event-warning-label" class="color-red-100">{{ i18n('data-manager.delete-event-warning') }}</small>
             <ul>
-             <li v-for="ev in deleteQueue"> {{ev.key || ev.e || ev.name}}</li>
+             <li v-for="ev in deleteQueue" data-test-id="delete-event-popup-event-key"> {{ev.key || ev.e || ev.name}}</li>
             </ul>
         </template>
     </cly-confirm-dialog>