[SIP-4] replace chart ajax calls with SupersetClient (#5875)

* [deps] add @superset-ui/core

* [superset-client] initialize SupersetClient in app setup

* [superset-client] add abortcontroller-polyfill

* [superset-client] replace all chart ajax calls with SupersetClient

* [tests] add fetch-mock dep and helpers/setupSupersetClient.js

* [superset client][charts][tests] fix and improve chartActions_spec

* [deps] @superset-ui/core@^0.0.4

* [common] add better SupersetClient initialization error

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

* [cypress] fix tests from rebase

* [deps] @superset-ui/core@^0.0.5

* [cypress][fetch] fix controls test for fetch

* [cypress][dashboard][fetch] fix filter test for fetch

* [superset-client] configure protocol on init

* yarn.lock

* undo Chart.jsx revert

* yarn again

* [superset-client] fix chartAction unit tests

superset/assets/spec/javascripts/explore/chartActions_spec.js

@@ -1,37 +1,123 @@
+import fetchMock from 'fetch-mock';
 import sinon from 'sinon';
-import $ from 'jquery';
+
+import { Logger } from '../../../src/logger';
+import setupSupersetClient from '../../helpers/setupSupersetClient';
 import * as exploreUtils from '../../../src/explore/exploreUtils';
 import * as actions from '../../../src/chart/chartAction';
 
 describe('chart actions', () => {
+  const MOCK_URL = '/mockURL';
   let dispatch;
   let urlStub;
-  let ajaxStub;
-  let request;
+  let loggerStub;
+
+  const setupDefaultFetchMock = () => {
+    fetchMock.post(MOCK_URL, { json: {} }, { overwriteRoutes: true });
+  };
+
+  beforeAll(() => {
+    setupSupersetClient();
+    setupDefaultFetchMock();
+  });
+
+  afterAll(fetchMock.restore);
 
   beforeEach(() => {
     dispatch = sinon.spy();
-    urlStub = sinon.stub(exploreUtils, 'getExploreUrlAndPayload')
-      .callsFake(() => ({ url: 'mockURL', payload: {} }));
-    ajaxStub = sinon.stub($, 'ajax');
+    urlStub = sinon
+      .stub(exploreUtils, 'getExploreUrlAndPayload')
+      .callsFake(() => ({ url: MOCK_URL, payload: {} }));
+    loggerStub = sinon.stub(Logger, 'append');
   });
 
   afterEach(() => {
     urlStub.restore();
-    ajaxStub.restore();
+    loggerStub.restore();
+    fetchMock.resetHistory();
   });
 
-  it('should handle query timeout', () => {
-    ajaxStub.rejects({ statusText: 'timeout' });
-    request = actions.runQuery({});
-    const promise = request(dispatch, sinon.stub().returns({
-      explore: {
-        controls: [],
-      },
-    }));
-    promise.then(() => {
-      expect(dispatch.callCount).toBe(3);
-      expect(dispatch.args[0][0].type).toBe(actions.CHART_UPDATE_TIMEOUT);
+  it('should dispatch CHART_UPDATE_STARTED action before the query', () => {
+    const actionThunk = actions.runQuery({});
+
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, success
+      expect(dispatch.callCount).toBe(4);
+      expect(fetchMock.calls(MOCK_URL)).toHaveLength(1);
+      expect(dispatch.args[0][0].type).toBe(actions.CHART_UPDATE_STARTED);
+
+      return Promise.resolve();
+    });
+  });
+
+  it('should dispatch TRIGGER_QUERY action with the query', () => {
+    const actionThunk = actions.runQuery({});
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, success
+      expect(dispatch.callCount).toBe(4);
+      expect(fetchMock.calls(MOCK_URL)).toHaveLength(1);
+      expect(dispatch.args[1][0].type).toBe(actions.TRIGGER_QUERY);
+
+      return Promise.resolve();
+    });
+  });
+
+  it('should dispatch UPDATE_QUERY_FORM_DATA action with the query', () => {
+    const actionThunk = actions.runQuery({});
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, success
+      expect(dispatch.callCount).toBe(4);
+      expect(fetchMock.calls(MOCK_URL)).toHaveLength(1);
+      expect(dispatch.args[2][0].type).toBe(actions.UPDATE_QUERY_FORM_DATA);
+
+      return Promise.resolve();
+    });
+  });
+
+  it('should dispatch CHART_UPDATE_SUCCEEDED action upon success', () => {
+    const actionThunk = actions.runQuery({});
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, success
+      expect(dispatch.callCount).toBe(4);
+      expect(fetchMock.calls(MOCK_URL)).toHaveLength(1);
+      expect(dispatch.args[3][0].type).toBe(actions.CHART_UPDATE_SUCCEEDED);
+
+      return Promise.resolve();
+    });
+  });
+
+  it('should CHART_UPDATE_TIMEOUT action upon query timeout', () => {
+    const unresolvingPromise = new Promise(() => {});
+    fetchMock.post(MOCK_URL, () => unresolvingPromise, { overwriteRoutes: true });
+
+    const timeoutInSec = 1 / 1000;
+    const actionThunk = actions.runQuery({}, false, timeoutInSec);
+
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, fail
+      expect(dispatch.callCount).toBe(4);
+      expect(dispatch.args[3][0].type).toBe(actions.CHART_UPDATE_TIMEOUT);
+      setupDefaultFetchMock();
+
+      return Promise.resolve();
+    });
+  });
+
+  it('should dispatch CHART_UPDATE_FAILED action upon non-timeout non-abort failure', () => {
+    fetchMock.post(MOCK_URL, { throws: { error: 'misc error' } }, { overwriteRoutes: true });
+
+    const timeoutInSec = 1 / 1000;
+    const actionThunk = actions.runQuery({}, false, timeoutInSec);
+
+    return actionThunk(dispatch).then(() => {
+      // chart update, trigger query, update form data, fail
+      expect(dispatch.callCount).toBe(4);
+      const updateFailedAction = dispatch.args[3][0];
+      expect(updateFailedAction.type).toBe(actions.CHART_UPDATE_FAILED);
+      expect(updateFailedAction.queryResponse.error).toBe('misc error');
+      setupDefaultFetchMock();
+
+      return Promise.resolve();
     });
   });
 });