Issue with quotation marks in attributes

[xC0dex]

Hey,

currently, I'm facing an issue where some component tests fail after the bUnit update to version 1.12.6.
I'm serializing an object into a string and put the value into a custom attribute of an HTML tag, and then test the component to see if the serialized value is in that specific attribute.

Source code of the component:

<p data-single-quotes='@UserAsJson' data-double-quotes="@UserAsJson">
    I'm @User.Name and @User.Age years old.
</p>

@code {

    [Parameter]
    [EditorRequired]
    public required User User { get; set; }

    private string UserAsJson => JsonSerializer.Serialize(User);
}

Source code of the test:

public void Should_RenderAndDisplaySingleQuotesCorrectly()
    {
        // Arrange
        var user = new User("Justin", 24);
        var serializedUser = JsonSerializer.Serialize(user);
        var cut = RenderComponent<UserComponent>(parameters => parameters
            .Add(p => p.User, user));

        // Assert
        var divElement = cut.Find("p");
        var singleQuotes = divElement.Attributes.GetNamedItem("data-single-quotes");
        singleQuotes!.Value.Should().Be(serializedUser);
    }

The rendered result (in the browser and in bUnit) looks like this:

<p data-single-quotes="{"Name":"Justin","Age":24}" data-double-quotes="{"Name":"Justin","Age":24}">
    I'm Justin and 24 years old.
</p>

As you can see, the GitHub Syntax highlighting is also confused. This test works fine with version 1.11.7.
I created a simple project to showcase the problem. Simply switch the version of bUnit.

Maybe this issue is not bUnit related. Do you have any idea how to solve this problem, anyway?

Thanks

[linkdotnet]

Hey @xC0dex,

pretty certain a recent PR introduced that behavior (namely: #899). To be honest I have to dig a bit deeper.
What is the output of cut.Markup?

[xC0dex]

I created a new issue AngleSharp/AngleSharp#1071. Thanks for the investigation and support! 😄

[linkdotnet]

Perfect! Thanks for staying with us. I hope this gets sorted out.

[xC0dex]

Hey @linkdotnet @egil ,

after I created the issue AngleSharp/AngleSharp#1071 (comment) in the AngleSharp project, I dug deeper into the issue and the cause of it. I'll try to explain in more detail what I think the problem is.

Valid HTML

First, I want to explain what valid HTML is and the browser expects. The following simple HTML is valid and can be interpreted by the browser:

<p data='{"foo":"bar"}'></p>

It uses the simple quotation marks to be able to use double quotation marks in the value of the attribute.
The following HTML is invalid and cannot be read by the browser correctly:

<p data="{"foo":"bar"}"></p>

Important: The two examples are source code written in a simple index.html file (No Blazor or anything). This is not the code that is shown in the dev tools in browser. In the dev tools, the examples look like this:

As expected, the second example was not parsed correctly. However, the first example has now double quotation marks. So good so far.

How Blazor works

Blazor don't really care if I use single quotation marks or not. I'm having the following simple Blazor component:

<p data='@_someJson'></p>   
@code {  
    private readonly string _someJson = JsonSerializer.Serialize(new {Foo = "Bar"});  
}

However, the generated BuildRenderTree method looks like this:

__builder.OpenElement(0, "p");
__builder.AddAttribute(1, "data",

So Blazor doesn't care about the single quotation marks. But I asked myself: How does Blazor add the attributes to the DOM-tree in the browser with a valid syntax. I looked into the blazor.server.js script and figured out that the following method will be used when a component is rendered into the DOM tree https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web.JS/src/Rendering/BrowserRenderer.ts#L358:

// First see if we have special handling for this attribute
if (!this.tryApplySpecialProperty(batch, toDomElement, attributeName, attributeFrame)) {
  // If not, treat it as a regular string-valued attribute
  toDomElement.setAttribute(
    attributeName,
    frameReader.attributeValue(attributeFrame)!
  );
}

Blazor uses the plain JavaScript setAttribute method to add the value to the DOM element. A code example that relates to the first example.

const json = JSON.stringify({Foo:"Bar"});
element.setAttribute('data', json);

This method seems to automatically "escapes" the double quotation marks in the JSON string and add it correctly to the DOM element. This is the "magic" that I mentioned in previous comments.

The issue

AngleSharp requires valid HTML syntax like a browser. However, if I understand bUnit correctly, it will pass the content of the Markup property to AngleSharp. https://github.com/bUnit-dev/bUnit/blob/main/src/bunit.web/Rendering/RenderedFragment.cs#L71 The content of the property looks like this:

<p data="{"foo":"bar"}"></p>

Unfortunately, this is invalid HTML. It must either replace the double quotation marks with single quotation marks or escape the double quotation marks in the value to have a valid HTML. The ToMarkup method from AngleSharp returns the same broken attributes like the browser in the second example in screenshot above.

So in general, the content of the Markup property looks identical to the markup in the dev tools. However, this is invalid HTML. The browser simply prepared and beautified the HTML to look better, but this is not the exact same that we get from a rendered Blazor component.

I'm not sure if this is 100% correct what I wrote here, but hopefully it's now easier to get an idea of what the issue is.

[linkdotnet]

I guess I do know what you want to say. The gist is bUnits output is the same as what you see in the dev tools. But the dev tools or better the browser output is already a "prettified" version. So the question is: What does Blazor produce before the browser does stuff with it? Correct?

A few things from my side. For v2 we try to be closer to your given example of the TypeScript code.
My current problem is if it makes sense to align bUnit to something when the input is invalid/unspecified.

I can't reproduce the setAttribute escaping mechanism:

<button>Hey</button>

With the following JS:

const button = document.querySelector("button");

button.setAttribute("name", "\"helloButton\"");
const json = JSON.stringify({Foo:"Bar"});
button.setAttribute("json", json);

This will lead to the following output (see JSFiddle example):

<button name=""helloButton"" json="{"Foo":"Bar"}">
Hey
</button>

Therefore my question is where do you see the gap between bUnit and Blazor and or the browser?

[xC0dex]

Your JavaScript example is a good one. It showcases the escape mechanism, because when you now calling the getAttribute method, the response will be "hellobutton":

const value = button.getAttribute("name"); // returns --> "hellobutton"

So the setAttribute method escapes the two double quotation marks in the value. However, if you would write the two attributes like in your example directly in HTML (without using the setAttribute method) it would be invalid HTML and therefore parsed incorrectly by the browser.

In my opinion, there is no real gap between bUnit and Blazor directly, because using bUnit without any AngleSharp tools works perfectly fine. However, I think that there is a gap between bUnit and AngleSharp. While Blazor puts attributes through JavaScript into the DOM to achieve a valid HTML in the browser, bUnit "just" creates a markup, which is unfortunately invalid for AngleSharp
For instance, if I use the setAttribute method in AngleSharp:

var element = cut.Find("p");
element.SetAttribute("data", JsonSerializer.Serialize(new {Foo = "Bar"}));

The result of element.ToMarkup() would be:

<p data="{&quot;Foo&quot;:&quot;Bar&quot;}"></p>

It escapes the value, like the browser did.