drivaspreset commented on code in PR #43004: URL: https://github.com/apache/superset/pull/43004#discussion_r4169589463
########## superset-frontend/playwright/tests/dashboard/global-async-query-resilience.spec.ts: ########## @@ -0,0 +1,424 @@ +/** + * 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 lost channel token, 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 { 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); + + await dashboard.forceRefresh(); + + await expect(errorAlert).toBeVisible({ timeout: TIMEOUT.CHART_RENDER }); + await expect(errorAlert).toContainText('Data error'); + await expect(errorAlert).toContainText(BAD_COLUMN); + + 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); + }).toPass({ timeout: TIMEOUT.CHART_RENDER }); + + // 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 "girl"'s real count first, so the race can assert on that specific + // number. The chart keeps showing the unfiltered total while "girl"'s query + // is in flight, and that total already contains a digit -- so a bare /\d/ + // would read the *pre-filter* value as the baseline whenever the query was + // slow. Wait for the round trip at the network level instead, as the race + // below does: a 200 straight away (cache hit) or 202 then 200, ending in + // 200 either way. + const baselineSignals = trackGaqSignals(page); + await filterBar.selectOption('girl'); + await filterBar.apply(); + await expect(() => { + const statuses = baselineSignals.submitStatusesFor(chartId); + expect( + statuses, + '"girl"\'s chart-data request should have been answered', + ).not.toHaveLength(0); + expect( + statuses.every(status => status === 200 || status === 202), + `"girl"'s chart-data statuses should all be 200/202, got ${statuses.join(', ')}`, + ).toBe(true); + expect( + statuses[statuses.length - 1], + '"girl"\'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 }); + const expectedGirlText = await value.textContent(); + + // 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. + let matchCount = 0; + const raceRoute = (url: URL) => + sliceIdFromChartDataUrl(url.toString()) === chartId; + await page.route(raceRoute, async route => { + matchCount += 1; + if (matchCount === 1) { + await new Promise(resolve => { + setTimeout(resolve, RACE_DELAY_MS); + }); + } + await route.continue(); + }); + + // The chart keeps rendering its previous value while a query is in flight + // -- it does not blank or spinner over the number (confirmed by trace). So + // asserting the expected text alone would pass instantly against what is + // already on screen, proving nothing. Tracking from here gives a + // network-level proof instead: "boy" is parked in the artificial delay and + // has not reached the server, so any chart-data response seen inside the + // race window belongs to "girl". + const signals = trackGaqSignals(page); + + await filterBar.selectOption('boy'); + await filterBar.apply(); + const boyAppliedAt = Date.now(); Review Comment: Right again — the deadline was checked after the block that waits for girl's response, so `Date.now()` there was response-arrival time rather than when girl's request started. Your 1s/9s case fails a run that did exactly the right thing. Fixed in e9205bd687. Both moments are stamped at interception and compared stamp to stamp, so response latency no longer enters it: ```ts expect( girlRequestedAt - boyParkedAt, '"girl" should have started while "boy" was still parked', ).toBeLessThan(RACE_DELAY_MS); ``` The route handler also picks its request by payload rather than arrival order now, consistent with how the rest of the test tells the two apart, so `matchCount` is gone. The only surviving `Date.now()` is inside a `waitForTimeout` floored at `Math.max(..., 0)`, so it cannot fail a run. Since this was the third round on this test, I went back over the whole thing rather than just the reported line, and found something worse in 1ba74729e2: **the test could not detect the clobber it is named after.** The baseline applied "girl", and applying "boy" parks its request while the chart keeps rendering its previous value — so the screen showed girl's number from the baseline onward and `toHaveText(expectedGirlText)` was already true before the race began. It still worked as a clobber detector, since a stale "boy" result would change the number, but nothing established that "boy" and "girl" render *different* numbers. Had they matched, a clobber would have been invisible and every assertion would still have passed. The multi-chart test guards this explicitly; this one did not. Both counts are now read up front through the same payload-correlated round-trip wait, and asserted to differ before the race runs: ```ts expect( girlText, '"boy" and "girl" should render different counts, or a clobber would be invisible', ).not.toBe(boyText); ``` The final check is then a real invariance check — still "girl", and necessarily not "boy" — with the mechanism (cancellation, and "boy" having produced no response) asserted separately rather than one standing in for the other. Also dropped `raceResultText`, which was captured right after asserting the value equalled `expectedGirlText` and so could only ever hold that same string. Green on both matrix legs, `10 passed, 0 failed, 0 flaky, 0 skipped`. -- 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]
