How to wait for OnInitializedAsync with HttpClient?

[kenakamu]

thanks for great library first of all.

I still cannot figure out how to unit test a page/component which has HttpClient injection and call the service in component lifecycle such as OnInitializedAsync.

Any sample or advice?

[egil]

Hi @kenakamu, thanks for the kind words.

As for your question, without more information, it's a little hard to help. Can you provide a (simple) sample of the component you are trying to test, and the test you are trying to write, then I will be happy to assist.

[StefH]

@kenakamu I think you mean this:

If you have a component which takes an injected interface as dependency, you can just mock this dependency and setup your test to use this mock.

private readonly Mock<IHttpClient> _httpClientMock;

and then setup:

Services.AddSingleton(_stringLocalizerMock.Object);

For an example which uses an injected IStringLocalizer, see:
https://github.com/Blazored/FormExtensions/blob/master/tests/Blazored.FormExtensions.Tests/LabelTextIntegrationTests.cs#L22

And you can use your mocking framework of your own choice.

[kenakamu]

I could mock the HttpClient by looking into old commit. The issue is I don't know how to "wait" for the http call to be completed. I am adding unit test for following sample code which comes from blazor workshop.

@page "/"
@inject HttpClient HttpClient

<div class="main">
    <ul class="pizza-cards">
        @if (specials != null)
        {
            @foreach (var special in specials)
            {
                <li style="background-image: url('@special.ImageUrl')">
                    <div class="pizza-info">
                        <span class="title">@special.Name</span>
                        @special.Description
                        <span class="price">@special.GetFormattedBasePrice()</span>
                    </div>
                </li>
            }
        }
    </ul>
</div>

@code {
    List<PizzaSpecial> specials;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>("specials");
    }
}

When I render index page, the body doesn't have

as expected, now I dont know how to wait OnInitilizeAsync complete so that I can assert generated li.

[egil]

ahh, in that case you should look to the methods WaitForState or WaitForAssertion, e.g.:

[Fact]
public void Test()
{
    var pizzaSpecials = ... // arrange some pizza specials
    var mockHttpClient = ... // setup a mock http client
    Services.AddSingleton<HttpClient>(mockHttpClient);
    
    var cut = RenderComponent<ComponentName>();
    mockHttpClient.SetResponse(pizzaSpecials); // e.g. do whatever is needed to provide an answer to the component through the mock http client

    cut.WaitForState(() => cut.FindAll(".pizza-cards > li").Count > 0); // blocks until the predicate passes or the timeout is passed (default 1 sec).

   cut.WaitForAssertion(() => Assert.Equal(pizzaSpecials.Count, cut.FindAll(".pizza-cards > li").Count)); // blocks until the assertion doesn't throw, i.e. passes.
}

Ps. if you want to avoid that null check in your component, you can use Array.Empty<PizzaSpecial>, e.g.:

@page "/"
@inject HttpClient HttpClient

<div class="main">
    <ul class="pizza-cards">
            @foreach (var special in specials)
            {
                <li style="background-image: url('@special.ImageUrl')">
                    <div class="pizza-info">
                        <span class="title">@special.Name</span>
                        @special.Description
                        <span class="price">@special.GetFormattedBasePrice()</span>
                    </div>
                </li>
            }
    </ul>
</div>

@code {
    ICollection<PizzaSpecial> specials = Array.Empty<PizzaSpecial>();

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>("specials");
    }
}

[egil]

Here is a related issue on mocking http client: #56

[kenakamu]

Okay, I missed

 mockHttpClient.SetResponse(pizzaSpecials); // e.g. do what

Thanks a lot