0

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

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?

Foitn
  • 604
  • 6
  • 25
  • In your test, why do you both new up a `TestContext`, and have a `Context` property available on the test class? You do not need both. – Egil Hansen Aug 17 '22 at 14:43
  • 1
    @EgilHansen You are correct, I suppose these sort of things start to happen once you start trying a lot of things simultaneously, the code does not get any cleaner... – Foitn Aug 17 '22 at 15:20
  • It does indeed :) – Egil Hansen Aug 17 '22 at 17:01

1 Answers1

2

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

Egil Hansen
  • 15,028
  • 8
  • 37
  • 54