dashboard-testing

Guide Aspire Dashboard logic and Blazor UI tests with bUnit conventions.

6.2k|952|Updated Sep 25, 2023
One-click install
npx skills add https://github.com/microsoft/aspire --skill dashboard-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dashboard-testing
Source: https://github.com/microsoft/aspire/tree/main/.agents/skills/dashboard-testing
Command: npx skills add https://github.com/microsoft/aspire --skill dashboard-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aspire Dashboard UI and logic are tested in two different ways (non-Blazor model logic vs Blazor component rendering), and teams need consistent patterns to avoid brittle tests and repeated DI/JS-mock setup.

Core Features & Use Cases

  • Choose the right test project: Use Aspire.Dashboard.Tests for non-Blazor code and Aspire.Dashboard.Components.Tests for Blazor pages/components using bUnit.
  • Use correct test patterns and conventions: Apply xUnit patterns for non-Blazor tests and extend the required bUnit base class for component tests.
  • Reuse shared DI setup and JS interop mocks: Centralize dashboard service registration and FluentUI JS interop stubbing via the provided shared setup helpers.
  • Simulate real-time updates deterministically: Use channels and WaitForAssertion to validate async UI/state transitions.

Quick Start

Tell the AI: "Create a new bUnit test for the Aspire Dashboard Metrics page that uses the shared setup helper, mocks required FluentUI interop, and verifies the rendered output after pushing an update through the test dashboard client."

Frequently Asked Questions about dashboard-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Aspire Dashboard Blazor components using bUnit?

To test Aspire Dashboard Blazor components, use the Aspire.Dashboard.Components.Tests project with bUnit, extending the required bUnit base class and reusing shared setup helpers for consistent service registration and FluentUI JS interop mocking.

Why are my asynchronous bUnit assertions failing when testing dashboard UI updates?

Asynchronous bUnit assertions fail when UI updates are not fully rendered. Use WaitForAssertion to validate async state transitions and push updates through test dashboard clients using channels to ensure determinism in your tests.

What is the correct xUnit project structure for Aspire Dashboard testing?

The correct structure for Aspire Dashboard testing splits projects by target: Aspire.Dashboard.Tests for non-Blazor model logic and Aspire.Dashboard.Components.Tests for Blazor UI, applying xUnit patterns and centralizing DI setup via DashboardTestContext.

How do I mock FluentUI JS interop in Blazor component tests?

Mock FluentUI JS interop in Blazor component tests by reusing the provided shared setup helpers that centralize dashboard service registration and stub the required JavaScript interop scaffolding for FluentUI components.

Does testing Aspire Dashboard logic require separate projects for different test types?

Yes, testing Aspire Dashboard logic requires separating non-Blazor model code into Aspire.Dashboard.Tests and Blazor component rendering into Aspire.Dashboard.Components.Tests to ensure correct test patterns and avoid brittle tests.