chore: E2E tests for Drill to Detail supported Charts (apache#21681)

Author: geido

superset-frontend/cypress-base/cypress/downloads/new-chart-2022-09-09T14-22-31.728Z.jpg

@@ -64,7 +64,7 @@ function visitDashboard() {
   cy.wait('@get');
   cy.wait('@getCharts');
   cy.wait('@getDatasets');
-  cy.wait(500);
+  cy.url().should('contain', 'native_filters_key');
 }
 
 function prepareDashboardFilters(
@@ -454,6 +454,7 @@ describe('Native filters', () => {
       let filterKey: string;
       const removeFirstChar = (search: string) =>
         search.split('').slice(1, search.length).join('');
+
       cy.location().then(loc => {
         const queryParams = qs.parse(removeFirstChar(loc.search));
         filterKey = queryParams.native_filters_key as string;

superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts

@@ -17,6 +17,11 @@
  * under the License.
  */
 describe('Visualization > Area', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
   const AREA_FORM_DATA = {
     datasource: '2__table',
     viz_type: 'area',
@@ -55,11 +60,6 @@ describe('Visualization > Area', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
-  });
-
   it('should work without groupby', () => {
     verify(AREA_FORM_DATA);
     cy.get('.nv-area').should('have.length', 1);
@@ -105,6 +105,8 @@ describe('Visualization > Area', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    verify(AREA_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts

@@ -19,6 +19,11 @@
 import { interceptChart } from 'cypress/utils';
 
 describe('Visualization > Big Number with Trendline', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    interceptChart({ legacy: false }).as('chartData');
+  });
+
   const BIG_NUMBER_FORM_DATA = {
     datasource: '2__table',
     viz_type: 'big_number',
@@ -49,11 +54,6 @@ describe('Visualization > Big Number with Trendline', () => {
     });
   }
 
-  beforeEach(() => {
-    cy.login();
-    interceptChart({ legacy: false }).as('chartData');
-  });
-
   it('should work', () => {
     verify(BIG_NUMBER_FORM_DATA);
     cy.get('.chart-container .header-line');

superset-frontend/cypress-base/cypress/integration/explore/visualizations/area.test.js

@@ -20,16 +20,16 @@ import { interceptChart } from 'cypress/utils';
 import { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
 
 describe('Visualization > Big Number Total', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    interceptChart({ legacy: false }).as('chartData');
+  });
+
   const BIG_NUMBER_DEFAULTS = {
     ...FORM_DATA_DEFAULTS,
     viz_type: 'big_number_total',
   };
 
-  beforeEach(() => {
-    cy.login();
-    interceptChart({ legacy: false }).as('chartData');
-  });
-
   it('Test big number chart with adhoc metric', () => {
     const formData = { ...BIG_NUMBER_DEFAULTS, metric: NUM_METRIC };
 

superset-frontend/cypress-base/cypress/integration/explore/visualizations/big_number.test.js

@@ -17,6 +17,11 @@
  * under the License.
  */
 describe('Visualization > Box Plot', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
+  });
+
   const BOX_PLOT_FORM_DATA = {
     datasource: '2__table',
     viz_type: 'box_plot',
@@ -37,17 +42,14 @@ describe('Visualization > Box Plot', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
-  });
-
   it('should work', () => {
     verify(BOX_PLOT_FORM_DATA);
     cy.get('.chart-container .box_plot canvas').should('have.length', 1);
   });
 
   it('should allow type to search color schemes', () => {
+    verify(BOX_PLOT_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/big_number_total.test.js

@@ -17,6 +17,11 @@
  * under the License.
  */
 describe('Visualization > Bubble', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
   const BUBBLE_FORM_DATA = {
     datasource: '2__table',
     viz_type: 'bubble',
@@ -51,33 +56,6 @@ describe('Visualization > Bubble', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
-  });
-
-  // Number of circles are pretty unstable when there are a lot of circles
-  // Since main functionality is already covered in filter test below,
-  // skip this test until we find a solution.
-  it.skip('should work', () => {
-    cy.visitChartByParams(BUBBLE_FORM_DATA).then(() => {
-      cy.wait('@getJson').then(xhr => {
-        let expectedBubblesNumber = 0;
-        xhr.responseBody.data.forEach(element => {
-          expectedBubblesNumber += element.values.length;
-        });
-        cy.get('[data-test="chart-container"]')
-          .should('be.visible', { timeout: 15000 })
-          .within(() => {
-            cy.get('svg')
-              .should('exist')
-              .find('.nv-point-clips circle')
-              .should('have.length', expectedBubblesNumber);
-          });
-      });
-    });
-  });
-
   it('should work with filter', () => {
     verify({
       ...BUBBLE_FORM_DATA,
@@ -109,6 +87,8 @@ describe('Visualization > Bubble', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    cy.visitChartByParams(BUBBLE_FORM_DATA);
+
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')
       .focus()

superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js

@@ -17,6 +17,11 @@
  * under the License.
  */
 describe('Visualization > Compare', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
   const COMPARE_FORM_DATA = {
     datasource: '3__table',
     viz_type: 'compare',
@@ -51,11 +56,6 @@ describe('Visualization > Compare', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
-  });
-
   it('should work without groupby', () => {
     verify(COMPARE_FORM_DATA);
     cy.get('.chart-container .nvd3 path.nv-line').should('have.length', 1);
@@ -88,6 +88,8 @@ describe('Visualization > Compare', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    verify(COMPARE_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js

@@ -19,21 +19,20 @@
 import { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
 
 describe('Visualization > Distribution bar chart', () => {
-  const VIZ_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'dist_bar' };
-
   beforeEach(() => {
-    cy.login();
+    cy.preserveLogin();
     cy.intercept('POST', '/superset/explore_json/**').as('getJson');
   });
 
-  it('should work with adhoc metric', () => {
-    const formData = {
-      ...VIZ_DEFAULTS,
-      metrics: NUM_METRIC,
-      groupby: ['state'],
-    };
+  const VIZ_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'dist_bar' };
+  const DISTBAR_FORM_DATA = {
+    ...VIZ_DEFAULTS,
+    metrics: NUM_METRIC,
+    groupby: ['state'],
+  };
 
-    cy.visitChartByParams(formData);
+  it('should work with adhoc metric', () => {
+    cy.visitChartByParams(DISTBAR_FORM_DATA);
     cy.verifySliceSuccess({
       waitAlias: '@getJson',
       querySubstring: NUM_METRIC.label,
@@ -79,6 +78,8 @@ describe('Visualization > Distribution bar chart', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    cy.visitChartByParams(DISTBAR_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/compare.test.js

@@ -17,6 +17,11 @@
  * under the License.
  */
 describe('Visualization > Dual Line', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
   const DUAL_LINE_FORM_DATA = {
     datasource: '3__table',
     viz_type: 'dual_line',
@@ -39,11 +44,6 @@ describe('Visualization > Dual Line', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
-  });
-
   it('should work', () => {
     verify(DUAL_LINE_FORM_DATA);
     cy.get('.chart-container svg path.nv-line').should('have.length', 2);
@@ -68,6 +68,8 @@ describe('Visualization > Dual Line', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    verify(DUAL_LINE_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/dist_bar.test.js

@@ -17,14 +17,18 @@
  * under the License.
  */
 
-// TODO(kgabryje): fix it and un-skip
-describe.skip('Visualization > Gauge', () => {
+describe('Visualization > Gauge', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
+  });
+
   const GAUGE_FORM_DATA = {
-    datasource: '2__table',
+    datasource: '3__table',
     viz_type: 'gauge_chart',
     metric: 'count',
     adhoc_filters: [],
-    slice_id: 49,
+    slice_id: 54,
     row_limit: 10,
   };
 
@@ -33,11 +37,6 @@ describe.skip('Visualization > Gauge', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
-  });
-
   it('should work', () => {
     verify(GAUGE_FORM_DATA);
     cy.get('.chart-container .gauge_chart canvas').should('have.length', 1);
@@ -64,6 +63,8 @@ describe.skip('Visualization > Gauge', () => {
   });
 
   it('should allow type to search color schemes', () => {
+    verify(GAUGE_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js

@@ -27,6 +27,11 @@ type adhocFilter = {
 };
 
 describe('Visualization > Graph', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
+  });
+
   const GRAPH_FORM_DATA = {
     datasource: '1__table',
     viz_type: 'graph_chart',
@@ -50,11 +55,6 @@ describe('Visualization > Graph', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/api/v1/chart/data*').as('getJson');
-  });
-
   it('should work with ad-hoc metric', () => {
     verify(GRAPH_FORM_DATA);
     cy.get('.chart-container .graph_chart canvas').should('have.length', 1);
@@ -79,6 +79,8 @@ describe('Visualization > Graph', () => {
   });
 
   it('should allow type to search color schemes', () => {
+    verify(GRAPH_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')

superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js

@@ -19,6 +19,11 @@
 import { QueryFormData } from '@superset-ui/core';
 
 describe('Visualization > Histogram', () => {
+  beforeEach(() => {
+    cy.preserveLogin();
+    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+  });
+
   const HISTOGRAM_FORM_DATA: QueryFormData = {
     datasource: '3__table',
     viz_type: 'histogram',
@@ -43,11 +48,6 @@ describe('Visualization > Histogram', () => {
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
   }
 
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
-  });
-
   it('should work without groupby', () => {
     verify(HISTOGRAM_FORM_DATA);
     cy.get('.chart-container svg .vx-bar').should(
@@ -86,6 +86,8 @@ describe('Visualization > Histogram', () => {
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
+    verify(HISTOGRAM_FORM_DATA);
+
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]')