New E2E-Tests for data view (#2154)

* Add two new tests for data view

* add five new tests for data view

* Merge branch 'dev' into dataview-tests

* Reset port in cypress.config.ts

* Remove test for filter in table.spec.ts

* added Utils

ui/cypress/support/utils/datalake/DataLakeUtils.ts

@@ -30,6 +30,11 @@ export class DataLakeUtils {
         cy.visit('#/dataexplorer');
     }
 
+    public static initDataLakeTests() {
+        cy.initStreamPipesTest();
+        DataLakeUtils.loadRandomDataSetIntoDataLake();
+    }
+
     public static getDataLakeTestSetAdapter(
         name: string,
         storeInDataLake: boolean = true,
@@ -88,7 +93,7 @@ export class DataLakeUtils {
         DataLakeUtils.createAndEditDataView(dataViewName);
 
         DataLakeUtils.selectTimeRange(
-            new Date(2015, 10, 20, 22, 44),
+            new Date(2020, 10, 20, 22, 44),
             DataLakeUtils.getFutureDate(),
         );
         // DataLakeUtils.addNewWidget();

ui/cypress/tests/datalake/widgets/2d-correlation.spec.ts

@@ -0,0 +1,43 @@
+/*
+ * 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';
+
+describe('Test 2d Correlation View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', '2D Correlation');
+
+        // Check if scatter plot is displayed
+        cy.get('g').should('have.class', 'scatterlayer mlayer');
+        cy.get('g.points', { timeout: 10000 })
+            .children()
+            .should('have.length', 10);
+
+        // Change from line plot to scatter plot
+        DataLakeUtils.selectVisualizationConfig();
+        cy.get('div').contains('Scatter').click();
+        cy.get('div').contains('Density').click();
+
+        // Check if scatter plot is displayed
+        cy.get('g').should('have.class', 'contourlayer mlayer');
+    });
+});

ui/cypress/tests/datalake/widgets/table.ts → ui/cypress/tests/datalake/widgets/distribution.spec.ts

@@ -18,41 +18,32 @@
 
 import { DataLakeUtils } from '../../../support/utils/datalake/DataLakeUtils';
 
-describe('Test Table View in Data Explorer', () => {
+describe('Test Distribution View in Data Explorer', () => {
     beforeEach('Setup Test', () => {
-        cy.login();
-        // cy.initStreamPipesTest()
-        // DataLakeUtils.loadRandomDataSetIntoDataLake();
+        DataLakeUtils.initDataLakeTests();
     });
 
     it('Perform Test', () => {
-        DataLakeUtils.goToDatalake();
-
-        // DataLakeUtils.createAndEditDataView();
-        // Click edit button
-        cy.dataCy('edit-data-view').click();
-
-        DataLakeUtils.addNewWidget();
-
-        DataLakeUtils.selectDataSet('Persist');
-
-        DataLakeUtils.dataConfigSelectAllFields();
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Distribution');
 
+        // Change field for histogram
         DataLakeUtils.selectVisualizationConfig();
+        cy.get('div').contains('randomtext (prepared_data #1)').click();
+        cy.get('div').contains('randomnumber (prepared_data #1)').click();
 
-        DataLakeUtils.selectVisualizationType('Table');
-
-        DataLakeUtils.clickCreateButton();
-
-        DataLakeUtils.selectTimeRange(
-            new Date(2020, 10, 20, 22, 44),
-            DataLakeUtils.getFutureDate(),
+        // Check if distribution chart is displayed
+        cy.get('sp-data-explorer-distribution-chart-widget').should(
+            'be.visible',
         );
 
-        cy.dataCy('data-explorer-table-row', { timeout: 10000 }).should(
-            'have.length',
-            10,
+        // Change from histogram to heatmap
+        DataLakeUtils.selectVisualizationConfig();
+        cy.get('div').contains('Histogram').click();
+        cy.get('div').contains('Value Heatmap').click();
+
+        // Check if distribution chart is displayed
+        cy.get('sp-data-explorer-distribution-chart-widget').should(
+            'be.visible',
         );
-        // Validate that X lines are available
     });
 });

ui/cypress/tests/datalake/widgets/heatmap.spec.ts

@@ -0,0 +1,36 @@
+/*
+ * 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';
+
+describe('Test Heatmap View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Heatmap');
+
+        // Check checkbox
+        DataLakeUtils.selectVisualizationConfig();
+        cy.get('mat-checkbox input').click({ force: true });
+
+        // Check if heatmap chart is visible
+        cy.get('sp-data-explorer-heatmap-widget').should('be.visible');
+    });
+});

ui/cypress/tests/datalake/widgets/indicator.spec.ts

@@ -0,0 +1,43 @@
+/*
+ * 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';
+
+describe('Test Indicator View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Indicator');
+
+        // Check checkbox
+        DataLakeUtils.selectVisualizationConfig();
+        cy.get('mat-checkbox input').click({ force: true });
+        cy.dataCy('data-explorer-select-delta-field')
+            .click()
+            .get('mat-option')
+            .contains('count')
+            .click();
+
+        // Check if indicator is displayed
+        cy.get('g').should('have.class', 'indicatorlayer');
+        // Check if delta is displayed
+        cy.get('text').should('have.class', 'delta');
+    });
+});

ui/cypress/tests/datalake/widgets/map.spec.ts

@@ -0,0 +1,61 @@
+/*
+ * 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';
+
+describe('Test Map View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Map');
+
+        // Change marker positions
+        DataLakeUtils.selectVisualizationConfig();
+        cy.dataCy('data-view-map-select-latitude')
+            .click()
+            .get('mat-option')
+            .contains('randomnumber (prepared_data #1)')
+            .click();
+        cy.dataCy('data-view-map-select-longitude')
+            .click()
+            .get('mat-option')
+            .contains('randomnumber (prepared_data #1)')
+            .click();
+
+        // Check if map with markers is visible
+        cy.get('sp-data-explorer-map-widget').should('be.visible');
+        cy.get('img[alt=Marker]').should(
+            'have.attr',
+            'src',
+            'assets/img/marker-icon.png',
+        );
+
+        // Change from markers to trace
+        DataLakeUtils.selectVisualizationConfig();
+        cy.dataCy('data-view-map-select-marker-or-trace')
+            .click()
+            .get('mat-option')
+            .contains('Trace')
+            .click();
+
+        // Check if trace is visible
+        cy.get('path').should('have.class', 'leaflet-interactive');
+    });
+});

ui/cypress/tests/datalake/widgets/table.spec.ts

@@ -0,0 +1,34 @@
+/*
+ * 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';
+
+describe('Test Table View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Table');
+
+        // Check if table is displayed correctly
+        cy.dataCy('data-explorer-table-row-timestamp', {
+            timeout: 10000,
+        }).should('have.length', 10);
+    });
+});

ui/cypress/tests/datalake/widgets/timeSeriesSave.ts → ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts

@@ -24,13 +24,11 @@ const dataSet = 'Persist';
 
 describe('Test if widget configuration is updated correctly', () => {
     beforeEach('Setup Test', () => {
-        cy.initStreamPipesTest();
-        DataLakeUtils.loadRandomDataSetIntoDataLake();
+        DataLakeUtils.initDataLakeTests();
 
         // Create first test data view with one time series widget
         DataLakeUtils.addDataViewAndTimeSeriesWidget(testView1, dataSet);
         DataLakeUtils.saveDataExplorerWidgetConfiguration();
-        // DataLakeUtils.clickStartTab();
 
         // Create second test data view with one time series widget
         DataLakeUtils.addDataViewAndTimeSeriesWidget(testView2, dataSet);
@@ -49,25 +47,28 @@ describe('Test if widget configuration is updated correctly', () => {
 });
 
 const runTestCase = (editOption: boolean) => {
-    // Go to test view 1 tab and then back to view 2
-    DataLakeUtils.clickTab(testView1);
-    DataLakeUtils.clickTab(testView2);
-
-    // Change one setting in widget
-    const widgetName = 'datalake_configuration';
+    // Visit settings of widget
+    const widgetName = 'prepared_data-time-series-chart';
 
     if (editOption) {
-        cy.dataCy('more-options-' + widgetName).click();
-        cy.dataCy('start-edit-' + widgetName).click();
+        DataLakeUtils.startEditWidget(widgetName);
     } else {
         cy.dataCy('options-data-explorer').click();
         cy.dataCy('options-edit-dashboard').click();
-        cy.dataCy('edit-' + widgetName).click();
     }
 
+    // Change first field from line plot to scatter plot
     DataLakeUtils.selectVisualizationConfig();
     cy.get('div').contains('Line').click();
     cy.get('div').contains('Scatter').click();
 
-    cy.get('path[class="scatterpts"]');
+    // Check if scatter plot is displayed
+    cy.get('g').should('have.class', 'scatterlayer mlayer');
+
+    // Change second field from line plot to bar plot
+    cy.get('div').contains('Line').click();
+    cy.get('div').contains('Bar').click();
+
+    // Check if bar plot is displayed
+    cy.get('g').should('have.class', 'barlayer mlayer');
 };

ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html

@@ -87,6 +87,7 @@
             matTooltip="Reload"
             matTooltipPosition="above"
             (click)="reloadData()"
+            data-cy="reload-data-view-button"
         >
             <i class="material-icons mr-0">autorenew</i>
         </button>

ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html

@@ -70,7 +70,10 @@
                     *ngIf="!editMode"
                     [attr.data-cy]="
                         'more-options-' +
-                        configuredWidget.baseAppearanceConfig.widgetTitle
+                        configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
+                            ' ',
+                            ''
+                        )
                     "
                 >
                     <mat-icon>more_vert</mat-icon>
@@ -86,7 +89,10 @@
                         *ngIf="hasDataExplorerWritePrivileges"
                         [attr.data-cy]="
                             'start-edit-' +
-                            configuredWidget.baseAppearanceConfig.widgetTitle
+                            configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
+                                ' ',
+                                ''
+                            )
                         "
                     >
                         <mat-icon>edit</mat-icon>

ui/src/app/data-explorer/components/widgets/indicator/config/indicator-chart-widget-config.component.html

@@ -39,6 +39,7 @@ <h5>Delta Field</h5>
                 currentlyConfiguredWidget.visualizationConfig.deltaField
             "
             (changeSelectedProperty)="updateDelta($event)"
+            data-cy="data-explorer-select-delta-field"
         >
         </sp-select-property>
     </div>