Blazored / Typeahead

Typeahead control for Blazor applications
https://blazored.github.io/Typeahead/
MIT License
442 stars 103 forks source link

[Question] Test in bUnit #178

Closed brettwinters closed 3 years ago

brettwinters commented 3 years ago

Hello

I'm trying to test Typeahead using bUnit, but when I trigger events on the <input> part of the control to load the results then the results are not rendered.

Using BlazorWebAssembly demo as the target

    public class IndexTests : TestContext
    {
        public IndexTests()
        {
            Services.AddMockJSRuntime();
        }

        [Fact]
        public void Test1()
        {
            var cut = RenderComponent<BlazorWebAssembly.Pages.Index>();

            var inputElement = cut.Find(".blazored-typeahead__input");

            //or any other combinations
            inputElement.Focus();
            inputElement.KeyUp("a");

            //fails
            Assert.NotNull(cut.Find(".blazored-typeahead__results"));
        }
    }

the control is rendered successfully with the following markup as follows, which looks correct to me

<div class="blazored-typeahead__controls">
    <input blazor:onkeyup="7" blazor:onblur="8" blazor:onfocus="9" autocomplete="off" type="text" class="blazored-typeahead__input" value="" blazor:oninput="18" blazor:elementreference="">
</div>

Any ideas what I'm doing wrong?

Actually if someone could show me a demo of how they've comprehensively tested this control using bUnit that would be very useful

Thanks in advance

brettwinters commented 3 years ago

Oops, while looking through the source for another issue I found that there is a delay timer of 250ms in the event handler. Adding an extra delay into the test solved the problem as follows:

cut.Find(".blazored-typeahead__input").Input("your_search_string_here");
await Task.Delay(350); //<--add a delay here
var results = cut.FindAll(".blazored-typeahead__result").Select(e => e.TextContent.Trim());

Sorry about that...