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.