我正在尝试测试 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 结尾。有没有更好的方法来测试这样的事情?
我自己想出来了:我只是使用自定义数据属性,例如数据 ID-abcd 我可以使用以下 CSS 选择器在 bUnit 中引用它:[data-id-abcd]。
对于我想要访问的每个标签,我都会创建一个带有一些随机 4 位十六进制 ID 的自定义属性。使用这种技术,我可以识别标签,而无需一些重复的 ID。此外,它使代码非常干净和可维护,因为它只为每个组件添加了一些属性。