Repository navigation
Fix dashboard Playwright tests after Fluent UI v5 migration - #20341
James Newton-King (JamesNK) merged 5 commits into
Conversation
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 20341Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 20341" |
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Known Fluent v5 violations still break the WCAG suite, and browser-level terminal completion coverage was removed.
Get a fresh assessment by requesting another Copilot review.
Review effort: Balanced
Findings: 2
Open (3)
What changed in this PR
Aligns Dashboard behavior and browser tests with Fluent UI v5.
Changes:
- Updates Playwright selectors, accessibility checks, and adaptive timeouts.
- Prevents terminal focus stealing and improves menu reopening.
- Serializes fixture tests through browser-context disposal.
| File | Description |
|---|---|
tests/Aspire.Dashboard.Tests/Integration/Playwright/TerminalTests.cs |
Updates terminal selectors and assertions. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/TerminalDockTests.cs |
Updates focus expectations and removes completion coverage. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/ResourcesTests.cs |
Adapts resource graph interaction tests. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/NativeAotDashboardTests.cs |
Configures adaptive timeouts. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/MobileNavMenuTests.cs |
Uses configured browser contexts. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/Infrastructure/PlaywrightTestsBase.cs |
Serializes tests and context disposal. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/Infrastructure/PlaywrightFixture.cs |
Centralizes Playwright timeouts. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/Infrastructure/DashboardServerFixture.cs |
Adds fixture gate and adjusts disposal order. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/DashboardInteractionsTests.cs |
Updates layout synchronization and geometry. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/BrowserTokenAuthenticationTests.cs |
Updates selectors and timeout handling. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/AspireMenuLayoutTests.cs |
Updates action-menu selector. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/AppBarTests.cs |
Updates Fluent v5 layout expectations. |
tests/Aspire.Dashboard.Tests/Integration/Playwright/AccessibilityTests.cs |
Adapts accessibility probes and selectors. |
tests/Aspire.Dashboard.Components.Tests/Pages/ConsoleLogsTerminalTests.cs |
Verifies terminal dropdown placeholder. |
tests/Aspire.Dashboard.Components.Tests/JavaScript/TerminalView.test.mjs |
Verifies non-stealing terminal focus. |
tests/Aspire.Dashboard.Components.Tests/Controls/AspireMenuTests.cs |
Covers repeated cursor-menu opening. |
src/Aspire.Dashboard/wwwroot/css/controls.css |
Adjusts menu positioning and sizing. |
src/Aspire.Dashboard/Components/Layout/DesktopToolbarDivider.razor |
Updates divider semantics. |
src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor |
Adapts Fluent control accessibility attributes. |
src/Aspire.Dashboard/Components/Controls/TerminalView.razor.js |
Stops auto-fit from requesting focus. |
src/Aspire.Dashboard/Components/Controls/TerminalView.razor.cs |
Removes obsolete JavaScript label option. |
src/Aspire.Dashboard/Components/Controls/TerminalView.razor |
Moves terminal dimensions text to placeholder. |
src/Aspire.Dashboard/Components/Controls/ResourceActions.razor |
Updates divider semantics. |
src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor |
Adds a positioned menu wrapper. |
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs |
Handles stale close callbacks during reopen. |
Tests selector14 / 99 PR test projects · 2 PR jobs, from 25 changed files. Selected PR test projects (14 / 99)
Selected PR jobs (2)
How these were chosen — grouped by what changed
🔧 🧪 📦 affected project 🔧 🔧 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 🧪 Job reasons
Selection computed for commit |
Backports #20360, #20341, and #20362 to release/13.6. ## Customer Impact Dashboard users can encounter popups that are misaligned, overflow the viewport, or disappear while metric dimensions update. Resource graph context menus may not reopen immediately after dismissal, and terminal auto-fit can move focus away from the active control. ## Testing Validated on the release/13.6 backport branch: 570 Aspire.Dashboard.Components.Tests and 1,892 Aspire.Dashboard.Tests passed, excluding quarantined and outerloop tests. The source changes also include targeted Playwright coverage for resources, terminal, navigation, authentication, accessibility, and popup behavior. `git diff --check` passes. ## Risk Medium. The production changes are localized to Dashboard popup, focus, and component-state behavior with no public API changes, but this combines three related changes and a broad component-test migration. ## Regression? Yes — fixes Dashboard behavior and test regressions introduced by the Fluent UI v5 migration.
Backports #20360, #20341, and #20362 to release/13.6. ## Customer Impact Dashboard users can encounter popups that are misaligned, overflow the viewport, or disappear while metric dimensions update. Resource graph context menus may not reopen immediately after dismissal, and terminal auto-fit can move focus away from the active control. ## Testing Validated on the release/13.6 backport branch: 570 Aspire.Dashboard.Components.Tests and 1,892 Aspire.Dashboard.Tests passed, excluding quarantined and outerloop tests. The source changes also include targeted Playwright coverage for resources, terminal, navigation, authentication, accessibility, and popup behavior. `git diff --check` passes. ## Risk Medium. The production changes are localized to Dashboard popup, focus, and component-state behavior with no public API changes, but this combines three related changes and a broad component-test migration. ## Regression? Yes — fixes Dashboard behavior and test regressions introduced by the Fluent UI v5 migration.
Description
Dashboard Playwright coverage regressed after the Fluent UI v5 migration because generated component structure and accessibility behavior changed, terminal and menu interactions retained stale browser state, and tests sharing a Dashboard fixture could overlap through Blazor circuit disposal.
This change aligns the Dashboard and its browser tests with Fluent UI v5:
User-facing usage
Resource graph context menus can be reopened immediately after Escape or light dismiss, and terminal auto-fit no longer moves focus away from the user's active control.
Screenshots / Recordings
TODO: Capture the resource graph context menu reopening after Escape and terminal dock keyboard/focus behavior. There is no intended visual redesign.
Validation
git diff --checkpasses.Upstream Fluent UI issues:
Fixes # (issue)
Checklist
<remarks />and<code />elements on your triple slash comments?