diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx index 9d3245489920..5f9b140c12fa 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 b3c1bc9f63cd..1a24edc65701 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;