Support controlling render modes and RendererInfo during testing #1596
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| --- | ||
| uid: render-modes | ||
| title: Render modes and RendererInfo | ||
| --- | ||
|
|
||
| # Support for render modes and `RendererInfo` | ||
| This article explains how to emulate different render modes and `RendererInfo` in bUnit tests. | ||
|
|
||
| Render modes in Blazor Web Apps determine the hosting model and interactivity of components. A render mode 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, see 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.ComponentParameterCollectionBuilder`1.SetAssignedRenderMode(Microsoft.AspNetCore.Components.IComponentRenderMode)> method when writing in a C# file. In a razor file use the `@rendermode` directive. Both take 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. | ||
|
|
||
| For example `MovieComponent.razor`: | ||
| ```razor | ||
| @if (AssignedRenderMode is null) | ||
| { | ||
| // The render mode is Static Server | ||
| <form action="/movies"> | ||
| <input type="text" name="titleFilter" /> | ||
| <input type="submit" value="Search" /> | ||
| </form> | ||
| } | ||
| else | ||
| { | ||
| // The render mode is Interactive Server, WebAssembly, or Auto | ||
| <input @bind="titleFilter" /> | ||
| <button @onclick="FilterMovies">Search</button> | ||
| } | ||
| ``` | ||
|
|
||
| The following example shows how to test the above component to check both render modes: | ||
|
|
||
| # [C# test code](#tab/csharp) | ||
|
|
||
| ```csharp | ||
| [Fact] | ||
| public void InteractiveServer() | ||
| { | ||
| // Act | ||
| var cut = RenderComponent<MovieComponent>(ps => ps | ||
| .SetAssignedRenderMode(RenderMode.InteractiveServer)); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches(""" | ||
| <input diff:ignoreAttributes /> | ||
| <button>Search</button> | ||
| """); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void StaticRendering() | ||
| { | ||
| // Act | ||
| var cut = RenderComponent<MovieComponent>(); | ||
| // This is the same behavior as: | ||
| // var cut = RenderComponent<MovieComponent>(ps => ps | ||
| // .SetAssignedRenderMode(null)); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches(""" | ||
| <form action="/movies"> | ||
| <input type="text" name="titleFilter" /> | ||
| <input type="submit" value="Search" /> | ||
| </form> | ||
| """); | ||
| } | ||
| ``` | ||
|
|
||
| # [Razor test code](#tab/razor) | ||
|
|
||
| ```razor | ||
| @inherits TestContext | ||
| @code { | ||
| [Fact] | ||
| public void InteractiveServer() | ||
| { | ||
| // Act | ||
| var cut = Render(@<MovieComponent @rendermode="RenderMode.InteractiveServer" />); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches(@<text> | ||
| <input diff:ignoreAttributes /> | ||
| <button>Search</button> | ||
| </text>); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void StaticRendering() | ||
| { | ||
| // Act | ||
| var cut = Render(@<MovieComponent />); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches(@<form action="/movies"> | ||
| <input type="text" name="titleFilter" /> | ||
| <input type="submit" value="Search" /> | ||
| </form>); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| *** | ||
|
|
||
| ## Setting the `RendererInfo` during testing | ||
| To control the `ComponentBase.RendererInfo` property during testing, use the <xref:Bunit.TestContextBase.SetRendererInfo(Microsoft.AspNetCore.Components.RendererInfo)> method on the `TestContext` class. The `SetRendererInfo` method takes an nullable `RendererInfo` object as a parameter. Passing `null` will set the `ComponentBase.RendererInfo` to `null`. | ||
|
|
||
| A component (`AssistentComponent.razor`) might check if interactivity is given to enable a button: | ||
|
|
||
| ```razor | ||
| @if (RendererInfo.IsInteractive) | ||
| { | ||
| <p>Hey I am your assistant</p> | ||
| } | ||
| else | ||
| { | ||
| <p>Loading...</p> | ||
| } | ||
| ``` | ||
|
|
||
| In the test, you can set the `RendererInfo` to enable or disable the button: | ||
|
|
||
| ```csharp | ||
| [Fact] | ||
| public void SimulatingPreRenderingOnBlazorServer() | ||
| { | ||
| // Arrange | ||
| SetRendererInfo(new RendererInfo(rendererName: "Static", isInteractive: false)); | ||
|
|
||
| // Act | ||
| var cut = RenderComponent<AssistentComponent>(); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches("<p>Loading...</p>"); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void SimulatingInteractiveServerRendering() | ||
| { | ||
| // Arrange | ||
| SetRendererInfo(new RendererInfo(rendererMode: "Server", isInteractive: true)); | ||
|
|
||
| // Act | ||
| var cut = RenderComponent<AssistentComponent>(); | ||
|
|
||
| // Assert | ||
| cut.MarkupMatches("<p>Hey I am your assistant</p>"); | ||
| } | ||
| ``` | ||
|
|
||
| > [!NOTE] | ||
| > If a component under test uses the `ComponentBase.RendererInfo` property and the `SetRendererInfo` on `TestContext` hasn't been passed in a `RendererInfo` object, the renderer will throw an exception. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| #if NET9_0_OR_GREATER | ||
| namespace Bunit.Rendering; | ||
|
|
||
| /// <summary> | ||
| /// Represents an exception that is thrown when a component under test is trying to access the 'RendererInfo' property, which has not been specified. | ||
| /// </summary> | ||
| public sealed class MissingRendererInfoException : Exception | ||
| { | ||
| /// <summary> | ||
| /// Initializes a new instance of the <see cref="MissingRendererInfoException"/> class. | ||
| /// </summary> | ||
| public MissingRendererInfoException() | ||
| : base(""" | ||
| A component under test is trying to access the 'RendererInfo' property, which has not been specified. Set it via TestContext.Renderer.SetRendererInfo. | ||
|
|
||
| For example: | ||
|
|
||
| public class SomeTestClass : TestContext | ||
| { | ||
| [Fact] | ||
| public void SomeTestCase() | ||
| { | ||
| SetRendererInfo(new RendererInfo("Server", true)); | ||
| ... | ||
| } | ||
| } | ||
|
|
||
| The four built in render names are 'Static', 'Server', 'WebAssembly', and 'WebView'. | ||
|
|
||
| Go to https://bunit.dev/docs/interaction/render-modes for more information. | ||
| """) | ||
| { | ||
| HelpLink = "https://bunit.dev/docs/interaction/render-modes"; | ||
| } | ||
| } | ||
| #endif |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| #if NET9_0_OR_GREATER | ||
| namespace Bunit.Rendering; | ||
|
|
||
| /// <summary> | ||
| /// Represents an exception that is thrown when a component under test has mismatching render modes assigned between parent and child components. | ||
| /// </summary> | ||
| public sealed class RenderModeMisMatchException : Exception | ||
| { | ||
| /// <summary> | ||
| /// Initializes a new instance of the <see cref="MissingRendererInfoException"/> class. | ||
| /// </summary> | ||
| public RenderModeMisMatchException() | ||
| : base(""" | ||
| A component under test has mismatching render modes assigned between parent and child components. | ||
| Ensure that the render mode of the parent component matches the render mode of the child component. | ||
| Learn more about render modes at https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-mode-propagation. | ||
| """) | ||
| { | ||
| HelpLink = "https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-mode-propagation"; | ||
| } | ||
| } | ||
| #endif |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This and the
ToRenderFragmentmethod should probably have been on the builder, but that we can move in V2, where the types are internal.