How to test Radzen Dropdown with bunit?

Radzen.Blazor Components
1

Hey,

I try to write some bunit tests for cascading dropdowns logic.

What would be the right approach to do so?

I tried to use:

cut.Find("#RadzenDropdown").Change("NewValue");

but I get ther error:

Bunit.MissingEventHandlerException : The element does not have an event handler for the event
'onchange'. It does
however have event handlers for these events, 'onmousedown', 'onkeydown'.

How would one have to use onmousedown und onkeydown to write tests for it?
I tried like so:
cut.Find("#RootCategorySelect").KeyDown(Keys.Down);
but it does not change my value.

2

You can check our tests for reference:

For example how DatePicker value change is tested:

1 Like
3

Okay I can see that you render RadzenDatePicker. I actually want to render a component which has radzen elements trigger some events and check if my logic is right.

So the test looks actually like this:

 public void EditSkill_ItCreatesNewChildHardkill()
       {
           using var ctx = new Bunit.TestContext();
           ctx.Services.AddSingleton(_skillService);
           ctx.JSInterop.Mode = JSRuntimeMode.Loose;
           var cut = ctx.RenderComponent<EditSkill>();

           cut.Find("#TypeInput").Change("Hardskill");
           cut.Find("#NameInput").Change("SomeNewTestSkill");

           cut.Find("form").Submit();

           Assert.AreEqual(new Skill() {Id = 5, Type = SkillType.Hardskill, Name = "SomeNewTestSkill", ParentSkill = null, ParentId =  0}, 
               DataHelper.QueryData<Skill>("Skill", 5, _config));
       }

I cant see how rendering a single component would help me in this case or is there a possibility to add to my my different component?

4

It doesn’t matter if it’s Radzen.Blazor component or your own custom component - the technique is the same. Radzen.Blazor components are composite components constructed with other HTML and Blazor components.

You can check bunit docs for reference:

1 Like
5

Okay I have done this beforehand. When I call var cut = ctx.RenderComponent<EditSkill>(); the Radzen Dropdown is already within the markup like so:

  <p>    <div onclick="" class="rz-dropdown valid rz-clear" blazor:onmousedown="4" style="width:300px" tabindex="0" blazor:onkeydown="5" id="RadzenDropdown" blazor:elementReference="">

So thing is when I want to change with cut.Find("#RadzenDropdown").Change("NewValue"); chosen value I was not able to do so since it only has the two handlers I stated in my first post.

So given your example above you say it would be sufficient to do something like this:

component.SetParametersAndRender(parameters => {
                parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
            });
component.Find(".rz-datepicker-next-icon").Click();

I actually dont have any parameters for my component, but it still works with SetParametersAndRender then?

6

@enchev I tried like so you said:

  cut.FindComponent<RadzenDropDown<Skill>>().SetParametersAndRender(parameters => 
               parameters.Add(p => p.Change, args =>
               {
                   new Skill {
                       Name = "RootCategorySkill", Type = SkillType.Hardskill, Id = 1, ParentId = 0
                   };
               }));

but it is giving me the error:

Bunit.Rendering.ComponentDisposedException : The component has been removed from the render tree by the renderer and is no longer available for inspection. ComponentId = 9.

any idea what is going on? When I try to use it without .FindComponent it is not working at all here.

7

Hey @OuttaSpace,

I’m afraid that I don’t have anything else to add - if you have questions about bunit you might need to ask bunit creators.

1 Like
8

Okay, thanks anyway! you tried your best