DeviceRunners icon indicating copy to clipboard operation
DeviceRunners copied to clipboard

Create visual runner for WASM using Blazor

Open Copilot opened this issue 8 months ago • 2 comments

This PR implements a complete visual test runner for WASM environments using Blazor as the host framework, extending DeviceRunners' cross-platform testing capabilities to web browsers.

What's Added

Core Blazor Visual Runner Library

  • src/DeviceRunners.VisualRunners.Blazor/ - New Razor class library providing WASM-compatible visual test runner components
  • Blazor components that mirror the existing MAUI pages:
    • HomePage.razor - Test assembly overview and execution
    • TestAssembly.razor - Individual test case management
    • TestResult.razor - Detailed test result display
    • Diagnostics.razor - Runtime diagnostics information
    • Credits.razor - Application information
  • MainLayout.razor and NavMenu.razor for consistent navigation
  • Responsive CSS styling optimized for web browsers

WebAssembly Configuration

  • WebAssemblyAppBuilderExtensions.cs - Configuration extensions for WASM host builder
  • WebAssemblyVisualTestRunnerConfigurationBuilder.cs - WASM-specific configuration builder
  • Full integration with existing DeviceRunners.VisualRunners ViewModels and services

Sample Projects

  • sample/test/DeviceTestingKitApp.WasmTests/ - Complete WASM test runner application
    • Demonstrates running Xunit tests in browser environment
    • Includes service worker for PWA capabilities
    • Responsive web manifest configuration
  • sample/test/DeviceTestingKitApp.BlazorLibrary.XunitTests/ - Sample test library
    • Example Xunit tests for WASM environment
    • Demonstrates passing, failing, and skipped test scenarios

Key Features

  • Framework Consistency: Reuses all existing ViewModels from DeviceRunners.VisualRunners, ensuring consistent behavior across platforms
  • Cross-Platform UI: Same visual test runner experience now available on Android, iOS, macOS, Windows, and WASM
  • Web-Optimized: Responsive design that works well in desktop and mobile browsers
  • Progressive Web App: Service worker and manifest support for installable web app experience
  • Test Framework Support: Full Xunit integration with extensibility for other frameworks

Architecture

The implementation follows the established DeviceRunners pattern:

  • Core testing logic remains in DeviceRunners.VisualRunners
  • Platform-specific UI implementation in DeviceRunners.VisualRunners.Blazor
  • ViewModels are shared across MAUI and Blazor implementations
  • Configuration builders provide platform-appropriate service registration

Example Usage

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<DeviceRunners.VisualRunners.Blazor.Components.App.App>("#app");

// Configure the test runner
builder.UseVisualTestRunner(conf => conf
    .AddConsoleResultChannel()
    .AddTestAssembly(typeof(Program).Assembly)
    .AddTestAssemblies(typeof(MyTests).Assembly)
    .AddXunit());

await builder.Build().RunAsync();

This enables the same comprehensive device testing capabilities that were previously limited to native platforms to now run in any modern web browser, expanding the reach of .NET testing to cloud environments, CI/CD pipelines, and developer workflows that benefit from web-based test execution.

Fixes #82.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot avatar Jun 19 '25 00:06 Copilot

/rebase

mattleibow avatar Jun 19 '25 22:06 mattleibow

This is amazing, unfortunately WASM does not have threads, so we need to avoid using the defaults.

I have a bit of code that I use to discover tests on WASM in another project. This uses a threadle...

Implemented threadless Xunit support for WASM compatibility. Added ThreadlessXunitTestDiscoverer and ThreadlessXunitTestRunner classes that avoid threading issues in WebAssembly environments. The new .AddThreadlessXunit() extension method is now available and has been integrated into the WASM sample project. The implementation follows the patterns you provided and ensures synchronous test execution suitable for WASM's single-threaded model.

Copilot avatar Jun 20 '25 00:06 Copilot