Unable to get data from mocked HttpClient during OnInitializedAsync

[daveabrock]

Thanks for the wonderful library. I've just started using it.

I'm having issues waiting for a response from a mocked HttpClient call during OnInitializedAsync(). I followed the instructions in the docs and looked at #105 but get issues with a timeout before the h1 is found. Am I missing something obvious?

The class is like this:

[Inject]
protected HttpClient Http { get; set; }

private Data.Image image;

protected override async Task OnInitializedAsync()
{
   image = await Http.GetFromJsonAsync<Data.Image>("api/image");
}

The view:

@if (image != null)
{
  <h1 class="text-6xl">@image.Title</h1>
}

My test is like this:

public class ImageOfDayTest
{
    [Fact]
    public void ImageOfDayComponentRendersCorrectly()
    {
        using var ctx = new TestContext();
        var mockedHttpClient = ctx.Services.AddMockHttpClient();
        mockedHttpClient.When("/api/image").RespondJson(GetImage());

        var cut = ctx.RenderComponent<Index>();
        cut.WaitForState(() => cut.Find("h1").TextContent.Equals("My Sample Image"));
        cut.WaitForAssertion(() => 
            Assert.Equal("My Sample Image", cut.Find("h1").TextContent));
    }

    private Data.Image GetImage()
    {
        // returns a hard-coded object...
    }
}

[egil]

Hi Dave

Thanks for the kind words.

The HttpClient mock from the docs is not really battle hardened, so I cannot guarantee that it behaves correctly in all scenarios, and its shown more as proof-of-concept. Anyway, disclaimer aside, it looks as if you are setting up the mock to handle /api/image but in the component you are querying for "api/image. That might be it.

Otherwise your test looks fine. WaitForState before WaitForAssertion wont make a difference.

Related, I do advice not to depend explicitly on HttpClient in your components. Create an abstraction instead, e.g. IImageStore. That will not only make writing tests much easier, but also allow you to add caching and other things down the line, much easier, as it will all be encapsulated in your implementation of IImageStore. It will also make it much easier to create a fake image store instead of using mocks, something I generally recommend over using mocks, when it makes sense.

Hope this helps.

[mrakestraw-bbins]

Visual Studio 2019 Pro, Net 5.0

I've been doing a lot of testing with a similar example that follows the canonical:

if (private variable != null) {
// display loading
}else{
// display results
}

where the only work is done in OnInitializedAsync (using mock http or hard-coding the data makes no difference), which is guaranteed to request a render.

I cannot ever test for the secondary condition markup to appear in the component. It simply does not work. It's as if the component never re-renders. I've looked at rendercount, waited for state, and checked the diffcount. In no case does the markup ever change.

Oddly, the state of the component can show changes, though not reliably...

if I check for state immediately, no luck, but if I find the "Loading" element first, then I can check the state (directly and using WaitForState), but again never actually re-renders and shows the secondary condition markup.

Lastly, and oddly again, I have seen an exception or two where it's clear the renderer stepped through the secondary condition markup.

If anyone is interested, when I have time, I'll build a small project to reproduce the behavior in simplest form.

[egil]

If anyone is interested, when I have time, I'll build a small project to reproduce the behavior in simplest form.

I am very interested. These issues are hard enough to debug as is, so something like that would be gold.

[mrakestraw-bbins]

Tracked the problem down to the InputFile component from Microsoft.AspNetCore.Components.Forms.

If you add the following to your 'results', you'll have all kinds of problems:

<InputFile Id="sampleInputFileId" />

See attached for WeatherDisplay component with the offending problem. If you comment out the InputFile line, tests will pass.

BBINS-bUnit.zip

[egil]

Interesting @mrakestraw-bbins. I wonder whats so special about the InputFile component? Will investigate.

Would you be so kind to create an bug report issue where we can track this. It doesn't really seem to be related to HttpClient, at least according to your current findings.

[mrakestraw-bbins]

@egil Done. Thanks for listening :) #314