Docs: inject services

Author: egil

docs/samples/components/WeatherForecastService.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Bunit.Docs.Samples
+{
+  public interface IWeatherForecastService
+  {
+    Task<WeatherForecast[]> GetForecastAsync(DateTime startDate);
+  }
+
+  public class WeatherForecast
+  {
+    public DateTime Date { get; set; }
+
+    public int TemperatureC { get; set; }
+
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+    public string Summary { get; set; }
+  }
+
+  public class WeatherForecastService : IWeatherForecastService
+  {
+    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+      => Task.FromResult(Array.Empty<WeatherForecast>());
+  }
+}

docs/samples/components/WeatherForecastTabel.razor

@@ -0,0 +1,4 @@
+@code 
+{
+  [Parameter] public IEnumerable<WeatherForecast> Forecasts { get; set; }
+}

docs/samples/components/WeatherForecasts.razor

@@ -0,0 +1,24 @@
+@inject IWeatherForecastService ForecastService
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from a service.</p>
+
+@if (Forecasts is null)
+{
+  <p><em>Loading...</em></p>
+}
+else
+{
+  <WeatherForecastTabel Forecasts=@Forecasts />
+}
+
+@code 
+{
+  public WeatherForecast[] Forecasts { get; private set; }
+
+  protected override async Task OnInitializedAsync()
+  {
+    Forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+  }
+}

docs/samples/tests/razor/WeatherForecastsSnapshotTest.html

@@ -0,0 +1,16 @@
+@inherits TestComponentBase
+
+@code
+{
+  void RegisterWeatherForecastServices(SnapshotTest test)
+  {
+    test.Services.AddSingleton<IWeatherForecastService>(new WeatherForecastService());
+  }
+}
+
+<SnapshotTest Setup="RegisterWeatherForecastServices">
+  <TestInput>
+    <WeatherForecasts />
+  </TestInput>
+  <ExpectedOutput>...</ExpectedOutput>
+</Fixture>

docs/samples/tests/razor/WeatherForecastsTest.razor

@@ -0,0 +1,24 @@
+@inherits TestComponentBase
+
+<Fixture Setup="RegisterWeatherForecastServices" 
+         Test="VerifyServiceInjectedCorrectly">
+  <ComponentUnderTest>
+    <WeatherForecasts />
+  </ComponentUnderTest>
+  @code
+  {
+    void RegisterWeatherForecastServices(Fixture fixture)
+    {
+      fixture.Services.AddSingleton<IWeatherForecastService>(new WeatherForecastService());
+    }
+
+    void VerifyServiceInjectedCorrectly(Fixture fixture)
+    {
+      // Act - get component under test
+      var cut = fixture.GetComponentUnderTest<WeatherForecasts>();
+
+      // Assert 
+      Assert.NotNull(cut.Instance.Forecasts);
+    }
+  }
+</Fixture>

docs/samples/tests/xunit/WeatherForecastsTest.cs

@@ -0,0 +1,30 @@
+using Xunit;
+using Bunit;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.DependencyInjection;
+
+using static Bunit.ComponentParameterFactory;
+
+namespace Bunit.Docs.Samples
+{
+  public class WeatherForecastsTest
+  {
+    [Fact]
+    public void ServicesIsInjectedCorrectly()
+    {
+      using var ctx = new TestContext();
+
+      // Register services
+      ctx.Services.AddSingleton<IWeatherForecastService>(new WeatherForecastService());
+
+      // RenderComponent will inject the service in the WeatherForecasts component
+      // when it is instantiated and rendered.
+      var cut = ctx.RenderComponent<WeatherForecasts>();
+
+      // Assert that service is injected
+      Assert.NotNull(cut.Instance.Forecasts);
+    }
+  }
+}

docs/site/docs/providing-input/inject-services-into-components.md

@@ -5,4 +5,47 @@ title: Injecting Services into Components Under Test
 
 # Injecting Services into Components Under Test
 
-TODO!
+It is common that components under test has a dependency on services, injected into them through the `@inject IMyService MyService` syntax in .razor files, or the `[Inject] private IMyService MyService { get; set; }` syntax in .cs files.
+
+This is supported in bUnit through the `Services` collection on the `ITestContext` types that is used in both C# and Razor based tests. It allows services to be registered, how it is done in production code in `Startup.cs` in Blazor Server projects and in `Program.cs` in Blazor Wasm projects.
+
+In bUnit, you register the services in the `Services` collection _before_ you render a component under test. 
+
+The following sections shows how to do this in C# and Razor based tests. The examples will test the `<WeatherForecasts>` component listed below, that depends on the `IWeatherForecastService` service, injected in line 1:
+
+[!code-html[WeatherForecasts.razor](../../../samples/components/WeatherForecasts.razor?highlight=1)]
+
+## Injecting Services in C# Based Tests
+
+Here is a C# based test that registers the `IWeatherForecastService` in the `Services` collection, which is needed by the `<WeatherForecasts>` component listed above.
+
+[!code-csharp[WeatherForecastsTest.cs](../../../samples/tests/xunit/WeatherForecastsTest.cs?start=17&end=27&highlight=4)]
+
+The highlighted line shows how the `IWeatherForecastService` is registered in the test context's `Services` collection, which is just a standard [`IServiceCollection`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.iservicecollection), using the standard .NET Core DI services method, [`AddSingleton`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.servicecollectionserviceextensions.addsingleton?view=dotnet-plat-ext-3.1#Microsoft_Extensions_DependencyInjection_ServiceCollectionServiceExtensions_AddSingleton__1_Microsoft_Extensions_DependencyInjection_IServiceCollection___0_).
+
+> [!NOTE]
+> The `AddSingleton()` method is only available on the `Services` collection if you import the `Microsoft.Extensions.DependencyInjection` type.
+
+## Injecting Services in Razor Based Tests
+
+Here is a Razor based test that registers the `IWeatherForecastService` in the `Services` collection during the `Setup` methods, which is needed by the `<WeatherForecasts>` component listed above.
+
+[!code-html[WeatherForecastsTest.razor](../../../samples/tests/razor/WeatherForecastsTest.razor?highlight=10-13)]
+
+The highlighted line shows how the `IWeatherForecastService` is registered, using the standard .NET Core DI services method, [`AddSingleton`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.servicecollectionserviceextensions.addsingleton?view=dotnet-plat-ext-3.1#Microsoft_Extensions_DependencyInjection_ServiceCollectionServiceExtensions_AddSingleton__1_Microsoft_Extensions_DependencyInjection_IServiceCollection___0_).
+
+This can either be done via the `Fixture`'s `Setup` method as in this example, if you want to separate the service registration from the test method, or it can be done in the test method _before_ calling `GetComponentUnderTest()`.
+
+In the following example shows how to do this with `<SnapshotTest>` tests:
+
+[!code-html[WeatherForecastsTest.razor](../../../samples/tests/razor/WeatherForecastsSnapshotTest.html?highlight=5-8)]
+
+> [!TIP]
+> If multiple Razor tests share the same setup logic, they can share the same dedicated setup method as well.
+
+> [!NOTE]
+> The `AddSingleton()` method is only available on the `Services` collection if you import the `Microsoft.Extensions.DependencyInjection` type.
+
+## Further Reading
+
+A closely related topic is mocking. To learn more about mocking in bUnit, go to the <xref:mocking> page.

docs/site/docs/toc.md

@@ -7,7 +7,7 @@
 
 # [Providing Input](xref:providing-input)
 ## [Parameters and Cascading Values](xref:passing-parameters-to-components)
-## [Inject Services](xref:inject-services-into-components)
+## [Inject Services into Components](xref:inject-services-into-components)
 ## [Configure 3rd Party Libraries](xref:configure-3rd-party-libs)
 
 # [Interaction](xref:interaction)