How can I test content is escaped?

[pwhe23]

I would like to test that some of my components properly escape HTML input when rendered. For example, if a button has a parameter with the value <b>Message</b> we want to ensure what is rendered is <b>Message</b>. I can manually see it works by looking in the browser, but my bUnit tests do not show the markup as properly escaped. An example is below.

@* Component: Test.razor *@
@Text
@code {
    [Parameter] public string? Text { get; set; } = "<b>Message</b>";
}

[Fact]
public void Test_Text_Escapes()
{
    using var it = _ctx.RenderComponent<Test>();
    it.MarkupMatches("&lt;b&gt;Message&lt;/b&gt;"); // this test fails
    // it.Markup currently equals the raw value "<b>Message</b>"
}

Is there any way to test whether the content is properly escaped? (The reason we are adding these tests is that some developers have snuck in MarkupString to stop the escaping a couple of times and we want to make sure it doesn't happen again :)

[egil]

hey @pwhe23, sorry for the late reply.

The escaped characters are probably getting converted back to proper HTML by our in-memory representation of a DOM (the AngleSharp library).

You can access the raw markup via the it.Markup property. That represents the raw string that the Blazor renderer produced.

E.g.:

[Fact]
public void Test_Text_Escapes()
{
    using var it = _ctx.RenderComponent<Test>();
    Assert.Equal("&lt;b&gt;Message&lt;/b&gt;", it.Markup);
}

[linkdotnet]

I tried it out and used @pwhe23 component and test - if we add the HtmlEncoder.Encode part back - the test would get green.

[egil]

Ok, no other test broke? I would have hoped we had a test that covered the reason not to have the encode call there in the first place.

[linkdotnet]

Oh sorry - yeah we have one that tests exactly that is does not get escaped - that would break of course.

[egil]

Ok good. That makes sense. We need to ensure we are aligned with what happens in the browser, and adjust our own tests to match that. Then we can push a fix. Let's get this right this time 🙂

[linkdotnet]

I created a separate issue based on the discussion here.