Skip to content

Commit 9895a44

Browse files
can-anguncan-angun
committed
Added dashboard element verifies
1 parent 78a82c2 commit 9895a44

File tree

12 files changed

+141
-21
lines changed

12 files changed

+141
-21
lines changed

‎plugins/dashboards/frontend/public/templates/helpers/widget/apps.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="clyd-apps">
22
<hr>
3-
<div class="bu-is-flex bu-is-flex-wrap-wrap apps">
3+
<div class="bu-is-flex bu-is-flex-wrap-wrap apps" data-test-id="widget-apps">
44
<span class="bu-ml-1 text-small has-ellipsis bu-is-flex-shrink-1" v-if="isMultiple" v-tooltip="tooltip">
55
{{ i18n("dashboards.multiple-apps-count", apps.length) }}
66
</span>
77
<div v-else class="bu-is-flex apps__single">
88
<div v-if="app.avatar" class="apps__single--avatar bu-mr-1" :style="app.avatar">
9-
<span v-if="!app.image" class="has-ellipsis">{{getAppInitials(app.name)}}</span>
9+
<span v-if="!app.image" class="has-ellipsis" data-test-id="widget-app-icon">{{getAppInitials(app.name)}}</span>
1010
</div>
11-
<span class="text-small has-ellipsis bu-is-flex-shrink-1">{{app.name}}</span>
11+
<span class="text-small has-ellipsis bu-is-flex-shrink-1" data-test-id="widget-app-name">{{app.name}}</span>
1212
</div>
1313
</div>
1414
</div>

‎plugins/dashboards/frontend/public/templates/helpers/widget/period.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="text-small clyd-legend-period has-ellipsis bu-is-flex-shrink-1 bu-mr-1" :class="{'clyd-legend-period--custom': customPeriod ? true: false}">{{period}}</div>
1+
<div class="text-small clyd-legend-period has-ellipsis bu-is-flex-shrink-1 bu-mr-1" :class="{'clyd-legend-period--custom': customPeriod ? true: false}" data-test-id="widget-period">{{period}}</div>

‎plugins/dashboards/frontend/public/templates/helpers/widget/secondary-legend.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div v-if="item.labels && item.labels.length" class="bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-is-flex-grow-1" style="min-width: 0">
55
<div v-for="(label, i) in item.labels" :class="['bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-px-2 bu-mr-1']" :style="{backgroundColor: label.color + '26', borderRadius: '4px', minWidth: 0}">
66
<i class="fas fa-circle bu-mr-2" :style="{fontSize: '6px', color: label.color}"></i>
7-
<span class="text-small has-ellipsis bu-is-flex-shrink-1">{{unescapeHtml(label.label)}}</span>
7+
<span class="text-small has-ellipsis bu-is-flex-shrink-1" :data-test-id="'widget-label-' + i">{{unescapeHtml(label.label)}}</span>
88
</div>
99
</div>
1010
</div>

‎plugins/dashboards/frontend/public/templates/helpers/widget/title-labels.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div v-if="labels" class="clyd-title-labels bu-is-flex bu-is-flex-shrink-1" style="min-width: 0;">
2-
<div v-for="(item, idx) in labels" class="bu-ml-1 bu-p-1 text-smallest has-ellipsis">
2+
<div v-for="(item, idx) in labels" class="bu-ml-1 bu-p-1 text-smallest has-ellipsis" :data-test-id="'widget-item-' + idx">
33
{{item}}
44
</div>
55
</div>

‎plugins/dashboards/frontend/public/templates/helpers/widget/title.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="bu-is-flex bu-is-flex-shrink-1" style="min-width: 0">
2-
<h4 class="bu-is-flex-shrink-1 has-ellipsis" v-if="title">{{unescapeHtml(title)}}</h4>
2+
<h4 class="bu-is-flex-shrink-1 has-ellipsis" v-if="title" data-test-id="widget-title">{{unescapeHtml(title)}}</h4>
33
<clyd-title-labels v-if="labels && labels.length" :labels="labels"></clyd-title-labels>
44
</div>

‎plugins/dashboards/frontend/public/templates/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h2 class="has-ellipsis" data-test-id="dashboard-name">{{dashboard.name}}</h2>
6767
<div class="bu-level-item color-cool-gray-50 text-medium" data-test-id="dashboard-creation-info">
6868
<span>
6969
<i class="far fa-clock" data-test-id="dashboard-creation-time-icon"></i>
70-
{{i18nM('dashbaords.created')}}
70+
<span data-test-id="dashboard-created-label">{{i18nM('dashbaords.created')}}</span>
7171
</span>
7272
<span v-if="dashboard.creation.time" class="bu-ml-1" data-test-id="dashboard-creation-time">
7373
{{dashboard.creation.time}}

‎ui-tests/cypress/e2e/dashboard/dashboards/dashboards.cy.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import user from '../../../fixtures/user.json';
22
const navigationHelpers = require('../../../support/navigations');
3+
const helper = require('../../../support/helper');
34
const loginHelpers = require('../../../lib/login/login');
45
const dashboardsHelper = require('../../../lib/dashboard/dashboards/dashboards');
56
const reportHelper = require('../../../lib/dashboard/manage/reports/reports');
67
const { generateDashboardFixture } = require('../../../fixtures/generators/dashboards');
8+
const { generateReportFixture } = require('../../../fixtures/generators/reports');
79
const { VISUALIZATION_TYPE, TIME_UNITS } = require('../../../support/constants');
810

911

@@ -17,23 +19,37 @@ describe('Create New Custom Dashboard', () => {
1719
it('Create custom dashboard with widgets and email report', function() {
1820

1921
const dashboard = generateDashboardFixture();
22+
const report = generateReportFixture();
2023

2124
dashboardsHelper.clickDashboardsNewButton();
2225
dashboardsHelper.typeDashboardName(dashboard.dashboardName);
2326
dashboardsHelper.clickCreateDashboardButton();
2427
dashboardsHelper.verifyDashboardCreatedNotification();
2528
dashboardsHelper.closeNotification();
26-
dashboardsHelper.clickNewWidgetButton();
2729

30+
dashboardsHelper.verifyCustomDashboardElements({
31+
dashboardName: dashboard.dashboardName,
32+
createdTime: "just now",
33+
createdBy: user.username,
34+
});
35+
36+
dashboardsHelper.clickNewWidgetButton();
2837
dashboardsHelper.selectSourceApp("default");
2938
dashboardsHelper.selectVisualizationType(VISUALIZATION_TYPE.TIME_SERIES);
3039
dashboardsHelper.selectMetric("New Sessions");
3140
dashboardsHelper.clickCreateWidgetButton();
3241
dashboardsHelper.verifyWidgetCreatedNotification();
3342
dashboardsHelper.closeNotification();
3443

44+
dashboardsHelper.verifyCustomDashboardWidgetElements({
45+
widgetTitle: "Analytics",
46+
widgetAppName: "default",
47+
widgetItem: "New Sessions",
48+
widgetLabel: "New Sessions"
49+
});
50+
3551
dashboardsHelper.openCreateNewReportDrawer();
36-
reportHelper.typeReportName("My Custom Report");
52+
reportHelper.typeReportName(report.reportName);
3753
reportHelper.typeReportToReceive(...["demo@count.ly", "test@count.ly"]);
3854
reportHelper.selectReportTypeDashboard();
3955
reportHelper.selectFrequencyType(TIME_UNITS.DAILY);
@@ -44,14 +60,14 @@ describe('Create New Custom Dashboard', () => {
4460
reportHelper.verifyReportCreatedNotification();
4561
reportHelper.closeNotification();
4662

47-
// reportHelper.verifyReportsDataTable({
48-
// isStatusChecked: true,
49-
// reportName: "My Custom Report",
50-
// email: "demo@count.ly test@count.ly",
51-
// data: "'Dashboard " + dashboard.dashboardName,
52-
// frequency: helper.capitalize(TIME_UNITS.DAILY),
53-
// time: "at 04:00, (GMT+03:00) Istanbul",
54-
// });
63+
reportHelper.verifyReportsDataTable({
64+
isStatusChecked: true,
65+
reportName: report.reportName,
66+
email: "demo@count.ly test@count.ly",
67+
data: "Dashboard " + dashboard.dashboardName,
68+
frequency: helper.capitalize(TIME_UNITS.DAILY),
69+
time: "at 04:00, (GMT+03:00) Istanbul",
70+
});
5571

5672
reportHelper.openReportPreviewButton();
5773
reportHelper.verifyReportPreviewPageImage();

‎ui-tests/cypress/fixtures/generators/generateFixtures.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const { generateWidgetsRatesFixture } = require('./widgetsRates');
66
const { generateAlertFixture } = require('./alerts');
77
const { generateUsersFixture } = require('./users');
88
const { generateAppsFixture } = require('./apps');
9-
9+
const { generateDashboardFixture } = require('./dashboards');
10+
const { generateReportFixture } = require('./reports');
1011

1112
const BASE_DIR = path.join(__dirname, '../generated');
1213

@@ -19,6 +20,8 @@ const setupFolders = () => {
1920
fs.mkdirSync(path.join(BASE_DIR, 'alerts'), { recursive: true });
2021
fs.mkdirSync(path.join(BASE_DIR, 'users'), { recursive: true });
2122
fs.mkdirSync(path.join(BASE_DIR, 'apps'), { recursive: true });
23+
fs.mkdirSync(path.join(BASE_DIR, 'dashboards'), { recursive: true });
24+
fs.mkdirSync(path.join(BASE_DIR, 'reports'), { recursive: true });
2225
};
2326

2427
const writeJson = (filePath, data) => {
@@ -35,6 +38,8 @@ const writeJson = (filePath, data) => {
3538
writeJson('/alerts/alert.json', generateAlertFixture());
3639
writeJson('/users/user.json', generateUsersFixture());
3740
writeJson('/apps/app.json', generateAppsFixture());
41+
writeJson('/dashboards/dashboard.json', generateDashboardFixture());
42+
writeJson('/reports/report.json', generateReportFixture());
3843
})();
3944

4045
// node ./cypress/fixtures/generators/generateFixtures.js

‎ui-tests/cypress/fixtures/generators/reports/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { faker } = require('@faker-js/faker');
2+
3+
const generator = () => {
4+
const reportName = faker.lorem.words({ min: 3, max: 10 });
5+
6+
return {
7+
reportName
8+
};
9+
};
10+
11+
module.exports = {
12+
generateReportFixture: () => {
13+
return generator();
14+
},
15+
};

‎ui-tests/cypress/lib/dashboard/dashboards/dashboards.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
dashboardsMenuElements,
33
customDashboardElements,
4+
customDashboardWidgetElements,
45
customDashboardDrawerElements,
56
newWidgetDrawerElements
67
} from "../../../support/elements/dashboard/dashboards/dashboards";
@@ -48,6 +49,74 @@ const openCreateNewReportDrawer = () => {
4849
cy.clickElement(customDashboardElements.MORE_OPTIONS_BUTTON_CREATE_REPORTS_OPTION);
4950
};
5051

52+
const verifyCustomDashboardElements = ({
53+
dashboardName = null,
54+
createdTime = null,
55+
createdBy = null
56+
}) => {
57+
58+
cy.verifyElement({
59+
labelElement: customDashboardElements.CUSTOM_DASHBOARD_TITLE,
60+
labelText: dashboardName
61+
});
62+
63+
cy.verifyElement({
64+
element: customDashboardElements.CUSTOM_DASHBOARD_CREATED_TIME_ICON
65+
});
66+
67+
cy.verifyElement({
68+
element: customDashboardElements.CUSTOM_DASHBOARD_CREATED_LABEL,
69+
elementText: "Created"
70+
});
71+
72+
cy.verifyElement({
73+
element: customDashboardElements.CUSTOM_DASHBOARD_CREATED_TIME,
74+
elementText: createdTime
75+
});
76+
77+
cy.verifyElement({
78+
element: customDashboardElements.CUSTOM_DASHBOARD_CREATED_BY,
79+
elementText: createdBy
80+
});
81+
};
82+
83+
const verifyCustomDashboardWidgetElements = ({
84+
index = 0,
85+
widgetTitle = null,
86+
widgetAppName = null,
87+
widgetItem = null,
88+
widgetLabel = null
89+
}) => {
90+
91+
cy.verifyElement({
92+
labelElement: customDashboardWidgetElements(index).WIDGET_TITLE,
93+
labelText: widgetTitle
94+
});
95+
96+
cy.verifyElement({
97+
element: customDashboardWidgetElements(index).WIDGET_APP_ICON
98+
});
99+
100+
cy.verifyElement({
101+
labelElement: customDashboardWidgetElements(index).WIDGET_APP_NAME,
102+
labelText: widgetAppName
103+
});
104+
105+
cy.verifyElement({
106+
element: customDashboardWidgetElements(index).WIDGET_ITEM,
107+
elementText: widgetItem
108+
});
109+
110+
cy.verifyElement({
111+
element: customDashboardWidgetElements(index).WIDGET_MORE_OPTIONS_BUTTON
112+
});
113+
114+
cy.verifyElement({
115+
element: customDashboardWidgetElements(index).WIDGET_LABEL,
116+
elementText: widgetLabel
117+
});
118+
};
119+
51120
//Widget Drawer
52121
const selectSourceApp = (appName) => {
53122
cy.selectListBoxItem(newWidgetDrawerElements.SELECT_SOURCE_APP, appName);
@@ -74,6 +143,8 @@ module.exports = {
74143
verifyDashboardCreatedNotification,
75144
verifyWidgetCreatedNotification,
76145
closeNotification,
146+
verifyCustomDashboardElements,
147+
verifyCustomDashboardWidgetElements,
77148
clickNewWidgetButton,
78149
selectSourceApp,
79150
selectVisualizationType,

0 commit comments

Comments
 (0)