如何测试Blazor中InputCheckbox触发CallApi方法的调用？

我在Blazor页面中定义了如下InputCheckbox组件：

<InputCheckbox id="my-cb" ValueChanged="@CallApi" ValueExpression="@(() => MyFlag)">

@code {
    public bool MyFlag { get; set; }

    async Task CallApi()
    {
        // 调用API逻辑
    }
}

交互状态下点击复选框可正常触发CallApi方法，但在单元测试中，我已Mock了API，尝试触发复选框的Change事件或直接修改MyFlag值时，CallApi都未执行：

// 方式1：触发Change事件无效
var cbx = cut.Find("#my-cb");
cbx.Change(); // 未调用CallApi

// 方式2：直接修改属性无效
cut.Instance.MyFlag = true; // 未调用CallApi

方法1：正确模拟用户交互（推荐） #

Blazor的InputCheckbox组件会在检测到输入状态变更后，才会触发ValueChanged回调。直接调用Change()方法未传递状态变更，需要先设置复选框的选中状态，再触发事件并等待组件更新：

var cbx = cut.Find("#my-cb");
// 设置复选框为选中状态
cbx.SetAttribute("checked", "true");
// 触发Change事件
cbx.Change();
// 等待组件完成状态更新和回调执行
await cut.WaitForState(() => cut.Instance.MyFlag == true);

// 此时验证Mock API是否被调用即可

方法2：直接调用组件的ValueChanged回调 #

如果不需要模拟完整的用户交互，可直接获取InputCheckbox组件实例，调用其ValueChanged委托：

var checkboxComponent = cut.FindComponent<InputCheckbox>();
// 传入变更后的值，触发回调
await checkboxComponent.Instance.ValueChanged.InvokeAsync(true);

// 验证Mock API的调用情况

方法3：使用bUnit的TriggerChange重载传递值 #

bUnit提供了带参数的TriggerChange方法，可直接传递目标值触发组件的逻辑：

var cbx = cut.Find("#my-cb");
// 传递选中状态的值触发Change
cbx.TriggerChange(true);

// 等待组件处理完成
await cut.WaitForAssertion(() => 
{
    // 这里写验证Mock API被调用的断言
});

• 直接调用Change()未传递值时，组件无法感知状态变更，因此不会触发ValueChanged
• 直接修改MyFlag属性属于外部变更，Blazor的表单组件不会主动监听属性的直接修改来触发ValueChanged，只有组件内部处理用户输入或主动调用回调时才会触发

内容的提问来源于stack exchange，提问作者phil