|
| 1 | +--- |
| 2 | +uid: render-modes |
| 3 | +title: Support for render modes and renderer info |
| 4 | +--- |
| 5 | + |
| 6 | +# Support for render modes and the renderer info |
| 7 | +Render modes in Blazor Web Apps determine the hosting model and interactivity of components. The render mode for example can be applied to a component using the `@rendermode` directive. The [`RendererInfo`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendererinfo?view=aspnetcore-9.0) allows the application to determine the interactivity and location of the component. For more details, check out the [Blazor render modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0) documentation. |
| 8 | + |
| 9 | +## Setting the render mode for a component under test |
| 10 | +Setting the render mode can be done via the <xref:Bunit.TestContext.SetAssignedRenderMode(Microsoft.AspNetCore.Components.IComponentRenderMode)> method. The `SetAssignedRenderMode` method takes an [`IComponentRenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.icomponentrendermode?view=aspnetcore-9.0) object as a parameter. Normally this is one of the following types: |
| 11 | + * [`InteractiveAutoRenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactiveautorendermode?view=aspnetcore-9.0) |
| 12 | + * [`InteractiveServerRendeMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactiveserverrendermode?view=aspnetcore-9.0) |
| 13 | + * [`InteractiveWebAssemblyRenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactivewebassemblyrendermode?view=aspnetcore-9.0) |
| 14 | + |
| 15 | +For ease of use the [`RenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.rendermode?view=aspnetcore-9.0) class defines all three of them. |
| 16 | + |
| 17 | + |
| 18 | +> [!NOTE] |
| 19 | +> Strictly speaking, this feature is available since `net8.0`. With `net9.0` Blazor exposes the information on `ComponentBase` via the `AssignedRenderMode` property. |
| 20 | +
|
| 21 | +This methods emulates the behavior of the `@rendermode` directive in a test environment. The following example shows how to set the render mode for a component under test: |
| 22 | + |
| 23 | +```razor |
| 24 | +@inherits TestContext |
| 25 | +
|
| 26 | +@code { |
| 27 | + [Fact] |
| 28 | + public void WhenRenderModeNonInteractive_DisableButton() |
| 29 | + { |
| 30 | + // Arrange |
| 31 | + var cut = RenderComponent<MyComponent>(ps => ps.SetAssignedRenderMode(RenderMode.InteractiveServer)); |
| 32 | +``` |
| 33 | + |
| 34 | +## Setting the `RendererInfo` for a component under test |
| 35 | +To set the `RendererInfo` for a component under test, use the `SetRendererInfo` method on the `TestContext` class. The `SetRendererInfo` method takes an optional `RendererInfo` object as a parameter. A component might check if interactivity is given to enable a button: |
| 36 | + |
| 37 | +```razor |
| 38 | +<button @onclick="Send" disabled="@(!RendererInfo.IsInteractive)"> |
| 39 | + Send |
| 40 | +</button> |
| 41 | +``` |
| 42 | + |
| 43 | +In the test, you can set the `RendererInfo` to enabl or disable the button: |
| 44 | + |
| 45 | +```csharp |
| 46 | +@inherits TestContext |
| 47 | + |
| 48 | +@code { |
| 49 | + [Fact] |
| 50 | + public void WhenRenderModeNonInteractive_DisableButton() |
| 51 | + { |
| 52 | + // Arrange |
| 53 | + SetRendererInfo(new RendererInfo("Server", false)); |
| 54 | + |
| 55 | + // Act |
| 56 | + var cut = RenderComponent<MyComponent>(); |
| 57 | + |
| 58 | + // Assert |
| 59 | + cut.Find("button").Attributes["disabled"].ShouldBe("disabled"); |
| 60 | + } |
| 61 | +} |
| 62 | +``` |
0 commit comments