[cypress] add readResponseBlob helper, fix broken fetch-based tests

superset/assets/cypress/integration/dashboard/load.js

@@ -1,3 +1,4 @@
+import readResponseBlob from '../../utils/readResponseBlob';
 import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
 
 export default () => describe('load', () => {
@@ -24,9 +25,10 @@ export default () => describe('load', () => {
   it('should load dashboard', () => {
     // wait and verify one-by-one
     cy.wait(aliases).then((requests) => {
-      requests.forEach((xhr) => {
+      requests.forEach(async (xhr) => {
         expect(xhr.status).to.eq(200);
-        expect(xhr.response.body).to.have.property('error', null);
+        const responseBody = await readResponseBlob(xhr.response.body);
+        expect(responseBody).to.have.property('error', null);
         cy.get(`#slice-container-${xhr.response.body.form_data.slice_id}`);
       });
     });

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

@@ -1,4 +1,5 @@
 import { FORM_DATA_DEFAULTS, NUM_METRIC } from './shared.helper';
+import readResponseBlob from '../../../utils/readResponseBlob';
 
 // Big Number Total
 
@@ -42,10 +43,12 @@ export default () => describe('Big Number Total', () => {
     const formData = { ...BIG_NUMBER_DEFAULTS, metric: NUM_METRIC, groupby: ['state'] };
 
     cy.visitChartByParams(JSON.stringify(formData));
-    cy.wait(['@getJson']).then((data) => {
-      cy.verifyResponseCodes(data);
+    cy.wait(['@getJson']).then(async (xhr) => {
+      cy.verifyResponseCodes(xhr);
       cy.verifySliceContainer();
-      expect(data.response.body.query).not.contains(formData.groupby[0]);
+
+      const responseBody = await readResponseBlob(xhr.response.body);
+      expect(responseBody.query).not.contains(formData.groupby[0]);
     });
   });
 });

superset/assets/cypress/support/commands.js

@@ -24,6 +24,8 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
+import readResponseBlob from '../utils/readResponseBlob';
+
 const BASE_EXPLORE_URL = '/superset/explore/?form_data=';
 
 Cypress.Commands.add('login', () => {
@@ -50,11 +52,14 @@ Cypress.Commands.add('visitChartByParams', (params) => {
   cy.visit(`${BASE_EXPLORE_URL}${params}`);
 });
 
-Cypress.Commands.add('verifyResponseCodes', (data) => {
+Cypress.Commands.add('verifyResponseCodes', async (xhr) => {
   // After a wait response check for valid response
-  expect(data.status).to.eq(200);
-  if (data.response.body.error) {
-    expect(data.response.body.error).to.eq(null);
+  expect(xhr.status).to.eq(200);
+
+  const responseBody = await readResponseBlob(xhr.response.body);
+
+  if (responseBody.error) {
+    expect(responseBody.error).to.eq(null);
   }
 });
 
@@ -72,11 +77,12 @@ Cypress.Commands.add('verifySliceContainer', (chartSelector) => {
 });
 
 Cypress.Commands.add('verifySliceSuccess', ({ waitAlias, querySubstring, chartSelector }) => {
-  cy.wait(waitAlias).then((data) => {
-    cy.verifyResponseCodes(data);
+  cy.wait(waitAlias).then(async (xhr) => {
+    cy.verifyResponseCodes(xhr);
 
+    const responseBody = await readResponseBlob(xhr.response.body);
     if (querySubstring) {
-      expect(data.response.body.query).contains(querySubstring);
+      expect(responseBody.query).contains(querySubstring);
     }
 
     cy.verifySliceContainer(chartSelector);

superset/assets/cypress/support/index.js

@@ -13,8 +13,11 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import './commands';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+// The following is a workaround for Cypress not supporting fetch.
+// By setting window.fetch = null, we force the fetch polyfill to fall back
+// to xhr as described here https://github.com/cypress-io/cypress/issues/95
+Cypress.on('window:before:load', (win) => {
+  win.fetch = null; // eslint-disable-line no-param-reassign
+});

superset/assets/cypress/utils/readResponseBlob.js

@@ -0,0 +1,11 @@
+// This function returns a promise that resolves to the value
+// of the passed response blob. It assumes the blob should be read as text,
+// and that the response can be parsed as JSON. This is needed to read
+// the value of any fetch-based response.
+export default function readResponseBlob(blob) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(JSON.parse(reader.result));
+    reader.readAsText(blob);
+  });
+}