[SIP-4] replace SQL Lab ajax calls with SupersetClient (#5896)

* [superset-client] replace sqllab ajax calls with SupersetClient

* [superset-client][sqllab] replace more misc ajax calls

* [superset-client][tests] call setupSupersetClient() in test shim

* [superset-client] replace more sqllab ajax calls and fix tests

* [superset-client][tests] remove commented lines

* [sqllab][superset-client] fix eslint and tests, add better error handling tests.

* [superset-client] fix tests from rebase

* [cypress][sqllab][superset-client] fix

* [superset-client] use Promises not callbacks in getShortUrl calls

* [superset-client][short-url] don't stringify POST

* [superset-client][short-url][cypress] add data-test attribute for more reliable test

* [cypress] remove .only() call

superset/assets/spec/javascripts/sqllab/ExploreResultsButton_spec.jsx

@@ -4,8 +4,8 @@ import thunk from 'redux-thunk';
 
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
+import fetchMock from 'fetch-mock';
 
-import $ from 'jquery';
 import shortid from 'shortid';
 import { queries, queryWithBadColumns } from './fixtures';
 import { sqlLabReducer } from '../../../src/SqlLab/reducers';
@@ -58,10 +58,10 @@ describe('ExploreResultsButton', () => {
     requiresTime: true,
     value: 'bar',
   };
-  const getExploreResultsButtonWrapper = (props = mockedProps) => (
+  const getExploreResultsButtonWrapper = (props = mockedProps) =>
     shallow(<ExploreResultsButton {...props} />, {
       context: { store },
-    }).dive());
+    }).dive();
 
   it('renders', () => {
     expect(React.isValidElement(<ExploreResultsButton />)).toBe(true);
@@ -151,64 +151,71 @@ describe('ExploreResultsButton', () => {
       datasourceName: 'mockDatasourceName',
     });
 
-    let ajaxSpy;
-    let datasourceSpy;
+    const visualizeURL = '/superset/sqllab_viz/';
+    const visualizeEndpoint = `glob:*${visualizeURL}`;
+    const visualizationPayload = { table_id: 107 };
+    fetchMock.post(visualizeEndpoint, visualizationPayload);
+
     beforeEach(() => {
-      ajaxSpy = sinon.spy($, 'ajax');
-      sinon.stub(JSON, 'parse').callsFake(() => ({ table_id: 107 }));
-      sinon.stub(exploreUtils, 'getExploreUrlAndPayload').callsFake(() => ({ url: 'mockURL', payload: { datasource: '107__table' } }));
+      sinon
+        .stub(exploreUtils, 'getExploreUrlAndPayload')
+        .callsFake(() => ({ url: 'mockURL', payload: { datasource: '107__table' } }));
       sinon.spy(exploreUtils, 'exportChart');
-      sinon.stub(wrapper.instance(), 'buildVizOptions').callsFake(() => (mockOptions));
-      datasourceSpy = sinon.stub(actions, 'createDatasource');
+      sinon.stub(wrapper.instance(), 'buildVizOptions').callsFake(() => mockOptions);
     });
     afterEach(() => {
-      ajaxSpy.restore();
-      JSON.parse.restore();
       exploreUtils.getExploreUrlAndPayload.restore();
       exploreUtils.exportChart.restore();
       wrapper.instance().buildVizOptions.restore();
-      datasourceSpy.restore();
+      fetchMock.reset();
     });
 
-    it('should build request', () => {
+    it('should build request with correct args', (done) => {
       wrapper.instance().visualize();
-      expect(ajaxSpy.callCount).toBe(1);
 
-      const spyCall = ajaxSpy.getCall(0);
-      expect(spyCall.args[0].type).toBe('POST');
-      expect(spyCall.args[0].url).toBe('/superset/sqllab_viz/');
-      expect(spyCall.args[0].data.data).toBe(JSON.stringify(mockOptions));
-    });
-    it('should open new window', () => {
-      const infoToastSpy = sinon.spy();
+      setTimeout(() => {
+        const calls = fetchMock.calls(visualizeEndpoint);
+        expect(calls).toHaveLength(1);
+        const formData = calls[0][1].body;
 
-      datasourceSpy.callsFake(() => {
-        const d = $.Deferred();
-        d.resolve('done');
-        return d.promise();
+        Object.keys(mockOptions).forEach((key) => {
+          // eslint-disable-next-line no-unused-expressions
+          expect(formData.get(key)).toBeDefined();
+        });
+
+        done();
       });
+    });
+
+    it('should export chart and add an info toast', (done) => {
+      const infoToastSpy = sinon.spy();
+      const datasourceSpy = sinon.stub();
+
+      datasourceSpy.callsFake(() => Promise.resolve(visualizationPayload));
 
       wrapper.setProps({
         actions: {
-          createDatasource: datasourceSpy,
           addInfoToast: infoToastSpy,
+          createDatasource: datasourceSpy,
         },
       });
 
       wrapper.instance().visualize();
-      expect(exploreUtils.exportChart.callCount).toBe(1);
-      expect(exploreUtils.exportChart.getCall(0).args[0].datasource).toBe('107__table');
-      expect(infoToastSpy.callCount).toBe(1);
-    });
-    it('should add error toast', () => {
-      const dangerToastSpy = sinon.spy();
 
-      datasourceSpy.callsFake(() => {
-        const d = $.Deferred();
-        d.reject('error message');
-        return d.promise();
+      setTimeout(() => {
+        expect(datasourceSpy.callCount).toBe(1);
+        expect(exploreUtils.exportChart.callCount).toBe(1);
+        expect(exploreUtils.exportChart.getCall(0).args[0].datasource).toBe('107__table');
+        expect(infoToastSpy.callCount).toBe(1);
+        done();
       });
+    });
 
+    it('should add error toast', (done) => {
+      const dangerToastSpy = sinon.stub(actions, 'addDangerToast');
+      const datasourceSpy = sinon.stub();
+
+      datasourceSpy.callsFake(() => Promise.reject({ error: 'error' }));
 
       wrapper.setProps({
         actions: {
@@ -218,8 +225,14 @@ describe('ExploreResultsButton', () => {
       });
 
       wrapper.instance().visualize();
-      expect(exploreUtils.exportChart.callCount).toBe(0);
-      expect(dangerToastSpy.callCount).toBe(1);
+
+      setTimeout(() => {
+        expect(datasourceSpy.callCount).toBe(1);
+        expect(exploreUtils.exportChart.callCount).toBe(0);
+        expect(dangerToastSpy.callCount).toBe(1);
+        dangerToastSpy.restore();
+        done();
+      });
     });
   });
 });