Binding TelerikTextBox value in bUnit test #647

Activity

1. linkdotnet commented on Feb 28, 2022

   

   linkdotnet

   on Feb 28, 2022

   Last edited by linkdotnet

   Collaborator

   More actions

   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.
2. Gambero81 commented on Feb 28, 2022

   

   Gambero81

   on Feb 28, 2022

   Author

   More actions

   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));
   
3. linkdotnet commented on Feb 28, 2022

   

   linkdotnet

   on Feb 28, 2022

   Last edited by linkdotnet

   Collaborator

   More actions

   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?
4. EdCharbeneau commented on Feb 28, 2022

   

   EdCharbeneau

   on Feb 28, 2022

   Last edited by EdCharbeneau

   Contributor

   More actions

   @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
5. Gambero81 commented on Mar 1, 2022

   

   Gambero81

   on Mar 1, 2022

   Author

   More actions

   @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.
6. egil commented on Mar 1, 2022

   

   egil

   on Mar 1, 2022

   Member

   More actions

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

   locked and limited conversation to collaborators on Mar 1, 2022
8. egil

   converted this issue into a discussion #651 on Mar 1, 2022