Skip to content

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

License

Notifications You must be signed in to change notification settings

VerifyTests/Verify.Blazor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Verify.Blazor

Discussions Build status NuGet Status

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.

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

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.

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project