Skip to content

Commit d6f4bbc

Browse files
committed
docs: Added docs and exposes via TestContext
1 parent 948af35 commit d6f4bbc

File tree

4 files changed

+74
-1
lines changed

4 files changed

+74
-1
lines changed

docs/site/docs/interaction/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ This section covers the various ways to interact with a component under test, e.
1111
- **<xref:trigger-renders>:** This covers how to manually trigger a render cycle for a component under test.
1212
- **<xref:awaiting-async-state>:** This covers how to await one or more asynchronous changes to the state of a component under test before continuing the test.
1313
- **<xref:dispose-components>:** This covers how to dispose components and their children.
14+
- **<xref:render-modes>:** This covers the different render modes and their interaction with bUnit.
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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+
```

src/bunit.core/TestContextBase.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,14 @@ public void DisposeComponents()
118118
{
119119
Renderer.DisposeComponents();
120120
}
121+
122+
#if NET9_0_OR_GREATER
123+
/// <summary>
124+
/// Sets the <see cref="RendererInfo"/> for the renderer.
125+
/// </summary>
126+
public void SetRendererInfo(RendererInfo? rendererInfo)
127+
{
128+
Renderer.SetRendererInfo(rendererInfo);
129+
}
130+
#endif
121131
}

tests/bunit.core.tests/Rendering/RenderModeTests.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[Fact(DisplayName = "TestRenderer provides RendererInfo")]
88
public void Test001()
99
{
10-
Renderer.SetRendererInfo(new RendererInfo("Server", true));
10+
SetRendererInfo(new RendererInfo("Server", true));
1111
var cut = RenderComponent<RendererInfoComponent>();
1212

1313
cut.MarkupMatches(

0 commit comments

Comments
 (0)