test: Add time order test + minor changes (#3113)

* added time order test + minor changes

* minor changes for e2e test

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();
+    }
 }

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);

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]);
+            }
+        });
+    });
+});

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;
                 });

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

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"
     >
-        <mat-radio-button class="selection-radio-button" [value]="'DESC'"
+        <mat-radio-button
+            class="selection-radio-button"
+            [value]="'DESC'"
+            data-cy="descending-radio-button"
             >Newest (descending)
         </mat-radio-button>
-        <mat-radio-button class="selection-radio-button" [value]="'ASC'"
+        <mat-radio-button
+            class="selection-radio-button"
+            [value]="'ASC'"
+            data-cy="ascending-radio-button"
             >Oldest (ascending)
         </mat-radio-button>
     </mat-radio-group>