chore: Use queryEditorId in SqlEditor child components (#21650)

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

@@ -19,23 +19,17 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
-import { render, screen, act } from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom/extend-expect';
 import thunk from 'redux-thunk';
 import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
-import {
-  table,
-  initialState,
-  defaultQueryEditor,
-  mockedActions,
-} from 'src/SqlLab/fixtures';
+import { table, initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 
 const mockedProps = {
-  actions: mockedActions,
   tables: [table],
-  queryEditor: defaultQueryEditor,
+  queryEditorId: defaultQueryEditor.id,
   database: {
     id: 1,
     database_name: 'main',
@@ -58,103 +52,91 @@ fetchMock.get('glob:*/superset/tables/**', {
   tableLength: 1,
 });
 
-describe('Left Panel Expansion', () => {
-  test('is valid', () => {
+const renderAndWait = (props, store) =>
+  waitFor(() =>
+    render(<SqlEditorLeftBar {...props} />, {
+      useRedux: true,
+      ...(store && { store }),
+    }),
+  );
+
+test('is valid', () => {
+  expect(
+    React.isValidElement(
+      <Provider store={store}>
+        <SqlEditorLeftBar {...mockedProps} />
+      </Provider>,
+    ),
+  ).toBe(true);
+});
+
+test('renders a TableElement', async () => {
+  await renderAndWait(mockedProps, store);
+  expect(await screen.findByText(/Database/i)).toBeInTheDocument();
+  const tableElement = screen.getAllByTestId('table-element');
+  expect(tableElement.length).toBeGreaterThanOrEqual(1);
+});
+
+test('table should be visible when expanded is true', async () => {
+  const { container } = await renderAndWait(mockedProps, store);
+
+  const dbSelect = screen.getByRole('combobox', {
+    name: 'Select database or type database name',
+  });
+  const schemaSelect = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+  const dropdown = screen.getByText(/Table/i);
+  const abUser = screen.queryAllByText(/ab_user/i);
+
+  await waitFor(() => {
+    expect(screen.getByText(/Database/i)).toBeInTheDocument();
+    expect(dbSelect).toBeInTheDocument();
+    expect(schemaSelect).toBeInTheDocument();
+    expect(dropdown).toBeInTheDocument();
+    expect(abUser).toHaveLength(2);
     expect(
-      React.isValidElement(
-        <Provider store={store}>
-          <SqlEditorLeftBar {...mockedProps} />
-        </Provider>,
-      ),
-    ).toBe(true);
-  });
-
-  test('renders a TableElement', async () => {
-    render(<SqlEditorLeftBar {...mockedProps} />, {
-      useRedux: true,
-      initialState,
-    });
-
-    expect(await screen.findByText(/Database/i)).toBeInTheDocument();
-    expect(
-      screen.queryAllByTestId('table-element').length,
-    ).toBeGreaterThanOrEqual(1);
-  });
-
-  test('table should be visible when expanded is true', async () => {
-    const { container } = render(<SqlEditorLeftBar {...mockedProps} />, {
-      useRedux: true,
-      initialState,
-    });
-
-    const dbSelect = screen.getByRole('combobox', {
-      name: 'Select database or type database name',
-    });
-    const schemaSelect = screen.getByRole('combobox', {
-      name: 'Select schema or type schema name',
-    });
-    const dropdown = screen.getByText(/Table/i);
-    const abUser = screen.queryAllByText(/ab_user/i);
-
-    act(async () => {
-      expect(await screen.findByText(/Database/i)).toBeInTheDocument();
-      expect(dbSelect).toBeInTheDocument();
-      expect(schemaSelect).toBeInTheDocument();
-      expect(dropdown).toBeInTheDocument();
-      expect(abUser).toHaveLength(2);
-      expect(
-        container.querySelector('.ant-collapse-content-active'),
-      ).toBeInTheDocument();
-    });
-  });
-
-  test('should toggle the table when the header is clicked', async () => {
-    const collapseMock = jest.fn();
-    render(
-      <SqlEditorLeftBar
-        {...mockedProps}
-        actions={{ ...mockedActions, collapseTable: collapseMock }}
-      />,
-      {
-        useRedux: true,
-        initialState,
-      },
-    );
-
-    expect(await screen.findByText(/ab_user/)).toBeInTheDocument();
-    const header = screen.getByText(/ab_user/);
-    userEvent.click(header);
-    expect(collapseMock).toHaveBeenCalled();
-  });
-
-  test('When changing database the table list must be updated', async () => {
-    const { rerender } = render(<SqlEditorLeftBar {...mockedProps} />, {
-      useRedux: true,
-      initialState,
-    });
-
-    await act(async () => {
-      expect(await screen.findByText(/main/i)).toBeInTheDocument();
-      expect(await screen.findByText(/ab_user/i)).toBeInTheDocument();
-    });
-    rerender(
-      <SqlEditorLeftBar
-        {...mockedProps}
-        actions={{ ...mockedActions }}
-        database={{
-          id: 2,
-          database_name: 'new_db',
-          backend: 'postgresql',
-        }}
-        queryEditor={{ ...mockedProps.queryEditor, schema: 'new_schema' }}
-        tables={[{ ...mockedProps.tables[0], dbId: 2, name: 'new_table' }]}
-      />,
-      {
-        useRedux: true,
-        initialState,
-      },
-    );
-    expect(await screen.findByText(/new_db/i)).toBeInTheDocument();
-    expect(await screen.findByText(/new_table/i)).toBeInTheDocument();
+      container.querySelector('.ant-collapse-content-active'),
+    ).toBeInTheDocument();
   });
 });
+
+test('should toggle the table when the header is clicked', async () => {
+  const store = mockStore(initialState);
+  await renderAndWait(mockedProps, store);
+
+  const header = (await screen.findAllByText(/ab_user/))[1];
+  expect(header).toBeInTheDocument();
+  userEvent.click(header);
+
+  await waitFor(() => {
+    expect(store.getActions()).toHaveLength(2);
+    expect(store.getActions()[1].type).toEqual('COLLAPSE_TABLE');
+  });
+});
+
+test('When changing database the table list must be updated', async () => {
+  const { rerender } = await renderAndWait(mockedProps, store);
+
+  expect(screen.getAllByText(/main/i)[0]).toBeInTheDocument();
+  expect(screen.getAllByText(/ab_user/i)[0]).toBeInTheDocument();
+
+  rerender(
+    <SqlEditorLeftBar
+      {...mockedProps}
+      database={{
+        id: 2,
+        database_name: 'new_db',
+        backend: 'postgresql',
+      }}
+      queryEditor={{ ...mockedProps.queryEditor, schema: 'new_schema' }}
+      tables={[{ ...mockedProps.tables[0], dbId: 2, name: 'new_table' }]}
+    />,
+    {
+      useRedux: true,
+      initialState,
+    },
+  );
+  expect(await screen.findByText(/new_db/i)).toBeInTheDocument();
+  expect(await screen.findByText(/new_table/i)).toBeInTheDocument();
+});