Adding line and big number total integration tests (#5846)

* Adding line and big number total integration tests

* Breakout visualization tests into multiple files

superset/assets/cypress.json

@@ -1,3 +1,5 @@
 {
-	"baseUrl": "http://localhost:8081"
+	"baseUrl": "http://localhost:8081",
+	"videoUploadOnPasses": false,
+	"ignoreTestFiles": "*.helper.js"
 }

superset/assets/cypress/integration/explore/control_tests.js

@@ -9,15 +9,15 @@ describe('Groupby', function () {
 
     cy.route('POST', '/superset/explore_json/**').as('getJson');
     cy.visitChartByName('Num Births Trend');
-    cy.verifySliceSuccess('@getJson');
+    cy.verifySliceSuccess({ waitAlias: '@getJson' });
 
     cy.get('[data-test=groupby]').within(() => {
       cy.get('.Select-control').click();
       cy.get('input.select-input').type('state', { force: true });
       cy.get('.VirtualizedSelectFocusedOption').click();
     });
     cy.get('button.query').click();
-    cy.verifySliceSuccess('@getJson');
+    cy.verifySliceSuccess({ waitAlias: '@getJson' });
   });
 });
 
@@ -30,7 +30,7 @@ describe('SimpleAdhocMetric', function () {
 
     cy.route('POST', '/superset/explore_json/**').as('getJson');
     cy.visitChartByName('Num Births Trend');
-    cy.verifySliceSuccess('@getJson');
+    cy.verifySliceSuccess({ waitAlias: '@getJson' });
 
     cy.get('[data-test=metrics]').within(() => {
       cy.get('.select-clear').click();

superset/assets/cypress/integration/explore/visualizations/big_number.js

@@ -0,0 +1,58 @@
+import { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
+
+// Big Number Total
+
+describe('Big Number Total', function () {
+  const BIG_NUMBER_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'big_number_total' };
+
+  it('Test big number chart with adhoc metric', function () {
+    cy.server();
+    cy.login();
+
+    const formData = { ...BIG_NUMBER_DEFAULTS, metric: NUM_METRIC };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', querySubstring: NUM_METRIC.label });
+  });
+
+  it('Test big number chart with simple filter', function () {
+    cy.server();
+    cy.login();
+
+    const filters = [{
+      expressionType: 'SIMPLE',
+      subject: 'name',
+      operator: 'in',
+      comparator: ['Aaron', 'Amy', 'Andrea'],
+      clause: 'WHERE',
+      sqlExpression: null,
+      fromFormData: true,
+      filterOptionName: 'filter_4y6teao56zs_ebjsvwy48c',
+    }];
+
+    const formData = { ...BIG_NUMBER_DEFAULTS, metric: 'count', adhoc_filters: filters };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson' });
+  });
+
+  it('Test big number chart ignores groupby', function () {
+    cy.server();
+    cy.login();
+
+    const formData = { ...BIG_NUMBER_DEFAULTS, metric: NUM_METRIC, groupby: ['state'] };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.wait(['@getJson']).then((data) => {
+      expect(data.status).to.eq(200);
+      if (data.response.body.error) {
+        expect(data.response.body.error).to.eq(null);
+      }
+      expect(data.response.body.query).not.contains(formData.groupby[0]);
+      cy.get('.slice_container');
+    });
+  });
+});

superset/assets/cypress/integration/explore/visualizations/line.js

@@ -0,0 +1,140 @@
+import { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
+
+describe('Line', function () {
+  const LINE_CHART_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'line' };
+
+  it('Test line chart with adhoc metric', function () {
+    cy.server();
+    cy.login();
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics: [NUM_METRIC] };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with groupby', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = ['count'];
+    const groupby = ['gender'];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, groupby };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with simple filter', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = ['count'];
+    const filters = [{
+      expressionType: 'SIMPLE',
+      subject: 'name',
+      operator: 'in',
+      comparator: ['Aaron', 'Amy', 'Andrea'],
+      clause: 'WHERE',
+      sqlExpression: null,
+      fromFormData: true,
+      filterOptionName: 'filter_4y6teao56zs_ebjsvwy48c',
+    }];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, adhoc_filters: filters };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with series limit sort asc', function () {
+    cy.server();
+    cy.login();
+
+    const formData = {
+      ...LINE_CHART_DEFAULTS,
+      metrics: [NUM_METRIC],
+      limit: 10,
+      groupby: ['name'],
+      timeseries_limit_metric: NUM_METRIC,
+    };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with series limit sort desc', function () {
+    cy.server();
+    cy.login();
+
+    const formData = {
+      ...LINE_CHART_DEFAULTS,
+      metrics: [NUM_METRIC],
+      limit: 10,
+      groupby: ['name'],
+      timeseries_limit_metric: NUM_METRIC,
+      order_desc: true,
+    };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with rolling avg', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = [NUM_METRIC];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, rolling_type: 'mean', rolling_periods: 10 };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with time shift 1 year', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = [NUM_METRIC];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, time_compare: ['1+year'], comparison_type: 'values' };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with time shift yoy', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = [NUM_METRIC];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, time_compare: ['1+year'], comparison_type: 'ratio' };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+
+  it('Test line chart with time shift percentage change', function () {
+    cy.server();
+    cy.login();
+
+    const metrics = [NUM_METRIC];
+
+    const formData = { ...LINE_CHART_DEFAULTS, metrics, time_compare: ['1+year'], comparison_type: 'percentage' };
+
+    cy.route('POST', '/superset/explore_json/**').as('getJson');
+    cy.visitChartByParams(JSON.stringify(formData));
+    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+  });
+});

superset/assets/cypress/integration/explore/visualizations/shared.helper.js

@@ -0,0 +1,40 @@
+// ***********************************************
+// Constants for visualization tests
+// ***********************************************
+
+export const FORM_DATA_DEFAULTS = {
+  datasource: '3__table',
+  granularity_sqla: 'ds',
+  time_grain_sqla: null,
+  time_range: '100+years+ago+:+now',
+  adhoc_filters: [],
+  groupby: [],
+  limit: null,
+  timeseries_limit_metric: null,
+  order_desc: false,
+  contribution: false,
+};
+
+export const NUM_METRIC = {
+    expressionType: 'SIMPLE',
+    column: {
+      id: 336,
+      column_name: 'num',
+      verbose_name: null,
+      description: null,
+      expression: '',
+      filterable: false,
+      groupby: false,
+      is_dttm: false,
+      type: 'BIGINT',
+      database_expression: null,
+      python_date_format: null,
+      optionName: '_col_num',
+    },
+    aggregate: 'SUM',
+    sqlExpression: null,
+    hasCustomLabel: false,
+    fromFormData: false,
+    label: 'Sum(num)',
+    optionName: 'metric_1de0s4viy5d_ly7y8k6ghvk',
+  };

superset/assets/cypress/support/commands.js

@@ -50,10 +50,24 @@ Cypress.Commands.add('visitChartByParams', (params) => {
   cy.visit(`${BASE_EXPLORE_URL}${params}`);
 });
 
-Cypress.Commands.add('verifySliceSuccess', (waitAlias) => {
-  cy.wait([waitAlias]).then((data) => {
+Cypress.Commands.add('verifySliceSuccess', ({ waitAlias, querySubstring, chartSelector }) => {
+  cy.wait(waitAlias).then((data) => {
     expect(data.status).to.eq(200);
-    expect(data.response.body).to.have.property('error', null);
-    cy.get('.slice_container');
+    if (data.response.body.error) {
+      expect(data.response.body.error).to.eq(null);
+    }
+    if (querySubstring) {
+      expect(data.response.body.query).contains(querySubstring);
+    }
+
+    cy.get('.slice_container').within(() => {
+      if (chartSelector) {
+        cy.get(chartSelector).then((charts) => {
+          const firstChart = charts[0];
+          expect(firstChart.clientWidth).greaterThan(0);
+          expect(firstChart.clientHeight).greaterThan(0);
+        });
+      }
+    });
   });
 });