chore: Add new e2e tests for Explore (#21184)

* chore(explore): Add cypress test for creating chart from dataset list

* Add cypress test for creating chart from sqllab query

* Fix the test for editing dataset in exploer

* Fix lint

* Fix tests

superset-frontend/cypress-base/cypress/integration/dataset/dataset_list.test.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.
+ */
+
+const DATASET_LIST_PATH = 'tablemodelview/list';
+
+describe('Dataset list', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit(DATASET_LIST_PATH);
+  });
+
+  it('should open Explore on dataset name click', () => {
+    cy.intercept('**/api/v1/explore/**').as('explore');
+    cy.get('[data-test="listview-table"] [data-test="internal-link"]')
+      .contains('birth_names')
+      .click();
+    cy.wait('@explore');
+    cy.get('[data-test="datasource-control"] .title-select').contains(
+      'birth_names',
+    );
+    cy.get('.metric-option-label').first().contains('COUNT(*)');
+    cy.get('.column-option-label').first().contains('ds');
+    cy.get('[data-test="fast-viz-switcher"] > div:not([role="button"]')
+      .contains('Table')
+      .should('be.visible');
+  });
+});

superset-frontend/cypress-base/cypress/integration/explore/control.test.ts

@@ -25,17 +25,15 @@ import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';
 describe('Datasource control', () => {
   const newMetricName = `abc${Date.now()}`;
 
-  // TODO: uncomment when adding metrics from dataset is fixed
-  xit('should allow edit dataset', () => {
+  it('should allow edit dataset', () => {
     let numScripts = 0;
 
     cy.login();
-    interceptChart({ legacy: false }).as('chartData');
+    interceptChart({ legacy: true }).as('chartData');
 
     cy.visitChartByName('Num Births Trend');
     cy.verifySliceSuccess({ waitAlias: '@chartData' });
 
-    cy.get('[data-test="open-datasource-tab').click({ force: true });
     cy.get('[data-test="datasource-menu-trigger"]').click();
 
     cy.get('script').then(nodes => {
@@ -53,21 +51,31 @@ describe('Datasource control', () => {
     });
     // create new metric
     cy.get('[data-test="crud-add-table-item"]', { timeout: 10000 }).click();
-    cy.get('[data-test="table-content-rows"]')
-      .find('input[value="<new metric>"]')
+    cy.wait(1000);
+    cy.get(
+      '[data-test="table-content-rows"] [data-test="editable-title-input"]',
+    )
+      .first()
       .click();
-    cy.get('[data-test="table-content-rows"]')
-      .find('input[value="<new metric>"]')
+
+    cy.get(
+      '[data-test="table-content-rows"] [data-test="editable-title-input"]',
+    )
+      .first()
       .focus()
       .clear()
       .type(`${newMetricName}{enter}`);
+
     cy.get('[data-test="datasource-modal-save"]').click();
     cy.get('.ant-modal-confirm-btns button').contains('OK').click();
     // select new metric
     cy.get('[data-test=metrics]')
-      .find('.Select__control input')
-      .focus()
-      .type(newMetricName, { force: true });
+      .contains('Drop columns/metrics here or click')
+      .click();
+
+    cy.get('input[aria-label="Select saved metrics"]').type(
+      `${newMetricName}{enter}`,
+    );
     // delete metric
     cy.get('[data-test="datasource-menu-trigger"]').click();
     cy.get('[data-test="edit-dataset"]').click();
@@ -78,13 +86,11 @@ describe('Datasource control', () => {
     });
     cy.get(`input[value="${newMetricName}"]`)
       .closest('tr')
-      .find('.fa-trash')
+      .find('[data-test="crud-delete-icon"]')
       .click();
     cy.get('[data-test="datasource-modal-save"]').click();
     cy.get('.ant-modal-confirm-btns button').contains('OK').click();
-    cy.get('.Select__multi-value__label')
-      .contains(newMetricName)
-      .should('not.exist');
+    cy.get('[data-test="metrics"]').contains(newMetricName).should('not.exist');
   });
 });
 

superset-frontend/cypress-base/cypress/integration/sqllab/query.test.ts

@@ -34,19 +34,9 @@ describe('SqlLab query panel', () => {
     // are fetched below (because React _Virtualized_ does not render all rows)
     let clockTime = 0;
 
-    const sampleResponse = {
-      status: 'success',
-      data: [{ '?column?': 1 }],
-      columns: [{ name: '?column?', type: 'INT', is_dttm: false }],
-      selected_columns: [{ name: '?column?', type: 'INT', is_dttm: false }],
-      expanded_columns: [],
-    };
-
     cy.intercept({
       method: 'POST',
       url: '/superset/sql_json/',
-      delay: 1000,
-      response: () => sampleResponse,
     }).as('mockSQLResponse');
 
     cy.get('.TableSelector .Select:eq(0)').click();
@@ -157,4 +147,52 @@ describe('SqlLab query panel', () => {
       assertSQLLabResultsAreEqual(initialResultsTable, savedQueryResultsTable);
     });
   });
+
+  it('Create a chart from a query', () => {
+    cy.intercept('/superset/sql_json/').as('queryFinished');
+    cy.intercept('**/api/v1/explore/**').as('explore');
+    cy.intercept('**/api/v1/chart/**').as('chart');
+
+    // cypress doesn't handle opening a new tab, override window.open to open in the same tab
+    cy.window().then(win => {
+      cy.stub(win, 'open', url => {
+        // eslint-disable-next-line no-param-reassign
+        win.location.href = url;
+      });
+    });
+
+    const query = 'SELECT gender, name FROM birth_names';
+
+    cy.get('.ace_text-input')
+      .focus()
+      .clear({ force: true })
+      .type(`{selectall}{backspace}${query}`, { force: true });
+    cy.get('.sql-toolbar button').contains('Run').click();
+    cy.wait('@queryFinished');
+
+    cy.get(
+      '.SouthPane .ant-tabs-content > .ant-tabs-tabpane-active > div button:first',
+      { timeout: 10000 },
+    ).click();
+
+    cy.wait('@explore');
+    cy.get('[data-test="datasource-control"] .title-select').contains(query);
+    cy.get('.column-option-label').first().contains('gender');
+    cy.get('.column-option-label').last().contains('name');
+
+    cy.get(
+      '[data-test="all_columns"] [data-test="dnd-labels-container"] > div:first-child',
+    ).contains('gender');
+    cy.get(
+      '[data-test="all_columns"] [data-test="dnd-labels-container"] > div:nth-child(2)',
+    ).contains('name');
+
+    cy.wait('@chart');
+    cy.get('[data-test="slice-container"] table > thead th')
+      .first()
+      .contains('gender');
+    cy.get('[data-test="slice-container"] table > thead th')
+      .last()
+      .contains('name');
+  });
 });