feat: SQL Toolbar (#12067)

Co-authored-by: hughhhh <hughmil3s@gmail.com>
Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Co-authored-by: Simcha Shats <simcha.shats@nielsen.com>
Co-authored-by: amitNielsen <amit.miran@nielsen.com>
Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>
Co-authored-by: Agata Stawarz-Pastewska <agata.stawarz-pastewska@polidea.com>
Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Co-authored-by: David Aaron Suddjian <aasuddjian@gmail.com>
Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
Co-authored-by: ʈᵃᵢ <tdupreetan@gmail.com>
Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>
Co-authored-by: Lily Kuang <lily@preset.io>
Co-authored-by: Victor Malai <malai9696@gmail.com>
Co-authored-by: Agata Stawarz <47450693+agatapst@users.noreply.github.com>
Co-authored-by: Daniel Vaz Gaspar <danielvazgaspar@gmail.com>
Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
Co-authored-by: Nikola Gigić <nik.gigic@gmail.com>
Co-authored-by: Jagadish <jagadishmts@gmail.com>
Co-authored-by: Hugh A. Miles II <hughmil3s@gmail.com>
Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>
This commit is contained in:
Hugh A. Miles II
2021-01-07 17:04:43 -05:00
committed by GitHub
parent 5088e570bf
commit 9997abeab6
20 changed files with 770 additions and 729 deletions

View File

@@ -17,27 +17,37 @@
* under the License.
*/
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from 'enzyme';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import {
SQL_EDITOR_GUTTER_HEIGHT,
SQL_EDITOR_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
} from 'src/SqlLab/constants';
import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
import LimitControl from 'src/SqlLab/components/LimitControl';
import ConnectedSouthPane from 'src/SqlLab/components/SouthPane';
import SqlEditor from 'src/SqlLab/components/SqlEditor';
import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
import { Dropdown } from 'src/common/components';
import { queryEditorSetSelectedText } from 'src/SqlLab/actions/sqlLab';
import { defaultQueryEditor, initialState, queries, table } from './fixtures';
import { initialState, queries, table } from './fixtures';
const MOCKED_SQL_EDITOR_HEIGHT = 500;
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
const store = mockStore(initialState);
describe('SqlEditor', () => {
const mockedProps = {
actions: {},
actions: { queryEditorSetSelectedText },
database: {},
queryEditor: initialState.sqlLab.queryEditors[0],
queryEditorId: initialState.sqlLab.queryEditors[0].id,
latestQuery: queries[0],
tables: [table],
getHeight: () => '100px',
@@ -47,29 +57,33 @@ describe('SqlEditor', () => {
maxRow: 100000,
};
beforeAll(() => {
jest
.spyOn(SqlEditor.prototype, 'getSqlEditorHeight')
.mockImplementation(() => MOCKED_SQL_EDITOR_HEIGHT);
});
const buildWrapper = (props = {}) =>
mount(
<Provider store={store}>
<SqlEditor {...mockedProps} {...props} />
</Provider>,
{
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
},
);
it('is valid', () => {
expect(React.isValidElement(<SqlEditor {...mockedProps} />)).toBe(true);
});
it('render a SqlEditorLeftBar', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
const wrapper = buildWrapper();
expect(wrapper.find(SqlEditorLeftBar)).toExist();
});
it('render an AceEditorWrapper', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
const wrapper = buildWrapper();
expect(wrapper.find(AceEditorWrapper)).toExist();
});
it('render a SouthPane', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
const wrapper = buildWrapper();
expect(wrapper.find(ConnectedSouthPane)).toExist();
});
it('does not overflow the editor window', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
// TODO eschutho convert tests to RTL
// eslint-disable-next-line jest/no-disabled-tests
it.skip('does not overflow the editor window', () => {
const wrapper = buildWrapper();
const totalSize =
parseFloat(wrapper.find(AceEditorWrapper).props().height) +
wrapper.find(ConnectedSouthPane).props().height +
@@ -78,8 +92,9 @@ describe('SqlEditor', () => {
SQL_EDITOR_GUTTER_HEIGHT;
expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
});
it('does not overflow the editor window after resizing', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
// eslint-disable-next-line jest/no-disabled-tests
it.skip('does not overflow the editor window after resizing', () => {
const wrapper = buildWrapper();
wrapper.setState({ height: 450 });
const totalSize =
parseFloat(wrapper.find(AceEditorWrapper).props().height) +
@@ -89,26 +104,10 @@ describe('SqlEditor', () => {
SQL_EDITOR_GUTTER_HEIGHT;
expect(totalSize).toEqual(450);
});
it('render a LimitControl with default limit', () => {
it('render a Limit Dropdown', () => {
const defaultQueryLimit = 101;
const updatedProps = { ...mockedProps, defaultQueryLimit };
const wrapper = shallow(<SqlEditor {...updatedProps} />);
expect(wrapper.find(LimitControl)).toExist();
expect(wrapper.find(LimitControl).props().value).toEqual(defaultQueryLimit);
});
it('render a LimitControl with existing limit', () => {
const queryEditor = { ...defaultQueryEditor, queryLimit: 101 };
const updatedProps = { ...mockedProps, queryEditor };
const wrapper = shallow(<SqlEditor {...updatedProps} />);
expect(wrapper.find(LimitControl)).toExist();
expect(wrapper.find(LimitControl).props().value).toEqual(
queryEditor.queryLimit,
);
});
it('allows toggling autocomplete', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(true);
wrapper.find('[data-test="autocomplete"]').simulate('click');
expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(false);
const wrapper = buildWrapper(updatedProps);
expect(wrapper.find(Dropdown)).toExist();
});
});