Selecting items in RadzenDropDown with BUNIT

Radzen.Blazor Components
1

Hi folks,

I have a question that I'm not sure you'll have the answer to, but I'm hoping someone here might be able to point me in a decent direction. I've changed my actual values here as it's company source.

I have a Radzen Dropdown with a few items in it.

   <div class="row mb-4">
                        <div class="col-md-4 align-items-center d-flex">
                            <RadzenLabel Text="Test Label:" id="test-type-label"/>
                        </div>
                        <div class="col">
                            <RadzenDropDown
                                AllowClear="false"
                                Data="@AvailableTypes"
                                TextProperty="TestTypeName "
                                @bind-Value="SelectedTestTypeModel"
                                style="width: 100%;"
                                Name="TestType"
                                id="test-type-input"/>
                            <RadzenRequiredValidator Component="TestType" Style="position: absolute" id="test-type-validation"/>
                        </div>
                    </div>

Here's an example of a similar C# class it's bound to.

   public TestTypeModel(TestType testType)
    {
        TestType = testType;
        TestTypeName = Enum.GetName(TestType);
    }

    public TestType TestType { get; }

    public string TestTypeName { get; }

The page I'm using toggles the visibility of components beneath this dropdown when the value of the dropdown changes and re-renders the component.

The component definition looks like:

 <TestComponent>
                        Visible="@(SelectedTestTypeModel.TestType == TestType.New)">
</TestComponent>

This works great through the UI.

Problem:
I have a unit test that renders the page with BUNIT.

        using TestContext context = new TestContext();
        // does some common registrations for arrows/input file/popup
        context.SetupCommonJsInterop();
        // adds a mock client to the component
        AddMockClientToService(context);
       
        IRenderedComponent<TestPage> testPage = context.RenderComponent<TestPage>();
        
       // I then can find the dropdown by the id tag I've applied to the control or by finding the li with the appropriate text. 

       // here's what it looks like rendered  
       <div class="row mb-4">
           <div class="col-md-4 align-items-center d-flex">    
               <label class="rz-label" id="test-type-label" blazor:elementReference="cfde00ae-7391-42f3-9ddb-bf88a108838c">Test Type:</label>
            </div>
            <div class="col">   
                <div class="rz-dropdown valid" onmousedown="Radzen.activeElement = null" blazor:onclick="6" style="width: 100%;" tabindex="0" blazor:onkeydown="7" id="test-type-input" blazor:onfocus="8" blazor:elementReference="">
        <div class="rz-helper-hidden-accessible">
            <input style="width:100%" aria-haspopup="listbox" readonly type="text" tabindex="-1" name="TestType" value="NamespacedOmmited.TestTypeModel" aria-label="New" />
        </div>

            <label class="rz-dropdown-label rz-inputtext ">
                Update
            </label>

        <div class="rz-dropdown-trigger  rz-corner-right">
            <span class="rz-dropdown-trigger-icon  rzi rzi-chevron-down"></span>
        </div>

        <div id="popup-test-type-input" class="rz-dropdown-panel    " style="display:none; box-sizing: border-box">
            <div class="rz-dropdown-items-wrapper" style="max-height: 200px;overflow-x: hidden">
                <ul class="rz-dropdown-items rz-dropdown-list    " role="listbox" blazor:elementReference="">
    <li role="option" class="rz-dropdown-item  rz-state-highlight" aria-label="&gt;New" blazor:onmousedown:preventDefault blazor:onmousedown="9" blazor:onclick:preventDefault blazor:onclick="10">
        <span>
New</span>
    </li>
    <li role="option" class="rz-dropdown-item " aria-label="&gt;Update" blazor:onmousedown:preventDefault blazor:onmousedown="11" blazor:onclick:preventDefault blazor:onclick="12">
        <span>
Update        </span>
    </li>
                </ul>
            </div>
        </div>
    </div>
     
     // test code: 
     IRefreshableElementCollection<IElement> refreshableElementCollection = inlayPage.FindAll("li");
    IElement element = refreshableElementCollection
            .First(x => x.Text().StripLeadingTrailingSpaces().StripLineBreaks() == "New");

     element.Click();
    // no change to rendered css even if you manually re-render with 
    testPage.Render();

I probably should of provided a sample app for this looking at it all now....

Anyways I looked through the existing support tickets especially this one... How to test Radzen Dropdown with bunit?

Which lead me to hunt through the existing unit tests for the components/rendering and I didn't find any for selecting items in the dropdowns. I found some that select buttons for the date time picker which uses a dropdown of sorts.

Does anyone have a recommendation on how to approach this problem? Is it possible to programatically select an item in the dropdown at the moment?

I mostly want to test to make sure that the proper component gets rendered without making the property that we use to determine visibility public if it at all possible.

Thanks for your help,
Chris

2

Hi @ctrent12,

Does it have to be through the UI? Can't use use the Value or SelectedItem property of RadzenDropDown? Otherwise you can try "clicking" an element with class class="rz-dropdown-item".

3

I'll try shortly and follow up. Really appreciate the help.

4

Sadly none of these worked for me.

The good news is I did end up figuring a way to set it.
Apparently the Dropdown Instance has a SelectItem method in it.
I've demonstrated it below for someone else who comes along looking for this answer. Note the test assertions are from NUNIT.

 using Bunit.TestContext testContext = new Bunit.TestContext();
        testContext.JSInterop.SetupVoid("Radzen.preventArrows", _ => true);
        testContext.JSInterop.SetupVoid("Radzen.togglePopup", _ => true);

        IRenderedComponent<RadzenPage> radzenPage = testContext.RenderComponent<RadzenPage>();
        IRenderedComponent<RadzenDropDown<TestModel>> dropdown = radzenPage.FindComponent<RadzenDropDown<TestModel>>();

        radzenPage.InvokeAsync(() =>
        {
            IEnumerable<TestModel>? instanceData = dropdown.Instance.Data as IEnumerable<TestModel>;
            dropdown.Instance.SelectItem(instanceData.Last(x => x.TestType == TestType.Update));
            return Task.CompletedTask;
        });

        IRenderedComponent<TestComponent> testComponent = radzenPage.FindComponent<TestComponent>();
        Assert.That(testComponent.Instance.Visible, Is.True);

Thanks,
Chris

1 Like