Unit Test SFCombobox

[kuldip sharma]

I am working on to test the Syncfusion Component  in unit test project .Net 8.

I have create an input form with some syncfusion controles.

I would like to test the SFCombobox control using unit test with fluent assertion.

Can you help me to how to test the SFCombobox in unit test project in .net 8 with searching / filtering / selecting and clear etc.

[Kokila Poovendran]

Hi Kuldip,

Thank you for reaching out.

We have validated your requirement for testing the SfComboBox component in a .NET 8 unit test project using Fluent Assertions. Below, you will find a detailed example to guide you through the process, including searching, filtering, selecting, and clearing items.

Here is an example of how you can create unit tests for the SfComboBox component:

 var dropdown = RenderComponent<SfComboBox<string, Countries>>(parameters =>

                    parameters.Add(p => p.DataSource, data).AddChildContent<ComboBoxFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Code")));

            dropdown.SetParametersAndRender(param => param

            .AddChildContent<ComboBoxEvents<string, Countries>>(events => events.Add(e => e.Created, (object args) => {

                createdEventcount++;

                Assert.NotNull("Create event is triggered, when render the component");

                Assert.Equal(1, createdEventcount);

            }).Add(e=>e.OnActionBegin, (ActionBeginEventArgs args)=> {

                actionBeginCount++;

                Assert.NotNull("Actin Begin event is triggered, before generating the datasource");

                Assert.Equal(1, actionBeginCount);

            }).Add(e=>e.OnActionComplete, (ActionCompleteEventArgs<Countries> args)=> {

                actionCompleteCount++;

                Assert.NotNull("Actin Begin event is triggered, while generating the datasource");

                Assert.Equal(1, actionCompleteCount);

                Assert.Equal(args.Result.Count(), data.Count);

            }).Add(e=>e.Blur, (object args)=> {

                blurCount++;

                Assert.NotNull("Blur event is triggered");

                Assert.Equal(1, blurCount);

            }).Add(e=>e.Focus, (object args)=> {

                focusCount++;

                Assert.NotNull("Fcous event is triggered");

                Assert.Equal(1, focusCount);

            }).Add(e=>e.OnOpen, (BeforeOpenEventArgs args) =>

            {

                beforeOpenCount++;

                Assert.NotNull("Before Open event is triggered");

                Assert.Equal(1, beforeOpenCount);

            }).Add(e=>e.OnClose, (PopupEventArgs args) =>

            {

                closeCount++;

                Assert.NotNull("Closed event is triggered");

                Assert.Equal(1, closeCount);

            }).Add(e=>e.Opened, (PopupEventArgs args)=> {

                openedCount++;

                Assert.NotNull("Opened event is triggered");

                Assert.Equal(1, openedCount);

            }).Add(e=>e.OnValueSelect, (SelectEventArgs<Countries> args)=>

            {

                selectCount++;

                Assert.NotNull("Select event is triggered");

                Assert.NotNull(args.ItemData);

                Assert.Equal(1, selectCount);

            })

            .Add(e => e.ValueChange, (ChangeEventArgs<string, Countries> args) =>

            {

                changeCount++;

                Assert.NotNull("Change event is triggered");

                Assert.NotNull(args.ItemData);

                Assert.Equal(1, changeCount);

            })

            ));

            await dropdown.Instance.ShowPopup();

            var popupEle = dropdown.Find(".e-popup");

            var liColl = popupEle.QuerySelectorAll("li.e-list-item");

            liColl[3].Click();

            liColl = popupEle.QuerySelectorAll("li.e-list-item");

            Assert.Contains("e-active", liColl[3].ClassName);

            var focusItem = popupEle.QuerySelector("li.e-item-focus");

            Assert.Null(focusItem);

<SfComboBox TValue="string"Placeholder="e.g. Australia"TItem="Country" Width="300px" @bind-Value="@DropVal" DataSource="@Countries">

    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>

</SfComboBox>

@code {

    public string DropVal = "Canada";

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

    List<Country> Countries = new List<Country>

    {

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

For more details on unit testing Blazor components, you can refer to the following resources:

• Unit Testing Blazor Components
• Syncfusion Forums - Unit Testing