BUnit 使用 Mask 将值设置为 MudTextField

Question

我在 BUnit 和 XUnit 中使用 MudBlazor 测试 Blazor Web 组装项目。我尝试使用 .input("xxx") 设置 MudTextField 值，它在大多数情况下都有效，但在使用 Mask 的情况下会出现错误，有人知道如何使用 Mask 来做到这一点吗？

Razor.代码：

<MudTextField id="txtPhoneNumber" Mask="@_mobilePhoneMask" 
Required="false" 
@bind-Value="@_phoneNumber" 
Label="Mobile Number" 
Variant="Variant.Text" 
HelperTextOnFocus="true" 
Immediate="true" 
Adornment="Adornment.Start" 
AdornmentText="+61" 
InputType="InputType.Telephone"/>

面膜：

private readonly PatternMask _mobilePhoneMask = new("0000 000 000")
{
    MaskChars = new[] { new MaskChar('0', @"[0-9]") }, CleanDelimiters = true
};

B单位：

var Createxxx = RenderComponent<Createxxx>();
var txtPhoneNumber = Createxxx.Find("[id^=\"txtPhoneNumber\"]");
txtPhoneNumber.Input("0400000000");

没有Mask，输出的html如下，有“blazor：oninput”，这可能就是它起作用的原因

<input class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-adorned-start" 
id="txtPhoneNumber" type="tel" value="" 
blazor:oninput="25" blazor:onchange="26" blazor:onblur="27" inputmode="text" blazor:onkeydown="28" blazor:onkeypress="29" blazor:onkeyup="30" maxlength="524288" aria-invalid="false" blazor:elementreference="">

但是使用 Mask，外部 html 没有“blazor：oninput”，因此 .Input 将不起作用...... 但如何让它发挥作用呢？我想用面膜。

<input class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-adorned-start" 
id="txtPhoneNumber" type="tel" value="" 
blazor:onblur="25" blazor:onfocus="26" blazor:oncut="27" blazor:oncopy="28" inputmode="text" blazor:elementreference="">

下面是测试中调用“.Input(xxx)”时Mask的错误信息

Answer 1

执行此操作的直接而简单的方法是获取组件并使用 MudBlazor 本身的 API：

var Createxxx = RenderComponent<Createxxx>();
var mudBlazorInputField = Createxxx.FindComponent<MudTextField>();
await mudBlazorInputField.SetText("Your text goes here");
Createxxx.Render(); // Re-render the cut so that the markup is updated

忠告：您似乎想在这里测试第 3 方组件代码 - 即 MudBlazor 输入控件。我不会推荐这种方式。主要是因为仅通过升级第 3 方包，您的测试可能会中断 - 即使您的生产逻辑仍在启动并运行。

您可能想查看以下资源：

1. https://bunit.dev/docs/providing-input/substituting-components.html?q=Stub&tabs=moq
2. 我们提供的实验性源生成器包：https://bunit.dev/docs/extensions/bunit-generators.html?q=Stub - 它确实删除了很多样板文件和手工代码，使这项工作更加顺利顺利

基本原则是您应该“信任”您的第 3 方代码来执行其承诺的操作，并且只测试真正属于您的代码。 如果您要检查该组件是否适用于您的面罩，这或多或少是第三方组件的行为。