Blazor B-Unit单元测试：验证元素是否获得焦点

组件代码 #

component.razor #

<div class="main-data-data-row" @onclick="@HandleDataRowClick">
   ...
   <input class="main-data-data-row__chip-container__input" ref="InputRef"/>
</div>

component.razor.cs #

public partial class DataRowTagSelectComponent<T> : DataRowComponentBase
{
   ...

   public ElementReference InputRef { get; set; }
   
   ...

   public void HandleDataRowClick()
   {
      if (!Disabled)
      {
         InputRef.FocusAsync();
      }
   }
}

现有测试代码 #

[Fact]
public void ClickComponent_FocusInputField()
{
   string testIdentifier = "MyTestIdentifier";
   List<string> testValue = new() { "MyTestValue1", "MyTestValue3", "MyTestValue3", };

   using var ctx = new TestContext();

   var cut = ctx.RenderComponent<DataRowTagSelectComponent<string>>(parameters => parameters
         .Add(p => p.Values, testValue)
         .Add(p => p.DataRowIdentifier, testIdentifier)
         .Add(p => p.MainDataEditMode, true)
         );

   IElement mainContainerTarget = cut.Find(".main-data-data-row");

   //模拟点击容器
   mainContainerTarget.Click();

   // 关键问题：如何获取当前激活元素？或如何检查元素是否获得焦点？
   IElement inputTarget = cut.Find(".main-data-data-row__chip-container__input");
   Assert.NotNull(inputTarget);
   
   Assert.Equal(inputTarget, ???)
}

解决方案 #

B-Unit提供了两种直接的方式验证元素焦点状态：

方法1：使用HasFocus()方法 #

IElement接口自带HasFocus()方法，可直接断言输入框是否获得焦点：

IElement inputTarget = cut.Find(".main-data-data-row__chip-container__input");
Assert.True(inputTarget.HasFocus());

方法2：验证文档激活元素 #

通过测试上下文获取当前文档的activeElement，对比是否为目标输入框：

IElement inputTarget = cut.Find(".main-data-data-row__chip-container__input");
var activeElement = cut.Find("html").OwnerDocument.ActiveElement;
Assert.Equal(inputTarget, activeElement);

完整测试代码 #

[Fact]
public void ClickComponent_FocusInputField()
{
   string testIdentifier = "MyTestIdentifier";
   List<string> testValue = new() { "MyTestValue1", "MyTestValue3", "MyTestValue3", };

   using var ctx = new TestContext();

   var cut = ctx.RenderComponent<DataRowTagSelectComponent<string>>(parameters => parameters
         .Add(p => p.Values, testValue)
         .Add(p => p.DataRowIdentifier, testIdentifier)
         .Add(p => p.MainDataEditMode, true)
         .Add(p => p.Disabled, false) // 显式确保组件未禁用
         );

   IElement mainContainerTarget = cut.Find(".main-data-data-row");
   mainContainerTarget.Click();

   IElement inputTarget = cut.Find(".main-data-data-row__chip-container__input");
   Assert.NotNull(inputTarget);
   
   // 任选一种断言方式即可
   Assert.True(inputTarget.HasFocus());
   // 或
   var activeElement = cut.Find("html").OwnerDocument.ActiveElement;
   Assert.Equal(inputTarget, activeElement);
}

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