Questions and comments on the projects tests

[egil]

Hi there, creator of bUnit here.

I just browsed through some of the project's tests, and they look really clean.

It's always interesting to see how something you have built is being used, thus, a few questions:

1. Did you consider having the test classes inherit from TestContext directly, and if yes, why did you decide on the approach you have taken instead?

2. Did you try to use https://github.com/VerifyTests/Verify.AngleSharp or https://github.com/VerifyTests/Verify.Blazor instead of your own snapshot testing. If yes, why didn't they work for you?

I'll take another look again later this weekend and may have more questions.

Thanks, Egil!

[vnbaaij]

Hi Egil,

Thanks for your interest. Love the work you do on bUnit!

@dvoituron os our residential testing expert, so I am sure he can and will have answers for you.

[egil]

Thanks, Denis, likewise. Appreciate your thoughts.

I am looking at repos using bUnit to see if there are things we can do to make things easier for the users. Your usage seems quite idiomatic though.

1. It's fine to wrap the TestContext, but it is probably a good idea to have TestHost implement IDisposable and dispose the TestContext in that method.

2. I agree that Verify is pretty opinionated and it is sometimes easier to roll your own than trying to customize. Did you consider using MarkupMatches and inlining the "expected" markup directly in your tests, perhaps writing the tests in .razor files too? E.g.:

@using Xunit;
@inherits TestBase
@code
{
    [Fact]
    public void FluentTooltip_Default()
    {
        // Arrange & Act
        var cut = TestContext.Render(@<FluentTooltip Anchor="button-id">My help text</FluentTooltip>);

        // Assert
        cut.MarkupMatches(@<fluent-tooltip anchor="button-id" delay="300">My help text</fluent-tooltip>);
    }

    [Fact]
    public void FluentTooltip_AllAttributes()
    {
        // Arrange & Act
        var cut = TestContext.Render(
          @<FluentTooltip
              Anchor="button-id"
              UseTooltipService="false"
              Delay="200"
              Position="TooltipPosition.Bottom"
              MaxWidth="300px"
              AutoUpdateMode="AutoUpdateMode.Auto"
              HorizontalViewportLock="true"
              VerticalViewportLock="true"
              OnDismissed="(e) => { }"
              >"My help text"</FluentTooltip>);

        // Assert
        cut.MarkupMatches(
          @<fluent-tooltip visible="" anchor="button-id" delay="200" position="bottom" auto-update-mode="Auto" horizontal-viewport-lock="" vertical-viewport-lock="">
            <div style="max-width: 300px; text-wrap: wrap;">My help text</div>
          </fluent-tooltip>);
    }
}

Forgot to add, that all blazor:xxx attributes are not part of the comparison when using the BunitComparer or MarkupMatches. You can also add "modifiers" to the expected markup as shown here: https://bunit.dev/docs/verification/semantic-html-comparison.html

[dvoituron]

Yes, it would probably be better to implement IDisposable. I will do that.
Writing tests in .razor files is a very good idea. Certainly better for test clarity. I'll investigate this.

Our first tests used MarkupMatches and a few still call this method (FluentCalendarTests and FluentDatePickerTests). On "small" component or small tests, it's perfect. But when a component becomes more complex or when a complete HTML page needs to be validated, having Visual Studio's "Compare Files" tool is a luxury I can no longer do without :-)

For example, updating the p.Id value in the test FluentAutocomplete_Templates, the result will be

1. Using MarkupMatchesmethod:

Bunit.HtmlEqualException : HTML comparison failed. 

The following errors were found:
  1: The value of the attribute div(0) > fluent-text-field(1)[id] and actual attribute div(0) > fluent-text-field(0)[id] are different.
 ...

2. Using Verify method:

You have the same result in the Test Explorer (using your HtmlEqualException class), but in addition, you can compare the two HTML files :-)
And this is the result I'm waiting for to quickly check whether I need to adapt my test or my source code.

[egil]

Yeah, that is a neat use of snapshots. Since you are using our comparer, you can also add comparer modifiers in the expected html files.

Under the hood BUnitComparer uses AngleSharp.Diffing (also a project of mine) to perform the semantic comparison.

What you can also do is skip some of the markup cleaning you do and instead configure the comparer specifically to your needs by e.g. providing custom comparison rules/filters. That way you don't have to resort to RegEx, etc.. more here about these: https://github.com/AngleSharp/AngleSharp.Diffing/wiki/Getting-Started

Let me know if you need some input with those.

The expected markup you save in files, you could use the markup printing logic we have there normalize it and filter out the "blazor:" attributes which are just noise.

Would it be useful to have the diff tool experience combined with markup matches? I guess that should be possible, e.g. compare two text strings.

[egil]

Just a follow up on this. I have recently had a PR merged into Verify.Bunit that changes it to leverage the semantic comparer and pretty printer built into bUnit. May not improve things from your own home grown solution though.

[dvoituron]

Thanks. I will check that. I recently updated our Unit Tests project to use razor files instead of cs files.