fix: SqlEditor_spec tests (#13186)

superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx

@@ -22,7 +22,7 @@ import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
-
+import fetchMock from 'fetch-mock';
 import {
   SQL_EDITOR_GUTTER_HEIGHT,
   SQL_EDITOR_GUTTER_MARGIN,
@@ -37,18 +37,24 @@ import {
   queryEditorSetFunctionNames,
   queryEditorSetSelectedText,
 } from 'src/SqlLab/actions/sqlLab';
-
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { initialState, queries, table } from './fixtures';
 
 const MOCKED_SQL_EDITOR_HEIGHT = 500;
 
+fetchMock.get('glob:*/api/v1/database/*', {});
+
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const store = mockStore(initialState);
 
 describe('SqlEditor', () => {
   const mockedProps = {
-    actions: { queryEditorSetFunctionNames, queryEditorSetSelectedText },
+    actions: {
+      queryEditorSetFunctionNames,
+      queryEditorSetSelectedText,
+      addDangerToast: jest.fn(),
+    },
     database: {},
     queryEditorId: initialState.sqlLab.queryEditors[0].id,
     latestQuery: queries[0],
@@ -72,22 +78,26 @@ describe('SqlEditor', () => {
       },
     );
 
-  it('render a SqlEditorLeftBar', () => {
+  it('render a SqlEditorLeftBar', async () => {
     const wrapper = buildWrapper();
+    await waitForComponentToPaint(wrapper);
     expect(wrapper.find(SqlEditorLeftBar)).toExist();
   });
-  it('render an AceEditorWrapper', () => {
+  it('render an AceEditorWrapper', async () => {
     const wrapper = buildWrapper();
+    await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AceEditorWrapper)).toExist();
   });
-  it('render a SouthPane', () => {
+  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', () => {
+  it.skip('does not overflow the editor window', async () => {
     const wrapper = buildWrapper();
+    await waitForComponentToPaint(wrapper);
     const totalSize =
       parseFloat(wrapper.find(AceEditorWrapper).props().height) +
       wrapper.find(ConnectedSouthPane).props().height +
@@ -97,9 +107,10 @@ describe('SqlEditor', () => {
     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', () => {
+  it.skip('does not overflow the editor window after resizing', async () => {
     const wrapper = buildWrapper();
     wrapper.setState({ height: 450 });
+    await waitForComponentToPaint(wrapper);
     const totalSize =
       parseFloat(wrapper.find(AceEditorWrapper).props().height) +
       wrapper.find(ConnectedSouthPane).props().height +
@@ -108,10 +119,11 @@ describe('SqlEditor', () => {
       SQL_EDITOR_GUTTER_HEIGHT;
     expect(totalSize).toEqual(450);
   });
-  it('render a Limit Dropdown', () => {
+  it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
     const updatedProps = { ...mockedProps, defaultQueryLimit };
     const wrapper = buildWrapper(updatedProps);
+    await waitForComponentToPaint(wrapper);
     expect(wrapper.find(Dropdown)).toExist();
   });
 });

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -547,7 +547,10 @@ class SqlEditor extends React.PureComponent {
     return (
       <AntdMenu>
         {[...new Set(LIMIT_DROPDOWN)].map(limit => (
-          <AntdMenu.Item onClick={() => this.setQueryLimit(limit)}>
+          <AntdMenu.Item
+            key={`${limit}`}
+            onClick={() => this.setQueryLimit(limit)}
+          >
             {/* // eslint-disable-line no-use-before-define */}
             <a role="button" styling="link">
               {this.convertToNumWithSpaces(limit)}