IcuBlazor | Blazor Unit Testing

About

Testing a Blazor component is very easy. Just arrange it, capture it, and compare it to a previous version. You can manipulate the component with UI automation or by directly accessing its .NET objects.
Try hovering over New, Old, and Diff. Also, zoom the images in and out.

UI tests are like other IcuBlazor unit tests with the addition of an <IcuTestDiv> block to initialize the UI you want to test.

@page "/MyTests/SimpleUITest"
@inherits IcuBlazor.IcuTestSuite

@using Demo.CSB.Pages

<IcuTestDiv Suite="@this" Width="300" style="background:#ffc;border:1px dashed red;">
    <p>Any Html or Blazor content!</p>
    <WeatherCounter @ref="myComponent"/>
</IcuTestDiv>
<br />

@code {

    WeatherCounter myComponent;

    public async Task Test_Counter_UI()
    {
        await Check().Div("init");      // snapshot test

        // UI automation
        var button = await UI.Find("button", "Hotter");
        await UI.Click(button);
        await UI.Click(button);
        await Check().Div("click_twice"); // another snapshot test

        // direct access to .NET objects
        Check().True(myComponent.data.TempC == 2, "Directly test component!");
    }
}