fix(workbench): stabilize presentation history hover
Generic Container CI/CD / test-build-publish (push) Successful in 1m10s
Frontend CI/CD / build-test-publish-and-deploy (push) Successful in 1m10s

Rapid pointer changes repeatedly restarted inherited color transitions in both presentation menu levels. Disable transitions on these rows while preserving focus and submenu behavior. Previous coverage checked open state only; the browser regression now compares next-frame highlight colors against the theme and fails with the old transition restored.

Also verify header timeline hide/restore after expansion at 320, 375, 1024 and 1440 pixels.

Validation: lint, typecheck, 1178 unit tests, five focused browser cases and production build passed.
This commit is contained in:
2026-11-12 13:16:15 +08:00
parent 03827a2fc0
commit 3de96f9d7b
3 changed files with 62 additions and 2 deletions
@@ -1,9 +1,25 @@
import { expect, test, type Page, type TestInfo } from "@playwright/test";
import { expect, test, type Locator, type Page, type TestInfo } from "@playwright/test";
import { investigationFixture, mockInvestigationPresentation, selectInvestigation, showInvestigationMap } from "./support/mock-investigation-presentation";
import { readThemeColor } from "./support/theme-colors";
const chart = (id: string, title: string) => ({ action: "open_chart", chart_id: id, evidence_refs: ["synthetic:reading"],
chart: { title, chart_type: "line", x_data: ["08:00", "08:15"], series: [{ name: "压力(m)", data: [30, 28] }] } });
async function sampleFastHoverBackground(items: Locator[]) {
const samples: Array<{ actual: string; expected: string }> = [];
for (let repeat = 0; repeat < 3; repeat++) {
for (const item of items) {
const expected = await readThemeColor(item, "--action-selection-soft");
await item.hover();
const actual = await item.evaluate((node) => new Promise<string>((resolve) => {
requestAnimationFrame(() => resolve(getComputedStyle(node).backgroundColor));
}));
samples.push({ actual, expected });
}
}
return samples;
}
async function captureMenus(page: Page, testInfo: TestInfo, name: string) {
for (const menu of await page.getByRole("menu").all()) {
await menu.evaluate((node) => Promise.all(node.getAnimations().map((animation) => animation.finished.catch(() => undefined))));
@@ -56,8 +72,18 @@ test("hover keeps an expanded category stable across its title, arrow and origin
const arrow = root.getByRole("menuitem", { name: "展开图表步骤", exact: true });
const title = root.getByRole("menuitem", { name: "图表", exact: true });
const steps = page.getByRole("menu", { name: "图表展示步骤", exact: true });
const firstLevel = await sampleFastHoverBackground([title, root.getByRole("menuitem", { name: "覆盖层", exact: true })]);
await arrow.hover();
await expect(steps).toBeVisible();
const secondLevel = await sampleFastHoverBackground([
steps.getByRole("menuitem", { name: "1. 测点 P1 压力趋势", exact: true }),
steps.getByRole("menuitem", { name: "2. 测点 P2 压力趋势", exact: true })
]);
const backgrounds = [...firstLevel, ...secondLevel];
await testInfo.attach("fast-hover-backgrounds", { body: JSON.stringify({ firstLevel, secondLevel }), contentType: "application/json" });
expect(backgrounds).toHaveLength(12);
expect(backgrounds.every((sample) => sample.expected !== "rgba(0, 0, 0, 0)")).toBe(true);
expect(backgrounds.map((sample) => sample.actual)).toEqual(backgrounds.map((sample) => sample.expected));
await page.evaluate(() => {
const changes: string[] = [];
const observer = new MutationObserver((records) => {