Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SER-787] Adding data-test-id attribute to elements on the Rating-Drawer #4510

Merged
merged 4 commits into from
Sep 7, 2023
Merged

[SER-787] Adding data-test-id attribute to elements on the Rating-Drawer #4510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f881515
[SER-787] Adding data-test-id attribute to elements on the Rating-Drawer
pnrgenc Sep 7, 2023
6862ffd
Merge branch 'next' into SER-787-drawer
pnrgenc Sep 7, 2023
d1a576b
[SER-787] Adding test-id to inputs
pnrgenc Sep 7, 2023
e61b38c
[SER-787] Added missing decodeHtml to listbox
pnrgenc Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/express/public/javascripts/countly/vue/components/date.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1001,6 +1001,11 @@
type: Boolean,
default: false,
required: false
},
testId: {
type: String,
default: "cly-datepicker-test-id",
required: false
}
},
data: function() {
Expand Down
4 changes: 4 additions & 0 deletions frontend/express/public/javascripts/countly/vue/components/drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
return value >= 1 && value <= 12;
}
},
testId: {
type: String,
default: "drawer-test-id",
}
},
data: function() {
return {
Expand Down
4 changes: 4 additions & 0 deletions frontend/express/public/javascripts/countly/vue/components/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
placeholder: {type: String, default: ''},
disabled: {type: Boolean, default: false},
adaptiveLength: {type: Boolean, default: false},
testId: {type: String, default: 'cly-input-dropdown-trigger'}
},
computed: {
iconClass: function() {
Expand Down Expand Up @@ -59,6 +60,9 @@
},
template: '<component\
:is="componentName"\
:data-test-id="testId"\
:test-id="testId"\
class="cly-input-dropdown-trigger"\
ref="elInput"\
:class="classes"\
v-bind="$attrs"\
Expand Down
4 changes: 3 additions & 1 deletion frontend/express/public/javascripts/countly/vue/components/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,7 @@
Vue.component("cly-event-select", countlyBaseComponent.extend({
mixins: [countlyVue.mixins.i18n],
template: '<cly-select-x\
:test-id="testId"\
pop-class="cly-event-select"\
all-placeholder="All Events"\
search-placeholder="Search in Events"\
Expand All @@ -524,7 +525,7 @@
:value="selectScope.activeTabId"\
@input="selectScope.updateTab"\
size="small">\
<el-radio-button v-for="tab in selectScope.tabs" :key="tab.name" :label="tab.name">{{tab.label}}</el-radio-button>\
<el-radio-button :test-id="testId + \'-tab-\' + idx" v-for="(tab,idx) in selectScope.tabs" :key="tab.name" :label="tab.name">{{tab.label}}</el-radio-button>\
</el-radio-group>\
</template>\
</cly-select-x>',
Expand All @@ -541,6 +542,7 @@
title: { type: String, require: false},
selectedApp: {type: String, required: false, default: ''},
disabled: {type: Boolean, default: false},
testId: {type: String, default: "event-select-test-id"}
},
data: function() {
return {
Expand Down
15 changes: 11 additions & 4 deletions frontend/express/public/javascripts/countly/vue/components/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,12 @@
mixins: [SearchableOptionsMixin],
props: {
searchable: {type: Boolean, default: false, required: false}, //override the mixin
value: { type: [String, Number, Boolean] }
value: { type: [String, Number] },
testId: {
type: String,
default: 'cly-listbox-test-id',
required: false
},
},
computed: {
searchedOptions: function() {
Expand Down Expand Up @@ -275,6 +280,7 @@
<vue-scroll\
:style="vueScrollStyle"\
v-if="searchedOptions.length > 0"\
:data-test-id="testId + \'-scroll\'"\
:ops="scrollCfg"\>\
<div :style="wrapperStyle" class="cly-vue-listbox__items-wrapper">\
<div\
Expand All @@ -294,7 +300,7 @@
<slot name="option-prefix" v-bind="option"></slot>\
</div>\
<slot name="option-label" v-bind="option">\
<div class="cly-vue-listbox__item-label" v-tooltip="option.label">{{decodeHtml(option.label)}}</div>\
<div :data-test-id="testId + \'-item-\' + idx" class="cly-vue-listbox__item-label" v-tooltip="option.label">{{decodeHtml(option.label)}}</div>\
</slot>\
</div>\
<div class="bu-level-right" v-if="hasRemovableOptions || !!$scopedSlots[\'option-suffix\']">\
Expand Down Expand Up @@ -482,7 +488,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 :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 Expand Up @@ -808,7 +814,8 @@
remoteMethod: {type: Function, required: false},
showSearch: {type: Boolean, default: false},
popperAppendToBody: {type: Boolean, default: true},
persistColumnOrderKey: { type: String, default: null}
persistColumnOrderKey: { type: String, default: null},
testId: { type: String, default: "cly-select-x-test-id"},
},
data: function() {
return {
Expand Down
33 changes: 17 additions & 16 deletions frontend/express/public/javascripts/countly/vue/templates/datatable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@
</cly-select-x>
</div>
<div class="bu-level-item" v-if="hasExport">
<cly-dropdown :width="332" placement="bottom-end" ref="exportDropdown">
<cly-dropdown :data-test-id="testId + '-export-as-button'" :width="332" placement="bottom-end" ref="exportDropdown">
<template v-slot:trigger="dropdown">
<el-button size="small" icon="cly-icon-btn cly-icon-download"></el-button>
</template>
<template>
<div class="bu-mx-4 bu-mt-4">
<p class="bu-mb-4 color-cool-gray-100">{{i18n('export.export-as')}}</p>
<p :data-test-id="testId + '-export-as-pop-up-label'" class="bu-mb-4 color-cool-gray-100">{{i18n('export.export-as')}}</p>
<div class="cly-vue-eldatatable__export--radio-button bu-mb-5">
<el-radio-group v-model="selectedExportType">
<el-radio-button v-for="exportType in availableExportTypes" :key="exportType.value" :label="exportType.value">{{exportType.name}}</el-radio-button>
<el-radio-button :data-test-id="testId + '-export-as-pop-up-' + exportType.value.toLowerCase() + '-button'" v-for="exportType in availableExportTypes" :key="exportType.value" :label="exportType.value">{{exportType.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
Expand Down Expand Up @@ -79,25 +79,26 @@
</div>
<div v-if="customExportFileName" :class="{'cly-vue-eldatatable__export--fileExport': exportColumnSelection}">
<div class="bu-my-4 bu-mx-4">
<p class="bu-mb-1 text-medium"> {{i18n('export.file-name')}} </p>
<el-input v-model="exportFileName"></el-input>
<p :data-test-id="testId + '-export-as-pop-up-file-name-label'" class="bu-mb-1 text-medium"> {{i18n('export.file-name')}} </p>
<el-input :data-test-id="testId + '-export-as-pop-up-file-name-input'" v-model="exportFileName"></el-input>
</div>
</div>
<slot name="export-config"></slot>
<div class="bu-mx-4 bu-mb-4">
<el-button size="medium" @click="onExportClick" type="success" style="width: 100%">{{i18n('export.export')}}</el-button>
<el-button :data-test-id="testId + 'export-as-pop-up-export-button'" size="medium" @click="onExportClick" type="success" style="width: 100%">{{i18n('export.export')}}</el-button>
</div>
</template>
</cly-dropdown>
</div>
<div class="bu-level-item" v-if="displaySearch">
<form @keydown.enter.prevent="">
<el-input autocomplete="off" size="small" class="cly-vue-eldatatable__search--grey" style="width:200px" prefix-icon="ion-ios-search-strong" :placeholder="searchPlaceholder" v-model="searchQueryProxy"></el-input>
<el-input :data-test-id="testId + '-search-input'" autocomplete="off" size="small" class="cly-vue-eldatatable__search--grey" style="width:200px" prefix-icon="ion-ios-search-strong" :placeholder="searchPlaceholder" v-model="searchQueryProxy"></el-input>
</form>
</div>
</div>
</div>
<el-table
:test-id="testId"
:preventDefaultSort="preventDefaultSort"
:border="border"
:row-key="keyFn"
Expand All @@ -119,42 +120,42 @@
</el-table>
<div v-if="!hideBottom" class="bu-level cly-vue-eldatatable__footer cly-vue-eldatatable__footer--white" @mouseenter="onNoCellMouseEnter">
<div class="bu-level-left">
<div class="bu-level-item text-smallish bu-mr-0">
<div class="bu-level-item text-smallish bu-mr-0" :data-test-id="testId + '-items-per-page-label'">
{{ i18n("common.items-per-page") }}:
</div>
<div class="bu-level-item text-smallish">
<el-select :borderless="true" style="margin-top: 2px;" :adaptiveLength="true" v-model="controlParams.perPage" size="mini">
<el-select :test-id="testId + '-items-per-page-count'" :borderless="true" style="margin-top: 2px;" :adaptiveLength="true" v-model="controlParams.perPage" size="mini">
<el-option v-for="pageSize in availablePageSizes" :key="pageSize" :value="pageSize" :label="pageSize"></el-option>
</el-select>
</div>
<div class="bu-level-item" style="font-size: 11px">
{{ paginationInfo }}
<span :data-test-id="testId + '-items-per-page-count-select'">{{ paginationInfo }}</span>
</div>
<slot v-bind="commonScope" name="footer-left"></slot>
</div>
<div class="bu-level-right">
<slot v-bind="commonScope" name="footer-right"></slot>
<div class="bu-level-item text-smallish bu-mr-0">
<div class="cly-vue-eldatatable__table-page-selector" style="margin-top: 2px;" >
<el-select :borderless="true" :adaptiveLength="true" v-if="totalPages <= 200" v-model="controlParams.page" size="mini">
<el-select :test-id="testId + '-page-number'" :borderless="true" :adaptiveLength="true" v-if="totalPages <= 200" v-model="controlParams.page" size="mini">
<el-option v-for="page in availablePages" :key="page" :value="page" :label="page"></el-option>
</el-select>
<el-input v-else type="number" :min="1" style="width: 160px" class="bu-mr-1" :max="totalPages" v-model="controlParams.page" size="mini"></el-input>
</div>
</div>
<div class="bu-level-item text-smallish">
of {{formatNumber(totalPages)}} pages
<span :test-id="testId + '-page-number-of-pages'">of {{formatNumber(totalPages)}} pages</span>
</div>
<div :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': prevAvailable, 'cool-gray-30': !prevAvailable}">
<div :data-test-id="testId + '-first-page-arrow-button'" :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': prevAvailable, 'cool-gray-30': !prevAvailable}">
<span :class="{disabled: !prevAvailable}" @click="goToFirstPage"><i class="ion-ios-arrow-back"></i><i class="ion-ios-arrow-back"></i></span>
</div>
<div :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': prevAvailable, 'cool-gray-30': !prevAvailable}">
<div :data-test-id="testId + '-previous-page-arrow-button'" :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': prevAvailable, 'cool-gray-30': !prevAvailable}">
<span :class="{disabled: !prevAvailable}" @click="goToPrevPage"><i class="ion-ios-arrow-back"></i></span>
</div>
<div :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': nextAvailable, 'cool-gray-30': !nextAvailable}">
<div :data-test-id="testId + '-next-page-arrow-button'" :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': nextAvailable, 'cool-gray-30': !nextAvailable}">
<span :class="{disabled: !nextAvailable}" @click="goToNextPage"><i class="ion-ios-arrow-forward"></i></span>
</div>
<div :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': nextAvailable, 'cool-gray-30': !nextAvailable}">
<div :data-test-id="testId + '-last-page-arrow-button'" :class="{'bu-level-item': true, 'cursor-pointer': true, 'color-cool-gray-100': nextAvailable, 'cool-gray-30': !nextAvailable}">
<span :class="{disabled: !nextAvailable}" @click="goToLastPage"><i class="ion-ios-arrow-forward"></i><i class="ion-ios-arrow-forward"></i></span>
</div>
</div>
Expand Down
Loading
Loading