diff:ignoreChildren does not Ignore Children of a Button

[japhelps]

Describe the bug

Using diff:ignoreChildren does not ignore child elements or text of a button

Example:

<button id="buttonid" class="somecss">
    <span>Not Ignored Span</span>
</button>

Or
<button id="buttonid" class="somecss">
    Not Ignored
</button>

With this test:

[Fact]
public void GivenComponent_MatchMarkup()
{
    var cut = RenderComponent<Test>();
    var expectedHtml = @$"<button diff:ignoreAttributes diff:ignoreChildren></button>";

    cut.MarkupMatches(expectedHtml);
}

Results in this output:

BlazorApp1Tests.ComponentTests.GivenComponent_MatchMarkup [229 ms]
  Error Message:
   Bunit.HtmlEqualException : HTML comparison failed.

The following errors were found:
  1: The text at button(0) > #text(0) was not expected.

Actual HTML:
<button id="buttonid" class="somecss">
  <span>Not Ignored Span</span>
</button>

Expected HTML:
<button diff:ignoreattributes="" diff:ignorechildren=""></button>

  Stack Trace:
   at Bunit.MarkupMatchesAssertExtensions.MarkupMatches(INodeList actual, INodeList expected, String userMessage) in /_/src/bunit.web/Asserting/MarkupMatchesAssertExtensions.cs:line 238
   at Bunit.MarkupMatchesAssertExtensions.MarkupMatches(IRenderedFragment actual, String expected, String userMessage) in /_/src/bunit.web/Asserting/MarkupMatchesAssertExtensions.cs:line 114
   at BlazorApp1Tests.ComponentTests.GivenComponent_MatchMarkup() in C:\Code\Projects\BlazorApp1\BlazorApp1Tests\UnitTest1.cs:line 14
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Void** arguments, Signature sig, Boolean isConstructor)
   at System.Reflection.MethodBaseInvoker.InvokeWithNoArgs(Object obj, BindingFlags invokeAttr)

Expected behavior:

The test would succeed.

Version info:

• bUnit version: 1.28.9
• .NET Runtime and Blazor version: .NET 8
• OS type and version: Windows 11

Additional context: This should work according to the documentation here, and in general it has worked correctly.

The only way I have found to get the test to succeed is to change the button expected HTML to the following <button diff:ignoreAttributes><span diff:ignoreChildren></span></button>

[egil]

Thanks for reporting this @japhelps. I am very busy these weeks, but will take a look as soon as possible. This may also be an issue that should be addressed over in the anglesharp-diffing repository. I would start looking there and see if this issue also exists in the diffing library. If it does, then the fix needs to be applied there.

[nref]

Thanks for a very useful library and for your talks guiding how to test Blazor.

I'm also seeing this bug.

Fails:

var cut = Render( @<MudButton/> );
cut.Find("button").MarkupMatches(@<button diff:ignoreAttributes diff:ignoreChildren></button>);

Passes:

cut.Find("button").MarkupMatches(@<button diff:ignoreAttributes><span diff:ignoreAttributes></span></button>);

[egil]

@nref isn't those two assertions identical?

[nref]

@egil My mistake, I pasted the wrong thing. I've just now updated it. That is the code that I am using to make my test pass. But the design of the test really doesn't care that there is a span or not.