From 49f2f0b0fc39bc9f55a99cfebade0be0204d37e1 Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Sat, 17 Sep 2022 10:31:54 +0300 Subject: [PATCH 1/7] chore: refactor AceEditorWrapper to functional component --- .../components/AceEditorWrapper/index.tsx | 263 ++++++++---------- 1 file changed, 120 insertions(+), 143 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx index 6b70be228bf35..28d416536f114 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx @@ -16,10 +16,16 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; -import { connect } from 'react-redux'; +import React, { useState, useEffect, useRef } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { usePrevious } from 'src/hooks/usePrevious'; import { areArraysShallowEqual } from 'src/reduxUtils'; import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; +import { + queryEditorSetSelectedText, + queryEditorSetFunctionNames, + addTable, +} from 'src/SqlLab/actions/sqlLab'; import { SCHEMA_AUTOCOMPLETE_SCORE, TABLE_AUTOCOMPLETE_SCORE, @@ -40,115 +46,111 @@ type HotKey = { func: () => void; }; -type OwnProps = { - queryEditor: QueryEditor; - extendedTables: Array<{ name: string; columns: any[] }>; +type AceEditorWrapperProps = { autocomplete: boolean; - onChange: (sql: string) => void; onBlur: (sql: string) => void; + onChange: (sql: string) => void; + queryEditor: QueryEditor; database: any; - actions: { - queryEditorSetSelectedText: (edit: any, text: null | string) => void; - queryEditorSetFunctionNames: (queryEditor: object, dbId: number) => void; - addTable: ( - queryEditor: any, - database: any, - value: any, - schema: any, - ) => void; - }; - hotkeys: HotKey[]; + extendedTables: Array<{ name: string; columns: any[] }>; height: string; + hotkeys: HotKey[]; }; type ReduxProps = { - queryEditor: QueryEditor; - sql: string; + currentQueryEditor: QueryEditor; + currentSql: string; schemas: SchemaOption[]; tables: any[]; functionNames: string[]; }; -type Props = ReduxProps & OwnProps; - -interface State { - sql: string; - words: AceCompleterKeyword[]; -} - -class AceEditorWrapper extends React.PureComponent { - static defaultProps = { - onBlur: () => {}, - onChange: () => {}, - schemas: [], - tables: [], - functionNames: [], - extendedTables: [], - }; - - private currentSelectionCache; +const AceEditorWrapper = ({ + autocomplete, + onBlur = () => {}, + onChange = () => {}, + queryEditor, + database, + extendedTables = [], + height, + hotkeys, +}: AceEditorWrapperProps) => { + const dispatch = useDispatch(); + + const { currentQueryEditor, currentSql, schemas, tables, functionNames } = + useSelector( + ({ sqlLab: { unsavedQueryEditor } }) => { + const currentQueryEditor = { + ...queryEditor, + ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor), + }; + return { + currentQueryEditor, + currentSql: currentQueryEditor.sql, + schemas: currentQueryEditor.schemaOptions || [], + tables: currentQueryEditor.tableOptions || [], + functionNames: currentQueryEditor.functionNames, + }; + }, + ); - constructor(props: Props) { - super(props); - this.state = { - sql: props.sql, - words: [], - }; + const [sql, setSql] = useState(currentSql); + const [words, setWords] = useState([]); - // The editor changeSelection is called multiple times in a row, - // faster than React reconciliation process, so the selected text - // needs to be stored out of the state to ensure changes to it - // get saved immediately - this.currentSelectionCache = ''; - this.onChange = this.onChange.bind(this); - } + // The editor changeSelection is called multiple times in a row, + // faster than React reconciliation process, so the selected text + // needs to be stored out of the state to ensure changes to it + // get saved immediately + const currentSelectionCache = useRef(''); - componentDidMount() { + useEffect(() => { // Making sure no text is selected from previous mount - this.props.actions.queryEditorSetSelectedText(this.props.queryEditor, null); - if (this.props.queryEditor.dbId) { - this.props.actions.queryEditorSetFunctionNames( - this.props.queryEditor, - this.props.queryEditor.dbId, - ); + dispatch(queryEditorSetSelectedText(queryEditor, null)); + if (queryEditor.dbId) { + dispatch(queryEditorSetFunctionNames(queryEditor, queryEditor.dbId)); } - this.setAutoCompleter(this.props); - } + setAutoCompleter(); + }, []); + + const prevTables = usePrevious(tables); + const prevSchemas = usePrevious(schemas); + const prevExtendedTables = usePrevious(extendedTables); + const prevSql = usePrevious(currentSql); - UNSAFE_componentWillReceiveProps(nextProps: Props) { + useEffect(() => { if ( - !areArraysShallowEqual(this.props.tables, nextProps.tables) || - !areArraysShallowEqual(this.props.schemas, nextProps.schemas) || - !areArraysShallowEqual( - this.props.extendedTables, - nextProps.extendedTables, - ) + !areArraysShallowEqual(tables, prevTables) || + !areArraysShallowEqual(schemas, prevSchemas) || + !areArraysShallowEqual(extendedTables, prevExtendedTables) ) { - this.setAutoCompleter(nextProps); + setAutoCompleter(); } - if (nextProps.sql !== this.props.sql) { - this.setState({ sql: nextProps.sql }); + }, [tables, schemas, extendedTables]); + + useEffect(() => { + if (currentSql !== prevSql) { + setSql(currentSql); } - } + }, [currentSql]); - onBlur() { - this.props.onBlur(this.state.sql); - } + const onBlurSql = () => { + onBlur(sql); + }; - onAltEnter() { - this.props.onBlur(this.state.sql); - } + const onAltEnter = () => { + onBlur(sql); + }; - onEditorLoad(editor: any) { + const onEditorLoad = (editor: any) => { editor.commands.addCommand({ name: 'runQuery', bindKey: { win: 'Alt-enter', mac: 'Alt-enter' }, exec: () => { - this.onAltEnter(); + onAltEnter(); }, }); - this.props.hotkeys.forEach(keyConfig => { + hotkeys.forEach(keyConfig => { editor.commands.addCommand({ name: keyConfig.name, bindKey: { win: keyConfig.key, mac: keyConfig.key }, @@ -162,27 +164,23 @@ class AceEditorWrapper extends React.PureComponent { // Backspace trigger 1 character selection, ignoring if ( - selectedText !== this.currentSelectionCache && + selectedText !== currentSelectionCache.current && selectedText.length !== 1 ) { - this.props.actions.queryEditorSetSelectedText( - this.props.queryEditor, - selectedText, - ); + dispatch(queryEditorSetSelectedText(queryEditor, selectedText)); } - this.currentSelectionCache = selectedText; + currentSelectionCache.current = selectedText; }); - } + }; - onChange(text: string) { - this.setState({ sql: text }); - this.props.onChange(text); - } + const onChangeText = (text: string) => { + setSql(text); + onChange(text); + }; - setAutoCompleter(props: Props) { + const setAutoCompleter = () => { // Loading schema, table and column names as auto-completable words - const schemas = props.schemas || []; const schemaWords = schemas.map(s => ({ name: s.label, value: s.value, @@ -191,9 +189,6 @@ class AceEditorWrapper extends React.PureComponent { })); const columns = {}; - const tables = props.tables || []; - const extendedTables = props.extendedTables || []; - const tableWords = tables.map(t => { const tableName = t.value; const extendedTable = extendedTables.find(et => et.name === tableName); @@ -217,7 +212,7 @@ class AceEditorWrapper extends React.PureComponent { meta: 'column', })); - const functionWords = props.functionNames.map(func => ({ + const functionWords = functionNames.map(func => ({ name: func, value: func, score: SQL_FUNCTIONS_AUTOCOMPLETE_SCORE, @@ -227,11 +222,13 @@ class AceEditorWrapper extends React.PureComponent { const completer = { insertMatch: (editor: Editor, data: any) => { if (data.meta === 'table') { - this.props.actions.addTable( - this.props.queryEditor, - this.props.database, - data.value, - this.props.queryEditor.schema, + dispatch( + addTable( + currentQueryEditor, + database, + data.value, + queryEditor.schema, + ), ); } @@ -257,11 +254,11 @@ class AceEditorWrapper extends React.PureComponent { completer, })); - this.setState({ words }); - } + setWords(words); + }; - getAceAnnotations() { - const { validationResult } = this.props.queryEditor; + const getAceAnnotations = () => { + const { validationResult } = queryEditor; const resultIsReady = validationResult?.completed; if (resultIsReady && validationResult?.errors?.length) { const errors = validationResult.errors.map((err: any) => ({ @@ -273,42 +270,22 @@ class AceEditorWrapper extends React.PureComponent { return errors; } return []; - } - - render() { - return ( - - ); - } -} - -function mapStateToProps( - { sqlLab: { unsavedQueryEditor } }: SqlLabRootState, - { queryEditor }: OwnProps, -) { - const currentQueryEditor = { - ...queryEditor, - ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor), - }; - return { - queryEditor: currentQueryEditor, - sql: currentQueryEditor.sql, - schemas: currentQueryEditor.schemaOptions || [], - tables: currentQueryEditor.tableOptions, - functionNames: currentQueryEditor.functionNames, }; -} -export default connect(mapStateToProps)( - AceEditorWrapper, -); + + return ( + + ); +}; + +export default AceEditorWrapper; From c0ac4ff4d91ba713334127b48272efddf290d8d6 Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Tue, 20 Sep 2022 17:48:12 +0300 Subject: [PATCH 2/7] Refactoring --- .../components/AceEditorWrapper/index.tsx | 38 +++---------------- .../src/SqlLab/components/SqlEditor/index.jsx | 16 +++++--- 2 files changed, 16 insertions(+), 38 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx index 28d416536f114..b04caf6c2c1c6 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState, useEffect, useRef } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { usePrevious } from 'src/hooks/usePrevious'; import { areArraysShallowEqual } from 'src/reduxUtils'; import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; @@ -37,7 +37,7 @@ import { AceCompleterKeyword, FullSQLEditor as AceEditor, } from 'src/components/AsyncAceEditor'; -import { QueryEditor, SchemaOption, SqlLabRootState } from 'src/SqlLab/types'; +import { QueryEditor } from 'src/SqlLab/types'; type HotKey = { key: string; @@ -57,14 +57,6 @@ type AceEditorWrapperProps = { hotkeys: HotKey[]; }; -type ReduxProps = { - currentQueryEditor: QueryEditor; - currentSql: string; - schemas: SchemaOption[]; - tables: any[]; - functionNames: string[]; -}; - const AceEditorWrapper = ({ autocomplete, onBlur = () => {}, @@ -77,22 +69,9 @@ const AceEditorWrapper = ({ }: AceEditorWrapperProps) => { const dispatch = useDispatch(); - const { currentQueryEditor, currentSql, schemas, tables, functionNames } = - useSelector( - ({ sqlLab: { unsavedQueryEditor } }) => { - const currentQueryEditor = { - ...queryEditor, - ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor), - }; - return { - currentQueryEditor, - currentSql: currentQueryEditor.sql, - schemas: currentQueryEditor.schemaOptions || [], - tables: currentQueryEditor.tableOptions || [], - functionNames: currentQueryEditor.functionNames, - }; - }, - ); + const { sql: currentSql, functionNames } = queryEditor; + const schemas = queryEditor.schemaOptions ?? []; + const tables = queryEditor.tableOptions ?? []; const [sql, setSql] = useState(currentSql); const [words, setWords] = useState([]); @@ -223,12 +202,7 @@ const AceEditorWrapper = ({ insertMatch: (editor: Editor, data: any) => { if (data.meta === 'table') { dispatch( - addTable( - currentQueryEditor, - database, - data.value, - queryEditor.schema, - ), + addTable(queryEditor, database, data.value, queryEditor.schema), ); } diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx index d6947c1ba5f15..3e8ee84f6c500 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx @@ -163,8 +163,13 @@ const SqlEditor = ({ const theme = useTheme(); const dispatch = useDispatch(); - const { database, latestQuery, hideLeftBar } = useSelector( - ({ sqlLab: { unsavedQueryEditor, databases, queries } }) => { + const { currentQueryEditor, database, latestQuery, hideLeftBar } = + useSelector(({ sqlLab: { unsavedQueryEditor, databases, queries } }) => { + const currentQueryEditor = { + ...queryEditor, + ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor), + }; + let { dbId, latestQueryId, hideLeftBar } = queryEditor; if (unsavedQueryEditor.id === queryEditor.id) { dbId = unsavedQueryEditor.dbId || dbId; @@ -172,12 +177,12 @@ const SqlEditor = ({ hideLeftBar = unsavedQueryEditor.hideLeftBar || hideLeftBar; } return { + currentQueryEditor, database: databases[dbId], latestQuery: queries[latestQueryId], hideLeftBar, }; - }, - ); + }); const queryEditors = useSelector(({ sqlLab }) => sqlLab.queryEditors); @@ -608,11 +613,10 @@ const SqlEditor = ({ >
Date: Tue, 20 Sep 2022 17:55:08 +0300 Subject: [PATCH 3/7] Fix bug --- .../src/SqlLab/components/AceEditorWrapper/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx index b04caf6c2c1c6..7ed354ca0436d 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx @@ -91,9 +91,9 @@ const AceEditorWrapper = ({ setAutoCompleter(); }, []); - const prevTables = usePrevious(tables); - const prevSchemas = usePrevious(schemas); - const prevExtendedTables = usePrevious(extendedTables); + const prevTables = usePrevious(tables) ?? []; + const prevSchemas = usePrevious(schemas) ?? []; + const prevExtendedTables = usePrevious(extendedTables) ?? []; const prevSql = usePrevious(currentSql); useEffect(() => { From 25ff046c04b9cfac91d98693961acfe6c7905cfa Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Tue, 20 Sep 2022 20:07:04 +0300 Subject: [PATCH 4/7] Refactoring --- .../AceEditorWrapper/AceEditorWrapper.test.tsx | 10 ---------- .../src/SqlLab/components/AceEditorWrapper/index.tsx | 2 +- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx index 2bbc90d947b06..393e0ab0c967c 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx @@ -23,11 +23,6 @@ import { render, waitFor } from 'spec/helpers/testing-library'; import { QueryEditor } from 'src/SqlLab/types'; import { Store } from 'redux'; import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures'; -import { - queryEditorSetSelectedText, - queryEditorSetFunctionNames, - addTable, -} from 'src/SqlLab/actions/sqlLab'; import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper'; import { AsyncAceEditorProps } from 'src/components/AsyncAceEditor'; @@ -54,11 +49,6 @@ const setup = (queryEditor: QueryEditor, store?: Store) => render( void; queryEditor: QueryEditor; database: any; - extendedTables: Array<{ name: string; columns: any[] }>; + extendedTables?: Array<{ name: string; columns: any[] }>; height: string; hotkeys: HotKey[]; }; From 4ee79227282f6735bd7c008c1459b02f2b5434af Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Tue, 20 Sep 2022 20:33:42 +0300 Subject: [PATCH 5/7] Skip test --- .../components/AceEditorWrapper/AceEditorWrapper.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx index 393e0ab0c967c..ac2a254c24aca 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx @@ -73,6 +73,9 @@ describe('AceEditorWrapper', () => { }); it('renders sql from unsaved change', () => { + // TODO: need to rewrite the test because we retrieve 'currentQueryEditor' in SqlEditor + return; + const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE'; const { getByTestId } = setup( defaultQueryEditor, From 93ce681853399636ec75e5b327b72dcdcdc366e9 Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Mon, 26 Sep 2022 21:05:34 +0300 Subject: [PATCH 6/7] Fix bug when functionNames is undefined --- .../src/SqlLab/components/AceEditorWrapper/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx index a87a2d916551a..0583bd6343878 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx @@ -69,7 +69,8 @@ const AceEditorWrapper = ({ }: AceEditorWrapperProps) => { const dispatch = useDispatch(); - const { sql: currentSql, functionNames } = queryEditor; + const { sql: currentSql } = queryEditor; + const functionNames = queryEditor.functionNames ?? []; const schemas = queryEditor.schemaOptions ?? []; const tables = queryEditor.tableOptions ?? []; From dc69bbeab44001220f35dafbee1c72f5b9ba706d Mon Sep 17 00:00:00 2001 From: EugeneTorap Date: Tue, 27 Sep 2022 16:37:28 +0300 Subject: [PATCH 7/7] Fix 'renders sql from unsaved change' test --- .../AceEditorWrapper.test.tsx | 24 -------- .../components/SqlEditor/SqlEditor.test.jsx | 56 +++++++++++++++++++ 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx index ac2a254c24aca..0fd5c7d3e86d8 100644 --- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx +++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx @@ -72,30 +72,6 @@ describe('AceEditorWrapper', () => { ); }); - it('renders sql from unsaved change', () => { - // TODO: need to rewrite the test because we retrieve 'currentQueryEditor' in SqlEditor - return; - - const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE'; - const { getByTestId } = setup( - defaultQueryEditor, - mockStore({ - ...initialState, - sqlLab: { - ...initialState.sqlLab, - unsavedQueryEditor: { - id: defaultQueryEditor.id, - sql: expectedSql, - }, - }, - }), - ); - - expect(getByTestId('react-ace')).toHaveTextContent( - JSON.stringify({ value: expectedSql }).slice(1, -1), - ); - }); - it('renders current sql for unrelated unsaved changes', () => { const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE'; const { getByTestId } = setup( diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx index 163c6408ad637..e2003c8acb945 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx @@ -18,6 +18,7 @@ */ import React from 'react'; import { mount } from 'enzyme'; +import { render } from 'spec/helpers/testing-library'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; @@ -48,6 +49,13 @@ import { defaultQueryEditor, } from 'src/SqlLab/fixtures'; +jest.mock('src/components/AsyncAceEditor', () => ({ + ...jest.requireActual('src/components/AsyncAceEditor'), + FullSQLEditor: props => ( +
{JSON.stringify(props)}
+ ), +})); + const MOCKED_SQL_EDITOR_HEIGHT = 500; fetchMock.get('glob:*/api/v1/database/*', { result: [] }); @@ -79,6 +87,12 @@ const store = mockStore({ }, }); +const setup = (props = {}, store) => + render(, { + useRedux: true, + ...(store && { store }), + }); + describe('SqlEditor', () => { const mockedProps = { actions: { @@ -118,21 +132,61 @@ describe('SqlEditor', () => { const wrapper = buildWrapper(updatedProps); expect(wrapper.find(EmptyStateBig)).toExist(); }); + it('render a SqlEditorLeftBar', async () => { const wrapper = buildWrapper(); await waitForComponentToPaint(wrapper); expect(wrapper.find(SqlEditorLeftBar)).toExist(); }); + it('render an AceEditorWrapper', async () => { const wrapper = buildWrapper(); await waitForComponentToPaint(wrapper); expect(wrapper.find(AceEditorWrapper)).toExist(); }); + + it('renders sql from unsaved change', () => { + const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE'; + const { getByTestId } = setup( + mockedProps, + mockStore({ + ...initialState, + sqlLab: { + ...initialState.sqlLab, + databases: { + dbid1: { + allow_ctas: false, + allow_cvas: false, + allow_dml: false, + allow_file_upload: false, + allow_run_async: false, + backend: 'postgresql', + database_name: 'examples', + expose_in_sqllab: true, + force_ctas_schema: null, + id: 1, + }, + }, + unsavedQueryEditor: { + id: defaultQueryEditor.id, + dbId: 'dbid1', + sql: expectedSql, + }, + }, + }), + ); + + expect(getByTestId('react-ace')).toHaveTextContent( + JSON.stringify({ value: expectedSql }).slice(1, -1), + ); + }); + it('render a SouthPane', async () => { const wrapper = buildWrapper(); await waitForComponentToPaint(wrapper); expect(wrapper.find(ConnectedSouthPane)).toExist(); }); + // TODO eschutho convert tests to RTL // eslint-disable-next-line jest/no-disabled-tests it.skip('does not overflow the editor window', async () => { @@ -146,6 +200,7 @@ describe('SqlEditor', () => { SQL_EDITOR_GUTTER_HEIGHT; expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT); }); + // eslint-disable-next-line jest/no-disabled-tests it.skip('does not overflow the editor window after resizing', async () => { const wrapper = buildWrapper(); @@ -159,6 +214,7 @@ describe('SqlEditor', () => { SQL_EDITOR_GUTTER_HEIGHT; expect(totalSize).toEqual(450); }); + it('render a Limit Dropdown', async () => { const defaultQueryLimit = 101; const updatedProps = { ...mockedProps, defaultQueryLimit };