带有 bUnit 的 C# Blazor 测试表单

Question

我有一个 Blazor 页面，想通过 bUnit 和 xUnit 进行单元测试。

我的 Blazor-页面:

<EditForm Model="login" OnValidSubmit="@LoginSubmit">
    <DataAnnotationsValidator />

    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Mail" Label="Mail-Address" Icon="mail_outline" Dense="true"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Mail)" />
    </p>
    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Password" Label="Password" Icon="lock_outline" Type="password"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Password)" />
    </p>
    <p>
        <MatBlazor.MatButton Label="Login" Type="Submit" Raised="true"></MatBlazor.MatButton>
        <MatBlazor.MatButton Label="Register" @onclick="NavigateRegister" Outlined="true"></MatBlazor.MatButton>
    </p>
</EditForm>

和我的单元测试:

var ctx = MyTestContext();
var cut = ctx.RenderComponent<Login>();

var inputs = cut.FindAll("input");
var input1 = inputs.Where(x => x.ParentElement.TextContent.Contains("Mail")).FirstOrDefault();
input1.Change(testuser);
var input2 = inputs.Where(x => x.ParentElement.TextContent.Contains("Password")).FirstOrDefault();
input2.Change("s3cur3_PASS");
var buttons = cut.FindAll("button");
var button = buttons.Where(x => x.TextContent.Contains("Login")).FirstOrDefault();
button.Click();

但是函数 LoginSubmit 永远不会被触发。即使我搜索 form 而不是 buttom 并执行 Submit() 而不是 Click()，该功能LoginSubmit 未触发。

我该怎么做才能

1. 触发函数LoginSubmit
2. 触发无效状态？

Answer 1

问题是只有第一个 Change() 被识别。这是因为每次更改后，提交并单击 UI 都会再次呈现。用以下方式调用它更聪明:

var ctx = MyTestContext();
var cut = ctx.RenderComponent<Login>();

cut.Find("input[aria-label=Mail-Address]").Change(testuser);
cut.Find("input[type=password]").Change("s3cur3_PASS");
cut.Find("form").Submit();