Added AddLayoutComponent to TestContext

Author: egil

CHANGELOG.md

@@ -12,29 +12,47 @@ The following section list all changes in beta-11.
 List of new features.
 
 - Two new overloads to the `RenderFragment()` and `ChildContent()` component parameter factory methods have been added that takes a `RenderFragment` as input. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - Added a `ComponentParameterCollection` type. The `ComponentParameterCollection` is a collection of component parameters, that knows how to turn those components parameters into a `RenderFragment`, which will render a component and pass any parameters inside the collection to that component. That logic was spread out over multiple places in bUnit, and is now owned by the `ComponentParameterCollection` type. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - Added additional placeholder services for `NavigationManager`, `HttpClient`, and `IStringLocalizer`, to make it easier for users to figure out why a test is failing due to missing service registration before rendering a component. By [@joro550](https://github.com/joro550) in [#223](https://github.com/egil/bUnit/pull/223).
+
 - Added `Key` class that represents a keyboard key and helps to avoid constructing `KeyboardEventArgs` object manually. The key can be passed to `KeyPress`, `KeyDown`, or `KeyUp` helper methods to raise keyboard events. The `Key` class provides static special keys or can be obtained from character or string. Keys can be combined with key modifiers: `Key.Enter + Key.Alt`.
 
-For example, this makes it easier to trigger keyboard events on an element:
+  For example, this makes it easier to trigger keyboard events on an element:
+  
+  ```csharp
+  var cut = ctx.RenderComponent<ComponentWithKeyboardEvents>();
+  var element = cut.Find("input");
+  
+  element.KeyDown(Key.Enter + Key.Control); // Triggers onkeydown event with Ctrl + Enter
+  element.KeyUp(Key.Control + Key.Shift + 'B'); // Triggers onkeyup event with Ctrl + Shift  + B
+  element.KeyPress('1'); // Triggers onkeypress event with key 1
+  element.KeyDown(Key.Alt + "<"); // Triggers onkeydown event with Alt + <
+  ```
 
-```csharp
-var cut = ctx.RenderComponent<ComponentWithKeyboardEvents>();
-var element = cut.Find("input");
+  By [@duracellko](https://github.com/duracellko) in [#101](https://github.com/egil/bUnit/issues/101).
 
-element.KeyDown(Key.Enter + Key.Control); // Triggers onkeydown event with Ctrl + Enter
-element.KeyUp(Key.Control + Key.Shift + 'B'); // Triggers onkeyup event with Ctrl + Shift + B
-element.KeyPress('1'); // Triggers onkeypress event with key 1
-element.KeyDown(Key.Alt + "<"); // Triggers onkeydown event with Alt + <
-```
-By [@duracellko](https://github.com/duracellko) in [#101](https://github.com/egil/bUnit/issues/101).
+- Added support for registering/adding "layout" components to a test context, which components should be rendered inside. This allows you to simplify the "arrange" step of a test when a component under test requires a certain render tree as its parent, e.g. a cascading value.
+  
+  For example, to pass a cascading string value `foo` to all components rendered with the test context, do the following:
+
+  ```csharp
+  ctx.AddLayoutComponent<CascadingValue<string>>(parameters => parameters.Add(p => p.Value, "foo"));
+  var cut = ctx.RenderComponent<ComponentReceivingFoo>();
+  ```
+
+  By [@duracellko](https://github.com/duracellko) in [#101](https://github.com/egil/bUnit/issues/101).
 
 ### Changed
 List of changes in existing functionality.
 
 - The `ComponentParameterBuilder` has been renamed to `ComponentParameterCollectionBuilder`, since it now builds the `ComponentParameterCollection` type, introduced in this release of bUnit. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - `ComponentParameterCollectionBuilder` now allows adding cascading values that is not directly used by the component type it targets. This makes it possible to add cascading values to children of the target component. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - The `Add(object)` has been replaced by `AddCascadingValue(object)` in `ComponentParameterCollectionBuilder`, to make it more clear that an unnamed cascading value is being passed to the target component or one of its child components. It is also possible to pass unnamed cascading values using the `Add(parameterSelector, value)` method, which now correctly detect if the selected cascading value parameter is named or unnamed. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - It is now possible to call the `Add()`, `AddChildContent()` methods on `ComponentParameterCollectionBuilder`, and the factory methods `RenderFragment()`, `ChildContent()`, and `Template()`, _**multiple times**_ for the same parameter, if it is of type `RenderFragment` or `RenderFragment<TValue>`. Doing so previously would either result in an exception or just the last passed `RenderFragment` to be used. Now all the provided `RenderFragment` or `RenderFragment<TValue>` will be combined at runtime into a single `RenderFragment` or `RenderFragment<TValue>`.
 
   For example, this makes it easier to pass e.g. both a markup string and a component to a `ChildContent` parameter:
@@ -50,7 +68,9 @@ List of changes in existing functionality.
   );
   ```
   By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203).
+
 - All test doubles are now in the same namespace, `Bunit.TestDoubles`. So all import statements for `Bunit.TestDoubles.JSInterop` and `Bunit.TestDoubles.Authorization` must be changed to `Bunit.TestDoubles`. By [@egil](https://github.com/egil) in [#223](https://github.com/egil/bUnit/pull/223).
+
 - Marked MarkupMatches methods as assertion methods to stop SonarSource analyzers complaining about missing assertions in tests. By [@egil](https://github.com/egil) in [#229](https://github.com/egil/bUnit/pull/229).
 
 ### Deprecated

src/bunit.web/TestContext.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using Bunit.Extensions;
 using Microsoft.AspNetCore.Components;
 
@@ -9,12 +10,37 @@ namespace Bunit
 	/// </summary>
 	public class TestContext : TestContextBase, ITestContext
 	{
+		private readonly List<(Type LayoutType, RenderFragment<RenderFragment> LayoutFragment)> _layouts = new();
+
 		/// <summary>
 		/// Creates a new instance of the <see cref="TestContext"/> class.
 		/// </summary>
-		public TestContext()
+		public TestContext() => Services.AddDefaultTestContextServices();
+
+		/// <summary>
+		/// Adds a "layout" component to the test context, which components rendered using one of the 
+		/// <c>RenderComponent&lt;TComponent&gt;()</c>> methods will be rendered inside. This method can
+		/// be called multiple times, with each invocation adding a <typeparamref name="TComponent"/>
+		/// to the "layout" render tree. The <typeparamref name="TComponent"/> must have a <c>ChildContent</c>
+		/// or <c>Body</c> parameter.
+		/// </summary>
+		/// <typeparam name="TComponent">The type of the component to use as a layout component.</typeparam>
+		/// <param name="parameterBuilder">An optional parameter builder, used to pass parameters to <typeparamref name="TComponent"/>.</param>
+		public virtual void AddLayoutComponent<TComponent>(Action<ComponentParameterCollectionBuilder<TComponent>>? parameterBuilder = null) where TComponent : IComponent
 		{
-			Services.AddDefaultTestContextServices();
+			RenderFragment<RenderFragment> layoutFragment = rc =>
+			{
+				var builder = new ComponentParameterCollectionBuilder<TComponent>();
+				parameterBuilder?.Invoke(builder);
+
+				var added = builder.TryAdd("ChildContent", rc) || builder.TryAdd("Body", rc);
+				if (!added)
+					throw new ArgumentException($"The {typeof(TComponent)} does not have a ChildContent or Body parameter. Only components with one of these parameters can be used as layout components.");
+
+				return builder.Build().ToRenderFragment<TComponent>();
+			};
+
+			_layouts.Add((typeof(TComponent), layoutFragment));
 		}
 
 		/// <summary>
@@ -23,8 +49,10 @@ public TestContext()
 		/// <typeparam name="TComponent">Type of the component to render</typeparam>
 		/// <param name="parameters">Parameters to pass to the component when it is rendered</param>
 		/// <returns>The rendered <typeparamref name="TComponent"/></returns>
-		public IRenderedComponent<TComponent> RenderComponent<TComponent>(params ComponentParameter[] parameters) where TComponent : IComponent
-			=> TestRendererExtensions.RenderComponent<TComponent>(Renderer, parameters);
+		public virtual IRenderedComponent<TComponent> RenderComponent<TComponent>(params ComponentParameter[] parameters) where TComponent : IComponent
+		{
+			return RenderComponent<TComponent>(new ComponentParameterCollection { parameters }.ToRenderFragment<TComponent>());
+		}
 
 		/// <summary>
 		/// Instantiates and performs a first render of a component of type <typeparamref name="TComponent"/>.
@@ -33,6 +61,40 @@ public IRenderedComponent<TComponent> RenderComponent<TComponent>(params Compone
 		/// <param name="parameterBuilder">The ComponentParameterBuilder action to add type safe parameters to pass to the component when it is rendered</param>
 		/// <returns>The rendered <typeparamref name="TComponent"/></returns>
 		public virtual IRenderedComponent<TComponent> RenderComponent<TComponent>(Action<ComponentParameterCollectionBuilder<TComponent>> parameterBuilder) where TComponent : IComponent
-			=> TestRendererExtensions.RenderComponent<TComponent>(Renderer, parameterBuilder);
+		{
+			return RenderComponent<TComponent>(
+				new ComponentParameterCollectionBuilder<TComponent>(parameterBuilder)
+				.Build()
+				.ToRenderFragment<TComponent>()
+			);
+		}
+
+		private IRenderedComponent<TComponent> RenderComponent<TComponent>(RenderFragment renderFragment) where TComponent : IComponent
+		{
+			// Wrap TComponent in any layout components added to the test context.
+			// If one of the layout components is the same type as TComponent,
+			// make sure to return the rendered component, not the layout compnent.
+			var rcType = typeof(TComponent);
+			var rcInLayoutCount = 0;
+			var wrappedRenderFragment = renderFragment;
+
+			for (int i = 0; i < _layouts.Count; i++)
+			{
+				if (rcType == _layouts[i].LayoutType)
+					rcInLayoutCount++;
+
+				wrappedRenderFragment = _layouts[i].LayoutFragment(wrappedRenderFragment);
+			}
+
+			var resultBase = Renderer.RenderFragment(wrappedRenderFragment);
+
+			// This ensures that the correct component is returned, in case an added layout component
+			// is of type TComponent.
+			var result = rcInLayoutCount > 0
+				? Renderer.FindComponents<TComponent>(resultBase)[rcInLayoutCount]
+				: Renderer.FindComponent<TComponent>(resultBase);
+
+			return (IRenderedComponent<TComponent>)result;
+		}
 	}
 }

tests/bunit.web.tests/TestContextAddLayoutComponentTest.cs

@@ -0,0 +1,110 @@
+using System;
+using Bunit.TestAssets.SampleComponents;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Shouldly;
+using Xunit;
+
+namespace Bunit
+{
+	public class TestContextAddLayoutComponentTest : TestContext
+	{
+		[Fact(DisplayName = "AddLayoutComponent<T> throws when T doesn't have a ChildContent or Body parameter")]
+		public void Test100()
+		{
+			Should.Throw<ArgumentException>(() =>
+			{
+				AddLayoutComponent<Simple1>();
+				RenderComponent<InnerComponent>();
+			});
+		}
+
+		[Fact(DisplayName = "AddLayoutComponent<T> adds T as a layout component which CUT is rendered as child of")]
+		public void Test110()
+		{
+			AddLayoutComponent<LayoutComponent>();
+
+			var cut = RenderComponent<InnerComponent>();
+
+			cut.Markup.ShouldBe($"<div>LAYOUT VALUE</div>");
+		}
+
+		[Fact(DisplayName = "AddLayoutComponent<T> allows passing parameters to layout components")]
+		public void Test111()
+		{
+			AddLayoutComponent<LayoutComponent>(parameters => parameters.Add(p => p.Value, "ANOTHER VALUE"));
+
+			var cut = RenderComponent<InnerComponent>();
+
+			cut.Markup.ShouldBe($"<div>ANOTHER VALUE</div>");
+		}
+
+		[Fact(DisplayName = "AddLayoutComponent<T> can be called multiple times")]
+		public void Test112()
+		{
+			AddLayoutComponent<CascadingValue<string>>(parameters => parameters.Add(p => p.Value, "VALUE"));
+			AddLayoutComponent<CascadingValue<int>>(parameters => parameters.Add(p => p.Value, 42));
+
+			var cut = RenderComponent<MultipleParametersInnerComponent>();
+
+			cut.Markup.ShouldBe($"<div>VALUE42</div>");
+		}
+
+		[Fact(DisplayName = "RenderComponent<T> finds correct component when T is also added via AddLayoutComponent<T>")]
+		public void Test113()
+		{
+			AddLayoutComponent<CascadingValue<string>>(parameters => parameters.Add(p => p.Value, "VALUE"));
+			AddLayoutComponent<MultipleParametersInnerComponent>();
+			AddLayoutComponent<CascadingValue<int>>(parameters => parameters.Add(p => p.Value, 42));
+			AddLayoutComponent<MultipleParametersInnerComponent>();
+
+			var cut = RenderComponent<MultipleParametersInnerComponent>();
+
+			cut.Markup.ShouldBe($"<div>VALUE42</div>");
+		}
+
+		private class LayoutComponent : LayoutComponentBase
+		{
+			[Parameter] public string Value { get; set; } = "LAYOUT VALUE";
+			[Parameter] public string? Name { get; set; }
+
+			protected override void BuildRenderTree(RenderTreeBuilder builder)
+			{
+				builder.OpenComponent<CascadingValue<string>>(0);
+				builder.AddAttribute(1, "Value", Value);
+				if (Name is not null)
+					builder.AddAttribute(2, "Name", Name);
+				builder.AddAttribute(3, "ChildContent", Body);
+				builder.CloseComponent();
+			}
+		}
+
+		private class InnerComponent : ComponentBase
+		{
+			[CascadingParameter] public string? LayoutValue { get; set; }
+
+			protected override void BuildRenderTree(RenderTreeBuilder builder)
+			{
+				builder.OpenElement(0, "div");
+				builder.AddContent(1, LayoutValue);
+				builder.CloseElement();
+			}
+		}
+
+		private class MultipleParametersInnerComponent : ComponentBase
+		{
+			[CascadingParameter] public string StringValue { get; set; } = string.Empty;
+			[CascadingParameter] public int IntValue { get; set; }
+			[Parameter] public RenderFragment? ChildContent { get; set; }
+
+			protected override void BuildRenderTree(RenderTreeBuilder builder)
+			{
+				builder.OpenElement(0, "div");
+				builder.AddContent(1, StringValue);
+				builder.AddContent(2, IntValue);
+				builder.AddContent(3, ChildContent);
+				builder.CloseElement();
+			}
+		}
+	}
+}