chore(sqllab): Refactor react-query by redux-toolkit query (#23760)

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

@@ -17,25 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
-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,
-  SQL_TOOLBAR_HEIGHT,
-} from 'src/SqlLab/constants';
-import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
-import SouthPane from 'src/SqlLab/components/SouthPane';
+import { reducers } from 'src/SqlLab/reducers';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 import { setupStore } from 'src/views/store';
-import { reducers } from 'src/SqlLab/reducers';
-import QueryProvider from 'src/views/QueryProvider';
-import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import {
   initialState,
   queries,
@@ -43,6 +30,7 @@ import {
   defaultQueryEditor,
 } from 'src/SqlLab/fixtures';
 import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
+import { api } from 'src/hooks/apiResources/queryApi';
 
 jest.mock('src/components/AsyncAceEditor', () => ({
   ...jest.requireActual('src/components/AsyncAceEditor'),
@@ -51,27 +39,24 @@ jest.mock('src/components/AsyncAceEditor', () => ({
       data-test="react-ace"
       onChange={evt => onChange(evt.target.value)}
       onBlur={onBlur}
-    >
-      {value}
-    </textarea>
+      value={value}
+    />
   ),
 }));
 jest.mock('src/SqlLab/components/SqlEditorLeftBar', () => jest.fn());
 
-const MOCKED_SQL_EDITOR_HEIGHT = 500;
-
 fetchMock.get('glob:*/api/v1/database/*', { result: [] });
 fetchMock.get('glob:*/api/v1/database/*/tables/*', { options: [] });
 fetchMock.post('glob:*/sqllab/execute/*', { result: [] });
 
-const middlewares = [thunk];
-const mockStore = configureStore(middlewares);
+let store;
+let actions;
 const mockInitialState = {
   ...initialState,
   sqlLab: {
     ...initialState.sqlLab,
     databases: {
-      dbid1: {
+      1991: {
         allow_ctas: false,
         allow_cvas: false,
         allow_dml: false,
@@ -86,11 +71,10 @@ const mockInitialState = {
     },
     unsavedQueryEditor: {
       id: defaultQueryEditor.id,
-      dbId: 'dbid1',
+      dbId: 1991,
     },
   },
 };
-const store = mockStore(mockInitialState);
 
 const setup = (props = {}, store) =>
   render(<SqlEditor {...props} />, {
@@ -98,6 +82,23 @@ const setup = (props = {}, store) =>
     ...(store && { store }),
   });
 
+const logAction = () => next => action => {
+  if (typeof action === 'function') {
+    return next(action);
+  }
+  actions.push(action);
+  return next(action);
+};
+
+const createStore = initState =>
+  setupStore({
+    disableDegugger: true,
+    initialState: initState,
+    rootReducers: reducers,
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware().concat(api.middleware, logAction),
+  });
+
 describe('SqlEditor', () => {
   const mockedProps = {
     queryEditor: initialState.sqlLab.queryEditors[0],
@@ -112,24 +113,20 @@ describe('SqlEditor', () => {
   };
 
   beforeEach(() => {
+    store = createStore(mockInitialState);
+    actions = [];
+
     SqlEditorLeftBar.mockClear();
     SqlEditorLeftBar.mockImplementation(() => (
       <div data-test="mock-sql-editor-left-bar" />
     ));
   });
 
-  const buildWrapper = (props = {}) =>
-    mount(
-      <QueryProvider>
-        <Provider store={store}>
-          <SqlEditor {...mockedProps} {...props} />
-        </Provider>
-      </QueryProvider>,
-      {
-        wrappingComponent: ThemeProvider,
-        wrappingComponentProps: { theme: supersetTheme },
-      },
-    );
+  afterEach(() => {
+    act(() => {
+      store.dispatch(api.util.resetApiState());
+    });
+  });
 
   it('does not render SqlEditor if no db selected', async () => {
     const queryEditor = initialState.sqlLab.queryEditors[1];
@@ -152,11 +149,7 @@ describe('SqlEditor', () => {
   });
 
   it('avoids rerendering EditorLeftBar while typing', async () => {
-    const sqlLabStore = setupStore({
-      initialState: mockInitialState,
-      rootReducers: reducers,
-    });
-    const { findByTestId } = setup(mockedProps, sqlLabStore);
+    const { findByTestId } = setup(mockedProps, store);
     const editor = await findByTestId('react-ace');
     const sql = 'select *';
     const renderCount = SqlEditorLeftBar.mock.calls.length;
@@ -168,34 +161,32 @@ describe('SqlEditor', () => {
 
   it('renders sql from unsaved change', async () => {
     const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
-    const { findByTestId } = 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,
+    store = createStore({
+      ...initialState,
+      sqlLab: {
+        ...initialState.sqlLab,
+        databases: {
+          2023: {
+            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: 2023,
+          sql: expectedSql,
+        },
+      },
+    });
+    const { findByTestId } = setup(mockedProps, store);
 
     const editor = await findByTestId('react-ace');
     expect(editor).toHaveValue(expectedSql);
@@ -209,7 +200,7 @@ describe('SqlEditor', () => {
   });
 
   it('runs query action with ctas false', async () => {
-    const expectedStore = mockStore({
+    store = createStore({
       ...initialState,
       sqlLab: {
         ...initialState.sqlLab,
@@ -234,11 +225,11 @@ describe('SqlEditor', () => {
         },
       },
     });
-    const { findByTestId } = setup(mockedProps, expectedStore);
+    const { findByTestId } = setup(mockedProps, store);
     const runButton = await findByTestId('run-query-action');
     fireEvent.click(runButton);
     await waitFor(() =>
-      expect(expectedStore.getActions()).toContainEqual({
+      expect(actions).toContainEqual({
         type: 'START_QUERY',
         query: expect.objectContaining({
           ctas: false,
@@ -248,34 +239,6 @@ describe('SqlEditor', () => {
     );
   });
 
-  // TODO eschutho convert tests to RTL
-  // eslint-disable-next-line jest/no-disabled-tests
-  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(SouthPane).props().height +
-      SQL_TOOLBAR_HEIGHT +
-      SQL_EDITOR_GUTTER_MARGIN * 2 +
-      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();
-    wrapper.setState({ height: 450 });
-    await waitForComponentToPaint(wrapper);
-    const totalSize =
-      parseFloat(wrapper.find(AceEditorWrapper).props().height) +
-      wrapper.find(SouthPane).props().height +
-      SQL_TOOLBAR_HEIGHT +
-      SQL_EDITOR_GUTTER_MARGIN * 2 +
-      SQL_EDITOR_GUTTER_HEIGHT;
-    expect(totalSize).toEqual(450);
-  });
-
   it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
     const updatedProps = { ...mockedProps, defaultQueryLimit };