[superset] 01/01: chore(cypress): make the load dashboard test behavior driven

[su...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

suddjian pushed a commit to branch behavior-driven-cypress
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9791c34f8bb80966f224141b440450e3a1838efe
Author: David Aaron Suddjian <aa...@gmail.com>
AuthorDate: Tue Mar 23 16:08:42 2021 -0700

    chore(cypress): make the load dashboard test behavior driven
---
 .../integration/dashboard/dashboard.helper.ts      | 13 +++++
 .../cypress/integration/dashboard/load.test.ts     | 55 +++++++---------------
 .../dashboard/components/gridComponents/Chart.jsx  |  7 ++-
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
index 1ad5136..8f08bce 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
@@ -22,6 +22,19 @@ export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/';
 export const CHECK_DASHBOARD_FAVORITE_ENDPOINT =
   '/superset/favstar/Dashboard/*/count';
 
+export const WORLD_HEALTH_CHARTS = [
+  { name: 'Region Filter', viz: 'filter_box' },
+  { name: '% Rural', viz: 'world_map' },
+  { name: 'Most Populated Countries', viz: 'table' },
+  { name: "World's Population", viz: 'big_number' },
+  { name: 'Growth Rate', viz: 'line' },
+  { name: 'Rural Breakdown', viz: 'sunburst' },
+  { name: "World's Pop Growth", viz: 'area' },
+  { name: 'Life Expectancy VS Rural %', viz: 'bubble' },
+  { name: 'Treemap', viz: 'treemap' },
+  { name: 'Box plot', viz: 'box_plot' },
+];
+
 /**
  * Drag an element and drop it to another element.
  * Usage:
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts
index 0b38a83..4522494 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts
@@ -17,53 +17,32 @@
  * under the License.
  */
 import {
-  getChartAliases,
-  isLegacyResponse,
-  getSliceIdFromRequestUrl,
-  JsonObject,
-} from '../../utils/vizPlugins';
-import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
+  WORLD_HEALTH_CHARTS,
+  WORLD_HEALTH_DASHBOARD,
+} from './dashboard.helper';
 
 describe('Dashboard load', () => {
-  let dashboard;
-  let aliases: string[];
   beforeEach(() => {
     cy.login();
-
     cy.visit(WORLD_HEALTH_DASHBOARD);
-
-    cy.get('#app').then(nodes => {
-      const bootstrapData = JSON.parse(nodes[0].dataset.bootstrap || '');
-      dashboard = bootstrapData.dashboard_data;
-      const { slices } = dashboard;
-      // then define routes and create alias for each requests
-      aliases = getChartAliases(slices);
-    });
   });
 
   it('should load dashboard', () => {
     // wait and verify one-by-one
-    cy.wait(aliases).then(requests =>
-      Promise.all(
-        requests.map(async ({ response, request }) => {
-          const responseBody = response?.body;
-          let sliceId;
-          if (isLegacyResponse(responseBody)) {
-            expect(responseBody).to.have.property('errors');
-            expect(responseBody.errors.length).to.eq(0);
-            sliceId = responseBody.form_data.slice_id;
-          } else {
-            sliceId = getSliceIdFromRequestUrl(request.url);
-            responseBody.result.forEach((element: JsonObject) => {
-              expect(element).to.have.property('error', null);
-              expect(element).to.have.property('status', 'success');
-            });
-          }
-          cy.get('[data-test="grid-content"]')
-            .find(`#chart-id-${sliceId}`)
+    WORLD_HEALTH_CHARTS.forEach(({ name, viz }) => {
+      // prettier-ignore
+      cy.get('[data-test="grid-content"] [data-test="editable-title"]').contains(name)
+        // use the chart title to find the chart grid component,
+        // which has the chart id and viz type info
+        .parentsUntil('[data-test="chart-grid-component"]').parent()
+        .should('have.attr', 'data-test-viz-type', viz)
+        .then(chartElement => {
+          const chartId = chartElement.attr('data-test-chart-id');
+          // the chart should load in under a minute
+          // (big timeout so that it works in CI)
+          cy.wrap(chartElement).find(`#chart-id-${chartId}`, { timeout: 30000 })
             .should('be.visible');
-        }),
-      ),
-    );
+        });
+    });
   });
 });
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index cdc8ba9..6e8e350 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -288,7 +288,12 @@ export default class Chart extends React.Component {
         })
       : {};
     return (
-      <div className="chart-slice">
+      <div
+        className="chart-slice"
+        data-test="chart-grid-component"
+        data-test-chart-id={id}
+        data-test-viz-type={slice.viz_type}
+      >
         <SliceHeader
           innerRef={this.setHeaderRef}
           slice={slice}