Skip to content

Commit bd4fad9

Browse files
can-anguncan-angun
committed
Added data manager verify events full data page case
1 parent 5ac77d0 commit bd4fad9

File tree

4 files changed

+205
-38
lines changed

4 files changed

+205
-38
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
</cly-notification>
55
<cly-datatable-n
66
ref="eventsDefaultTable"
7+
test-id="events"
78
:searchPlaceholder="i18n('data-manager.event-search-placeholder')"
89
:rows="events"
910
:keyFn="function(row) {return row.key ||row.e || row.name}"
@@ -18,6 +19,7 @@
1819

1920
<template v-slot:header-left>
2021
<cly-multi-select
22+
test-id="event-category-filters"
2123
ref="eventCategoryFilters"
2224
v-bind:arrow="true"
2325
:selectXWidth="336"
@@ -39,20 +41,20 @@
3941
<template v-slot="rowScope">
4042
<!-- <div @click="onRowClick(rowScope.row)" class="cly-vue-data-manager__clickable bu-is-clickable color-dark-blue-100">{{rowScope.row.name || rowScope.row.key || rowScope.row.e}}</div> -->
4143
<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">
42-
<div>{{unescapeHtml(rowScope.row.name || rowScope.row.key || rowScope.row.e)}}</div>
44+
<div :data-test-id="'datatable-manage-events-events-event-name-' + rowScope.$index">{{unescapeHtml(rowScope.row.name || rowScope.row.key || rowScope.row.e)}}</div>
4345
</a>
4446
<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>
4547
<div>
4648
<span v-if="isDrill" class="tag-container">
4749
<span v-bind:class="statusClassObject(rowScope.row.status)" class="bu-tag bu-mt-1">
4850
<span class="blinker"></span>
49-
<span>{{rowScope.row.status}}</span>
51+
<span :data-test-id="'datatable-manage-events-events-status-' + rowScope.$index">{{rowScope.row.status}}</span>
5052
</span>
5153
</span>
5254
<span v-if="rowScope.row.is_visible === false" class="cly-vue-data-manager__hidden-icon">
5355
<i class="ion-eye-disabled"></i>
5456
</span>
55-
<span v-else class="cly-vue-data-manager__hidden-icon"><i class="ion-eye"></i></ion-icon></span>
57+
<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>
5658
<span v-if="eventTransformationMap && eventTransformationMap[rowScope.row.key]" class="cly-vue-data-manager__transform-icon">
5759
<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">
5860
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -75,18 +77,18 @@
7577
<el-table-column v-if="col.value === 'category'"
7678
min-width="250" sortable="custom" prop="categoryName" :label="i18n('data-manager.category')">
7779
<template v-slot="rowScope">
78-
<div>{{unescapeHtml(rowScope.row.categoryName)}}</div>
80+
<div :data-test-id="'datatable-manage-events-events-category-name-' + rowScope.$index">{{unescapeHtml(rowScope.row.categoryName)}}</div>
7981
</template>
8082
</el-table-column>
8183

8284
<el-table-column v-else-if="col.value === 'lastModifiedts'"
8385
prop="lastModifiedts" column-key="lastModifiedDate" sortable="custom" min-width="275" :label="i18n('data-manager.last-modified')">
8486
<template v-slot="rowScope">
8587
<div v-if="rowScope.row && rowScope.row.lastModifiedts">
86-
<div>{{rowScope.row.lastModifiedDate || i18n('data-manager.empty-placeholder') }}</div>
87-
<span class="text-small color-cool-gray-50">{{rowScope.row.lastModifiedTime}}</span>
88+
<div :data-test-id="'datatable-manage-events-events-last-mod-date-' + rowScope.$index">{{rowScope.row.lastModifiedDate || i18n('data-manager.empty-placeholder') }}</div>
89+
<span class="text-small color-cool-gray-50" :data-test-id="'datatable-manage-events-events-last-mod-time-' + rowScope.$index">{{rowScope.row.lastModifiedTime}}</span>
8890
</div>
89-
<div v-else>
91+
<div :data-test-id="'datatable-manage-events-events-last-mod-date-' + rowScope.$index" v-else>
9092
{{ i18n('data-manager.empty-placeholder') }}
9193
</div>
9294
</template>
@@ -105,28 +107,28 @@
105107

106108
<el-table-column v-else-if="col.value === 'totalCount' " sortable="custom" min-width="250" prop="totalCount" label="Count">
107109
<template v-slot="rowScope">
108-
<div>{{rowScope.row.totalCountFormatted || i18n('data-manager.empty-placeholder') }}</div>
110+
<div :data-test-id="'datatable-manage-events-events-count-' + rowScope.$index">{{rowScope.row.totalCountFormatted || i18n('data-manager.empty-placeholder') }}</div>
109111
</template>
110112
</el-table-column>
111113

112114
<el-table-column v-else-if="col.value === 'description' " sortable="custom" min-width="250" prop="description" :label="i18n('data-manager.description')">
113115
<template v-slot="rowScope">
114-
<div>{{unescapeHtml(rowScope.row.description || i18n('data-manager.empty-placeholder'))}}</div>
116+
<div :data-test-id="'datatable-manage-events-events-description-' + rowScope.$index">{{unescapeHtml(rowScope.row.description || i18n('data-manager.empty-placeholder'))}}</div>
115117
</template>
116118
</el-table-column>
117119

118120
<el-table-column v-else v-bind:sortable="col.sort ? 'custom' : false" :key="idx" min-width="300" :prop="col.value" :label="col.label">
119121
<template v-slot="rowScope">
120-
<div>{{unescapeHtml(rowScope.row[col.value] || i18n('data-manager.empty-placeholder'))}}</div>
122+
<div :data-test-id="'datatable-manage-events-events-value-' + rowScope.$index">{{unescapeHtml(rowScope.row[col.value] || i18n('data-manager.empty-placeholder'))}}</div>
121123
</template>
122124
</el-table-column>
123125
</template>
124126

125127
<el-table-column type="options" align="center">
126128
<template v-slot="rowScope">
127-
<cly-more-options v-if="(canUserUpdate || canUserDelete) && rowScope.row.hover" size="small" @command="handleCommand($event, scope, rowScope.row)">
128-
<el-dropdown-item v-if="canUserUpdate" command="edit">{{i18n('common.edit')}}</el-dropdown-item>
129-
<el-dropdown-item v-if="canUserDelete" command="delete">{{i18n('common.delete')}}</el-dropdown-item>
129+
<cly-more-options test-id="more-button" v-if="(canUserUpdate || canUserDelete) && rowScope.row.hover" size="small" @command="handleCommand($event, scope, rowScope.row)">
130+
<el-dropdown-item v-if="canUserUpdate" command="edit" :data-test-id="'datatable-manage-events-events-edit-button-' + rowScope.$index">{{i18n('common.edit')}}</el-dropdown-item>
131+
<el-dropdown-item v-if="canUserDelete" command="delete" :data-test-id="'datatable-manage-events-events-delete-button-' + rowScope.$index">{{i18n('common.delete')}}</el-dropdown-item>
130132
</cly-more-options>
131133
</template>
132134
</el-table-column>

‎ui-tests/cypress/e2e/onboarding/onboarding.cy.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -377,9 +377,9 @@ describe('Complete Onboarding', () => {
377377
//remoteConfigPageHelpers.verifyFullDataPageElements(); //TODO: Data is not being generated with the populator. Need to generate the data
378378
navigationHelpers.goToReportManagerPage();
379379
//reportManagerPageHelpers.verifyFullDataPageElements(); //TODO: Data is not being generated with the populator. Need to generate the data
380+
navigationHelpers.goToDataManagerPage();
381+
dataManagerEventsPageHelpers.verifyFullDataPageElements();
380382
//TODO: Add the cases of the following pages
381-
//navigationHelpers.goToDataManagerPage();
382-
//dataManagerEventsPageHelpers.verifyFullDataPageElements();
383383
//dataManagerEventsPageHelpers.clickEventGroupsTab();
384384
//dataManagerEventGroupsPageHelpers.verifyFullDataPageElements();
385385
//navigationHelpers.goToDataPopulatorPage();

‎ui-tests/cypress/lib/dashboard/manage/dataManager/events/events.js‎

Lines changed: 137 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,192 @@
1-
import dataManagerEventsPageElements from "../../../../../support/elements/dashboard/manage/dataManager/events/events";
1+
import {
2+
eventsPageElements,
3+
eventsDataTableElements
4+
} from "../../../../../support/elements/dashboard/manage/dataManager/events/events";
25

36
const verifyStaticElementsOfPage = () => {
47
cy.verifyElement({
5-
labelElement: dataManagerEventsPageElements.PAGE_TITLE,
8+
labelElement: eventsPageElements.PAGE_TITLE,
69
labelText: "Manage Events",
710
});
811

912
cy.verifyElement({
10-
element: dataManagerEventsPageElements.TAB_EVENTS,
13+
element: eventsPageElements.TAB_EVENTS,
1114
elementText: "Events",
1215
});
1316

1417
cy.verifyElement({
15-
element: dataManagerEventsPageElements.TAB_EVENT_GROUPS,
18+
element: eventsPageElements.TAB_EVENT_GROUPS,
1619
elementText: "Event Groups",
1720
});
1821

22+
cy.verifyElement({
23+
element: eventsPageElements.FILTER_PARAMETERS_SELECT,
24+
});
1925

2026
cy.verifyElement({
21-
element: dataManagerEventsPageElements.FILTER_PARAMETERS_SELECT,
27+
element: eventsDataTableElements().EDIT_COLUMNS_BUTTON,
2228
});
2329

2430
cy.verifyElement({
25-
element: dataManagerEventsPageElements.EDIT_COLUMNS_BUTTON,
31+
element: eventsDataTableElements().EXPORT_AS_BUTTON,
2632
});
2733

2834
cy.verifyElement({
29-
element: dataManagerEventsPageElements.EXPORT_AS_BUTTON,
35+
element: eventsDataTableElements().DATATABLE_SEARCH_INPUT,
3036
});
3137

38+
// cy.verifyElement({ //TODO: data test id is missing
39+
// element: eventsDataTableElements().SELECT_ALL_EVENTS_CHECKBOX,
40+
// });
41+
3242
cy.verifyElement({
33-
element: dataManagerEventsPageElements.DATATABLE_SEARCH_INPUT,
43+
isElementVisible: false,
44+
labelElement: eventsDataTableElements().COLUMN_NAME_EVENT_NAME_LABEL,
45+
labelText: "Event Name",
46+
});
47+
48+
cy.verifyElement({
49+
isElementVisible: false,
50+
element: eventsDataTableElements().COLUMN_NAME_EVENT_NAME_SORTABLE_ICON,
51+
});
52+
53+
cy.verifyElement({
54+
labelElement: eventsDataTableElements().COLUMN_NAME_DESCRIPTION_LABEL,
55+
labelText: "Description",
56+
});
57+
58+
cy.verifyElement({
59+
element: eventsDataTableElements().COLUMN_NAME_DESCRIPTION_SORTABLE_ICON,
60+
});
61+
62+
cy.verifyElement({
63+
labelElement: eventsDataTableElements().COLUMN_NAME_CATEGORY_LABEL,
64+
labelText: "Category",
65+
});
66+
67+
cy.verifyElement({
68+
element: eventsDataTableElements().COLUMN_NAME_CATEGORY_SORTABLE_ICON,
69+
});
70+
71+
cy.verifyElement({
72+
labelElement: eventsDataTableElements().COLUMN_NAME_COUNT_LABEL,
73+
labelText: "Count",
74+
});
75+
76+
cy.verifyElement({
77+
element: eventsDataTableElements().COLUMN_NAME_COUNT_SORTABLE_ICON,
78+
});
79+
80+
cy.verifyElement({
81+
isElementVisible: false,
82+
labelElement: eventsDataTableElements().COLUMN_NAME_LAST_MODIFIED_LABEL,
83+
labelText: "Last modıfıed",
84+
});
85+
86+
cy.verifyElement({
87+
element: eventsDataTableElements().COLUMN_NAME_LAST_MODIFIED_SORTABLE_ICON,
3488
});
3589
};
3690

3791
const verifyEmptyPageElements = () => {
3892

3993
verifyStaticElementsOfPage();
4094

95+
verifyEventsDataTableElements({
96+
isEmpty: true
97+
});
98+
};
99+
100+
const verifyFullDataPageElements = () => {
101+
102+
verifyStaticElementsOfPage();
103+
104+
verifyEventsDataTableElements({
105+
isEmpty: false,
106+
shouldNotEqual: true,
107+
});
108+
};
109+
110+
const verifyEventsDataTableElements = ({
111+
isEmpty = false,
112+
shouldNotEqual = false,
113+
index = 0,
114+
nameAndDescription = null,
115+
data = null,
116+
status = null,
117+
origin = null,
118+
lastUpdated = null,
119+
duration = null
120+
}) => {
121+
122+
if (isEmpty) {
123+
cy.verifyElement({
124+
element: eventsDataTableElements(index).EMPTY_TABLE_ICON,
125+
});
126+
127+
cy.verifyElement({
128+
labelElement: eventsDataTableElements(index).EMPTY_TABLE_TITLE,
129+
labelText: "...hmm, seems empty here",
130+
});
131+
132+
cy.verifyElement({
133+
labelElement: eventsDataTableElements(index).EMPTY_TABLE_SUBTITLE,
134+
labelText: "No data found",
135+
});
136+
return;
137+
}
138+
139+
cy.verifyElement({
140+
shouldNot: shouldNotEqual,
141+
element: eventsDataTableElements(index).NAME_AND_DESCRIPTION,
142+
elementText: nameAndDescription,
143+
});
144+
145+
cy.verifyElement({
146+
shouldNot: shouldNotEqual,
147+
element: eventsDataTableElements(index).DATA,
148+
elementText: data,
149+
});
150+
151+
cy.verifyElement({
152+
shouldNot: shouldNotEqual,
153+
element: eventsDataTableElements(index).STATUS,
154+
elementText: status,
155+
});
156+
41157
cy.verifyElement({
42-
element: dataManagerEventsPageElements.EMPTY_DATATABLE_ICON,
158+
shouldNot: shouldNotEqual,
159+
element: eventsDataTableElements(index).ORIGIN,
160+
elementText: origin,
43161
});
44162

45163
cy.verifyElement({
46-
labelElement: dataManagerEventsPageElements.EMPTY_DATATABLE_TITLE,
47-
labelText: "...hmm, seems empty here",
164+
shouldNot: shouldNotEqual,
165+
element: eventsDataTableElements(index).LAST_UPDATED,
166+
elementText: lastUpdated,
48167
});
49168

50169
cy.verifyElement({
51-
labelElement: dataManagerEventsPageElements.EMPTY_DATATABLE_SUBTITLE,
52-
labelText: "No data found",
170+
shouldNot: shouldNotEqual,
171+
element: eventsDataTableElements(index).DURATION,
172+
elementText: duration,
53173
});
54174
};
55175

56176
const clickEventsTab = () => {
57177
cy.scrollPageToTop();
58-
cy.clickElement(dataManagerEventsPageElements.TAB_EVENTS);
178+
cy.clickElement(eventsPageElements.TAB_EVENTS);
59179
};
60180

61181
const clickEventGroupsTab = () => {
62182
cy.scrollPageToTop();
63-
cy.clickElement(dataManagerEventsPageElements.TAB_EVENT_GROUPS);
183+
cy.clickElement(eventsPageElements.TAB_EVENT_GROUPS);
64184
};
65185

66186
module.exports = {
67187
verifyEmptyPageElements,
188+
verifyEventsDataTableElements,
189+
verifyFullDataPageElements,
68190
clickEventsTab,
69191
clickEventGroupsTab
70192
};

‎ui-tests/cypress/support/elements/dashboard/manage/dataManager/events/events.js‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,55 @@
1-
export default {
1+
export const eventsPageElements = {
22
PAGE_TITLE: 'header-title',
33
TAB_EVENTS: 'tab-events-title',
44
TAB_EVENT_GROUPS: 'tab-event-groups-title',
5-
FILTER_PARAMETERS_SELECT: 'cly-multi-select-test-id-pseudo-input-label',
6-
EDIT_COLUMNS_BUTTON: 'cly-datatable-n-test-id-edit-columns-button',
7-
EXPORT_AS_BUTTON: 'cly-datatable-n-test-id-export-as-button',
8-
DATATABLE_SEARCH_INPUT: 'cly-datatable-n-test-id-datatable-search-input',
9-
EMPTY_DATATABLE_ICON: 'cly-datatable-n-test-id-empty-logo',
10-
EMPTY_DATATABLE_TITLE: 'cly-datatable-n-test-id-empty-title',
11-
EMPTY_DATATABLE_SUBTITLE: 'cly-datatable-n-test-id-empty-subtitle'
5+
FILTER_PARAMETERS_SELECT: 'event-category-filters-pseudo-input-label',
6+
};
7+
8+
const eventsDataTableElements = (index = 0) => ({
9+
EDIT_COLUMNS_BUTTON: 'events-edit-columns-button',
10+
EXPORT_AS_BUTTON: 'events-export-as-button',
11+
DATATABLE_SEARCH_INPUT: 'events-datatable-search-input',
12+
TABLE_ROWS: '.el-table__row',
13+
14+
EMPTY_TABLE_ICON: 'events-empty-logo',
15+
EMPTY_TABLE_TITLE: 'events-empty-title',
16+
EMPTY_TABLE_SUBTITLE: 'events-empty-subtitle',
17+
18+
SELECT_ALL_EVENTS_CHECKBOX: 'events-select-all-checkbox', //TODO: data test id is missing
19+
COLUMN_NAME_EVENT_NAME_LABEL: 'events-label-event-name',
20+
COLUMN_NAME_EVENT_NAME_SORTABLE_ICON: 'events-sortable-icon-event-name',
21+
COLUMN_NAME_DESCRIPTION_LABEL: 'events-label-description',
22+
COLUMN_NAME_DESCRIPTION_SORTABLE_ICON: 'events-sortable-icon-description',
23+
COLUMN_NAME_CATEGORY_LABEL: 'events-label-category',
24+
COLUMN_NAME_CATEGORY_SORTABLE_ICON: 'events-sortable-icon-category',
25+
COLUMN_NAME_COUNT_LABEL: 'events-label-count',
26+
COLUMN_NAME_COUNT_SORTABLE_ICON: 'events-sortable-icon-count',
27+
COLUMN_NAME_LAST_MODIFIED_LABEL: 'events-label-last-modıfıed',
28+
COLUMN_NAME_LAST_MODIFIED_SORTABLE_ICON: 'events-sortable-icon-last-modıfıed',
29+
30+
//Columns' Rows' Datas Elements
31+
SELECT_EVENT_CHECKBOX: 'datatable-manage-events-events-select-event-checkbox-' + index, //TODO: data test id is missing
32+
EVENT_NAME: 'datatable-manage-events-events-event-name-' + index,
33+
EVENT_NAME_ION_EYE: 'datatable-manage-events-events-ion-eye-' + index,
34+
DESCRIPTION: 'datatable-manage-events-events-description-' + index,
35+
CATEGORY: 'datatable-manage-events-events-category-' + index,
36+
COUNT: 'datatable-manage-events-events-count-' + index,
37+
LAST_MODIFIED: 'datatable-manage-events-events-last-modified-' + index,
38+
39+
//PAGINATION ELEMENTS
40+
ITEMS_PER_PAGE_LABEL: 'events-items-per-page-label',
41+
PER_PAGE_COUNT_SELECT: 'events-items-per-page-count-select-input-pseudo-input-label',
42+
PER_PAGE_COUNT_SELECT_ICON: 'events-items-per-page-count-select-icon',
43+
PER_PAGE_COUNT_LABEL: 'events-items-per-page-count-select',
44+
PAGE_NUMBER_SELECT: 'events-page-number-select-input-pseudo-input-label',
45+
PAGE_NUMBER_SELECT_ICON: 'events-page-number-select-icon',
46+
FIRST_PAGE_ARROW_BUTTON: 'events-first-page-arrow-button',
47+
PREVIOUS_PAGE_ARROW_BUTTON: 'events-groups-previous-page-arrow-button',
48+
NEXT_PAGE_ARROW_BUTTON: 'events-next-page-arrow-button',
49+
LAST_PAGE_ARROW_BUTTON: 'events-views-last-page-arrow-button'
50+
});
51+
52+
module.exports = {
53+
eventsPageElements,
54+
eventsDataTableElements
1255
};

0 commit comments

Comments
 (0)