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!");
}
}