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

[Kaine]

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>

                    </SfDropDownList>

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,

Tim

[Vinitha Jeyakumar]

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);

            Assert.True(containerEle.Children[1]?.ClassName.Contains("e-input-group-icon"));

            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);

            Assert.True(containerEle.Children[2]?.ClassName.Contains("e-ddl-icon"));

            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");

    liCollection[0].Click();

    Assert.Contains("AU", dropdownlist.Instance.Value);

     Assert.Contains("Australia", dropdownlist.Instance.Text);

Regards,

Vinitha