add test coverage for sql lab components (#3022)

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

@@ -1,11 +1,38 @@
 import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
+import sinon from 'sinon';
 
 import App from '../../../javascripts/SqlLab/components/App';
+import TabbedSqlEditors from '../../../javascripts/SqlLab/components/TabbedSqlEditors';
+import { sqlLabReducer } from '../../../javascripts/SqlLab/reducers';
 
 describe('App', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const store = mockStore(sqlLabReducer(undefined, {}));
+
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<App />, {
+      context: { store },
+    }).dive();
+  });
   it('is valid', () => {
     expect(React.isValidElement(<App />)).to.equal(true);
   });
+  it('should handler resize', () => {
+    sinon.spy(wrapper.instance(), 'getHeight');
+    wrapper.instance().handleResize();
+    expect(wrapper.instance().getHeight.callCount).to.equal(1);
+    wrapper.instance().getHeight.restore();
+  });
+  it('should render', () => {
+    expect(wrapper.find('.SqlLab')).to.have.length(1);
+    expect(wrapper.find(TabbedSqlEditors)).to.have.length(1);
+  });
 });

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

@@ -91,7 +91,7 @@ describe('SqlEditorLeftBar', () => {
   it('dbMutator should build databases options', () => {
     const options = wrapper.instance().dbMutator(databases);
     expect(options).to.deep.equal([
-      { value: 188, label: 'main' },
+      { value: 1, label: 'main' },
       { value: 208, label: 'Presto - Gold' },
     ]);
   });

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

@@ -1,13 +1,47 @@
 import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import URI from 'urijs';
+
 import { Tab } from 'react-bootstrap';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
+import sinon from 'sinon';
 
-import { initialState } from './fixtures';
+import { table, initialState } from './fixtures';
-import { TabbedSqlEditors } from '../../../javascripts/SqlLab/components/TabbedSqlEditors';
+import TabbedSqlEditors from '../../../javascripts/SqlLab/components/TabbedSqlEditors';
+import SqlEditor from '../../../javascripts/SqlLab/components/SqlEditor';
 
 describe('TabbedSqlEditors', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const store = mockStore(initialState);
+
+  const tabHistory = [
+    'dfsadfs',
+    'newEditorId',
+  ];
+  const tables = [Object.assign({}, table[0], {
+    dataPreviewQueryId: 'B1-VQU1zW',
+    queryEditorId: 'newEditorId',
+  })];
+  const queryEditors = [{
+    autorun: false,
+    dbId: 1,
+    id: 'newEditorId',
+    latestQueryId: 'B1-VQU1zW',
+    schema: null,
+    selectedText: null,
+    sql: 'SELECT ds...',
+    title: 'Untitled Query',
+  }];
+  const queries = {
+    'B1-VQU1zW': {
+      id: 'B1-VQU1zW',
+      sqlEditorId: 'newEditorId',
+    },
+  };
   const mockedProps = {
     actions: {},
     databases: {},
@@ -17,13 +51,120 @@ describe('TabbedSqlEditors', () => {
     tabHistory: initialState.tabHistory,
     editorHeight: '',
   };
+  const getWrapper = () => (
+    shallow(<TabbedSqlEditors {...mockedProps} />, {
+      context: { store },
+    }).dive());
+
+  let wrapper;
   it('is valid', () => {
     expect(
       React.isValidElement(<TabbedSqlEditors {...mockedProps} />),
     ).to.equal(true);
   });
-  it('shallow mounts', () => {
+  describe('componentDidMount', () => {
-    const wrapper = shallow(<TabbedSqlEditors {...mockedProps} />);
+    let uriStub;
-    expect(wrapper.find(Tab)).to.have.length(2);
+    beforeEach(() => {
+      sinon.stub(window.history, 'replaceState');
+      sinon.spy(TabbedSqlEditors.prototype, 'componentDidMount');
+      uriStub = sinon.stub(URI.prototype, 'search');
+    });
+    afterEach(() => {
+      window.history.replaceState.restore();
+      TabbedSqlEditors.prototype.componentDidMount.restore();
+      uriStub.restore();
+    });
+    it('should handle id', () => {
+      uriStub.returns({ id: 1 });
+      wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
+        context: { store },
+      });
+      expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).to.equal(true);
+      expect(window.history.replaceState.getCall(0).args[2])
+        .to.equal('/superset/sqllab');
+    });
+    it('should handle savedQueryId', () => {
+      uriStub.returns({ savedQueryId: 1 });
+      wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
+        context: { store },
+      });
+      expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).to.equal(true);
+      expect(window.history.replaceState.getCall(0).args[2])
+        .to.equal('/superset/sqllab');
+    });
+    it('should handle sql', () => {
+      uriStub.returns({ sql: 1, dbid: 1 });
+      wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
+        context: { store },
+      });
+      expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).to.equal(true);
+      expect(window.history.replaceState.getCall(0).args[2])
+        .to.equal('/superset/sqllab');
+    });
+  });
+  describe('componentWillReceiveProps', () => {
+    let spy;
+    beforeEach(() => {
+      wrapper = getWrapper();
+      spy = sinon.spy(TabbedSqlEditors.prototype, 'componentWillReceiveProps');
+      wrapper.setProps({ queryEditors, queries, tabHistory, tables });
+    });
+    afterEach(() => {
+      spy.restore();
+    });
+    it('should update queriesArray and dataPreviewQueries', () => {
+      expect(wrapper.state().queriesArray.slice(-1)[0]).to.equal(queries['B1-VQU1zW']);
+      expect(wrapper.state().dataPreviewQueries.slice(-1)[0]).to.equal(queries['B1-VQU1zW']);
+    });
+  });
+  it('should rename Tab', () => {
+    global.prompt = () => ('new title');
+    wrapper = getWrapper();
+    sinon.stub(wrapper.instance().props.actions, 'queryEditorSetTitle');
+
+    wrapper.instance().renameTab(queryEditors[0]);
+    expect(wrapper.instance().props.actions.queryEditorSetTitle.getCall(0).args[1]).to.equal('new title');
+
+    delete global.prompt;
+  });
+  it('should removeQueryEditor', () => {
+    wrapper = getWrapper();
+    sinon.stub(wrapper.instance().props.actions, 'removeQueryEditor');
+
+    wrapper.instance().removeQueryEditor(queryEditors[0]);
+    expect(wrapper.instance().props.actions.removeQueryEditor.getCall(0).args[0])
+      .to.equal(queryEditors[0]);
+  });
+  it('should add new query editor', () => {
+    wrapper = getWrapper();
+    sinon.stub(wrapper.instance().props.actions, 'addQueryEditor');
+
+    wrapper.instance().newQueryEditor();
+    expect(wrapper.instance().props.actions.addQueryEditor.getCall(0).args[0].title)
+      .to.contain('Untitled Query');
+  });
+  it('should handle select', () => {
+    wrapper = getWrapper();
+    sinon.spy(wrapper.instance(), 'newQueryEditor');
+    sinon.stub(wrapper.instance().props.actions, 'setActiveQueryEditor');
+
+    wrapper.instance().handleSelect('add_tab');
+    expect(wrapper.instance().newQueryEditor.callCount).to.equal(1);
+
+    wrapper.instance().handleSelect('123');
+    expect(wrapper.instance().props.actions.setActiveQueryEditor.getCall(0).args[0].id)
+      .to.contain(123);
+    wrapper.instance().newQueryEditor.restore();
+  });
+  it('should render', () => {
+    wrapper = getWrapper();
+    wrapper.setState({ hideLeftBar: true });
+
+    const firstTab = wrapper.find(Tab).first();
+    expect(firstTab.props().eventKey).to.contain(initialState.queryEditors[0].id);
+    expect(firstTab.find(SqlEditor)).to.have.length(1);
+
+    const lastTab = wrapper.find(Tab).last();
+    expect(lastTab.props().eventKey).to.contain('add_tab');
   });
 });

superset/assets/spec/javascripts/sqllab/fixtures.js

@@ -266,7 +266,7 @@ export const databases = {
     database_name: 'main',
     expose_in_sqllab: true,
     force_ctas_schema: '',
-    id: 188,
+    id: 1,
   }, {
     allow_ctas: true,
     allow_dml: false,