This is an automated email from the ASF dual-hosted git repository. dominikriemer pushed a commit to branch add-tests-for-value-progress-chart in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 85e0ea86a75a1a0bf6835ca6fa5e1b3fab3a2950 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Jun 16 11:16:51 2026 +0200 test: Add cypress tests for progress bar and value card --- ui/cypress/support/utils/chart/ChartBtns.ts | 118 ++++++++++++++++++++- .../support/utils/chart/ChartWidgetTableUtils.ts | 8 ++ .../tests/chart/chart-types/progress-bar.spec.ts | 58 ++++++++++ ui/cypress/tests/chart/chart-types/table.spec.ts | 18 ++++ .../{table.spec.ts => value-card.spec.ts} | 28 +++-- .../progress-bar-widget-config.component.html | 48 +++++---- .../progress-bar-widget.component.html | 38 +++++-- .../charts/table/table-widget.component.html | 11 +- .../config/value-card-widget-config.component.html | 3 + .../value-card/value-card-widget.component.html | 30 ++++-- .../result-label-configuration.component.html | 4 + 11 files changed, 322 insertions(+), 42 deletions(-) diff --git a/ui/cypress/support/utils/chart/ChartBtns.ts b/ui/cypress/support/utils/chart/ChartBtns.ts index 70bf1499dd..5b24ae3e95 100644 --- a/ui/cypress/support/utils/chart/ChartBtns.ts +++ b/ui/cypress/support/utils/chart/ChartBtns.ts @@ -120,7 +120,7 @@ export class ChartBtns { } public static editDataViewButton(dataViewName: string) { - return cy.dataCy('edit-data-view-' + dataViewName.replaceAll(' ', '')); + return cy.dataCy('edit-data-view-' + dataViewName.replace(/ /g, '')); } public static chartSyncProblemIcon() { @@ -213,6 +213,112 @@ export class ChartBtns { .find('input[type="checkbox"]'); } + public static valueCardWidget() { + return cy.dataCy('value-card-widget'); + } + + public static valueCardTitleInput() { + return cy.dataCy('data-explorer-value-card-title-input'); + } + + public static valueCardDescriptionInput() { + return cy.dataCy('data-explorer-value-card-description-input'); + } + + public static valueCardShowTimestampCheckbox() { + return cy + .dataCy('data-explorer-value-card-show-timestamp') + .find('input[type="checkbox"]'); + } + + public static valueCardTitle() { + return cy.dataCy('value-card-title'); + } + + public static valueCardDescription() { + return cy.dataCy('value-card-description'); + } + + public static valueCardTimestamp() { + return cy.dataCy('value-card-timestamp'); + } + + public static valueCardItems() { + return cy.dataCy('value-card-item', {}, true); + } + + public static valueCardItemLabels() { + return cy.dataCy('value-card-item-label', {}, true); + } + + public static valueCardItemValues() { + return cy.dataCy('value-card-item-value', {}, true); + } + + public static progressBarWidget() { + return cy.dataCy('progress-bar-widget'); + } + + public static progressBarTitleInput() { + return cy.dataCy('data-explorer-progress-title-input'); + } + + public static progressBarDescriptionInput() { + return cy.dataCy('data-explorer-progress-description-input'); + } + + public static progressBarTargetSource() { + return cy.dataCy('data-explorer-progress-target-source'); + } + + public static progressBarTargetValueInput() { + return cy.dataCy('data-explorer-progress-target-value'); + } + + public static progressBarDisplayMode() { + return cy.dataCy('data-explorer-progress-display-mode'); + } + + public static progressBarInvertCheckbox() { + return cy + .dataCy('data-explorer-progress-invert') + .find('input[type="checkbox"]'); + } + + public static progressBarShowLabelCheckbox() { + return cy + .dataCy('data-explorer-progress-show-label') + .find('input[type="checkbox"]'); + } + + public static progressBarTitle() { + return cy.dataCy('progress-bar-title'); + } + + public static progressBarDescription() { + return cy.dataCy('progress-bar-description'); + } + + public static progressBarStatus() { + return cy.dataCy('progress-bar-status'); + } + + public static progressBarPercent() { + return cy.dataCy('progress-bar-percent'); + } + + public static progressBarFill() { + return cy.dataCy('progress-bar-fill'); + } + + public static progressBarPrimaryLabel() { + return cy.dataCy('progress-bar-primary-label'); + } + + public static progressBarSecondaryLabel() { + return cy.dataCy('progress-bar-secondary-label'); + } + public static addNewWidgetBtn() { return cy.dataCy('add-new-widget', { timeout: 10000 }); } @@ -305,6 +411,16 @@ export class ChartBtns { return cy.dataCy('data-explorer-table-paginator'); } + public static resultLabelInput(fieldName: string) { + return cy.get( + `[data-cy="data-explorer-result-label-input-${fieldName}"]`, + ); + } + + public static tableHeader(fieldName: string) { + return cy.get(`[data-cy="data-explorer-table-header-${fieldName}"]`); + } + public static matOptionByText(text: string | RegExp) { return cy.get('mat-option').contains(text); } diff --git a/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts b/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts index 9c58916837..68b4893b93 100644 --- a/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts +++ b/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts @@ -16,6 +16,8 @@ * */ +import { ChartBtns } from './ChartBtns'; + export class ChartWidgetTableUtils { public static chartTableRows() { return cy @@ -45,4 +47,10 @@ export class ChartWidgetTableUtils { public static checkTotalAmountOfRows(amount: number) { this.paginatorRangeLabel().should('contain.text', amount.toString()); } + + public static checkHeaderLabel(fieldName: string, expectedLabel: string) { + ChartBtns.tableHeader(fieldName).should($header => { + expect($header.text().trim()).to.equal(expectedLabel); + }); + } } diff --git a/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts b/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts new file mode 100644 index 0000000000..924f744214 --- /dev/null +++ b/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts @@ -0,0 +1,58 @@ +/* + * 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 { ChartUtils } from '../../../support/utils/chart/ChartUtils'; +import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils'; +import { ChartBtns } from '../../../support/utils/chart/ChartBtns'; + +describe('Test Progress Bar View in Charts', () => { + beforeEach('Setup Test', () => { + ChartUtils.initDataLakeTests(); + }); + + it('Perform Test', () => { + ChartUtils.addDataViewAndWidget( + PrepareTestDataUtils.dataName, + 'progress-bar', + ); + + ChartUtils.openVisualizationConfig(); + ChartBtns.progressBarTitleInput().type('Job Progress'); + ChartBtns.progressBarDescriptionInput().type( + 'Progress against the configured target value.', + ); + ChartBtns.progressBarTargetValueInput().clear().type('50'); + ChartBtns.progressBarInvertCheckbox() + .check({ force: true }) + .should('be.checked'); + + ChartBtns.progressBarWidget().should('be.visible'); + ChartBtns.progressBarTitle().should('contain.text', 'Job Progress'); + ChartBtns.progressBarDescription().should( + 'contain.text', + 'Progress against the configured target value.', + ); + ChartBtns.progressBarStatus().should('contain.text', 'Remaining'); + ChartBtns.progressBarPercent().should('contain.text', '%'); + ChartBtns.progressBarPrimaryLabel().should('contain.text', '%'); + ChartBtns.progressBarSecondaryLabel().should('contain.text', '/'); + ChartBtns.progressBarFill() + .invoke('attr', 'style') + .should('match', /width:\s*[0-9.]+%/); + }); +}); diff --git a/ui/cypress/tests/chart/chart-types/table.spec.ts b/ui/cypress/tests/chart/chart-types/table.spec.ts index 2b775f0793..0b543a7e7b 100644 --- a/ui/cypress/tests/chart/chart-types/table.spec.ts +++ b/ui/cypress/tests/chart/chart-types/table.spec.ts @@ -17,6 +17,7 @@ */ import { ChartUtils } from '../../../support/utils/chart/ChartUtils'; +import { ChartBtns } from '../../../support/utils/chart/ChartBtns'; import { ChartWidgetTableUtils } from '../../../support/utils/chart/ChartWidgetTableUtils'; import { ChartWidget } from '../../../support/model/ChartWidget'; import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils'; @@ -35,4 +36,21 @@ describe('Test Table View in Charts', () => { // Check if table is displayed correctly ChartWidgetTableUtils.checkAmountOfRows(10); }); + + it('Renames table field labels', () => { + ChartUtils.addDataViewAndWidget( + PrepareTestDataUtils.dataName, + ChartWidget.TABLE, + ); + + ChartUtils.selectDataConfig(); + ChartBtns.resultLabelInput('randomnumber') + .clear() + .type('Random Number Label'); + + ChartWidgetTableUtils.checkHeaderLabel( + 'randomnumber', + 'Random Number Label', + ); + }); }); diff --git a/ui/cypress/tests/chart/chart-types/table.spec.ts b/ui/cypress/tests/chart/chart-types/value-card.spec.ts similarity index 52% copy from ui/cypress/tests/chart/chart-types/table.spec.ts copy to ui/cypress/tests/chart/chart-types/value-card.spec.ts index 2b775f0793..713a184c6a 100644 --- a/ui/cypress/tests/chart/chart-types/table.spec.ts +++ b/ui/cypress/tests/chart/chart-types/value-card.spec.ts @@ -17,11 +17,10 @@ */ import { ChartUtils } from '../../../support/utils/chart/ChartUtils'; -import { ChartWidgetTableUtils } from '../../../support/utils/chart/ChartWidgetTableUtils'; -import { ChartWidget } from '../../../support/model/ChartWidget'; import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils'; +import { ChartBtns } from '../../../support/utils/chart/ChartBtns'; -describe('Test Table View in Charts', () => { +describe('Test Value Card View in Charts', () => { beforeEach('Setup Test', () => { ChartUtils.initDataLakeTests(); }); @@ -29,10 +28,27 @@ describe('Test Table View in Charts', () => { it('Perform Test', () => { ChartUtils.addDataViewAndWidget( PrepareTestDataUtils.dataName, - ChartWidget.TABLE, + 'value-card', ); - // Check if table is displayed correctly - ChartWidgetTableUtils.checkAmountOfRows(10); + ChartUtils.openVisualizationConfig(); + ChartBtns.valueCardShowTimestampCheckbox() + .check({ force: true }) + .should('be.checked'); + ChartBtns.valueCardTitleInput().type('Current Snapshot'); + ChartBtns.valueCardDescriptionInput().type( + 'First returned values from the data view.', + ); + + ChartBtns.valueCardWidget().should('be.visible'); + ChartBtns.valueCardTitle().should('contain.text', 'Current Snapshot'); + ChartBtns.valueCardDescription().should( + 'contain.text', + 'First returned values from the data view.', + ); + ChartBtns.valueCardTimestamp().should('be.visible'); + ChartBtns.valueCardItems().should('have.length.greaterThan', 0); + ChartBtns.valueCardItemLabels().first().should('not.be.empty'); + ChartBtns.valueCardItemValues().first().should('not.be.empty'); }); }); diff --git a/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html b/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html index 07eef853c4..c92351b128 100644 --- a/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html +++ b/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html @@ -23,19 +23,22 @@ > <sp-split-section [level]="3" [title]="'Values' | translate"> <sp-form-field [level]="3" [label]="'Current value field' | translate"> - <sp-select-single-property-config - [availableProperties]="availableNumericFields" - [selectedProperty]=" - currentlyConfiguredWidget.visualizationConfig - .currentValueField - " - (changeSelectedProperty)="setCurrentValueField($event)" - > - </sp-select-single-property-config> + <div data-cy="data-explorer-progress-current-field"> + <sp-select-single-property-config + [availableProperties]="availableNumericFields" + [selectedProperty]=" + currentlyConfiguredWidget.visualizationConfig + .currentValueField + " + (changeSelectedProperty)="setCurrentValueField($event)" + > + </sp-select-single-property-config> + </div> </sp-form-field> <sp-form-field [level]="3" [label]="'Target source' | translate"> <mat-radio-group + data-cy="data-explorer-progress-target-source" [ngModel]=" currentlyConfiguredWidget.visualizationConfig.targetSource " @@ -55,20 +58,23 @@ 'field' ) { <sp-form-field [level]="3" [label]="'Target field' | translate"> - <sp-select-single-property-config - [availableProperties]="availableNumericFields" - [selectedProperty]=" - currentlyConfiguredWidget.visualizationConfig - .targetField - " - (changeSelectedProperty)="setTargetField($event)" - > - </sp-select-single-property-config> + <div data-cy="data-explorer-progress-target-field"> + <sp-select-single-property-config + [availableProperties]="availableNumericFields" + [selectedProperty]=" + currentlyConfiguredWidget.visualizationConfig + .targetField + " + (changeSelectedProperty)="setTargetField($event)" + > + </sp-select-single-property-config> + </div> </sp-form-field> } @else { <sp-form-field [level]="3" [label]="'Target value' | translate"> <mat-form-field fxFlex="100"> <input + data-cy="data-explorer-progress-target-value" matInput type="number" [ngModel]=" @@ -85,6 +91,7 @@ <sp-split-section [level]="3" [title]="'Behavior' | translate"> <sp-form-field [level]="3" [label]="'Display mode' | translate"> <mat-radio-group + data-cy="data-explorer-progress-display-mode" [ngModel]=" currentlyConfiguredWidget.visualizationConfig.displayMode " @@ -103,6 +110,7 @@ </sp-form-field> <mat-checkbox + data-cy="data-explorer-progress-show-label" [checked]="currentlyConfiguredWidget.visualizationConfig.showLabel" (change)="setShowLabel($event.checked)" > @@ -110,6 +118,7 @@ </mat-checkbox> <mat-checkbox + data-cy="data-explorer-progress-invert" [checked]=" currentlyConfiguredWidget.visualizationConfig.invertProgress " @@ -119,6 +128,7 @@ </mat-checkbox> <mat-checkbox + data-cy="data-explorer-progress-clamp" [checked]=" currentlyConfiguredWidget.visualizationConfig.clampProgress " @@ -132,6 +142,7 @@ <sp-form-field [level]="3" [label]="'Title' | translate"> <mat-form-field fxFlex="100"> <input + data-cy="data-explorer-progress-title-input" matInput type="text" [(ngModel)]=" @@ -145,6 +156,7 @@ <sp-form-field [level]="3" [label]="'Description' | translate"> <mat-form-field fxFlex="100"> <textarea + data-cy="data-explorer-progress-description-input" matInput rows="3" [(ngModel)]=" diff --git a/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html b/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html index e5dc11771b..ecde77583c 100644 --- a/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html +++ b/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html @@ -50,13 +50,19 @@ @if (titleText || descriptionText) { <div class="progress-copy" fxLayout="column"> @if (titleText) { - <div class="progress-title"> + <div + class="progress-title" + data-cy="progress-bar-title" + > {{ titleText }} </div> } @if (descriptionText) { - <div class="progress-description"> + <div + class="progress-description" + data-cy="progress-bar-description" + > {{ descriptionText }} </div> } @@ -68,18 +74,24 @@ fxLayout="row" fxLayoutAlign="space-between center" > - <span class="progress-status">{{ + <span class="progress-status" data-cy="progress-bar-status">{{ progressView.statusLabel }}</span> @if (showLabel) { - <span class="progress-percent">{{ - progressView.percentLabel - }}</span> + <span + class="progress-percent" + data-cy="progress-bar-percent" + >{{ progressView.percentLabel }}</span + > } </div> - <div class="progress-track"> - <div class="progress-fill" [style.width]="progressWidth"></div> + <div class="progress-track" data-cy="progress-bar-track"> + <div + class="progress-fill" + data-cy="progress-bar-fill" + [style.width]="progressWidth" + ></div> </div> @if (showLabel) { @@ -90,7 +102,10 @@ dataExplorerWidget.visualizationConfig.displayMode === 'percent-and-value' ) { - <div class="progress-primary-label"> + <div + class="progress-primary-label" + data-cy="progress-bar-primary-label" + > {{ progressView.percentLabel }} </div> } @@ -101,7 +116,10 @@ dataExplorerWidget.visualizationConfig.displayMode === 'percent-and-value' ) { - <div class="progress-secondary-label"> + <div + class="progress-secondary-label" + data-cy="progress-bar-secondary-label" + > {{ progressView.valueLabel }} </div> } diff --git a/ui/src/app/chart-shared/components/charts/table/table-widget.component.html b/ui/src/app/chart-shared/components/charts/table/table-widget.component.html index d64f8316c5..15473d5ab6 100644 --- a/ui/src/app/chart-shared/components/charts/table/table-widget.component.html +++ b/ui/src/app/chart-shared/components/charts/table/table-widget.component.html @@ -90,7 +90,16 @@ @if (column === 'time') { {{ 'Time' | translate }} } @else { - {{ headerLabel(column) }} + <span + [attr.data-cy]=" + 'data-explorer-table-header-' + + column + " + > + {{ + headerLabel(column) + }} + </span> } </span> <mat-icon class="sort-icon"> diff --git a/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html b/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html index 6f5acf1961..54f0165138 100644 --- a/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html +++ b/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html @@ -43,6 +43,7 @@ <sp-split-section [level]="3" [title]="'Content' | translate"> <sp-form-field [level]="3" [label]="'Timestamp' | translate"> <mat-checkbox + data-cy="data-explorer-value-card-show-timestamp" [checked]=" currentlyConfiguredWidget.visualizationConfig.showTimestamp " @@ -59,6 +60,7 @@ <sp-form-field [level]="3" [label]="'Title' | translate"> <mat-form-field fxFlex="100"> <input + data-cy="data-explorer-value-card-title-input" matInput type="text" [(ngModel)]=" @@ -72,6 +74,7 @@ <sp-form-field [level]="3" [label]="'Description' | translate"> <mat-form-field fxFlex="100"> <textarea + data-cy="data-explorer-value-card-description-input" matInput rows="3" [(ngModel)]=" diff --git a/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html b/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html index 943033f6e4..5d269da2aa 100644 --- a/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html +++ b/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html @@ -50,13 +50,19 @@ @if (titleText || descriptionText) { <div class="value-card-copy" fxLayout="column"> @if (titleText) { - <div class="value-card-title"> + <div + class="value-card-title" + data-cy="value-card-title" + > {{ titleText }} </div> } @if (descriptionText) { - <div class="value-card-description"> + <div + class="value-card-description" + data-cy="value-card-description" + > {{ descriptionText }} </div> } @@ -64,7 +70,10 @@ } @if (showTimestamp) { - <div class="value-card-timestamp"> + <div + class="value-card-timestamp" + data-cy="value-card-timestamp" + > {{ latestTimestampLabel }} </div> } @@ -75,11 +84,20 @@ [style.--value-card-list-columns]="valueListColumns" > @for (card of valueCards; track trackCard($index, card)) { - <section class="value-card-item"> - <div class="value-card-item-label"> + <section + class="value-card-item" + data-cy="value-card-item" + > + <div + class="value-card-item-label" + data-cy="value-card-item-label" + > {{ card.label }} </div> - <div class="value-card-item-value"> + <div + class="value-card-item-value" + data-cy="value-card-item-value" + > {{ card.value }} </div> </section> diff --git a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html index f4dbb538c0..57866571ee 100644 --- a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html +++ b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html @@ -36,6 +36,10 @@ > <input matInput + [attr.data-cy]=" + 'data-explorer-result-label-input-' + + field.fullDbName + " [ngModel]="getLabel(field)" (ngModelChange)="updateLabel(field, $event)" [placeholder]="field.fullDbName"
