Verify.Bunit

Support for rendering a Blazor Component to a verified file via bunit. Verify.Bunit uses the bUnit APIs to take a snapshot (metadata and html) of the current state of a Blazor component. Since it leverages the bUnit API, snapshots can be on a component that has been manipulated using the full bUnit feature set, for example trigger event handlers.

See Milestones for release notes.

Component

The below samples use the following Component:

<div>
    <h1>@Title</h1>
    <p>@Person.Name</p>
    <button>MyButton</button>
</div>

@code {

    [Parameter]
    public string Title { get; set; } = "My Test Component";

    [Parameter]
    public Person Person { get; set; }

    public bool Intitialized;

    protected override Task OnInitializedAsync()
    {
        Intitialized = true;
        return Task.CompletedTask;
    }

}

^{snippet source | anchor}

NuGet package

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

Usage

Enable at startup:

[ModuleInitializer]
public static void Initialize() =>
    VerifyBunit.Initialize();

^{snippet source | anchor}

This test:

[Fact]
public Task Component()
{
    using var context = new TestContext();
    var component = context.RenderComponent<TestComponent>(
        builder =>
        {
            builder.Add(
                _ => _.Title,
                "New Title");
            builder.Add(
                _ => _.Person,
                new()
                {
                    Name = "Sam"
                });
        });
    return Verify(component);
}

[Fact]
public Task MarkupFormattable_NodeList()
{
    using var context = new TestContext();
    var component = context.RenderComponent<TestComponent>(
        builder =>
        {
            builder.Add(
                _ => _.Title,
                "New Title");
            builder.Add(
                _ => _.Person,
                new()
                {
                    Name = "Sam"
                });
        });
    return Verify(component.Nodes);
}

[Fact]
public Task MarkupFormattable_single_Element()
{
    using var context = new TestContext();
    var component = context.RenderComponent<TestComponent>(
        builder =>
        {
            builder.Add(
                _ => _.Title,
                "New Title");
            builder.Add(
                _ => _.Person,
                new()
                {
                    Name = "Sam"
                });
        });
    return Verify(component.Nodes.First()
        .FirstChild);
}

^{snippet source | anchor}

Will produce:

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

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

^{snippet source | anchor}

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

{
  Instance: {
    Intitialized: true,
    Title: New Title,
    Person: {
      Name: Sam
    }
  },
  NodeCount: 9
}

^{snippet source | anchor}

Exclude Component

Rendering of the Component state (Samples.Component.verified.txt from above) can be excluded by using excludeComponent.

[ModuleInitializer]
public static void Initialize() =>
    VerifyBunit.Initialize(excludeComponent: true);

^{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="" integrity="sha256-AQfZ6sKmq4EzOxN3pymKJ1nlGQaneN66/2mcbArnIJ8=" crossorigin="anonymous"></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 snapshot
VerifierSettings.ScrubEmptyLines();
BlazorScrubber.ScrubCommentLines();
VerifierSettings.ScrubLinesWithReplace(
    line =>
    {
        var scrubbed = line.Replace("<!--!-->", "");
        if (string.IsNullOrWhiteSpace(scrubbed))
        {
            return null;
        }

        return scrubbed;
    });
HtmlPrettyPrint.All();
VerifierSettings.ScrubLinesContaining("<script src=\"_framework/dotnet.");

^{snippet source | anchor}

Icon

Helmet designed by Leonidas Ikonomou from The Noun Project.