如何测试 Blazor 组件字符串是否在 bUnit 中呈现为 MarkupString？

Question

我有一个简单的 Blazor 组件，用于渲染字符串和一个测试，用于检查渲染组件时是否渲染 html 内容。

但是 - 如果我更改带有标记字符串 @(new MarkupString(TextContent)) 的行以使用原始字符串 @TextContent 那么测试仍然通过，即使当我查看正在运行的应用程序中的输出时，html 格式是未应用（如您所料，原始 html 显示在页面上，而不是 stlyed 内容）。尽管它对用户的显示不同，但 bUnit 测试在两种情况下都会返回完全相同的字符串。

那么我如何修改此测试，以便原始输出未通过测试，而 MarkupString 版本仍然通过？

<div class="text-content">
    @if (!string.IsNullEmptyOrWhitespace(TextContent))
    {
        @(new MarkupString(TextContent)) 
    }
</div>


@code {
    [Parameter]
    public string TextContent { get; set; } = "";   
}



[Test]
[TestCase("<h1>Content Here</h1>")]
[TestCase("Content Here")]
[TestCase("This is some content with a <strong>bold</strong> bit in it.")]
public async Task TextCanContainHtmlFormatting(string content)
{
    var context = new TestContext();

    var cut = context.RenderComponent<TextComponent>(parameters =>
    {
        parameters.Add(s => s.TextContent, content);
    });
    
    var textDiv = cut.Find(".text-content");
    Assert.AreEqual(content, textDiv.InnerHtml, "should have the html text content");
}

Answer 1

我会使用

MarkupMatches()

，例如：

[Test]
[TestCase("<h1>Content Here</h1>")]
[TestCase("Content Here")]
[TestCase("This is some content with a <strong>bold</strong> bit in it.")]
public async Task TextCanContainHtmlFormatting(string content)
{
    using var context = new TestContext();

    var cut = context.RenderComponent<TextComponent>(parameters =>
    {
        parameters.Add(s => s.TextContent, content);
    });
    
    var textDiv = cut.Find(".text-content");
    testDiv.MarkupMatches($"""
        <div class="text-content">
            {content}
        </div>
        """);
}