diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
index 9d32454899206..5f9b140c12faa 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
@@ -19,7 +19,7 @@
import React from 'react';
import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, act } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import '@testing-library/jest-dom/extend-expect';
@@ -28,7 +28,6 @@ import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
import {
table,
initialState,
- databases,
defaultQueryEditor,
mockedActions,
} from 'src/SqlLab/fixtures';
@@ -37,7 +36,11 @@ const mockedProps = {
actions: mockedActions,
tables: [table],
queryEditor: defaultQueryEditor,
- database: databases,
+ database: {
+ id: 1,
+ database_name: 'main',
+ backend: 'mysql',
+ },
height: 0,
};
const middlewares = [thunk];
@@ -46,15 +49,13 @@ const store = mockStore(initialState);
fetchMock.get('glob:*/api/v1/database/*/schemas/?*', { result: [] });
fetchMock.get('glob:*/superset/tables/**', {
- json: {
- options: [
- {
- label: 'ab_user',
- value: 'ab_user',
- },
- ],
- tableLength: 1,
- },
+ options: [
+ {
+ label: 'ab_user',
+ value: 'ab_user',
+ },
+ ],
+ tableLength: 1,
});
describe('Left Panel Expansion', () => {
@@ -74,9 +75,7 @@ describe('Left Panel Expansion', () => {
initialState,
});
- expect(
- await screen.findByText(/select database or type database name/i),
- ).toBeInTheDocument();
+ expect(await screen.findByText(/Database/i)).toBeInTheDocument();
expect(
screen.queryAllByTestId('table-element').length,
).toBeGreaterThanOrEqual(1);
@@ -94,30 +93,27 @@ describe('Left Panel Expansion', () => {
const schemaSelect = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
- const dropdown = screen.getByText(/Select table or type table name/i);
- const abUser = screen.getByText(/ab_user/i);
+ const dropdown = screen.getByText(/Table/i);
+ const abUser = screen.queryAllByText(/ab_user/i);
- expect(
- await screen.findByText(/select database or type database name/i),
- ).toBeInTheDocument();
- expect(dbSelect).toBeInTheDocument();
- expect(schemaSelect).toBeInTheDocument();
- expect(dropdown).toBeInTheDocument();
- expect(abUser).toBeInTheDocument();
- expect(
- container.querySelector('.ant-collapse-content-active'),
- ).toBeInTheDocument();
+ 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(
,
{
useRedux: true,
@@ -130,4 +126,35 @@ describe('Left Panel Expansion', () => {
userEvent.click(header);
expect(collapseMock).toHaveBeenCalled();
});
+
+ test('When changing database the table list must be updated', async () => {
+ const { rerender } = render(, {
+ useRedux: true,
+ initialState,
+ });
+
+ await act(async () => {
+ expect(await screen.findByText(/main/i)).toBeInTheDocument();
+ expect(await screen.findByText(/ab_user/i)).toBeInTheDocument();
+ });
+ rerender(
+ ,
+ {
+ useRedux: true,
+ initialState,
+ },
+ );
+ expect(await screen.findByText(/new_db/i)).toBeInTheDocument();
+ expect(await screen.findByText(/new_table/i)).toBeInTheDocument();
+ });
});
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index b3c1bc9f63cdf..1a24edc65701d 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -138,7 +138,7 @@ export default function SqlEditorLeftBar({
setUserSelected(userSelected);
setItem(LocalStorageKeys.db, null);
} else setUserSelected(database);
- }, []);
+ }, [database]);
useEffect(() => {
queryEditorRef.current = queryEditor;