Create visual runner for WASM using Blazor

Directory.Packages.props

@@ -23,5 +23,8 @@
     <PackageVersion Include="xunit" Version="2.9.2" />
     <PackageVersion Include="xunit.runner.utility" Version="2.6.6" />
     <PackageVersion Include="xunit.runner.visualstudio" Version="2.8.2" />
+    <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" />
+    <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
+    <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" />
   </ItemGroup>
 </Project>

sample/test/DeviceTestingKitApp.BlazorLibrary.XunitTests/BlazorUnitTests.cs

@@ -0,0 +1,60 @@
+using System;
+
+namespace DeviceTestingKitApp.BlazorLibrary.XunitTests;
+
+public class BlazorUnitTests
+{
+    [Fact]
+    public void TestSum()
+    {
+        var result = Add(1, 2);
+        Assert.Equal(3, result);
+    }
+
+    [Fact]
+    public void TestDifference()
+    {
+        var result = Subtract(5, 3);
+        Assert.Equal(2, result);
+    }
+
+    [Fact]
+    public void TestProduct()
+    {
+        var result = Multiply(3, 4);
+        Assert.Equal(12, result);
+    }
+
+    [Fact]
+    public void TestQuotient()
+    {
+        var result = Divide(10, 2);
+        Assert.Equal(5, result);
+    }
+
+    [Fact]
+    public void TestDivideByZero()
+    {
+        Assert.Throws<DivideByZeroException>(() => Divide(10, 0));
+    }
+
+#if INCLUDE_FAILING_TESTS
+    [Fact]
+    public void TestDemonstrateFailing()
+    {
+        Assert.True(false, "This test is designed to fail for demonstration purposes.");
+    }
+#endif
+
+    [Fact(Skip = "This test is skipped for demonstration purposes.")]
+    public void TestDemonstrateSkipped()
+    {
+        Assert.True(true);
+    }
+
+    // Simple calculator methods for testing
+    private static int Add(int a, int b) => a + b;
+    private static int Subtract(int a, int b) => a - b;
+    private static int Multiply(int a, int b) => a * b;
+    private static int Divide(int a, int b) => b == 0 ? throw new DivideByZeroException() : a / b;
+}

sample/test/DeviceTestingKitApp.BlazorLibrary.XunitTests/DeviceTestingKitApp.BlazorLibrary.XunitTests.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <DefineConstants Condition="'$(CI)' != 'true'">INCLUDE_FAILING_TESTS</DefineConstants>
+    <IsXunitTestProject>true</IsXunitTestProject>
+    <IsTestProject>true</IsTestProject>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.NET.Test.Sdk" PrivateAssets="all" />
+    <PackageReference Include="xunit" />
+    <PackageReference Include="xunit.runner.visualstudio" PrivateAssets="all" />
+  </ItemGroup>
+
+</Project>

sample/test/DeviceTestingKitApp.BlazorLibrary.XunitTests/Usings.cs

@@ -0,0 +1 @@
+global using Xunit;

sample/test/DeviceTestingKitApp.WasmTests/DeviceTestingKitApp.WasmTests.csproj

@@ -0,0 +1,23 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <DefineConstants Condition="'$(CI)' != 'true'">$(DefineConstants);INCLUDE_FAILING_TESTS</DefineConstants>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" PrivateAssets="all" />
+    <PackageReference Include="xunit" />
+    <PackageReference Include="xunit.runner.utility" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\DeviceTestingKitApp.BlazorLibrary.XunitTests\DeviceTestingKitApp.BlazorLibrary.XunitTests.csproj" />
+    <ProjectReference Include="..\..\..\src\DeviceRunners.VisualRunners.Xunit\DeviceRunners.VisualRunners.Xunit.csproj" />
+    <ProjectReference Include="..\..\..\src\DeviceRunners.VisualRunners.Blazor\DeviceRunners.VisualRunners.Blazor.csproj" />
+  </ItemGroup>
+
+</Project>

sample/test/DeviceTestingKitApp.WasmTests/Program.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using DeviceRunners.VisualRunners;
+
+Console.WriteLine("Creating the WASM test runner application:");
+Console.WriteLine(" - Blazor WASM visual test runner");
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+// Add HttpClient for dependency injection
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+// Configure the test runner
+builder.UseVisualTestRunner(conf => conf
+    .AddConsoleResultChannel()
+    .AddTestAssembly(typeof(Program).Assembly)
+    .AddTestAssemblies(typeof(DeviceTestingKitApp.BlazorLibrary.XunitTests.BlazorUnitTests).Assembly)
+    .AddThreadlessXunit());
+
+await builder.Build().RunAsync();

sample/test/DeviceTestingKitApp.WasmTests/Properties/launchSettings.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5296",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7064;http://localhost:5296",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

sample/test/DeviceTestingKitApp.WasmTests/wwwroot/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DeviceRunners WASM Test Runner</title>
+    <base href="/" />
+    <link rel="preload" id="webassembly" />
+    <link rel="stylesheet" href="_content/DeviceRunners.VisualRunners.Blazor/css/bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="_content/DeviceRunners.VisualRunners.Blazor/css/app.css" />
+    <link rel="stylesheet" href="_content/DeviceRunners.VisualRunners.Blazor/DeviceRunners.VisualRunners.Blazor.bundle.scp.css" />
+    <link rel="icon" type="image/png" href="_content/DeviceRunners.VisualRunners.Blazor/favicon.png" />
+    <script type="importmap"></script>
+</head>
+
+<body>
+    <div id="app">
+        <svg class="loading-progress">
+            <circle r="40%" cx="50%" cy="50%" />
+            <circle r="40%" cx="50%" cy="50%" />
+        </svg>
+        <div class="loading-progress-text"></div>
+    </div>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">🗙</span>
+    </div>
+
+    <script src="_framework/blazor.webassembly.js"></script>
+</body>
+
+</html>

src/DeviceRunners.VisualRunners.Blazor/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

src/DeviceRunners.VisualRunners.Blazor/Components/Layout/MainLayout.razor

@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>

src/DeviceRunners.VisualRunners.Blazor/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

src/DeviceRunners.VisualRunners.Blazor/Components/Layout/NavMenu.razor

@@ -0,0 +1,39 @@
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">Testing</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>
+
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+    <nav class="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="diagnostics">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Diagnostics
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="credits">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Credits
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}