Verify.Blazor

Support for rendering a Blazor Component to a verified file via Blazor rendering.

Verify.Blazor uses the Blazor APIs to take a snapshot (metadata and html) of the current state of a Blazor component. It has fewer dependencies and is a simpler API than Verify.Bunit approach, however it does not provide many of the other features, for example trigger event handlers.

See Milestones for release notes.

Sponsors

Entity Framework Extensions

Entity Framework Extensions is a major sponsor and is proud to contribute to the development this project.

Developed using JetBrains IDEs

NuGet

• https://nuget.org/packages/Verify.Blazor

Usage

Component

The below samples use the following Component:

<div>
<h1>@Title</h1>
<p>@Person.Name</p>
<button>MyButton</button>
</div>
@code{
[Parameter]
publicstringTitle{get; set; }="My Test Component";
[Parameter]
publicPersonPerson{get; set; }publicboolIntitialized;
protectedoverrideTaskOnInitializedAsync()
{Intitialized=true;
returnTask.CompletedTask;
}}

^{snippet source | anchor}

Render using ParameterView

This test:

[Fact]publicTaskPassingParameters(){varparameters=ParameterView.FromDictionary(newDictionary<string,object?>{{"Title","The Title"},{"Person",newPerson{Name="Sam"}}});vartarget=Render.Component<TestComponent>(parameters:parameters);returnVerify(target);}

^{snippet source | anchor}

Render using template instance

This test:

[Fact]publicTaskPassingTemplateInstance(){vartemplate=newTestComponent{Title="The Title",Person=new(){Name="Sam"}};vartarget=Render.Component(template:template);returnVerify(target);}

^{snippet source | anchor}

Result

Both will produce:

The component rendered as html ...verified.html:

<div><h1>The Title</h1><p>Sam</p><button>MyButton</button></div>

^{snippet source | anchor}

And the current model rendered as txt ...verified.txt:

{
Instance: {
Intitialized: true,
Title: The Title,
Person: {
Name: Sam
}
}
}

^{snippet source | anchor}

Scrubbing

Integrity check

In Blazor an integrity check is applied to the dotnet.*.js file.

<script src="_framework/dotnet.5.0.2.js" defer=""></script>

This line will change when the dotnet SDK is updated.

Noise in rendered template

Blazor uses <!--!--> to delineate components in the resulting html. Some empty lines can be rendered when components are stitched together.

Resulting scrubbing

// remove some noise from the html snapshotVerifierSettings.ScrubEmptyLines();BlazorScrubber.ScrubCommentLines();VerifierSettings.ScrubLinesWithReplace(
line =>{varscrubbed=line.Replace("<!--!-->","");if(string.IsNullOrWhiteSpace(scrubbed)){returnnull;}returnscrubbed;});HtmlPrettyPrint.All();VerifierSettings.ScrubLinesContaining("<script src=\"_framework/dotnet.");

^{snippet source | anchor}

Icon

Helmet designed by Leonidas Ikonomou from The Noun Project.