fix(sqllab): Async queries are now fetched properly (#21698)

Co-authored-by: hughhhh <hughmil3s@gmail.com>
This commit is contained in:
Lyndsi Kay Williams 2022-10-11 12:21:37 -05:00 committed by GitHub
parent 406e44bba1
commit d21e1d799d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 19 deletions

View File

@ -75,6 +75,26 @@ const newProps = {
}, },
}, },
}; };
const asyncQueryProps = {
...mockedProps,
database: { allow_run_async: true },
};
const asyncRefetchDataPreviewProps = {
...asyncQueryProps,
query: {
state: 'success',
results: undefined,
isDataPreview: true,
},
};
const asyncRefetchResultsTableProps = {
...asyncQueryProps,
query: {
state: 'success',
results: undefined,
resultsKey: 'async results key',
},
};
fetchMock.get('glob:*/api/v1/dataset?*', { result: [] }); fetchMock.get('glob:*/api/v1/dataset?*', { result: [] });
const middlewares = [thunk]; const middlewares = [thunk];
@ -86,13 +106,13 @@ const setup = (props?: any, store?: Store) =>
}); });
describe('ResultSet', () => { describe('ResultSet', () => {
it('renders a Table', async () => { test('renders a Table', async () => {
const { getByTestId } = setup(mockedProps, mockStore(initialState)); const { getByTestId } = setup(mockedProps, mockStore(initialState));
const table = getByTestId('table-container'); const table = getByTestId('table-container');
expect(table).toBeInTheDocument(); expect(table).toBeInTheDocument();
}); });
it('should render success query', async () => { test('should render success query', async () => {
const { queryAllByText, getByTestId } = setup( const { queryAllByText, getByTestId } = setup(
mockedProps, mockedProps,
mockStore(initialState), mockStore(initialState),
@ -114,7 +134,7 @@ describe('ResultSet', () => {
expect(exploreButton).toBeInTheDocument(); expect(exploreButton).toBeInTheDocument();
}); });
it('should render empty results', async () => { test('should render empty results', async () => {
const props = { const props = {
...mockedProps, ...mockedProps,
query: { ...mockedProps.query, results: { data: [] } }, query: { ...mockedProps.query, results: { data: [] } },
@ -128,7 +148,7 @@ describe('ResultSet', () => {
expect(alert).toHaveTextContent('The query returned no data'); expect(alert).toHaveTextContent('The query returned no data');
}); });
it('should call reRunQuery if timed out', async () => { test('should call reRunQuery if timed out', async () => {
const store = mockStore(initialState); const store = mockStore(initialState);
const propsWithError = { const propsWithError = {
...mockedProps, ...mockedProps,
@ -143,26 +163,26 @@ describe('ResultSet', () => {
expect(store.getActions()[0].type).toEqual('START_QUERY'); expect(store.getActions()[0].type).toEqual('START_QUERY');
}); });
it('should not call reRunQuery if no error', async () => { test('should not call reRunQuery if no error', async () => {
const store = mockStore(initialState); const store = mockStore(initialState);
setup(mockedProps, store); setup(mockedProps, store);
expect(store.getActions()).toEqual([]); expect(store.getActions()).toEqual([]);
}); });
it('should render cached query', async () => { test('should render cached query', async () => {
const store = mockStore(initialState); const store = mockStore(initialState);
const { rerender } = setup(cachedQueryProps, store); const { rerender } = setup(cachedQueryProps, store);
// @ts-ignore // @ts-ignore
rerender(<ResultSet {...newProps} />); rerender(<ResultSet {...newProps} />);
expect(store.getActions()).toHaveLength(1); expect(store.getActions()).toHaveLength(2);
expect(store.getActions()[0].query.results).toEqual( expect(store.getActions()[0].query.results).toEqual(
cachedQueryProps.query.results, cachedQueryProps.query.results,
); );
expect(store.getActions()[0].type).toEqual('CLEAR_QUERY_RESULTS'); expect(store.getActions()[0].type).toEqual('CLEAR_QUERY_RESULTS');
}); });
it('should render stopped query', async () => { test('should render stopped query', async () => {
await waitFor(() => { await waitFor(() => {
setup(stoppedQueryProps, mockStore(initialState)); setup(stoppedQueryProps, mockStore(initialState));
}); });
@ -171,13 +191,13 @@ describe('ResultSet', () => {
expect(alert).toBeInTheDocument(); expect(alert).toBeInTheDocument();
}); });
it('should render running/pending/fetching query', async () => { test('should render running/pending/fetching query', async () => {
const { getByTestId } = setup(runningQueryProps, mockStore(initialState)); const { getByTestId } = setup(runningQueryProps, mockStore(initialState));
const progressBar = getByTestId('progress-bar'); const progressBar = getByTestId('progress-bar');
expect(progressBar).toBeInTheDocument(); expect(progressBar).toBeInTheDocument();
}); });
it('should render fetching w/ 100 progress query', async () => { test('should render fetching w/ 100 progress query', async () => {
const { getByRole, getByText } = setup( const { getByRole, getByText } = setup(
fetchingQueryProps, fetchingQueryProps,
mockStore(initialState), mockStore(initialState),
@ -187,7 +207,7 @@ describe('ResultSet', () => {
expect(getByText('fetching')).toBeInTheDocument(); expect(getByText('fetching')).toBeInTheDocument();
}); });
it('should render a failed query with an error message', async () => { test('should render a failed query with an error message', async () => {
await waitFor(() => { await waitFor(() => {
setup(failedQueryWithErrorMessageProps, mockStore(initialState)); setup(failedQueryWithErrorMessageProps, mockStore(initialState));
}); });
@ -196,21 +216,56 @@ describe('ResultSet', () => {
expect(screen.getByText('Something went wrong')).toBeInTheDocument(); expect(screen.getByText('Something went wrong')).toBeInTheDocument();
}); });
it('should render a failed query with an errors object', async () => { test('should render a failed query with an errors object', async () => {
await waitFor(() => { await waitFor(() => {
setup(failedQueryWithErrorsProps, mockStore(initialState)); setup(failedQueryWithErrorsProps, mockStore(initialState));
}); });
expect(screen.getByText('Database error')).toBeInTheDocument(); expect(screen.getByText('Database error')).toBeInTheDocument();
}); });
it('renders if there is no limit in query.results but has queryLimit', async () => { test('renders if there is no limit in query.results but has queryLimit', async () => {
const { getByRole } = setup(mockedProps, mockStore(initialState)); const { getByRole } = setup(mockedProps, mockStore(initialState));
expect(getByRole('grid')).toBeInTheDocument(); expect(getByRole('grid')).toBeInTheDocument();
}); });
it('renders if there is a limit in query.results but not queryLimit', async () => { test('renders if there is a limit in query.results but not queryLimit', async () => {
const props = { ...mockedProps, query: queryWithNoQueryLimit }; const props = { ...mockedProps, query: queryWithNoQueryLimit };
const { getByRole } = setup(props, mockStore(initialState)); const { getByRole } = setup(props, mockStore(initialState));
expect(getByRole('grid')).toBeInTheDocument(); expect(getByRole('grid')).toBeInTheDocument();
}); });
test('Async queries - renders "Fetch data preview" button when data preview has no results', () => {
setup(asyncRefetchDataPreviewProps, mockStore(initialState));
expect(
screen.getByRole('button', {
name: /fetch data preview/i,
}),
).toBeVisible();
expect(screen.queryByRole('grid')).toBe(null);
});
test('Async queries - renders "Refetch results" button when a query has no results', () => {
setup(asyncRefetchResultsTableProps, mockStore(initialState));
expect(
screen.getByRole('button', {
name: /refetch results/i,
}),
).toBeVisible();
expect(screen.queryByRole('grid')).toBe(null);
});
test('Async queries - renders on the first call', () => {
setup(asyncQueryProps, mockStore(initialState));
expect(screen.getByRole('grid')).toBeVisible();
expect(
screen.queryByRole('button', {
name: /fetch data preview/i,
}),
).toBe(null);
expect(
screen.queryByRole('button', {
name: /refetch results/i,
}),
).toBe(null);
});
}); });

View File

@ -164,11 +164,7 @@ const ResultSet = ({
setCachedData(query.results.data); setCachedData(query.results.data);
dispatch(clearQueryResults(query)); dispatch(clearQueryResults(query));
} }
if ( if (query.resultsKey && query.resultsKey !== prevQuery?.resultsKey) {
query.resultsKey &&
prevQuery?.resultsKey &&
query.resultsKey !== prevQuery.resultsKey
) {
fetchResults(query); fetchResults(query);
} }
}, [query, cache]); }, [query, cache]);