Confirm?

Are you sure you want to proceed?
M
Mark Glorie

Asynchronous Test List with Spinner

Clone & Customize via AI

MudBlazor Test Runner lists system health checks in a MudList with progress indicators and status icons. It demonstrates async test runs with prerequisite logic and component state updates using MudBlazor.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - A single-page test runner UI that lists system health checks and their descriptions. - Run-all control that executes asynchronous test runs and shows running/passed/failed/skipped statuses. - Visual indicators: MudProgressCircular for running state and MudIcon for pass/fail/skip/not-started. - Prerequisite handling that skips dependent tests when prerequisites fail. - Lightweight layout with MudPaper, MudContainer and MudStack for spacing and responsiveness. ## Key components - MudPaper, MudContainer - MudStack, MudSpacer - MudText, MudButton - MudList, MudListItem, MudDivider - MudProgressCircular, MudIcon - C# view model: TestRunViewModel and TestStatus enum ## How it works - The component initializes a list of TestRunViewModel items in OnInitialized and renders them in a MudList. - The RunAllTestsAsync handler toggles a _isRunning flag, updates each TestRunViewModel.Status, and drives UI changes via StateHasChanged. - Tests execute in RunTestAsync with simulated async delays and randomized pass/fail results; status updates occur after each run. - Prerequisite logic uses CanRunTest to ensure dependent tests run only after their prerequisite test has Passed; failed prerequisites cause dependents to be marked Skipped. - Interaction patterns include an OnClick event on MudButton and UI state toggles instead of two-way @bind-* bindings. ## Styling - Uses MudBlazor components and layout primitives; styling comes from MudBlazor theme rather than Tailwind or Bootstrap utility classes. - The layout is contained (MudContainer MaxWidth.Medium) and uses MudStack rows for responsive horizontal alignment. - Icons and progress controls follow MudBlazor sizing and color tokens for visual consistency. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor or component files. 3. Add the TestRunner.razor and TestRunViewModel.cs files to a Blazor project and reference the page (TestRunnerPage.razor shows usage). 4. Replace the simulated RunTestAsync logic with real health-check services (inject via DI and call actual endpoints). Include cancellation tokens for long runs. 5. Adjust styling via MudTheme or CSS, and wire authentication or permissions where required. ## Limitations & next steps - This is a single-page demo generated by Instruct UI; it simulates test execution with random results and delays. - No persistence, logging, or real service integration is included; production use requires DI wiring, robust error handling, and retry/circuit-breaker policies. - Consider adding cancellation support, concurrency controls, test grouping, detailed logs per test, and a progress summary or export feature.