Binding TelerikTextBox value in bUnit test

[Gambero81]

I'm implementing an integration test with bUnit on a Blazor wasm component who use TelerikTextBox component.
I need to set the TelerikTextBox value as it can be binded to the associated component property:

Example:
razor:
<TelerikTextBox Id="txtUserName" @bind-Value="@UserName" />

cs:

public class Users: ComponentBase
{
   public string UserName {get;set;}
}

In the test method i can find and set the TelerikTextBox value with:

var txt = cut.FindComponents<TelerikTextBox>().FirstOrDefault(txt => txt.Instance.Id == "txtUserName")?.Instance;
txt.Value = "My TextBox Value";

but it not bind the property UserName of Users component.

How to reach my goal?

@EdCharbeneau

Thanks

[linkdotnet]

Hey @Gambero81.
I am not an expert with Teletrik but the general approach should be as following:

If you have a component like this:

<input @bind-value="@UserName"/>

@code {
    public string UserName { get; set; } = "";
}

With the following test:

var cut = RenderComponent<MyComponent>();
cut.Find("input").Change("test"); // Change the value of the input field
var userName = cut.Instance.UserName; // Will be "test"

As you can see we are leveraging the Change method. For your approach you could use something like that:

cut.FindComponents<TelerikTextBox>().Find("#txtUserName").Change("My TextBox Value");

We need to trigger to Blazor Pipeline. In our case we do this with Change. Now we changed the textbox and therefore also the UserName property should be set.

[Gambero81]

Thanks @linkdotnet, using Change method it raise an exception, because the element does not have an onchange handler.

I solved using the Input method, and call the StateAsChanged method of the component (as StateHasChanged is a private method i used reflection to call it)

cut.Find("#txtUserName").Input("My TextBox Value");
var method = typeof(Components.Users).GetMethod("StateHasChanged", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
await Renderer.Dispatcher.InvokeAsync(() => method.Invoke(cut.Instance, null));

[linkdotnet]

Hey @Gambero81
glad you could sort things out. Yes it could be that you need Input. It depends how TeletrikTextBox works.

I am not sure why you would need the StateHasChanged in this scenario. The Input() should invoke another render-cycle anyway. It does not work without the StateHasChanged?

If your issue is sorted, could you close it? Still we can discuss the StateHasChanged but I guess your original problems is resolved, or?

[EdCharbeneau]

@Gambero81 Have you added to the test:

• context.Services.AddTelerikBlazor();
• TelerikRootComponent

These are required for all Telerik Components to work properly.

Here is a sample: https://github.com/telerik/blazor-ui/blob/master/testing/bUnit-justmock/Telerik.Blazor.BUnit.JustMock/DemoSample/ExampleModelTest.cs

[Gambero81]

@linkdotnet yes, using Input method and calling StateHasChanged the problem is solved but i think it's not the standard way..

@EdCharbeneau yes i added Services.AddTelerikBlazor and TelerikRootComponent, this is not the problem, telerik components are recognized well

if i use

cut.FindComponents<TelerikTextBox>().FirstOrDefault(txt => txt.Instance.Id == "txtUserName")?.Instance;

i get the TelerikTextBox, but to set it's value the only way i found is:

1. call the Input method (this can be the standard solution)
2. call StateHasChanged to the component (this is the hack, because this method is protected)

If i not call StateHasChanged, the binding property UserName of the controller is not updated.

[egil]

Hi all, I'm converting this to a QA discussion as it does not seem to be an issue with bUnit.

[linkdotnet]

Hey @Gambero81 yes calling StateHasChanged seems to bit of an anti pattern. More or less because Input should trigger a new render cycle anyway which will lead to an updated binding.

I am not sure if getting the instance of the Telerik component via: cut.FindComponents<TelerikTextBox>().FirstOrDefault(txt => txt.Instance.Id == "txtUserName")?.Instance; is the normal approach. @EdCharbeneau might be better to answer this. Normally you shouldn't get the instance and set the parameter of the component in that way due to the fact that you bypass the Blazor render pipeline. That is why you need the StateHasChanged.

For me it would be helpful if you can post a small and minimal example of your problem.

[EdCharbeneau]

That is correct. You cannot set the value via Instance. You should only set values through properties or data binding.

[Gambero81]

I have arranged a little bit of code to reply the issue (nb. The StateHasChanged hack seem not working always but only in debug and in some circumstances..):

Razor page:

@page "/"
@namespace BlazorApp20.Pages

<PageTitle>Index</PageTitle>

<EditForm EditContext="@EditContext">
    <DataAnnotationsValidator />

    <label><span>UserName</span><TelerikTextBox Id="txtUserName" @bind-Value="@User.UserName"></TelerikTextBox></label>
    <label><span>Password</span><TelerikTextBox Id="txtPassword" @bind-Value="@User.Password"></TelerikTextBox></label>
    <label><span>Password confirm</span><TelerikTextBox Id="txtPasswordConfirm" @bind-Value="@User.PasswordConfirm"></TelerikTextBox></label>
    <label><span>Name</span><TelerikTextBox Id="txtName" @bind-Value="@User.Name"></TelerikTextBox></label>
    <label><span>Surname</span><TelerikTextBox Id="txtSurname" @bind-Value="@User.Surname"></TelerikTextBox></label>

    <TelerikButton Id="save-item-button" ThemeColor="primary" ButtonType="@ButtonType.Submit" OnClick="Confirm"><span>Save</span></TelerikButton>
    <span class="validation-result">@ValidationResult</span>
</EditForm>

Code behind:

public partial class Index: ComponentBase
{
    private EditContext EditContext { get; set; }
    public User User { get; set; }
    public string ValidationResult { get; set; }

    public Index()
    {
        User = new User();
        EditContext = new EditContext(User);
    }

    public void Confirm()
    {
        var isValid = EditContext.Validate();

        if (isValid)
            ValidationResult = "OK";
        else
            ValidationResult = "NO";
    }
}

User model:

public class User
{
    [Required]
    public string UserName { get; set; }
    [Required]
    public string Password { get; set; }
    [Required]
    public string PasswordConfirm { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Surname { get; set; }
}

Test method:

[TestMethod]
public async Task TestMethod1()
{
        var ctx = new Bunit.TestContext();
        ctx.RenderTree.Add<TelerikRootComponent>();

        ctx.Services.AddTelerikBlazor();

        //Render component
        var cut = ctx.RenderComponent<Pages.Index>();

        //Fill form
        cut.Find("#txtUserName").Input("UnitTest_User");
        cut.Find("#txtPassword").Input("UnitTest_Password1!");
        cut.Find("#txtPasswordConfirm").Input("UnitTest_Password1!");
        cut.Find("#txtName").Input("UnitTest_Name");
        cut.Find("#txtSurname").Input("UnitTest_Surname");

        //Submit form
        cut.Find("#save-item-button").Click();

        //User obj is not binded correctly
        var userObj = cut.Instance.User;

        //So the validation fail, and WaitForFailedException is raised
        cut.WaitForState(() =>
        {
            var element = cut.Find(".validation-result");
            return element.InnerHtml == "OK";
        }, new TimeSpan(0, 0, 5));
}

@linkdotnet @EdCharbeneau

[linkdotnet]

Hey @Gambero81

Let's unwrap that a bit and I guess I spotted the issue.
First I am not sure if you posted the whole (working code), especially the ConfirmAsync which you marked as async even though there is no single await in your code. Not sure if you could make the whole call synchronous at all (which might even fix your issue) - according to the docs it can be synchronous as well.

The interesting bit is that:

//Submit form
cut.Find("#save-item-button").Click();

// User obj is not binded correctly
var userObj = cut.Instance.User;

So the Click event triggers your ConfirmAsync which is an asynchronous call. You yourself describe one line after that the binding sometimes works and sometimes it doesn't. The sole reason is that sometimes the Blazor pipeline finished the Task (ConfirmAsync) before you evaluated that line.. and sometimes after.

What you want to do here is awaiting some kind of state change which indicates your async method is done.
You already have that... but way later in your test. You can leverage WaitForState here. You could do something like that:

cut.WaitForState(() => cut.Find(".validation-result").TextContent == "OK");
var userObj = cut.Instance.User;

More information in the official documentation.

Another smaller design note: You don't have to wrap your whole test in a try-catch block. If there is any exception thrown from the usercode, the test will fail anyway with the whole stack-trace. Therefore this adds just unnecessary boiler plate code.
Also your test function is async even though there is not a single asynchronous call involved.

[Gambero81]

Hi @linkdotnet,
Thanks for reply,

I have updated the code sample, the problem still remain even without an async call, i have updated the sample with a syncro call updating Task ConfirmAsync to void Confirm, but after the click on button, as you can see, the User properties are all null except for UserName, this fail the validation and so raise the exception.

the statement var userObj = cut.Instance.User; is only for inspection during debug, it can be removed in test as it have no influence on test result.

[linkdotnet]

There is still a chance that the TeletrikButton has some async code. @EdCharbeneau would be here the expert ;)
If so, could you please try the following:

// Act
cut.Find("#save-item-button").Click();

// Wait until UI updated the state
cut.WaitForState(() => cut.Find(".validation-result").TextContent == "OK");
var userObj = cut.Instance.User;

[Gambero81]

@linkdotnet call cut.WaitForState raise WaitForFailedException.

setting a breakpoint in Confirm method body, i can see EditContext.Validate() return false, as the binded User object is not updated correctly from the ui TelerikTextBox elements

[linkdotnet]

Okay. I tried to reproduce this without the Telerik dependency:

<EditForm EditContext="@EditContext">
    <DataAnnotationsValidator />

    <label><span>UserName</span><input id="txtUserName" @bind-value="@User.UserName"/></label>
    <label><span>Password</span><input id="txtPassword" @bind-value="@User.Password"/></label>
    <label><span>Password confirm</span><input Id="txtPasswordConfirm" @bind-value="@User.PasswordConfirm"/></label>
    <label><span>Name</span><input id="txtName" @bind-value="@User.Name"/></label>
    <label><span>Surname</span><input id="txtSurname" @bind-value="@User.Surname"/></label>

    <button id="save-item-button" @onClick="Confirm"><span>Save</span></button>
    <span class="validation-result">@ValidationResult</span>
</EditForm>

Test

[Fact]
public void TestMethod1()
{
    var ctx = new Bunit.TestContext();

    var cut = ctx.RenderComponent<Bind>();

    cut.Find("#txtUserName").Change("UnitTest_User");
    cut.Find("#txtPassword").Change("UnitTest_Password1!");
    cut.Find("#txtPasswordConfirm").Change("UnitTest_Password1!");
    cut.Find("#txtName").Change("UnitTest_Name");
    cut.Find("#txtSurname").Change("UnitTest_Surname");

    cut.Find("#save-item-button").Click();

    var userObj = cut.Instance.User;

    userObj.Name.Should().NotBeNull();
}

But this works very well (as expected).

@Gambero81 Can you set the Debounce property explicitly to 0? Not sure if this plays a role in here just to sort it out.

@EdCharbeneau is there some JSRuntime stuff needed?
Or is there something to setup regarding debouncing?

[Gambero81]

@Gambero81 Can you set the Debounce property explicitly to 0? Not sure if this plays a role in here just to sort it out.

Great @linkdotnet !! Is the DebounceDelay property causing the issue. This property has default value of 150ms, if i set to 0 the binding work fine!

Now.. @EdCharbeneau this issue have to be managed by Telerik? It's not a good solution to set explicitly this property for each TelerikTextBox element in the component under test..

[EdCharbeneau]

@Gambero81 Please submit a support ticket in case there's something specific to your scenario they can identify.

[Gambero81]

Finally i solved using SetParameterAndRender to reset DebouceDelay for all TelerikTextBox inside the component under test:

protected void ResetTelerikTextBoxDebounceDelay<T>(IRenderedComponent<T> cut) where T : Microsoft.AspNetCore.Components.IComponent
{
    var txtElements = cut.FindComponents<TelerikTextBox>();
    foreach (var txt in txtElements)
        txt.SetParametersAndRender(parameters => parameters.Add(p => p.DebounceDelay, 0));
}