使用 bUnit 进行单元测试细分

Question

我正在尝试测试 blazor 组件。在组件的逻辑中，我在组件内部某处的细分中设置了一些文本。现在我想验证文本设置是否正确：

<div>
    <div>
    </div>
    <div>
        @Title
    </div>
</div>

目前我使用以下代码来实例化该组件。现在我想验证“title”是否确实用作标题。

[Fact]
public void TestSomething()
{
    // act
    var cut = RenderComponent<MyComponent>(parameters => parameters
        .Add(p => p.Title, "title")
    );
}

现在我如何验证“标题”是否确实呈现在正确的位置？

我发现了两种方法：要么构建一个系统来在整个项目中生成唯一的 id，要么只是设置静态 id。两者要么需要大量工作，要么以重复的 ID 结尾。有没有更好的方法来测试这样的事情？

Answer 1

我自己想出来了：我只是使用自定义数据属性，例如数据 ID-abcd 我可以使用以下 CSS 选择器在 bUnit 中引用它：[data-id-abcd]。

对于我想要访问的每个标签，我都会创建一个带有一些随机 4 位十六进制 ID 的自定义属性。使用这种技术，我可以识别标签，而无需一些重复的 ID。此外，它使代码非常干净和可维护，因为它只为每个组件添加了一些属性。