Verify.Blazor

Support for rendering a Blazor Component to a verified file via bunit or via raw Blazor rendering.

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}

Verify.Blazor

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.

NuGet package

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

Usage

Render using ParameterView

This test:

[Fact]
public Task PassingParameters()
{
    var parameters = ParameterView.FromDictionary(
        new Dictionary<string, object?>
        {
            { "Title", "The Title" },
            { "Person", new Person { Name = "Sam" } }
        });

    var target = Render.Component<TestComponent>(parameters: parameters);

    return Verify(target);
}

^{snippet source | anchor}

Render using template instance

This test:

[Fact]
public Task PassingTemplateInstance()
{
    var template = new TestComponent
    {
        Title = "The Title",
        Person = new()
        {
            Name = "Sam"
        }
    };

    var target = Render.Component(template: template);

    return Verify(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}

Verify.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.

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 testContext = new TestContext();
    var component = testContext.RenderComponent<TestComponent>(
        builder =>
        {
            builder.Add(_ => _.Title, "New Title");
            builder.Add(_ => _.Person, new()
            {
                Name = "Sam"
            });
        });
    return Verify(component);
}

^{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: 4
}

^{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.

Pretty print

For readability it is useful to pretty print html using Verify.AngleSharp.

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(s =>
{
    var scrubbed = s.Replace("<!--!-->", "");
    if (string.IsNullOrWhiteSpace(scrubbed))
    {
        return null;
    }

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

^{snippet source | anchor}

Credits

Icon

Helmet designed by Leonidas Ikonomou from The Noun Project.

License

egil/Verify.Blazor

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages