superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch master updated: [cypress] add integration tests for dashboard (#6002)
Date Tue, 09 Oct 2018 17:03:56 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 395359f  [cypress] add integration tests for dashboard (#6002)
395359f is described below

commit 395359f5ad328e22923a9bc4fb580b1d8eb3b00c
Author: Grace Guo <grace.guo@airbnb.com>
AuthorDate: Tue Oct 9 10:03:50 2018 -0700

    [cypress] add integration tests for dashboard (#6002)
---
 .../cypress/integration/dashboard/_controls.js     | 69 ++++++++++++++++++++++
 .../cypress/integration/dashboard/_edit_mode.js    | 62 +++++++++++++++++++
 .../cypress/integration/dashboard/_filter.js       | 51 ++++++++++++++++
 .../assets/cypress/integration/dashboard/_load.js  | 34 +++++++++++
 .../assets/cypress/integration/dashboard/all.js    | 11 ++++
 .../integration/dashboard/dashboard.helper.js      |  4 ++
 .../integration/dashboard/dashboard_tests.js       | 28 ---------
 7 files changed, 231 insertions(+), 28 deletions(-)

diff --git a/superset/assets/cypress/integration/dashboard/_controls.js b/superset/assets/cypress/integration/dashboard/_controls.js
new file mode 100644
index 0000000..cfde066
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/_controls.js
@@ -0,0 +1,69 @@
+import { WORLD_HEALTH_DASHBOARD, CHECK_DASHBOARD_FAVORITE_ENDPOINT } from './dashboard.helper';
+
+export default () => describe('top-level controls', () => {
+  let sliceIds = [];
+  let dashboard = {};
+  let isFavoriteDashboard = false;
+
+  beforeEach(() => {
+    cy.server();
+    cy.login();
+
+    cy.route(CHECK_DASHBOARD_FAVORITE_ENDPOINT).as('countFavStar');
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+
+    cy.get('#app').then((data) => {
+      const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
+      dashboard = bootstrapData.dashboard_data;
+      sliceIds = dashboard.slices.map(slice => (slice.slice_id));
+    });
+
+    cy.wait('@countFavStar').then((xhr) => {
+      isFavoriteDashboard = xhr.response.body.count === 1;
+    });
+  });
+
+  it('should allow favor/unfavor', () => {
+    if (!isFavoriteDashboard) {
+      cy.get('.favstar').find('i').should('have.class', 'fa-star-o');
+      cy.get('.favstar').trigger('click');
+      cy.get('.favstar').find('i').should('have.class', 'fa-star')
+        .and('not.have.class', 'fa-star-o');
+    } else {
+      cy.get('.favstar').find('i').should('have.class', 'fa-star')
+        .and('not.have.class', 'fa-star-o');
+      cy.get('.favstar').trigger('click');
+      cy.get('.fave-unfave-icon').find('i').should('have.class', 'fa-star-o')
+        .and('not.have.class', 'fa-star');
+    }
+
+    // reset to original fav state
+    cy.get('.favstar').trigger('click');
+  });
+
+  it('should allow auto refresh', () => {
+    const sliceRequests = [];
+    const forceRefreshRequests = [];
+    sliceIds
+      .forEach((id) => {
+        const sliceRequest = `getJson_${id}`;
+        sliceRequests.push(`@${sliceRequest}`);
+        cy.route('POST', `/superset/explore_json/?form_data={"slice_id":${id}}`).as(sliceRequest);
+
+        const forceRefresh = `getJson_${id}_force`;
+        forceRefreshRequests.push(`@${forceRefresh}`);
+        cy.route('POST', `/superset/explore_json/?form_data={"slice_id":${id}}&force=true`).as(forceRefresh);
+      });
+
+    cy.wait(sliceRequests);
+    cy.get('#save-dash-split-button').trigger('click');
+    cy.contains('Force refresh dashboard').click();
+
+    cy.wait(forceRefreshRequests).then((xhrs) => {
+      // is_cached in response should be false
+      xhrs.forEach((xhr) => {
+        expect(xhr.response.body.is_cached).to.equal(false);
+      });
+    });
+  });
+});
diff --git a/superset/assets/cypress/integration/dashboard/_edit_mode.js b/superset/assets/cypress/integration/dashboard/_edit_mode.js
new file mode 100644
index 0000000..842706a
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/_edit_mode.js
@@ -0,0 +1,62 @@
+import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
+
+export default () => describe('edit mode', () => {
+  beforeEach(() => {
+    cy.server();
+    cy.login();
+
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+    cy.get('#app').then((data) => {
+      const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
+      const dashboard = bootstrapData.dashboard_data;
+      const boxplotChartId = dashboard.slices.find(slice => (slice.form_data.viz_type
=== 'box_plot')).slice_id;
+      const boxplotRequest = `/superset/explore_json/?form_data={"slice_id":${boxplotChartId}}`;
+      cy.route('POST', boxplotRequest).as('boxplotRequest');
+    });
+
+    cy.get('.dashboard-header').contains('Edit dashboard').click();
+  });
+
+  it('remove, and add chart flow', () => {
+    // wait box_plot data and find box plot
+    cy.wait('@boxplotRequest');
+    cy.get('.grid-container .box_plot').should('be.exist');
+
+    cy.get('.fa.fa-trash').last().then(($el) => {
+      cy.wrap($el).invoke('show').click();
+
+      // box plot should be gone
+      cy.get('.grid-container .box_plot').should('not.exist');
+    });
+
+    // open charts list
+    cy.get('.component-layer').contains('Your charts & filters').click();
+
+    // find box plot is available from list
+    cy.get('.slices-layer').find('.chart-card-container').contains('Box plot');
+
+    // drag-n-drop
+    const dataTransfer = { data: {} };
+    cy.get('.dragdroppable').contains('Box plot')
+      .trigger('mousedown', { which: 1 })
+      .trigger('dragstart', { dataTransfer })
+      .trigger('drag', {});
+    cy.get('.grid-content .dragdroppable').last()
+      .trigger('dragover', { dataTransfer })
+      .trigger('drop', { dataTransfer })
+      .trigger('dragend', { dataTransfer })
+      .trigger('mouseup', { which: 1 });
+
+    // add back to dashboard
+    cy.get('.grid-container .box_plot').should('be.exist');
+
+    // should show Save changes button
+    cy.get('.dashboard-header .button-container').contains('Save changes');
+
+    // undo 2 steps
+    cy.get('.dashboard-header .undo-action').click().click();
+
+    // no changes, can switch to view mode
+    cy.get('.dashboard-header .button-container').contains('Switch to view mode').click();
+  });
+});
diff --git a/superset/assets/cypress/integration/dashboard/_filter.js b/superset/assets/cypress/integration/dashboard/_filter.js
new file mode 100644
index 0000000..fe236db
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/_filter.js
@@ -0,0 +1,51 @@
+import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
+
+export default () => describe('dashboard filter', () => {
+  let sliceIds = [];
+  let filterId;
+
+  beforeEach(() => {
+    cy.server();
+    cy.login();
+
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+
+    cy.get('#app').then((data) => {
+      const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
+      const dashboard = bootstrapData.dashboard_data;
+      sliceIds = dashboard.slices.map(slice => (slice.slice_id));
+      filterId = dashboard.slices.find(slice => (slice.form_data.viz_type === 'filter_box')).slice_id;
+    });
+  });
+
+  it('should apply filter', () => {
+    const aliases = [];
+
+    const filterRoute = `/superset/explore_json/?form_data={"slice_id":${filterId}}`;
+    cy.route('POST', filterRoute).as('fetchFilter');
+    cy.wait('@fetchFilter');
+    sliceIds
+      .filter(id => (parseInt(id, 10) !== filterId))
+      .forEach((id) => {
+        const alias = `getJson_${id}`;
+        aliases.push(`@${alias}`);
+
+        cy.route('POST', `/superset/explore_json/?form_data={"slice_id":${id}}`).as(alias);
+      });
+
+    // select filter_box and apply
+    cy.get('.Select-control')
+      .first().find('input')
+      .first()
+      .type('South Asia{enter}', { force: true });
+
+    cy.wait(aliases).then((requests) => {
+      requests.forEach((request) => {
+        const requestBody = request.request.body.substring('form_data='.length);
+        const requestParams = JSON.parse(decodeURIComponent(requestBody));
+        expect(requestParams.extra_filters[0])
+          .deep.eq({ col: 'region', op: 'in', val: ['South+Asia'] });
+      });
+    });
+  });
+});
diff --git a/superset/assets/cypress/integration/dashboard/_load.js b/superset/assets/cypress/integration/dashboard/_load.js
new file mode 100644
index 0000000..4da064b
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/_load.js
@@ -0,0 +1,34 @@
+import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
+
+export default () => describe('load', () => {
+  const aliases = [];
+
+  beforeEach(() => {
+    cy.server();
+    cy.login();
+
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+
+    cy.get('#app').then((data) => {
+      const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
+      const slices = bootstrapData.dashboard_data.slices;
+      // then define routes and create alias for each requests
+      slices.forEach((slice) => {
+        const alias = `getJson_${slice.slice_id}`;
+        cy.route('POST', `/superset/explore_json/?form_data={"slice_id":${slice.slice_id}}`).as(alias);
+        aliases.push(`@${alias}`);
+      });
+    });
+  });
+
+  it('should load dashboard', () => {
+    // wait and verify one-by-one
+    cy.wait(aliases).then((requests) => {
+      requests.forEach((xhr) => {
+        expect(xhr.status).to.eq(200);
+        expect(xhr.response.body).to.have.property('error', null);
+        cy.get(`#slice-container-${xhr.response.body.form_data.slice_id}`);
+      });
+    });
+  });
+});
diff --git a/superset/assets/cypress/integration/dashboard/all.js b/superset/assets/cypress/integration/dashboard/all.js
new file mode 100644
index 0000000..e448319
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/all.js
@@ -0,0 +1,11 @@
+import DashboardControlsTest from './_controls';
+import DashboardEditModeTest from './_edit_mode';
+import DashboardFilterTest from './_filter';
+import DashboardLoadTest from './_load';
+
+describe('Dashboard', () => {
+  DashboardControlsTest();
+  DashboardEditModeTest();
+  DashboardFilterTest();
+  DashboardLoadTest();
+});
diff --git a/superset/assets/cypress/integration/dashboard/dashboard.helper.js b/superset/assets/cypress/integration/dashboard/dashboard.helper.js
new file mode 100644
index 0000000..99cf861
--- /dev/null
+++ b/superset/assets/cypress/integration/dashboard/dashboard.helper.js
@@ -0,0 +1,4 @@
+export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health';
+
+export const CHECK_DASHBOARD_FAVORITE_ENDPOINT = '/superset/favstar/Dashboard/*/count';
+
diff --git a/superset/assets/cypress/integration/dashboard/dashboard_tests.js b/superset/assets/cypress/integration/dashboard/dashboard_tests.js
deleted file mode 100644
index 75e84b7..0000000
--- a/superset/assets/cypress/integration/dashboard/dashboard_tests.js
+++ /dev/null
@@ -1,28 +0,0 @@
-describe('Load dashboard', () => {
-  xit('Load birth names dashboard', () => {
-    cy.server();
-    cy.login();
-    // go to the dashboard and get list of slices first
-    cy.visit('/superset/dashboard/births');
-    cy.get('#app').then((data) => {
-      const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
-      const slices = bootstrapData.dashboard_data.slices;
-      // then define routes and create alias for each requests
-      const aliases = slices.map((slice) => {
-        const alias = `getJson_${slice.slice_id}`;
-        cy.route('POST', `/superset/explore_json/?form_data={"slice_id":${slice.slice_id}}`).as(alias);
-        return `@${alias}`;
-      });
-      // reload the dashboard again with all routes watched.
-      cy.visit('/superset/dashboard/births');
-      // wait and verify one-by-one
-      aliases.forEach((alias) => {
-        cy.wait(alias).then((xhr) => {
-          expect(xhr.status).to.eq(200);
-          expect(xhr.response.body).to.have.property('error', null);
-          cy.get(`#slice-container-${xhr.response.body.form_data.slice_id}`);
-        });
-      });
-    });
-  });
-});


Mime
View raw message