drivaspreset commented on code in PR #43004: URL: https://github.com/apache/superset/pull/43004#discussion_r4186033170
########## superset-frontend/playwright/tests/dashboard/global-async-query-resilience.spec.ts: ########## @@ -0,0 +1,487 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * Global Async Queries (GAQ) under stress: a query that fails, a superseded + * query racing a newer one, a programmatic request that must stay synchronous, + * and a page torn down mid-flight. + * + * GAQ's happy path is visually identical to a synchronous load, so these are + * the cases where its machinery actually becomes observable -- or where it + * must stay invisible. The happy paths live in global-async-query.spec.ts. + * + * Requires the `GLOBAL_ASYNC_QUERIES` feature flag, Redis, and a running + * Celery worker. + */ +import { testWithAssets, expect } from '../../helpers/fixtures'; +import { apiGetChart, apiPutChart } from '../../helpers/api/chart'; +import { GAQ, TIMEOUT } from '../../utils/constants'; +import { apiPost } from '../../helpers/api/requests'; +import { + BIG_NUMBER_COUNT_SPEC, + nativeFilterValuesIn, + setupDashboardWithBigNumberCharts, + setupDashboardWithSelectFilter, + sliceIdFromChartDataUrl, + trackGaqSignals, +} from './dashboard-test-helpers'; +import { isFeatureEnabled } from '../../helpers/featureFlags'; + +testWithAssets.beforeEach(async ({ page }) => { + await page.goto('chart/list/'); + testWithAssets.skip( + !(await isFeatureEnabled(page, 'GLOBAL_ASYNC_QUERIES')), + 'GLOBAL_ASYNC_QUERIES is not enabled on this instance', + ); +}); + +testWithAssets( + 'broken chart surfaces a clean error under GAQ instead of hanging, and recovers once fixed', + async ({ page, testAssets }) => { + // Two forced refreshes plus an API round-trip between them exceed the + // default timeout on a loaded runner. + testWithAssets.setTimeout(TIMEOUT.SLOW_TEST); + + const BAD_COLUMN = 'this_column_does_not_exist_gaq_test'; + + // A custom SQL metric on a nonexistent column fails in Postgres, not in + // client-side validation -- so the job really is queued and run, and this + // exercises the async error path rather than a request that never ships. + const { dashboardId, dashboard, charts, valueLocators } = + await setupDashboardWithBigNumberCharts( + page, + testAssets, + testWithAssets.info(), + { + datasetName: 'birth_names', + chartNamePrefix: 'gaq_tc3_broken_chart', + chartSpecs: [ + { + viz_type: 'big_number_total', + params: { + metric: { + expressionType: 'SQL', + sqlExpression: `SUM(${BAD_COLUMN})`, + label: 'broken_metric', + hasCustomLabel: true, + }, + }, + }, + ], + }, + ); + const [chart] = charts; + const [value] = valueLocators; + const errorAlert = dashboard.getChart(chart.id).locator('.ant-alert-error'); + + // Let the initial (also broken) load settle before tracking. + await expect(errorAlert).toBeVisible({ timeout: TIMEOUT.CHART_RENDER }); + + const signals = trackGaqSignals(page); + // The alert is already on screen from that initial load and the refresh + // re-runs the identical broken query, so its text proves nothing about the + // refresh. Require the failure to come back over the wire instead. + const responseBodies: string[] = []; + page.on('response', async response => { + if (!response.url().includes(GAQ.CHART_DATA_PATH)) { + return; + } + try { + responseBodies.push(await response.text()); + } catch { + // A superseded request's body is no longer retrievable; nothing to record. + } + }); + + await dashboard.forceRefresh(); + + await expect(() => { + expect( + signals.submitStatusFor(chart.id), + 'forced chart-data submission for the broken chart should still be accepted (202) onto the async path', + ).toBe(202); + expect( + signals.sawTaskStatusPoll, + 'the client should have polled /api/v1/task/status_changes while the broken query ran', + ).toBe(true); + expect( + responseBodies.filter(body => body.includes(BAD_COLUMN)), + "the refresh's own chart-data response should carry the failure, rather than the alert being left over from the initial load", + ).not.toHaveLength(0); + }).toPass({ timeout: TIMEOUT.CHART_RENDER }); + + await expect(errorAlert).toBeVisible(); + await expect(errorAlert).toContainText('Data error'); + await expect(errorAlert).toContainText(BAD_COLUMN); + + // Fix the config and confirm the chart recovers, rather than staying stuck. + const chartResp = await apiGetChart(page, chart.id); + expect(chartResp.ok()).toBe(true); + const { result } = await chartResp.json(); + const fixedParams = { ...JSON.parse(result.params), metric: 'count' }; + + const updateResp = await apiPutChart(page, chart.id, { + params: JSON.stringify(fixedParams), + }); + expect(updateResp.ok()).toBe(true); + + // Refreshing re-submits the form_data already loaded client-side, so it + // would not pick up an out-of-band config change. Re-navigating refetches + // the chart's metadata. + await dashboard.gotoById(dashboardId); + await dashboard.waitForLoad(); + + await expect(value).toBeVisible({ timeout: TIMEOUT.CHART_RENDER }); + await expect(value).toHaveText(/\d/); + await expect(errorAlert).not.toBeAttached(); + }, +); + +testWithAssets( + 'rapidly switching a filter value never lets the superseded selection clobber the screen', + async ({ page, testAssets }) => { + testWithAssets.setTimeout(TIMEOUT.SLOW_TEST); + + // Generous enough that girl's own select/apply cycle plus network latency + // cannot consume the window while boy sits parked -- the delay starts when + // boy is applied, i.e. before that cycle even begins. + const RACE_DELAY_MS = 8000; + const FILTER_COLUMN = 'gender'; + + const { chartId, dashboardId, dashboard, filterBar, value } = + await setupDashboardWithSelectFilter( + page, + testAssets, + testWithAssets.info(), + { + datasetName: 'birth_names', + namePrefix: 'gaq_tc4_filter_race', + filterColumn: 'gender', + filterName: 'Gender', + }, + ); + + await dashboard.gotoById(dashboardId); + await dashboard.waitForLoad({ timeout: TIMEOUT.SLOW_TEST }); + await expect(value).toBeVisible({ timeout: TIMEOUT.CHART_RENDER }); + + // Learn both counts up front. The chart keeps showing its previous value + // while a query is in flight, so a bare /\d/ would capture whatever was + // already on screen -- wait for the round trip at the network level, and + // identify it by the filter that produced it. + const baselineSignals = trackGaqSignals(page); + const applyAndRead = async (option: string): Promise<string> => { + await filterBar.selectOption(option); + await filterBar.apply(); + await expect(() => { + const statuses = baselineSignals.submitStatusesWhere(chartId, body => + nativeFilterValuesIn(body, FILTER_COLUMN).includes(option), + ); + expect( + statuses, + `"${option}"'s chart-data request should have been answered`, + ).not.toHaveLength(0); + expect( + statuses.every(status => status === 200 || status === 202), + `"${option}"'s chart-data statuses should all be 200/202, got ${statuses.join(', ')}`, + ).toBe(true); + expect( + statuses[statuses.length - 1], + `"${option}"'s chart-data round trip should end with a 200`, + ).toBe(200); + }).toPass({ timeout: TIMEOUT.CHART_RENDER }); + await expect(value).toHaveText(/\d/, { timeout: TIMEOUT.CHART_RENDER }); + return (await value.textContent()) ?? ''; + }; + + const boyText = await applyAndRead('boy'); + const girlText = await applyAndRead('girl'); + // Without this the test could not fail: the screen shows "girl" throughout + // the race, so a clobber is only detectable as a change *to boy's number*. + expect( + girlText, + '"boy" and "girl" should render different counts, or a clobber would be invisible', + ).not.toBe(boyText); + + // Example queries settle in ~1-2s, too fast to race for real. Delaying only + // the next request makes "boy" reliably still in flight when "girl" fires. + // Both stamped at interception -- when the delay actually starts, and when + // girl's request actually leaves. Measuring either from the surrounding + // test flow would fold in the UI cycle and the response wait. + let boyParkedAt = 0; + let girlRequestedAt = 0; + let boyCancelled = false; + const raceRoute = (url: URL) => + sliceIdFromChartDataUrl(url.toString()) === chartId; + await page.route(raceRoute, async route => { + // By payload rather than arrival order: both requests are for this slice. + const filterValues = nativeFilterValuesIn( + route.request().postData() ?? '', + FILTER_COLUMN, + ); + const isBoy = filterValues.includes('boy'); + if (isBoy && boyParkedAt === 0) { Review Comment: You're right, and this one was a coverage gap rather than a weak assertion — thanks for pushing on it. Supersession has two halves, and the test only covered the first. `chartAction.ts` forwards its abort signal into the wait: ```ts // The optional signal lets a caller abort the wait (Stop pressed, chart // superseded or unmounted), cancelling the outstanding tasks. return waitForAsyncData(json as AsyncJob, refetch, signal); ``` and `asyncEvent.ts` is what turns that into actual cancellation: ```ts waiter.onAbort = () => { unregister(waiter); cancelUnwaitedTasks(taskIds, submitTabId); // -> POST /api/v1/task/<id>/cancel reject(new DOMException('Aborted', 'AbortError')); }; ``` Parking "boy" before its POST reaches Superset means it never reaches 202, so `waitForAsyncData` is never entered and none of that runs. Dropping the `signal` argument would leave accepted, superseded jobs polling and running with nobody waiting, and the test would stay green — exactly as you describe. Added the other half in 065890788f, as a second test rather than changing the existing one, since cancelling the submission is also a real path worth keeping: - A per-run cache-cold dataset, so "boy" is guaranteed to be *accepted* (202) rather than served synchronously from a warm cache. - The **task-status poll** is stalled rather than the submission. "boy" is accepted normally, but the client cannot observe its tasks finishing, so its waiter is still registered when "girl" aborts it. Without that the tasks could complete first and leave nothing to cancel — the test would pass while asserting nothing. - The assertion is on the cancel calls for "boy"'s own task ids, read out of its 202 response: ```ts await expect .poll(() => cancelledTaskIds, { ... }) .toEqual(expect.arrayContaining(boyTaskIds)); ``` I took your first suggestion over the second deliberately: asserting the `/cancel` calls tests the observable consequence, so it still holds if the signal-forwarding is ever refactored, whereas asserting at the chartAction boundary would pin the current wiring. Suite is 11 tests now. Both matrix legs pass on this commit. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
