Blazor WASM Inject HttpClient and NavigationManager as interfaces

[Julien-Marpault]

In Blazor WASM HttpClient and NavigationManager are part of default injected services, but they are through their concrete types and not interfaces.

We have to inject them in specific services to be able to mock in unit testing.

Is possible to add interfaces to inject both of them ?

Thanks.

[javiercn]

@JulienM28 thanks for contacting us.

WRT to HttpClient that is something we don't control. It is however, very unlikely .NET will define an interface for it.

That said, you can create your own interface and inject it yourself into your own services or just inject an HttpMessageHandler for testing purposes into your service.

With regards to the navigation manager, we don't plan to offer an interface at the moment as that limits our ability to evolve the class in the future and implementing a class that can be used for test purposes is trivial.

[pranavkm]

Isn't NavigationManager abstract? You should be able to mock it for tests: https://github.com/dotnet/aspnetcore/blob/master/src/Components/Components/test/NavigationManagerTest.cs#L95

[Julien-Marpault]

My bad NavigationManager is abstract effectively.

For HttpClient we usually make an HttpClientService and mock it. But it's his only pupose ans if we were able to mock th HttpClient directly it could be nice.

Thanks.

[pranavkm]

As of 3.2-preview2, HttpClient is no longer injected by default. It's part of the application template. You can consider using IHttpClientFactory in your application since that's easy to mock.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

[tncbbthositg]

I don't have much to add, but, I'm currently having good luck with Richard Szalay's MockHttp.

I have a convenience extension method:

    public static class IServiceCollectionExtensions {
        private static readonly Uri BASE_ADDRESS = new Uri("https://my-super-awesome-app");

        public static MockHttpMessageHandler AddMockHttpClient(this IServiceCollection services) {
            var mockHttp = new MockHttpMessageHandler();

            var httpClient = new HttpClient(mockHttp) { BaseAddress = BASE_ADDRESS };
            services.AddSingleton<HttpClient>(httpClient);

            return mockHttp;
        }
    }

I can use it in my tests like this (pseudocode) with Bunit:

        private MockHttpMessageHandler mockHttp;

        public FancyComponentTest() {
            mockHttp = Services.AddMockHttpClient();
        }

        void FancyComponentDoesFancyStuff() {
            mockHttp.AutoFlush = false;
            mockHttp
                .Expect("/api/getFancyData")
                .Respond("application/json", "{ \"name\": \"Pip\" }");

            var cut = RenderComponent<FancyComponent>();
            cut.MarkupMatches("");

            mockHttp.Flush();
            WaitForAssertion(() =>
                cut.MarkupMatches("<h1>Hello Pip!!</h1>")
            );

            mockHttp.VerifyNoOutstandingExpectation();
        }