How to write a bUnit test for SfAutoComplete to select item

[Ben Croughs]

Hello,

we would like to write a bUnit test to select an item from a SfAutoComplete component. And check if a change event was triggered.

I already prepared some sample code to make it easier to understand our problem. We have an SfAutoComplete, in the sample you can select 'Boom', and you will get the temperature in Belgium - Boom.

Now we would like a bUnit test to test that behavior. There is already a test project and everything in place, and a test called 

Index_SearchBoomDirect_ExpectData

That test now fails, we would like to get it working.

We also have a multi select in our application, and we found the solution for this on this forum link
https://www.syncfusion.com/forums/172141/how-can-i-select-a-value-in-an-sfdropdown-during-a-bunit-test

Please provide us with a solution for the SfAutoComplete

You can find the code on url: https://github.com/bc3/bUnit-SfAutoCompleteTest

Many thx

[Mohanraj Mathaiyan]

Hi Ben Croughs,

We are Currently validating your requirement, we will update the possible details within two business days(25/7/2022)

Regards,

Mohanraj M

[Deepak Ramakrishnan]

Hi Ben,

We have created bUnit testcase for AutoComplete component with change event functionality . In that we have tested the following value change cases

1.Value selection using mouse click

2.Dynamic value changing (programmatically)

3.By clicking on clear button

[Autocomplete component ]

[Fact]

        public async Task ChangeEventArgs()

        {

            var isDynamicChange = false;

            var isClearChange = false;

            var data = GetDataItems();

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

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

            dropdown.SetParametersAndRender(param => param

            .AddChildContent<AutoCompleteEvents<string, Countries>>(events => events

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

            {

                if (isDynamicChange)

                {

                    Assert.NotNull(args.ItemData);

                    Assert.Equal("AU", args.Value);

                    Assert.False(args.IsInteracted);

                    Assert.NotNull(args.PreviousItemData);

                    isDynamicChange = false;

                } else if(isClearChange)

                {

                    Assert.Null(args.ItemData);

                    Assert.Null(args.Value);

                    Assert.True(args.IsInteracted);

                    Assert.NotNull(args.PreviousItemData);

                    isClearChange = false;

                } else

                {

                    Assert.NotNull(args.ItemData);

                    Assert.Equal("CM", args.Value);

                    Assert.True(args.IsInteracted);

                    Assert.Null(args.PreviousItemData);

                }

            })

            ));

            var containerEle = dropdown.Find("input").ParentElement;

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

            await dropdown.Instance.HidePopup();

            isDynamicChange = true;

            dropdown.SetParametersAndRender(("Value", "AU"));

            await Task.Delay(200);

            var inputEle = dropdown.Find("input");

            Assert.Equal(0, dropdown.Instance.Index);

            dropdown.SetParametersAndRender(("ShowClearButton", true));

            containerEle = dropdown.Find("input").ParentElement;

            var clearEle = containerEle.Children[1];

            Assert.Contains("e-clear-icon", clearEle.ClassName);

            isClearChange = true;

            clearEle.MouseDown();

        }

[Sample Data]

public class Countries

        {

            public string Name { get; set; }

            public string Code { get; set; }

        }

 

        private List<Countries> GetDataItems()

        {

            return new List<Countries>

            {

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

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

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

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

                new Countries() { Name = "Denmark", Code = "DK" },

                new Countries() { Name = "France", Code = "FR" }

            };

        }

Let us know if you need further assistance in this.

Thanks,

Deepak R.

[Ben Croughs]

Hello Deepak R.

thx for the quick anwser, it indeed solved the issue in my sample code. Than i went on and implemented it in our main code, and i noticed I forgot to add one thing to my custom adapter. In our real solution, we have a mechanism in place that starts to search from 2 characters. see changeset https://github.com/bc3/bUnit-SfAutoCompleteTest/commit/d2198fb5aeb9d916a14eb99630bd90b0749e7293

see this code

and in your code, you do not input data (like when typing Boom in the sample), you only open the popup, and select the item x from that list.

I updated my code on github again to have a failing test, could you please also solve thi

[Mohanraj Mathaiyan]

Hi Ben,

We have created bUnit testcase for Filtering action for your requirement.

[Fact]

        public async Task DefaultFiltering()

        {

            var data = GetDataItems();

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

                    parameters.Add(p => p.DataSource, data).Add(p=>p.FilterType, Syncfusion.Blazor.DropDowns.FilterType.StartsWith).Add(p=>p.AllowFiltering, true).AddChildContent<AutoCompleteFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Name")));

            var filterInput = dropdown.Find("input");

            Assert.NotNull(filterInput);

            KeyboardEventArgs args = new KeyboardEventArgs() { Code = "a", Key = "a" };

            filterInput.NodeValue = "a";

            filterInput.Input(new ChangeEventArgs() { Value = "a" });

            filterInput.KeyUp(args);

            await Task.Delay(100);

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

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

            Assert.Equal(1, liCollection.Length);

            Assert.Equal("Australia", liCollection[0].TextContent.Replace("\n", string.Empty).Trim());

        }

Also We have created bUnit testcase for Minlength property which allows you to set the minimum search character length, the search action will be done after typed minimum number of characters specified.

Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_MinLength

[Fact(DisplayName = "less than minCharacter length for searching")]

        public async Task MinLength()

        {

            var data = GetDataItems();

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

                    parameters.Add(p => p.DataSource, data).Add(p => p.AllowCustom, true).Add(p => p.FilterType, Syncfusion.Blazor.DropDowns.FilterType.StartsWith).Add(p => p.AllowFiltering, true).AddChildContent<AutoCompleteFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Name")));

            var filterInput = dropdown.Find("input");

            KeyboardEventArgs args = new KeyboardEventArgs() { Code = "aus", Key = "aus" };

            filterInput.NodeValue = "aus";

            filterInput.Input(new ChangeEventArgs() { Value = "aus" });

            filterInput.KeyUp(args);

            await Task.Delay(300);

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

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

            Assert.Equal(1, liCollection.Length);

            Assert.Equal("Australia", liCollection[0].TextContent.Replace("\n", string.Empty).Trim());

            await dropdown.Instance.ClosePopup();

            dropdown.SetParametersAndRender(param => param.Add(p => p.MinLength, 2));

            args = new KeyboardEventArgs() { Code = "b", Key = "b" };

            filterInput.NodeValue = "b";

            filterInput.Input(new ChangeEventArgs() { Value = "b" });

            filterInput.KeyUp(args);

            await Task.Delay(100);

            var popupEles = dropdown.FindAll(".e-popup");

            Assert.True(popupEles.Count == 0, "less than minCharacter length for searching");

        }

 

Let us know if you need further assistance in this.

Regards,

Mohanraj M

[Ben Croughs]

Hey Mohanraj,

thanks for the quick response and a solution, it indeed works, both in my sample project as in our main project.

I also altered my sample code to test all cases, when typing 2,3 or 4 characters. I will keep this repo online https://github.com/bc3/bUnit-SfAutoCompleteTest, because we think their are not that much references for blazor, syncfusion and bUnit combined, so by doing this, we contribute to the community

Have a nice day,

Regards Ben

[Mohanraj Mathaiyan]

Hi Ben,

Thank you for sharing your online repository link. Please let us know if you need any further assistance.

Regards,

Mohanraj M