Skip to content

Commit

Permalink
docs: Added docs and exposes via TestContext
Browse files Browse the repository at this point in the history
  • Loading branch information
linkdotnet committed Nov 27, 2024
1 parent 948af35 commit d6f4bbc
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 1 deletion.
1 change: 1 addition & 0 deletions docs/site/docs/interaction/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ This section covers the various ways to interact with a component under test, e.
- **<xref:trigger-renders>:** This covers how to manually trigger a render cycle for a component under test.
- **<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.
- **<xref:dispose-components>:** This covers how to dispose components and their children.
- **<xref:render-modes>:** This covers the different render modes and their interaction with bUnit.
62 changes: 62 additions & 0 deletions docs/site/docs/interaction/render-modes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
uid: render-modes
title: Support for render modes and renderer info
---

# Support for render modes and the renderer info
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.

## Setting the render mode for a component under test
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:
* [`InteractiveAutoRenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactiveautorendermode?view=aspnetcore-9.0)
* [`InteractiveServerRendeMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactiveserverrendermode?view=aspnetcore-9.0)
* [`InteractiveWebAssemblyRenderMode`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.interactivewebassemblyrendermode?view=aspnetcore-9.0)

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.


> [!NOTE]
> Strictly speaking, this feature is available since `net8.0`. With `net9.0` Blazor exposes the information on `ComponentBase` via the `AssignedRenderMode` property.
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:

```razor
@inherits TestContext
@code {
[Fact]
public void WhenRenderModeNonInteractive_DisableButton()
{
// Arrange
var cut = RenderComponent<MyComponent>(ps => ps.SetAssignedRenderMode(RenderMode.InteractiveServer));
```

## Setting the `RendererInfo` for a component under test
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:

```razor
<button @onclick="Send" disabled="@(!RendererInfo.IsInteractive)">
Send
</button>
```

In the test, you can set the `RendererInfo` to enabl or disable the button:

```csharp
@inherits TestContext

@code {
[Fact]
public void WhenRenderModeNonInteractive_DisableButton()
{
// Arrange
SetRendererInfo(new RendererInfo("Server", false));

// Act
var cut = RenderComponent<MyComponent>();

// Assert
cut.Find("button").Attributes["disabled"].ShouldBe("disabled");
}
}
```
10 changes: 10 additions & 0 deletions src/bunit.core/TestContextBase.cs
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,14 @@ public void DisposeComponents()
{
Renderer.DisposeComponents();
}

#if NET9_0_OR_GREATER
/// <summary>
/// Sets the <see cref="RendererInfo"/> for the renderer.
/// </summary>
public void SetRendererInfo(RendererInfo? rendererInfo)
{
Renderer.SetRendererInfo(rendererInfo);
}
#endif
}
2 changes: 1 addition & 1 deletion tests/bunit.core.tests/Rendering/RenderModeTests.razor
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
[Fact(DisplayName = "TestRenderer provides RendererInfo")]
public void Test001()
{
Renderer.SetRendererInfo(new RendererInfo("Server", true));
SetRendererInfo(new RendererInfo("Server", true));
var cut = RenderComponent<RendererInfoComponent>();

cut.MarkupMatches(
Expand Down

0 comments on commit d6f4bbc

Please sign in to comment.