How can I put a value in an SfMultiSelect during a bUnit test?

[Piotr Siatka]

I would like to use bunit to check if filtering is working correctly, but I struggle with adding a value into the input..

None of that work:

input.KeyDown("z");

input.Change(new ChangeEventArgs("a"))

input.Input("b");

How can I put the value key by key with an input?

Thank you in advance.

[UdhayaKumar Duraisamy]

To ensure filtering in the MultiSelect component during a bUnit test, you can use the following test case:

        [Fact]

        public async Task FilteringEvent()

        {

            var data = GetDataItems();

            var isFiltered = false;

            IRenderedComponent<SfMultiSelect<string[], Countries>> dropdown = null;

            dropdown = RenderComponent<SfMultiSelect<string[], Countries>>(parameters =>

                    parameters.Add(p => p.DataSource, data).Add(p => p.Mode, VisualMode.Box).Add(p => p.AllowFiltering, true).AddChildContent<MultiSelectFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Code"))

                    .AddChildContent<MultiSelectEvents<string[], Countries>>(param => param.Add(p => p.Filtering, async (FilteringEventArgs args) =>

                    {

                        isFiltered = true;

                    })));

            await Task.Delay(100);

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

            var filterInput = inputEle;

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

            filterInput.NodeValue = "a";

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

            await Task.Delay(150);

            filterInput.KeyUp(args);

            await Task.Delay(500);

            inputEle.ParentElement.ParentElement.MouseDown();

            Assert.True(isFiltered);

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

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

            Assert.Equal(1, liCollection.Length);

        }

 

        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" }

            };

        }

 

        public class Countries

        {

            public string Name { get; set; }

            public string Code { get; set; }

        }

This test case simulates typing into the MultiSelect component and verifies that the filtering event is triggered correctly. It also checks that the filtered results are displayed as expected.

[Piotr Siatka]

That worked. Thanks!

[Kalpana Ganesan]

Hi Piotr Siatka,

You're welcome! Glad that the provided solution worked. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.