Bunit Radzen, input does not change-CodePudding

So for my Blazor server application I'm trying to write some BUnit tests, to validate the working of some Blazor components. I use Radzen, since they provide a lot of functionality out of the box.

What I'm currently trying to do, is to change the value of a datepicker. I found an example, see below:

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

and the test:

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);

This works fine, but when I try this for the RadzenDatePicker, it does not update. So I change the InputDate to:

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

Now my test fails, since it was not updated, the date is still set to today. I've looked whether BUnit can find the proper element, but that seems to check out. The full markup is:

<div  style="display: inline-block;" id="C0vjZeOXa0" blazor:elementreference="">
  <span  style="width:100%">
    <input value="17/08/2022 00:00:00" tabindex="0" blazor:onchange="3" autocomplete="off" type="text"  onclick="" blazor:elementreference="">
    <button onclick="Radzen.togglePopup(this.parentNode, 'popupC0vjZeOXa0')"  tabindex="-1" type="button">
      <span aria-hidden="true" ></span><span ></span>
    </button>
  </span>        
</div>

From what I can see, this should work properly, but there is no way I can let the value of the input change. Anyone who can help me with this?

CodePudding user response：

You should not be testing Radzen's components, that's something Radzen have hopefully done already.

So when dealing with 3rd party components in your components in bUnit tests, I suggest treating the 3rd party components as a black box, and simply observing that you pass the right parameters to them in a specific scenario, and use their public parameters to trigger callbacks in your components, e.g.:

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);

You can also go another route and substitute/mock 3rd party components. Learn more about this here: https://bunit.dev/docs/providing-input/substituting-components