This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 578ebfb [hotfix] First e2e test for live dashboards
578ebfb is described below
commit 578ebfb96b0f54f38b2eac0ebe0a1af9f392b267
Author: Philipp Zehnder <[email protected]>
AuthorDate: Thu Dec 30 08:36:37 2021 +0100
[hotfix] First e2e test for live dashboards
---
ui/cypress/support/utils/DashboardUtils.ts | 57 +++++++++++++++++++++
.../tests/dashboard/dashboardTest.smoke.spec.ts | 59 ++++++++++++++++++++++
.../save-dashboard-dialog.component.html | 10 +++-
.../overview/dashboard-overview.component.html | 13 +++--
.../panel/dashboard-panel.component.html | 19 +++++--
.../widgets/raw/raw-widget.component.html | 5 +-
.../add-visualization-dialog.component.html | 14 +++--
.../add-visualization-dialog.component.ts | 47 ++++++++---------
.../edit-dashboard-dialog.component.html | 13 +++--
9 files changed, 197 insertions(+), 40 deletions(-)
diff --git a/ui/cypress/support/utils/DashboardUtils.ts
b/ui/cypress/support/utils/DashboardUtils.ts
new file mode 100644
index 0000000..45312e5
--- /dev/null
+++ b/ui/cypress/support/utils/DashboardUtils.ts
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export class DashboardUtils {
+
+ public static goToDashboard() {
+ cy.visit('#/dashboard');
+ }
+
+ public static showDashboard(dashboardName: string) {
+ cy.dataCy('show-dashboard-' + dashboardName).click();
+ }
+
+ public static addAndEditDashboard(dashboardName: string) {
+ cy.dataCy('new-dashboard-btn').click();
+ cy.dataCy('dashboard-name-input').type(dashboardName);
+ cy.dataCy('dashboard-save-btn').click();
+
+ // Start editing dashboard dashboard
+ cy.dataCy('edit-dashboard-' + dashboardName).click();
+ }
+
+ public static addWidget(pipelineName: string, widgetType: string) {
+ // Add raw data widget
+ cy.dataCy('dashboard-add-widget').click();
+
+ // Select Pipeline to visualize
+ cy.dataCy('dashboard-visualize-pipeline-' + pipelineName).click();
+
+ // Select widget
+ cy.dataCy('dashboard-select-widget-' + widgetType).click();
+ // optional configure widget
+ cy.dataCy('dashboard-new-widget-next-btn').click();
+
+ // Finish edit mode
+ cy.dataCy('dashboard-save-edit-mode').click();
+ }
+
+ public static validateRawWidgetEvents(amountOfEvents: number) {
+ cy.dataCy('dashboard-raw-item', {timeout: 10000}).should('have.length',
amountOfEvents);
+ }
+}
diff --git a/ui/cypress/tests/dashboard/dashboardTest.smoke.spec.ts
b/ui/cypress/tests/dashboard/dashboardTest.smoke.spec.ts
new file mode 100644
index 0000000..b48f2c1
--- /dev/null
+++ b/ui/cypress/tests/dashboard/dashboardTest.smoke.spec.ts
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { ConnectUtils } from '../../support/utils/ConnectUtils';
+import { PipelineUtils } from '../../support/utils/PipelineUtils';
+import { PipelineElementBuilder } from
'../../support/builder/PipelineElementBuilder';
+import { PipelineBuilder } from '../../support/builder/PipelineBuilder';
+import { DashboardUtils } from '../../support/utils/DashboardUtils';
+
+const adapterName = 'simulator';
+
+
+describe('Test live dashboard', () => {
+ beforeEach('Setup Test', () => {
+ cy.initStreamPipesTest();
+ ConnectUtils.addMachineDataSimulator(adapterName);
+ });
+
+ it('Perform Test', () => {
+ const pipelineName = 'DashboardPipeline';
+ const pipelineInput = PipelineBuilder.create(pipelineName)
+ .addSource(adapterName)
+ .addSink(
+ PipelineElementBuilder.create('dashboard_sink')
+ .addInput('input', 'visualization-name', 'Demo')
+ .build())
+ .build();
+
+ PipelineUtils.testPipeline(pipelineInput);
+
+ DashboardUtils.goToDashboard();
+
+ // Add new dashboard
+ const dashboardName = 'testDashboard';
+ DashboardUtils.addAndEditDashboard(dashboardName);
+
+ DashboardUtils.addWidget(pipelineName, 'raw');
+
+ // Validate that data is coming (at least 3 events)
+ DashboardUtils.validateRawWidgetEvents(3);
+
+ });
+});
+
diff --git
a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
index 9f743fd..df0f274 100644
---
a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
+++
b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.html
@@ -37,10 +37,16 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-button mat-raised-button class="mat-basic mr-10"
(click)="cancel()">
+ <button mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="cancel()">
Cancel
</button>
- <button mat-button mat-raised-button color="accent" (click)="save()">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ (click)="save()">
Save
</button>
</div>
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index ee34f1b..d557cd9 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -20,7 +20,12 @@
<div fxFlex="100" fxLayout="column">
<div fxLayout="row" class="fixed-height options-bar sp-tab-bg">
<div class="options-bar-item pl-10" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button mat-raised-button color="accent"
(click)="openNewDashboardDialog()" *ngIf="hasDashboardWritePrivileges">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ (click)="openNewDashboardDialog()"
+ *ngIf="hasDashboardWritePrivileges"
+ data-cy="new-dashboard-btn">
<i class="material-icons">add</i>
<span> New dashboard</span>
</button>
@@ -52,7 +57,8 @@
<div fxLayout="row" fxFlex="100">
<span fxFlex fxFlexOrder="1" fxLayout="row"
fxLayoutAlign="center center">
<button mat-button mat-icon-button color="accent"
- (click)="showDashboard(element, false)">
+ (click)="showDashboard(element, false)"
+ [attr.data-cy]="'show-dashboard-' +
element.name">
<i class="material-icons">visibility</i>
</button>
</span>
@@ -70,7 +76,8 @@
</span>
<span fxFlex fxFlexOrder="4" fxLayout="row"
fxLayoutAlign="center center" *ngIf="hasDashboardWritePrivileges">
<button mat-button mat-icon-button color="accent"
- (click)="showDashboard(element, true)">
+ (click)="showDashboard(element, true)"
+ [attr.data-cy]="'edit-dashboard-' +
element.name">
<i class="material-icons">edit</i>
</button>
</span>
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index 637f1cf..9f1fe82 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -18,15 +18,28 @@
<div fxFlex="100" fxLayout="column">
<div fxLayout="row" class="fixed-height options-bar sp-tab-bg"
*ngIf="editMode">
<div class="options-bar-item pl-10" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button mat-raised-button color="accent"
(click)="updateDashboardAndCloseEditMode()" class="mr-10">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ (click)="updateDashboardAndCloseEditMode()"
+ class="mr-10"
+ data-cy="dashboard-save-edit-mode">
<i class="material-icons">save</i>
<span> Save</span>
</button>
- <button mat-button mat-raised-button class="mat-basic mr-10"
(click)="discardChanges()">
+ <button mat-button
+ mat-raised-button
+ class="mat-basic mr-10"
+ (click)="discardChanges()">
<i class="material-icons">clear</i>
<span> Discard</span>
</button>
- <button mat-button mat-raised-button color="accent"
(click)="addWidget()" [disabled]="!editMode">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ (click)="addWidget()"
+ [disabled]="!editMode"
+ data-cy="dashboard-add-widget">
<i class="material-icons">add</i>
<span> Add visualization</span>
</button>
diff --git
a/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.html
b/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.html
index 3335445..11ded8e 100644
--- a/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.html
+++ b/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.html
@@ -20,8 +20,9 @@
{{selectedTitle}}
</div>
<div [ngStyle]="{'width': width + 'px', 'height': height + 'px'}"
class="p-10">
- <div *ngFor="let item of items">
+ <div *ngFor="let item of items"
+ data-cy="dashboard-raw-item">
{{item}}
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
index a83595d..af78fcf 100644
---
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
+++
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
@@ -24,7 +24,9 @@
<h4>{{pages[0].description}}</h4>
<mat-list>
<mat-list-item *ngFor="let pipeline of
visualizablePipelines"
- (click)="selectPipeline(pipeline)"
class="list-item">
+ (click)="selectPipeline(pipeline)"
+ class="list-item"
+
[attr.data-cy]="'dashboard-visualize-pipeline-' + pipeline.pipelineName">
<div mat-list-avatar
class="pipeline-avatar
sp-accent-bg">{{iconText(pipeline.visualizationName)}}
</div>
@@ -39,7 +41,9 @@
<h4>{{pages[1].description}}</h4>
<mat-list>
<mat-list-item *ngFor="let widget of availableWidgets"
- (click)="selectWidget(widget)"
class="list-item">
+ (click)="selectWidget(widget)"
+ class="list-item"
+
[attr.data-cy]="'dashboard-select-widget-' + widget.widgetName">
<div mat-list-avatar
class="pipeline-avatar sp-accent-bg">
<span
*ngIf="!widget.widgetIconName">{{iconText(widget.widgetLabel)}}</span>
@@ -76,8 +80,10 @@
<button mat-button mat-raised-button class="mat-basic mr-10"
(click)="back()" *ngIf="(!('select-pipeline'===page))">
Back
</button>
- <button mat-button mat-raised-button color="accent" (click)="next()"
[disabled]="'configure-widget' === page
- && !formValid">
+ <button mat-button mat-raised-button color="accent"
+ (click)="next()"
+ [disabled]="'configure-widget' === page && !formValid"
+ data-cy="dashboard-new-widget-next-btn">
<span *ngIf="!editMode && 'configure-widget' ===
page">Create</span>
<span *ngIf="editMode && 'configure-widget' === page">Save</span>
<span *ngIf="editMode == null && !('configure-widget' ===
page)">Next</span>
diff --git
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
index a42d819..98f26ed 100644
---
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
+++
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
@@ -16,13 +16,13 @@
*
*/
-import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit} from
'@angular/core';
-import {ElementIconText} from
'../../../services/get-element-icon-text.service';
-import {Dashboard} from '../../models/dashboard.model';
-import {WidgetConfigBuilder} from '../../registry/widget-config-builder';
-import {WidgetRegistry} from '../../registry/widget-registry';
-import {MappingPropertyGenerator} from
'../../sdk/matching/mapping-property-generator';
-import {DashboardService} from '../../services/dashboard.service';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit } from
'@angular/core';
+import { ElementIconText } from
'../../../services/get-element-icon-text.service';
+import { Dashboard } from '../../models/dashboard.model';
+import { WidgetConfigBuilder } from '../../registry/widget-config-builder';
+import { WidgetRegistry } from '../../registry/widget-registry';
+import { MappingPropertyGenerator } from
'../../sdk/matching/mapping-property-generator';
+import { DashboardService } from '../../services/dashboard.service';
import {
DashboardWidgetModel,
DashboardWidgetSettings,
@@ -32,10 +32,10 @@ import {
MappingPropertyNary,
MappingPropertyUnary,
VisualizablePipeline
-} from "../../../core-model/gen/streampipes-model";
-import {PipelineService} from
"../../../platform-services/apis/pipeline.service";
-import {FormBuilder, FormGroup} from "@angular/forms";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
+} from '../../../core-model/gen/streampipes-model';
+import { PipelineService } from
'../../../platform-services/apis/pipeline.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
@Component({
selector: 'add-visualization-dialog-component',
@@ -72,8 +72,8 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
parentForm: FormGroup;
- formValid: boolean = false;
- viewInitialized: boolean = false;
+ formValid = false;
+ viewInitialized = false;
@Input()
pipeline: VisualizablePipeline;
@@ -126,7 +126,7 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
});
}
- sortPipeline(visualizations: Array<VisualizablePipeline>):
Array<VisualizablePipeline> {
+ sortPipeline(visualizations: VisualizablePipeline[]):
VisualizablePipeline[] {
return visualizations.sort((a, b) => {
if (a.pipelineName === b.pipelineName) {
return a.visualizationName.toLowerCase() <
b.visualizationName.toLowerCase() ? -1 : 1;
@@ -149,7 +149,7 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
}
getSelectedCss(selected, current) {
- if (selected == current) {
+ if (selected === current) {
return 'wizard-preview wizard-preview-selected';
} else {
return 'wizard-preview';
@@ -157,7 +157,7 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
}
getTabCss(page) {
- if (page == this.page) { return 'md-fab md-accent'; } else { return
'md-fab md-accent wizard-inactive'; }
+ if (page === this.page) { return 'md-fab md-accent'; } else { return
'md-fab md-accent wizard-inactive'; }
}
selectPipeline(vis) {
@@ -170,7 +170,8 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
this.selectedWidget.config.forEach(sp => {
if (sp instanceof MappingPropertyUnary || sp instanceof
MappingPropertyNary) {
const requirement: EventPropertyUnion =
this.findRequirement(this.selectedWidget.requiredSchema, sp.internalName);
- sp.mapsFromOptions = new MappingPropertyGenerator(requirement,
this.selectedPipeline.schema.eventProperties).computeMatchingProperties();
+ sp.mapsFromOptions = new MappingPropertyGenerator(requirement,
+
this.selectedPipeline.schema.eventProperties).computeMatchingProperties();
}
if (sp instanceof FreeTextStaticProperty && sp.internalName ===
WidgetConfigBuilder.TITLE_KEY) {
sp.value = this.selectedPipeline.visualizationName;
@@ -191,16 +192,16 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
}
next() {
- if (this.page == 'select-pipeline') {
+ if (this.page === 'select-pipeline') {
this.loadAvailableWidgets();
this.page = 'select-widget';
- } else if (this.page == 'select-widget') {
+ } else if (this.page === 'select-widget') {
this.page = 'configure-widget';
} else {
const configuredWidget: DashboardWidgetModel = new
DashboardWidgetModel();
- configuredWidget["@class"] =
"org.apache.streampipes.model.dashboard.DashboardWidgetModel";
+ configuredWidget['@class'] =
'org.apache.streampipes.model.dashboard.DashboardWidgetModel';
configuredWidget.dashboardWidgetSettings = this.selectedWidget;
- configuredWidget.dashboardWidgetSettings["@class"] =
"org.apache.streampipes.model.dashboard.DashboardWidgetSettings";
+ configuredWidget.dashboardWidgetSettings['@class'] =
'org.apache.streampipes.model.dashboard.DashboardWidgetSettings';
configuredWidget.visualizationName =
this.selectedPipeline.visualizationName;
configuredWidget.pipelineId = this.selectedPipeline.pipelineId;
configuredWidget.widgetType =
configuredWidget.dashboardWidgetSettings.widgetName;
@@ -218,9 +219,9 @@ export class AddVisualizationDialogComponent implements
OnInit, AfterViewInit {
}
back() {
- if (this.page == 'select-widget') {
+ if (this.page === 'select-widget') {
this.page = 'select-pipeline';
- } else if (this.page == 'configure-widget') {
+ } else if (this.page === 'configure-widget') {
this.loadAvailableWidgets();
this.page = 'select-widget';
}
diff --git
a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
index a8e88b3..a653ab0 100644
---
a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
+++
b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
@@ -22,7 +22,10 @@
<div fxFlex="100" fxLayout="column" style="margin:5px;width:100%">
<mat-form-field class="full-width" color="accent">
<mat-label>Dashboard Name</mat-label>
- <input matInput required [(ngModel)]="dashboard.name">
+ <input matInput
+ required
+ [(ngModel)]="dashboard.name"
+ data-cy="dashboard-name-input">
</mat-form-field>
<mat-form-field class="full-width" color="accent">
<mat-label>Description</mat-label>
@@ -39,8 +42,12 @@
<button mat-button mat-raised-button class="mat-basic mr-10"
(click)="onCancel()">
Cancel
</button>
- <button mat-button mat-raised-button color="accent"
- [disabled]="dashboard.name === '' || dashboard.name ===
undefined" (click)="onSave()">
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="dashboard.name === '' || dashboard.name ===
undefined"
+ (click)="onSave()"
+ data-cy="dashboard-save-btn">
{{createMode ? 'Create' : 'Save'}}
</button>
</div>
