Bunit+Radzen，输入不变

Question

因此，对于我的Blazor服务器应用程序，我正在尝试编写一些BUnit测试，以验证一些Blazor组件的工作情况。我使用Radzen，因为它们提供了很多开箱即用的功能。

我目前正在尝试更改日期选择器的值。我发现了一个例子，如下所示：

<div id="date">
<label>@date</label>
<ValidationMessage For="@(() => this.date)" />
<InputDate @bind-Value="this.date" />
</div>

以及测试：

DateTime myDate = new DateTime(2020, 11, 15, 15, 0, 0);
using var ctx = new TestContext();
// Act
var cut = this.Context.RenderComponent<TimespanSelector>();
cut.Find("#date input").Change(myDate.Date.ToString("yyyy-MM-dd"));
// Assert
Assert.Equal(myDate.Date.ToString(), cut.Find("#date label").InnerHtml);

这很好，但当我为RadzenDatePicker尝试此操作时，它不会更新。所以我将InputDate更改为：

<RadzenDatePicker @bind-Value="this.date" />

现在我的测试失败了，因为它没有更新，所以日期仍然设置为今天。我已经研究过BUnit是否能找到合适的元素，但似乎已经验证了。完整标记为：

<div class="valid" style="display: inline-block;" id="C0vjZeOXa0" blazor:elementreference="">
<span class="rz-calendar rz-calendar-w-btn" style="width:100%">
<input value="17/08/2022 00:00:00" tabindex="0" blazor:onchange="3" autocomplete="off" type="text" class="rz-inputtext  " onclick="" blazor:elementreference="">
<button onclick="Radzen.togglePopup(this.parentNode, 'popupC0vjZeOXa0')" class="rz-datepicker-trigger rz-calendar-button rz-button rz-button-icon-only" tabindex="-1" type="button">
<span aria-hidden="true" class="rz-button-icon-left  rzi rzi-calendar"></span><span class="rz-button-text"></span>
</button>
</span>        
</div>

据我所见，这应该可以正常工作，但我不可能让输入的值发生变化。有谁能帮我吗？

Answer 1

您不应该测试Radzen的组件，这是Radzen希望已经做过的事情。

因此，当在bUnit测试中处理组件中的第三方组件时，我建议将第三方部件视为黑匣子，并简单地观察您在特定场景中向它们传递正确的参数，并使用它们的公共参数触发组件中的回调，例如：

var datepicker = cut.FindComponent<RadzenDatePicker>();
// Verify the correct value passed to <RadzenDatePicker @bind-Value="..." />
Assert.Equal(some expected date time value, datepicker.Instance.Value);
// Emulate <RadzenDatePicker @bind-Value="..." /> changing
await datepicker.Instance.ValueChanged.InvokeAsync(myDate);

您也可以走另一条路，替换/模拟第三方组件。在此处了解更多信息：https://bunit.dev/docs/providing-input/substituting-components