From 0f0e97429b6ad177bcf616a24793e8b16d85295d Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:23:17 +0200 Subject: [PATCH] test: Add time order test + minor changes (#3113) * added time order test + minor changes * minor changes for e2e test --- .../support/utils/datalake/DataLakeBtns.ts | 8 ++ .../support/utils/datalake/DataLakeUtils.ts | 14 +++- .../tests/datalake/timeOrderDataView.spec.ts | 74 +++++++++++++++++++ .../tests/datalake/timeRangeSelectors.spec.ts | 4 +- .../datalake/widgets/timeSeriesSave.spec.ts | 4 +- .../order-selection-panel.component.html | 10 ++- 6 files changed, 105 insertions(+), 9 deletions(-) create mode 100644 ui/cypress/tests/datalake/timeOrderDataView.spec.ts diff --git a/ui/cypress/support/utils/datalake/DataLakeBtns.ts b/ui/cypress/support/utils/datalake/DataLakeBtns.ts index 5bb7083108..9f456e2f70 100644 --- a/ui/cypress/support/utils/datalake/DataLakeBtns.ts +++ b/ui/cypress/support/utils/datalake/DataLakeBtns.ts @@ -20,4 +20,12 @@ export class DataLakeBtns { public static refreshDataLakeMeasures() { return cy.dataCy('refresh-data-lake-measures'); } + + public static saveDataViewButton() { + return cy.dataCy('save-data-view-btn').click(); + } + + public static editDataViewButton(widgetName: string) { + return cy.dataCy('edit-data-view-' + widgetName).click(); + } } diff --git a/ui/cypress/support/utils/datalake/DataLakeUtils.ts b/ui/cypress/support/utils/datalake/DataLakeUtils.ts index 0dee52c86d..84bcc84786 100644 --- a/ui/cypress/support/utils/datalake/DataLakeUtils.ts +++ b/ui/cypress/support/utils/datalake/DataLakeUtils.ts @@ -282,6 +282,14 @@ export class DataLakeUtils { .click(); } + public static clickOrderBy(order: String) { + if (order == 'ascending') { + cy.dataCy('ascending-radio-button').click(); + } else { + cy.dataCy('descending-radio-button').click(); + } + } + /** * Select visualization type */ @@ -351,14 +359,14 @@ export class DataLakeUtils { public static selectTimeRange(from: Date, to: Date) { DataLakeUtils.openTimeSelectorMenu(); - const monthsBack = Math.abs(differenceInMonths(from, new Date())); + const monthsBack = Math.abs(differenceInMonths(from, new Date())) + 1; DataLakeUtils.navigateCalendar('previous', monthsBack); - DataLakeUtils.selectDay(from.getDay()); + DataLakeUtils.selectDay(from.getDate()); const monthsForward = Math.abs(differenceInMonths(from, to)); DataLakeUtils.navigateCalendar('next', monthsForward); - DataLakeUtils.selectDay(to.getDay()); + DataLakeUtils.selectDay(to.getDate()); DataLakeUtils.setTimeInput('time-selector-start-time', from); DataLakeUtils.setTimeInput('time-selector-end-time', to); diff --git a/ui/cypress/tests/datalake/timeOrderDataView.spec.ts b/ui/cypress/tests/datalake/timeOrderDataView.spec.ts new file mode 100644 index 0000000000..75cf2e8db0 --- /dev/null +++ b/ui/cypress/tests/datalake/timeOrderDataView.spec.ts @@ -0,0 +1,74 @@ +/* + * 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 { DataLakeUtils } from '../../support/utils/datalake/DataLakeUtils'; +import { DataLakeBtns } from '../../support/utils/datalake/DataLakeBtns'; + +describe('Test Time Order in Data Explorer', () => { + beforeEach('Setup Test', () => { + cy.initStreamPipesTest(); + DataLakeUtils.loadDataIntoDataLake('datalake/sample.csv', false); + DataLakeUtils.goToDatalake(); + DataLakeUtils.createAndEditDataView('TestView'); + }); + + it('Perform Test with ascending and descending order', () => { + const startDate = new Date(1653871499055); + const endDate = new Date(1653871608093); + + DataLakeUtils.clickOrderBy('descending'); + + DataLakeUtils.openVisualizationConfig(); + DataLakeUtils.selectVisualizationType('Table'); + DataLakeUtils.selectTimeRange(startDate, endDate); + cy.wait(1000); + + cy.dataCy('data-explorer-table').then($cells => { + const strings = $cells.map((index, cell) => cell.innerText).get(); + + // Check for date strings if order is descending + const dateStrings = strings.filter((_, index) => index % 4 === 0); + const dates = dateStrings.map(dateStr => new Date(dateStr)); + const timestamps = dates.map(date => date.getTime()); + for (let i = 0; i < timestamps.length - 1; i++) { + expect(timestamps[i]).to.be.at.least(timestamps[i + 1]); + } + }); + + // Save and leave view, edit view again and check ascending order + DataLakeBtns.saveDataViewButton(); + DataLakeBtns.editDataViewButton('NewWidget'); + DataLakeUtils.clickOrderBy('ascending'); + DataLakeUtils.openVisualizationConfig(); + DataLakeUtils.selectVisualizationType('Table'); + DataLakeUtils.selectTimeRange(startDate, endDate); + cy.wait(1000); + + cy.dataCy('data-explorer-table').then($cells => { + const strings = $cells.map((index, cell) => cell.innerText).get(); + + // Check for date strings if order is ascending + const dateStrings = strings.filter((_, index) => index % 4 === 0); + const dates = dateStrings.map(dateStr => new Date(dateStr)); + const timestamps = dates.map(date => date.getTime()); + for (let i = 0; i < timestamps.length - 1; i++) { + expect(timestamps[i]).to.be.at.most(timestamps[i + 1]); + } + }); + }); +}); diff --git a/ui/cypress/tests/datalake/timeRangeSelectors.spec.ts b/ui/cypress/tests/datalake/timeRangeSelectors.spec.ts index a8626a8374..d01dab6918 100644 --- a/ui/cypress/tests/datalake/timeRangeSelectors.spec.ts +++ b/ui/cypress/tests/datalake/timeRangeSelectors.spec.ts @@ -79,7 +79,7 @@ describe('Test Time Range Selectors in Data Explorer', () => { isTimeWithinTolerance( actualTime as string, expectedDate, - 3, + 5, ), ).to.be.true; }); @@ -92,7 +92,7 @@ describe('Test Time Range Selectors in Data Explorer', () => { isTimeWithinTolerance( actualTime as string, expectedDate, - 3, + 5, ), ).to.be.true; }); diff --git a/ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts b/ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts index 464b5f2ee8..586f158f76 100644 --- a/ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts +++ b/ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts @@ -28,11 +28,11 @@ describe('Test if widget configuration is updated correctly', () => { // Create first test data view with one time series widget DataLakeUtils.addDataViewAndTimeSeriesWidget(testView1, dataSet); - DataLakeUtils.saveDataExplorerWidgetConfiguration(); + DataLakeUtils.saveDataViewConfiguration(); // Create second test data view with one time series widget DataLakeUtils.addDataViewAndTimeSeriesWidget(testView2, dataSet); - DataLakeUtils.saveDataExplorerWidgetConfiguration(); + DataLakeUtils.saveDataViewConfiguration(); }); // This test case has two different options. The first one selects the edit button of the data explorer on the top right diff --git a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component.html index 2b08856ab1..9e47655f85 100644 --- a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component.html +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component.html @@ -22,10 +22,16 @@ (change)="triggerConfigurationUpdate()" [(ngModel)]="sourceConfig.queryConfig.order" > - Newest (descending) - Oldest (ascending)