We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I select a value in an SfDropdown during a bUnit test?

I have a dropdown list in my Blazor component and as part of testing the component I need to select a value in the dropdown and I am unsure how to do this from the bUnit test.

The dropdown appears like this:

                    <SfDropDownList @ref="DataSelector" TValue="string" TItem="DataRecord" DataSource="DatasToSelect" Placeholder="Pick an Item" AllowFiltering="true">

                        <DropDownListFieldSettings Text="DisplayName" Value="IdString"></DropDownListFieldSettings>

                        <DropDownListEvents TItem="DataRecord" TValue="string" ValueChange="@ValueChangeHandler" ></DropDownListEvents>


In my test I get the dropdown component using:

var dropdown = cut.FindComponent<SfDropDownList<string, DataRecord>>();

How to I select a value in the dropdown?

I have tried :

dropdown.Instance.Value = "id"

but this does not select the item in the dropdown.

Do you have an example of handling dropdown controls in unit testing?

Many thanks,


1 Reply 1 reply marked as answer

VJ Vinitha Jeyakumar Syncfusion Team January 21, 2022 02:07 PM UTC

Hi Kaine,

You can select the value of the dropdown list by clicking the list items from the dropdown popup. please check the code below,

Code snippet:
var dropdownlist = RenderComponent<SfDropDownList<string, Countries>>(parameters =>
                    parameters.Add(p => p.DataSource, data));
    dropdownlist.SetParametersAndRender(Parameter => Parameter.AddChildContent<DropDownListFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Code")));
            var containerEle = dropdownlist.Find("input").ParentElement;
    Assert.Contains("e-ddl-icon", containerEle.Children[1].ClassName);
            dropdownlist.SetParametersAndRender(("ShowClearButton", true));
            containerEle = dropdownlist.Find("input").ParentElement;
            var clearEle = containerEle.Children[1];
    Assert.Contains("e-clear-icon", clearEle.ClassName);
            Assert.Contains("e-clear-icon-hide", clearEle.ClassName);
            await dropdownlist.Instance.ShowPopup();
    var popupEle = dropdownlist.Find(".e-popup");
    Assert.Contains("e-popup", popupEle.ClassName);
            var ulEle = popupEle.QuerySelector("ul");
    Assert.Contains("e-ul", ulEle.ClassName);
            var liCollection = ulEle.QuerySelectorAll("li.e-list-item");
    Assert.Contains("AU", dropdownlist.Instance.Value);
     Assert.Contains("Australia", dropdownlist.Instance.Text);


Marked as answer
Live Chat Icon For mobile
Up arrow icon