mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix(sqllab): SqlEditorLeftBar listening to database changes (#21628)
This commit is contained in:
parent
ab53d77aba
commit
71bf267307
@ -19,7 +19,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
import fetchMock from 'fetch-mock';
|
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 userEvent from '@testing-library/user-event';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import '@testing-library/jest-dom/extend-expect';
|
import '@testing-library/jest-dom/extend-expect';
|
||||||
@ -28,7 +28,6 @@ import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
|
|||||||
import {
|
import {
|
||||||
table,
|
table,
|
||||||
initialState,
|
initialState,
|
||||||
databases,
|
|
||||||
defaultQueryEditor,
|
defaultQueryEditor,
|
||||||
mockedActions,
|
mockedActions,
|
||||||
} from 'src/SqlLab/fixtures';
|
} from 'src/SqlLab/fixtures';
|
||||||
@ -37,7 +36,11 @@ const mockedProps = {
|
|||||||
actions: mockedActions,
|
actions: mockedActions,
|
||||||
tables: [table],
|
tables: [table],
|
||||||
queryEditor: defaultQueryEditor,
|
queryEditor: defaultQueryEditor,
|
||||||
database: databases,
|
database: {
|
||||||
|
id: 1,
|
||||||
|
database_name: 'main',
|
||||||
|
backend: 'mysql',
|
||||||
|
},
|
||||||
height: 0,
|
height: 0,
|
||||||
};
|
};
|
||||||
const middlewares = [thunk];
|
const middlewares = [thunk];
|
||||||
@ -46,15 +49,13 @@ const store = mockStore(initialState);
|
|||||||
|
|
||||||
fetchMock.get('glob:*/api/v1/database/*/schemas/?*', { result: [] });
|
fetchMock.get('glob:*/api/v1/database/*/schemas/?*', { result: [] });
|
||||||
fetchMock.get('glob:*/superset/tables/**', {
|
fetchMock.get('glob:*/superset/tables/**', {
|
||||||
json: {
|
options: [
|
||||||
options: [
|
{
|
||||||
{
|
label: 'ab_user',
|
||||||
label: 'ab_user',
|
value: 'ab_user',
|
||||||
value: 'ab_user',
|
},
|
||||||
},
|
],
|
||||||
],
|
tableLength: 1,
|
||||||
tableLength: 1,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Left Panel Expansion', () => {
|
describe('Left Panel Expansion', () => {
|
||||||
@ -74,9 +75,7 @@ describe('Left Panel Expansion', () => {
|
|||||||
initialState,
|
initialState,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(
|
expect(await screen.findByText(/Database/i)).toBeInTheDocument();
|
||||||
await screen.findByText(/select database or type database name/i),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(
|
expect(
|
||||||
screen.queryAllByTestId('table-element').length,
|
screen.queryAllByTestId('table-element').length,
|
||||||
).toBeGreaterThanOrEqual(1);
|
).toBeGreaterThanOrEqual(1);
|
||||||
@ -94,30 +93,27 @@ describe('Left Panel Expansion', () => {
|
|||||||
const schemaSelect = screen.getByRole('combobox', {
|
const schemaSelect = screen.getByRole('combobox', {
|
||||||
name: 'Select schema or type schema name',
|
name: 'Select schema or type schema name',
|
||||||
});
|
});
|
||||||
const dropdown = screen.getByText(/Select table or type table name/i);
|
const dropdown = screen.getByText(/Table/i);
|
||||||
const abUser = screen.getByText(/ab_user/i);
|
const abUser = screen.queryAllByText(/ab_user/i);
|
||||||
|
|
||||||
expect(
|
act(async () => {
|
||||||
await screen.findByText(/select database or type database name/i),
|
expect(await screen.findByText(/Database/i)).toBeInTheDocument();
|
||||||
).toBeInTheDocument();
|
expect(dbSelect).toBeInTheDocument();
|
||||||
expect(dbSelect).toBeInTheDocument();
|
expect(schemaSelect).toBeInTheDocument();
|
||||||
expect(schemaSelect).toBeInTheDocument();
|
expect(dropdown).toBeInTheDocument();
|
||||||
expect(dropdown).toBeInTheDocument();
|
expect(abUser).toHaveLength(2);
|
||||||
expect(abUser).toBeInTheDocument();
|
expect(
|
||||||
expect(
|
container.querySelector('.ant-collapse-content-active'),
|
||||||
container.querySelector('.ant-collapse-content-active'),
|
).toBeInTheDocument();
|
||||||
).toBeInTheDocument();
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should toggle the table when the header is clicked', async () => {
|
test('should toggle the table when the header is clicked', async () => {
|
||||||
const collapseMock = jest.fn();
|
const collapseMock = jest.fn();
|
||||||
render(
|
render(
|
||||||
<SqlEditorLeftBar
|
<SqlEditorLeftBar
|
||||||
|
{...mockedProps}
|
||||||
actions={{ ...mockedActions, collapseTable: collapseMock }}
|
actions={{ ...mockedActions, collapseTable: collapseMock }}
|
||||||
tables={[table]}
|
|
||||||
queryEditor={defaultQueryEditor}
|
|
||||||
database={databases}
|
|
||||||
height={0}
|
|
||||||
/>,
|
/>,
|
||||||
{
|
{
|
||||||
useRedux: true,
|
useRedux: true,
|
||||||
@ -130,4 +126,35 @@ describe('Left Panel Expansion', () => {
|
|||||||
userEvent.click(header);
|
userEvent.click(header);
|
||||||
expect(collapseMock).toHaveBeenCalled();
|
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();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -138,7 +138,7 @@ export default function SqlEditorLeftBar({
|
|||||||
setUserSelected(userSelected);
|
setUserSelected(userSelected);
|
||||||
setItem(LocalStorageKeys.db, null);
|
setItem(LocalStorageKeys.db, null);
|
||||||
} else setUserSelected(database);
|
} else setUserSelected(database);
|
||||||
}, []);
|
}, [database]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
queryEditorRef.current = queryEditor;
|
queryEditorRef.current = queryEditor;
|
||||||
|
Loading…
Reference in New Issue
Block a user