Skip to content

Commit

Permalink
[SER-787] Adding data-test-id attribute to elements on the Ratings Tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@pnrgenc
pnrgenc committed Sep 7, 2023
1 parent 101db86 commit ad591ff
Show file tree
Hide file tree
Showing 15 changed files with 146 additions and 106 deletions.
5 changes: 5 additions & 0 deletions frontend/express/public/javascripts/countly/vue/components/datatable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -941,6 +941,11 @@
type: Boolean,
default: false,
required: false
},
testId: {
type: String,
default: 'cly-datatable-n-test-id',
required: false
}
},
data: function() {
Expand Down
22 changes: 14 additions & 8 deletions frontend/express/public/javascripts/countly/vue/components/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@
<slot name="trigger">\
<cly-input-dropdown-trigger\
ref="trigger"\
:test-id="testId"\
:disabled="false"\
:adaptive-length="adaptiveLength"\
:focused="dropdown.focused"\
Expand All @@ -350,13 +351,13 @@
<div class="cly-multi-select__body">\
<div>\
<div class="cly-multi-select__title-wrapper">\
<span class="cly-multi-select__title">{{title}}</span>\
<el-button class="cly-multi-select__reset" @click="reset" type="text">{{resetLabel}}</el-button>\
<span class="cly-multi-select__title" :data-test-id="testId + \'-title\'">{{title}}</span>\
<el-button class="cly-multi-select__reset" :data-test-id="testId + \'-reset\'" @click="reset" type="text">{{resetLabel}}</el-button>\
</div>\
<table v-for="field in fields" :key="field.key">\
<tr v-if="showThis(field.key)" class="cly-multi-select__field">{{field.label}}</tr>\
<tr v-if="showThis(field.key)" class="cly-multi-select__field"><span :data-test-id="testId + \'-\' + field.label.toString().replace(\' \', \'-\').toLowerCase() + \'-label\'">{{field.label}}</span></tr>\
<tr v-if="\'items\' in field && showThis(field.key)">\
<cly-select-x :options="field.items" :show-search="field.searchable" :searchable="field.searchable" class="cly-multi-select__field-dropdown" :width="selectXWidth" :placeholder="optionLabel(field, unsavedValue[field.key])" v-model="unsavedValue[field.key]" style="margin-top:2px">\
<cly-select-x :test-id="testId + \'-\' + field.label.toString().replace(\' \', \'-\').toLowerCase() + \'-input\'" :options="field.items" :show-search="field.searchable" :searchable="field.searchable" class="cly-multi-select__field-dropdown" :width="selectXWidth" :placeholder="optionLabel(field, unsavedValue[field.key])" v-model="unsavedValue[field.key]" style="margin-top:2px">\
</cly-select-x>\
</tr>\
<tr v-else-if="\'options\' in field">\
Expand All @@ -375,7 +376,7 @@
</table>\
</div>\
<div class="cly-multi-select__controls">\
<el-button v-bind="$attrs" class="el-button el-button--secondary el-button--small" @click="close">{{cancelLabel}}</el-button>\
<el-button :data-test-id="testId + \'-cancel-button\'" v-bind="$attrs" class="el-button el-button--secondary el-button--small" @click="close">{{cancelLabel}}</el-button>\
<el-button v-bind="$attrs" class="el-button el-button--success el-button--small" @click="save">{{confirmLabel}}</el-button>\
</div>\
</div>\
Expand Down Expand Up @@ -413,7 +414,8 @@
return [];
}
},
title: {type: String, default: "Filter Parameters"}
title: {type: String, default: "Filter Parameters"},
testId: {type: String, default: 'cly-multi-select-test-id'}
},
computed: {
optionLabel: function() {
Expand Down Expand Up @@ -518,8 +520,8 @@
template: '<cly-dropdown class="cly-vue-more-options" ref="dropdown" :placement="placement" :disabled="disabled" v-on="$listeners">\
<template v-slot:trigger>\
<slot name="trigger">\
<el-button :size="size" :icon="icon" :type="type">\
<span v-if="text">{{text}}</span>\
<el-button :data-test-id="testId + \'-more-option-button\'" :size="size" :icon="icon" :type="type">\
<span :data-test-id="testId + \'-more-option-text\'" v-if="text">{{text}}</span>\
</el-button>\
</slot>\
</template>\
Expand Down Expand Up @@ -553,6 +555,10 @@
type: String,
default: 'bottom-end'
},
testId: {
type: String,
default: 'cly-more-options-test-id'
}
},
mounted: function() {
this.$on('menu-item-click', this.handleMenuItemClick);
Expand Down
20 changes: 11 additions & 9 deletions frontend/express/public/javascripts/countly/vue/components/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,8 @@
color: {type: [String, Function, Array], default: ''},
numberClasses: {type: String, default: 'bu-is-flex bu-is-align-items-baseline'},
boxType: {type: Number, default: -1},
tooltip: {type: String, default: ''}
tooltip: {type: String, default: ''},
testId: {type: String, default: "cly-metric-card-test-id"}
},
computed: {
formattedNumber: function() {
Expand Down Expand Up @@ -260,12 +261,12 @@
<cly-progress-donut class="bu-pr-4 bu-is-flex" v-if="isPercentage" :color="color" :percentage="number"></cly-progress-donut>\
<div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-space-between has-ellipsis">\
<div class="bu-is-flex bu-is-align-items-center">\
<span class="text-medium has-ellipsis" v-tooltip="label"><slot>{{label}}</slot></span>\
<cly-tooltip-icon v-if="tooltip.length > 0" class="bu-is-flex-grow-1 bu-ml-1" :tooltip="tooltip"></cly-tooltip-icon>\
<span :data-test-id="testId + \'-metric-card-label\'" class="text-medium has-ellipsis" v-tooltip="label"><slot>{{label}}</slot></span>\
<cly-tooltip-icon :data-test-id="testId + \'-metric-card-tooltip\'" v-if="tooltip.length > 0" class="bu-is-flex-grow-1 bu-ml-1" :tooltip="tooltip"></cly-tooltip-icon>\
</div>\
<div :class=numberClasses>\
<h2><slot name="number">{{formattedNumber}}</slot></h2>\
<div class="bu-pl-2 bu-is-flex-grow-1"><slot name="description"><span class="text-medium">{{description}}</span></slot></div>\
<h2 :data-test-id="testId + \'-metric-card-number\'"><slot name="number">{{formattedNumber}}</slot></h2>\
<div class="bu-pl-2 bu-is-flex-grow-1"><slot name="description"><span :data-test-id="testId + \'-metric-card-description\'" class="text-medium">{{description}}</span></slot></div>\
</div>\
</div>\
</div>\
Expand Down Expand Up @@ -1033,7 +1034,8 @@
'bu-py-6': true
};
}
}
},
testId: {type: String, default: "cly-empty-view"}
},
data: function() {
return {};
Expand All @@ -1048,15 +1050,15 @@
template: ' <div :style="topStyle" :class="[\'bu-is-flex bu-is-flex-direction-column bu-is-align-items-center bu-is-justify-content-center\', classes]" style="height: 100%;opacity: 0.6">\
<slot name="icon">\
<div>\
<img :src="image"/>\
<img :data-test-id="testId + \'-empty-logo\'" :src="image"/>\
</div>\
</slot>\
<div class="bu-mt-2">\
<slot name="title">\
<h4 class="color-cool-gray-100 bu-has-text-centered">{{title}}</h4>\
<h4 :data-test-id="testId + \'-empty-title\'" class="color-cool-gray-100 bu-has-text-centered">{{title}}</h4>\
</slot>\
<slot name="subTitle">\
<div class="bu-mt-1 text-small color-cool-gray-50 bu-has-text-centered">{{subTitle}}</div>\
<div :data-test-id="testId + \'-empty-subtitle\'" class="bu-mt-1 text-small color-cool-gray-50 bu-has-text-centered">{{subTitle}}</div>\
</slot>\
</div>\
</div>',
Expand Down
6 changes: 5 additions & 1 deletion frontend/express/public/javascripts/countly/vue/components/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,10 @@
persistColumnOrderKey: {
type: String,
default: null
},
testId: {
type: String,
default: 'cly-checklistbox-test-id',
}
},
data: function() {
Expand Down Expand Up @@ -488,7 +492,7 @@
:key="option.value"\
v-for="option in sortedOptions">\
<div v-if="sortable" class="drag-handler"><img src="images/icons/drag-icon.svg" /></div>\
<el-checkbox :label="option.value" v-tooltip="option.label" :key="option.value" :disabled="(disableNonSelected && !innerValue.includes(option.value)) || option.disabled">{{option.label}}</el-checkbox>\
<el-checkbox :test-id="testId + \'-\'" :label="option.value" v-tooltip="option.label" :key="option.value" :disabled="(disableNonSelected && !innerValue.includes(option.value)) || option.disabled">{{option.label}}</el-checkbox>\
</div>\
</draggable>\
</el-checkbox-group>\
Expand Down
6 changes: 3 additions & 3 deletions frontend/express/public/javascripts/countly/vue/components/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,8 @@
v-if="(!tab.type) || (tab.type === \'mobile\' && !apps[app_id].type) || (apps[app_id].type === tab.type)"\
>\
<slot :name="tab.name" :tab="tab">\
<a v-if=\'tab.route\' :href="tab.route"><span>{{ i18n(tab.title) }}</span></a>\
<span v-else>{{ i18n(tab.title) }}</span>\
<a v-if=\'tab.route\' :href="tab.route" :data-test-id="tab.dataTestId + \'-link\'"><span :data-test-id="tab.dataTestId + \'-title\'">{{ i18n(tab.title) }}</span></a>\
<span :data-test-id="tab.dataTestId + \'-title\'" v-else>{{ i18n(tab.title) }}</span>\
</slot>\
<div class="bu-is-inline-block" v-if="tab.name === customIcon.implementedTab" v-html="customIcon.iconTemplate"></div>\
</div>\
Expand All @@ -210,4 +210,4 @@
</div>'
}));

}(window.countlyVue = window.countlyVue || {}));
}(window.countlyVue = window.countlyVue || {}));
35 changes: 27 additions & 8 deletions frontend/express/public/javascripts/countly/vue/components/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1890,6 +1890,10 @@
default: false,
required: false
},
testId: {
type: String,
default: 'cly-chart-header-test-id',
}
},
data: function() {
return {
Expand Down Expand Up @@ -1979,9 +1983,9 @@
<div class="bu-level-item" v-if="(selectedChartType === \'line\') && (!hideNotation && !isZoom)">\
<add-note :category="this.category" @refresh="refresh"></add-note>\
</div>\
<cly-more-options v-if="!isZoom && (showDownload || showZoom)" class="bu-level-item" size="small" @command="handleCommand($event)">\
<el-dropdown-item v-if="showDownload" command="download"><i class="cly-icon-btn cly-icon-download bu-mr-3"></i>Download</el-dropdown-item>\
<el-dropdown-item v-if="showZoom" command="zoom"><i class="cly-icon-btn cly-icon-zoom bu-mr-3"></i>Zoom In</el-dropdown-item>\
<cly-more-options :test-id="testId + \'-cly-chart-more-dropdown\'" v-if="!isZoom && (showDownload || showZoom)" class="bu-level-item" size="small" @command="handleCommand($event)">\
<el-dropdown-item :data-test-id="testId + \'-download-button\'" v-if="showDownload" command="download"><i class="cly-icon-btn cly-icon-download bu-mr-3"></i>Download</el-dropdown-item>\
<el-dropdown-item :data-test-id="testId + \'-more-zoom-button\'" v-if="showZoom" command="zoom"><i class="cly-icon-btn cly-icon-zoom bu-mr-3"></i>Zoom In</el-dropdown-item>\
</cly-more-options>\
<zoom-interactive @zoom-reset="onZoomReset" :is-zoom="isZoom" @zoom-triggered="onZoomTrigger" ref="zoom" v-if="showZoom" :echartRef="echartRef" class="bu-level-item"></zoom-interactive>\
</div>\
Expand All @@ -2001,6 +2005,10 @@
},
position: {
type: String
},
testId: {
type: String,
default: "secondary-legend-test-id"
}
},
computed: {
Expand Down Expand Up @@ -2046,8 +2054,8 @@
:class="[\'cly-vue-chart-legend__s-series\',\
{\'cly-vue-chart-legend__s-series--deselected\': item.status === \'off\'}]"\
@click="onClick(item, index)">\
<div class="cly-vue-chart-legend__s-rectangle" :style="{backgroundColor: item.displayColor}"></div>\
<div class="cly-vue-chart-legend__s-title has-ellipsis">{{item.label || item.name}}</div>\
<div :data-test-id="testId + \'-legend-icon\'" class="cly-vue-chart-legend__s-rectangle" :style="{backgroundColor: item.displayColor}"></div>\
<div :data-test-id="testId + \'-legend-label\'" class="cly-vue-chart-legend__s-title has-ellipsis">{{item.label || item.name}}</div>\
<div class="cly-vue-chart-legend__s-percentage" v-if="item.percentage">{{item.percentage}}%</div>\
</div>\
</vue-scroll>\
Expand Down Expand Up @@ -2119,6 +2127,10 @@
seriesType: {
type: String,
default: ""
},
testId: {
type: String,
default: "custom-legend-test-id"
}
},
data: function() {
Expand Down Expand Up @@ -2214,6 +2226,7 @@
</template>\
<template v-if="options.type === \'secondary\'">\
<secondary-legend\
:testId="testId"\
:data="legendData"\
:position="options.position"\
:onClick="onLegendClick">\
Expand Down Expand Up @@ -2606,6 +2619,11 @@
type: Boolean,
default: true,
required: false
},
testId: {
type: String,
default: "cly-chart-bar-test-id",
required: false
}
},
components: {
Expand All @@ -2624,7 +2642,7 @@
},
template: '<div class="cly-vue-chart" :class="chartClasses" :style="chartStyles">\
<div class="cly-vue-chart__echart bu-is-flex bu-is-flex-direction-column bu-is-flex-grow-1 bu-is-flex-shrink-1" style="min-height: 0">\
<chart-header :chart-type="\'bar\'" ref="header" v-if="!isChartEmpty" @series-toggle="onSeriesChange" :show-zoom="showZoom" :show-toggle="showToggle" :show-download="showDownload">\
<chart-header :chart-type="\'bar\'" ref="header" v-if="!isChartEmpty" :test-id="testId" @series-toggle="onSeriesChange" :show-zoom="showZoom" :show-toggle="showToggle" :show-download="showDownload">\
<template v-for="item in forwardedSlots" v-slot:[item]="slotScope">\
<slot :name="item" v-bind="slotScope"></slot>\
</template>\
Expand All @@ -2642,14 +2660,15 @@
@datazoom="onDataZoom">\
</echarts>\
<div class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-center" v-if="isChartEmpty && !isLoading">\
<cly-empty-chart :classes="{\'bu-py-0\': true}"></cly-empty-chart>\
<cly-empty-chart :test-id="testId" :classes="{\'bu-py-0\': true}"></cly-empty-chart>\
</div>\
</div>\
</div>\
<custom-legend\
ref="legend"\
:options="legendOptions"\
:seriesType="seriesType"\
:testId="testId"\
v-if="legendOptions.show && !isChartEmpty">\
</custom-legend>\
</div>'
Expand Down Expand Up @@ -3434,4 +3453,4 @@
template: CV.T('/javascripts/countly/vue/templates/worldmap.html')
}));

}(window.countlyVue = window.countlyVue || {}));
}(window.countlyVue = window.countlyVue || {}));
Loading

0 comments on commit ad591ff

Please sign in to comment.