mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
fix(sqllab): rendering performance regression (#23653)
This commit is contained in:
parent
983acf7103
commit
a5b6ccc1ec
@ -25,6 +25,7 @@ import thunk from 'redux-thunk';
|
|||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
import fetchMock from 'fetch-mock';
|
import fetchMock from 'fetch-mock';
|
||||||
import {
|
import {
|
||||||
|
SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
|
||||||
SQL_EDITOR_GUTTER_HEIGHT,
|
SQL_EDITOR_GUTTER_HEIGHT,
|
||||||
SQL_EDITOR_GUTTER_MARGIN,
|
SQL_EDITOR_GUTTER_MARGIN,
|
||||||
SQL_TOOLBAR_HEIGHT,
|
SQL_TOOLBAR_HEIGHT,
|
||||||
@ -43,8 +44,14 @@ import {
|
|||||||
|
|
||||||
jest.mock('src/components/AsyncAceEditor', () => ({
|
jest.mock('src/components/AsyncAceEditor', () => ({
|
||||||
...jest.requireActual('src/components/AsyncAceEditor'),
|
...jest.requireActual('src/components/AsyncAceEditor'),
|
||||||
FullSQLEditor: props => (
|
FullSQLEditor: ({ onChange, onBlur, value }) => (
|
||||||
<div data-test="react-ace">{JSON.stringify(props)}</div>
|
<textarea
|
||||||
|
data-test="react-ace"
|
||||||
|
onChange={evt => onChange(evt.target.value)}
|
||||||
|
onBlur={onBlur}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</textarea>
|
||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
jest.mock('src/SqlLab/components/SqlEditorLeftBar', () => () => (
|
jest.mock('src/SqlLab/components/SqlEditorLeftBar', () => () => (
|
||||||
@ -166,10 +173,8 @@ describe('SqlEditor', () => {
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
const editor = await findByTestId('react-ace');
|
||||||
expect(await findByTestId('react-ace')).toHaveTextContent(
|
expect(editor).toHaveValue(expectedSql);
|
||||||
JSON.stringify({ value: expectedSql }).slice(1, -1),
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('render a SouthPane', async () => {
|
it('render a SouthPane', async () => {
|
||||||
@ -179,6 +184,28 @@ describe('SqlEditor', () => {
|
|||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('triggers setQueryEditorAndSaveSql with debounced call to avoid performance regression', async () => {
|
||||||
|
const { findByTestId } = setup(mockedProps, store);
|
||||||
|
const editor = await findByTestId('react-ace');
|
||||||
|
const sql = 'select *';
|
||||||
|
fireEvent.change(editor, { target: { value: sql } });
|
||||||
|
// Verify no immediate sql update triggered
|
||||||
|
expect(
|
||||||
|
store.getActions().filter(({ type }) => type === 'QUERY_EDITOR_SET_SQL'),
|
||||||
|
).toHaveLength(0);
|
||||||
|
await waitFor(
|
||||||
|
() =>
|
||||||
|
expect(
|
||||||
|
store
|
||||||
|
.getActions()
|
||||||
|
.filter(({ type }) => type === 'QUERY_EDITOR_SET_SQL'),
|
||||||
|
).toHaveLength(1),
|
||||||
|
{
|
||||||
|
timeout: SET_QUERY_EDITOR_SQL_DEBOUNCE_MS + 100,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it('runs query action with ctas false', async () => {
|
it('runs query action with ctas false', async () => {
|
||||||
const expectedStore = mockStore({
|
const expectedStore = mockStore({
|
||||||
...initialState,
|
...initialState,
|
||||||
|
@ -49,7 +49,6 @@ import {
|
|||||||
persistEditorHeight,
|
persistEditorHeight,
|
||||||
postStopQuery,
|
postStopQuery,
|
||||||
queryEditorSetAutorun,
|
queryEditorSetAutorun,
|
||||||
queryEditorSetSql,
|
|
||||||
queryEditorSetAndSaveSql,
|
queryEditorSetAndSaveSql,
|
||||||
queryEditorSetTemplateParams,
|
queryEditorSetTemplateParams,
|
||||||
runQueryFromSqlEditor,
|
runQueryFromSqlEditor,
|
||||||
@ -456,7 +455,6 @@ const SqlEditor = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const onSqlChanged = sql => {
|
const onSqlChanged = sql => {
|
||||||
dispatch(queryEditorSetSql(queryEditor, sql));
|
|
||||||
setQueryEditorAndSaveSqlWithDebounce(sql);
|
setQueryEditorAndSaveSqlWithDebounce(sql);
|
||||||
// Request server-side validation of the query text
|
// Request server-side validation of the query text
|
||||||
if (canValidateQuery()) {
|
if (canValidateQuery()) {
|
||||||
|
Loading…
Reference in New Issue
Block a user