Unit test: How to fix a mock http error?

[grimmerj]

Hi,
I am new to Blazor and I am currently trying to test a razor component in my project.

My problem is that my test fails when I try to mock an http client. Without the line "@Inject IHttpClientFactory _httpClientFactory" in my razor component, the test does not fail whether the code for mocking the http client is in the test file or not. But when I add the line "@Inject IHttpClientFactory _httpClientFactory" in my razor file, the test fails.

What could be the problem and how can I fix it?

I want to use IHttpClientFactory for the tests because I don't want to instantiate a new http client for each component.
Is this possible?

With "@Inject HttpClient httpclient" in the razor component, we have got it to work, but would like to avoid using an explicit httpclient. Rather, we would like to use the IHttpClientFactory, as this is how the production code will be deployed.

Error:

System.InvalidOperationException : Cannot provide a value for property '_httpClientFactory' on type 'UseCasesBlazor.Client.Pages.ActionLog'. There is no registered service of type 'System.Net.Http.IHttpClientFactory'.

Stacktrace:

<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
Renderer.InstantiateComponent(Type componentType)
Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
Renderer.ProcessRenderQueue()

c# unit test file:

using …
using RichardSzalay.MockHttp;

public class ActionLogTest
{
        [Fact]
        public void ActionLogComponentRendersCorrectly()
        {
            using var ctx = new TestContext();
            
            ctx.Services.AddMudBlazorKeyInterceptor();
            ctx.Services.AddMudServices();
           
            var mockedHttpClient = ctx.Services.AddMockHttpClient();
            ctx.JSInterop.Mode = JSRuntimeMode.Loose;

            var comp = ctx.RenderComponent<ActionLog>(parameters => parameters
               ...
            );

            var h3 = comp.Find("h3");
            Assert.NotNull(h3);
        }
}

package:

public static MockHttpMessageHandler AddMockHttpClient(this TestServiceProvider services)
{
            var mockHttpHandler = new MockHttpMessageHandler();
            var httpClient = mockHttpHandler.ToHttpClient();
            httpClient.BaseAddress = new Uri("http://localhost");
            services.AddSingleton<HttpClient>(httpClient);
            return mockHttpHandler; 
}     

[linkdotnet]

Hey @grimmerj,

you get the error, because you never provide a IHttpClientFactory inside your test. I am currently a bit limited, so I can only draw you the rough idea how you could tackle the problem. You already have the possibility to create mocked HttpClient's, so the only thing missing is the connection between the factory and those mocked instances.

The following code should only draw a picture, I don't guarantee that it really works (will check that later when I have a proper setup)

public void Test()
{
    using var ctx = new TestContext();
    var factoryMock = new Mock<IHttpClientFactory>();
    ctx.Services.AddScoped(_ => factoryMock.Object);
    var mockClient = GetMockHttpClient();
    factoryMock.Setup(f => f.CreateClient()).Returns(mockClient);
    // ...
}

public static HttpClient GetMockHttpClient()
{
            var mockHttpHandler = new MockHttpMessageHandler();
            var httpClient = mockHttpHandler.ToHttpClient();
            httpClient.BaseAddress = new Uri("http://localhost");
            return httpClient; 
}     

But I would leverage a different approach: Don't have any HttpClient stuff in your Blazor components at all. You can refactor all of your calls into separate services which you then can inject into your Blazor component. Then you just have a well-defined and simple to mock service in your component and don't have to deal with this at all (at least not in your component).

[grimmerj]

Thanks for your fast answer.

What exactly do you mean by separate services? Do you mean that we need to implement separate C# files for each service we need?
Should the http be outsourced to a separate C# file that contains a class for method calls?
And should the API be called via this class?
Should the service then be brought into the razor files using dependency injection?

Like in this link?
https://blazor-university.com/dependency-injection/injecting-dependencies-into-blazor-components/

[linkdotnet]

Yes exactly like in the link described.