apply redux for VisualizeModal (#2795)

* redux visualize modal

* redux visualize modal

- apply redux
- add unit test for connect container component
- fix lint error

* redux visualize modal

- apply redux
- add unit test for connect container component
- fix lint error

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

@@ -1,17 +1,58 @@
 import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
 import { Modal } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
+import sinon from 'sinon';
 
+import $ from 'jquery';
 import { queries } from './fixtures';
+import { sqlLabReducer } from '../../../javascripts/SqlLab/reducers';
 import VisualizeModal from '../../../javascripts/SqlLab/components/VisualizeModal';
+import * as exploreUtils from '../../../javascripts/explorev2/exploreUtils';
+
+global.notify = {
+  info: () => {},
+  error: () => {},
+};
 
 describe('VisualizeModal', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const initialState = sqlLabReducer(undefined, {});
+  const store = mockStore(initialState);
   const mockedProps = {
     show: true,
     query: queries[0],
   };
+  const mockColumns = {
+    ds: {
+      is_date: true,
+      is_dim: false,
+      name: 'ds',
+      type: 'STRING',
+    },
+    gender: {
+      is_date: false,
+      is_dim: true,
+      name: 'gender',
+      type: 'STRING',
+    },
+  };
+  const mockChartTypeBarChart = {
+    label: 'Distribution - Bar Chart',
+    requiresTime: false,
+    value: 'dist_bar',
+  };
+
+  const getVisualizeModalWrapper = () => (
+    shallow(<VisualizeModal {...mockedProps} />, {
+      context: { store },
+    }).dive());
+
   it('renders', () => {
     expect(React.isValidElement(<VisualizeModal />)).to.equal(true);
   });
@@ -21,7 +62,51 @@ describe('VisualizeModal', () => {
     ).to.equal(true);
   });
   it('renders a Modal', () => {
-    const wrapper = shallow(<VisualizeModal {...mockedProps} />);
+    const wrapper = getVisualizeModalWrapper();
     expect(wrapper.find(Modal)).to.have.length(1);
   });
+
+  describe('visualize', () => {
+    const wrapper = getVisualizeModalWrapper();
+
+    wrapper.setState({
+      chartType: mockChartTypeBarChart,
+      columns: mockColumns,
+      datasourceName: 'mockDatasourceName',
+    });
+
+    const vizOptions = {
+      chartType: wrapper.state().chartType.value,
+      datasourceName: wrapper.state().datasourceName,
+      columns: wrapper.state().columns,
+      sql: wrapper.instance().props.query.sql,
+      dbId: wrapper.instance().props.query.dbId,
+    };
+
+    let spy;
+    let server;
+
+    beforeEach(() => {
+      spy = sinon.spy($, 'ajax');
+      server = sinon.fakeServer.create();
+      sinon.stub(JSON, 'parse').callsFake(() => ({ table_id: 107 }));
+      sinon.stub(exploreUtils, 'getExploreUrl').callsFake(() => ('mockURL'));
+    });
+    afterEach(() => {
+      spy.restore();
+      server.restore();
+      JSON.parse.restore();
+      exploreUtils.getExploreUrl.restore();
+    });
+
+    it('should build request', () => {
+      wrapper.instance().visualize();
+      expect(spy.callCount).to.equal(1);
+
+      const spyCall = spy.getCall(0);
+      expect(spyCall.args[0].type).to.equal('POST');
+      expect(spyCall.args[0].url).to.equal('/superset/sqllab_viz/');
+      expect(spyCall.args[0].data.data).to.equal(JSON.stringify(vizOptions));
+    });
+  });
 });