Rendered component has faulty markup and css-selector no longer works for it

[Sziadan]

Describe the bug We recently migrated our code to .NET 7 from .NET 6 (and updated to latest version of bUnit.web) and noticed that our test that was using bUnit started to fail.

Example: The code in question looks like this:

[SetUp]
public async Task SetupGiven()
{
    _dialogProvider = Context.RenderComponent<MudDialogProvider>();
    _dialogProvider.Markup.Trim().Should().BeEmpty();
    var service = Context.Services.GetService<IDialogService>() as DialogService;
    await _dialogProvider.InvokeAsync(() => dialogReference = service?.Show<ConfirmDialogComponent>(TitleText, new DialogParameters(){["Body"]=BodyText}));
    _component = Context.RenderComponent<ResponsibleDetailComponent>(parameters =>
    {
        parameters.Add(x => x.ResponsibleId, 1);
    });
    _component.Find("[data-test='deleteResponsible']").Click();
}

Result: I noticed that the rendered markup looks strange for the component we're trying to find, seems like the icon is throwing it off.

<button 
    icon="<path d=" m0="" 0h24v24h0v0z"="" fill="none"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z">" 
    data-test="deleteResponsible" 
    blazor:onclick="11" 
    type="button" 
    class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-medium mud-ripple" 
    blazor:onclick:stopPropagation 
    blazor:elementReference=""&gt;
        <span class="mud-button-label">translated:Remove</span></path>
</button>

Expected: The same button, but in .NET 6 using bUnit.web 1.8.15

<button 
    icon="<path d=&quot;M0 0h24v24H0V0z&quot; fill=&quot;none&quot;/><path d=&quot;M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z&quot;/>" 
    data-test="deleteResponsible" 
    blazor:onclick="11" 
    type="button" 
    class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-medium mud-ripple" 
    blazor:onclick:stoppropagation="" 
    blazor:elementreference="">
        <span class="mud-button-label">translated:Remove</span>
</button>

Version info:

• bUnit version: 1.12.6
• .NET Runtime and Blazor version: 7.0 (7.0.100)
• OS type and version: Windows 10

(Originally posted this elsewhere but later figured it's probably not related to that issue so posted it like this instead.)

[linkdotnet]

Hey @Sziadan,

thanks for reporting. The change was more or less intentional, but let's find out. A bit of context: The first version (bUnit 1.12) behaves closer to the Blazor renderer. The Blazor renderer does not escape quotes. Now it would be interesting to know what your component under test looks like, from a csharp code point of view but also if it is rendered in the browser.

[Sziadan]

I see, after looking a bit closer at our own code I realized we must have screwed something up ourselves too as those icons didn't render anyway.

However, the buttons did get rendered and were functional in a browser, hence why we never reacted to it I suppose.

Thanks for the heads up though, removing the icons in the code made the tests work as expected.

[linkdotnet]

Thanks for the heads up though, removing the icons in the code made the tests work as expected.

Sure thing. I suppose we can close the issue for now?

[Sziadan]

Yes, the issue I were having is resolved with this. Thanks for the help!