when SetParametersAsync is used (only async) - BuildRenderTree is not invoked

[ghost]

Several issues are related to SetParametersAsync, but I am unsure whether they are the same as mine, so I tried creating a new incident.

Describe the bug
When a component has SetParametersAsync then BuildRenderTree is not invoked.

Example:
Testing this component:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace ClassLibrary1;

public class ComponentWithAsyncSetParameters : ComponentBase
{
	public override async Task SetParametersAsync(ParameterView parameters)
	{
		await Task.Delay(1000);
	}

	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

public class ComponentWithoutAsyncSetParameters : ComponentBase
{
	public override Task SetParametersAsync(ParameterView parameters)
	{
		return Task.CompletedTask;
	}

	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

public class ComponentWithoutSetParameters : ComponentBase
{
	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

With this test:

using Bunit;
using ClassLibrary1;

namespace TestProject1;

public sealed class UnitTest1 : TestContext
{
	[Fact]
	public void TestComponentWithAsyncSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithAsyncSetParameters>();
		component.MarkupMatches(expected);
	}
	
	[Fact]
	public void TestComponentWithoutAsyncSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithoutAsyncSetParameters>();
		component.MarkupMatches(expected);
	}
	
	[Fact]
	public void TestComponentWithoutSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithoutSetParameters>();
		component.MarkupMatches(expected);
	}
}

Results in this output:

Bunit.HtmlEqualException: HTML comparison failed.

Bunit.HtmlEqualException
HTML comparison failed. 

The following errors were found:
  1: The element at h1(0) is missing.

Actual HTML: 

Expected HTML: 
<h1>HEADER TEXT</h1>

   at Bunit.MarkupMatchesAssertExtensions.MarkupMatches(INodeList actual, INodeList expected, String userMessage) in /_/src/bunit.web/Asserting/MarkupMatchesAssertExtensions.cs:line 238
   at Bunit.MarkupMatchesAssertExtensions.MarkupMatches(IRenderedFragment actual, String expected, String userMessage) in /_/src/bunit.web/Asserting/MarkupMatchesAssertExtensions.cs:line 114
   at TestProject1.UnitTest1.TestComponentWithoutAsyncSetParameters() in C:\Users\Mihails Kuzmins\source\repos\ClassLibrary1\TestProject1\UnitTest1.cs:line 23
   at InvokeStub_UnitTest1.TestComponentWithoutAsyncSetParameters(Object, Object, IntPtr*)
   at System.Reflection.MethodBaseInvoker.InvokeWithNoArgs(Object obj, BindingFlags invokeAttr)

Expected behavior:
BuildRenderTree is invoked, and the valid HTML is rendered

Version info:

• bUnit version: 1.38.5
• .NET Runtime and Blazor version: net9.0; 9.0.3
• OS type and version: Windows 10.0.26100.3624

[linkdotnet]

Hey @mku-vesca,

maybe we can talk through examples of why certain things are happening. The easiest is ComponentWithAsyncSetParameters: You have a Task.Delay. Or a "real" async task that isn't directly finished.

The RenderComponent doesn't await until all lifecycles are awaited as well. Blazor sees that you have a Task object and renders already something even if your SetParametersAsync method isn't completely done. bUnit behaves the same.

While your render-tree might not need any parameter, Blazor anyways enters your SetParametersAsync method and batches the continuation (maybe it is that it doesn't have to wait 1 second). as bUnit is not blocking, you directly in your MarkupMatches method.

The normal way to do it would be taking: WaitFor- Helpers: https://bunit.dev/docs/interaction/awaiting-async-state.html

But even if you would do that, let's come to your second example:

In your second example, you are overriding SetParametersAsync: https://source.dot.net/#Microsoft.AspNetCore.Components/ComponentBase.cs,259

The default implementation has a bit logic, therefore base.SetParametersAsync is advised.

If you are not calling base, no one is invoking a render cycle when the component is created the first time (there is a StateHasChanged call inside that chain).

I would assume, that such a component will not be rendered in Blazor as well. Because bUnit doesn't do anything special here.

So it boils down to: When overriding SetParametersAsync you have to manually instruct Blazor to render. In the last example, where you did not override, that is done automatically.

[ghost]

@linkdotnet, thank you for the precise instructions. By adding base.SetParametersAsync, the second method has passed successfully; however, by adding WaitFor the first method still fails with the following exception.
※ I used WaitForState, WaitForElement, and WaitForAssertion, and all these methods resulted in the same error depicted below.

Looking at the call stack, it looks like the component lifecycle methods are being invoked, so maybe it corrupts the state of ParameterView (or maybe not). So, I am not really sure whether it is a problem with Blazor, my code or bUnit, but do you have any idea?

System.InvalidOperationException: The ParameterView instance can no longer be read because it has expired. ParameterView can only be read synchronousl...

System.InvalidOperationException
The ParameterView instance can no longer be read because it has expired. ParameterView can only be read synchronously and must not be stored for later use.
   at Microsoft.AspNetCore.Components.Rendering.ParameterViewLifetime.AssertNotExpired()
   at Microsoft.AspNetCore.Components.ParameterView.GetEnumerator()
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
   at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
   at ClassLibrary1.ComponentWithAsyncSetParameters.<>n__0(ParameterView parameters)
   at ClassLibrary1.ComponentWithAsyncSetParameters.SetParametersAsync(ParameterView parameters) in C:\Users\Mihails Kuzmins\source\repos\ClassLibrary1\ClassLibrary1\Class1.cs:line 11
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
   at Bunit.RenderedFragmentWaitForHelperExtensions.WaitForElementCore(IRenderedFragment renderedFragment, String cssSelector, Nullable`1 timeout) in /_/src/bunit.web/Extensions/WaitForHelpers/RenderedFragmentWaitForHelperExtensions.cs:line 160
   at Bunit.RenderedFragmentWaitForHelperExtensions.WaitForElement(IRenderedFragment renderedFragment, String cssSelector) in /_/src/bunit.web/Extensions/WaitForHelpers/RenderedFragmentWaitForHelperExtensions.cs:line 21
   at TestProject1.UnitTest1.TestComponentWithAsyncSetParameters() in C:\Users\Mihails Kuzmins\source\repos\ClassLibrary1\TestProject1\UnitTest1.cs:line 14
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Void** arguments, Signature sig, Boolean isConstructor)
   at System.Reflection.MethodBaseInvoker.InvokeWithNoArgs(Object obj, BindingFlags invokeAttr)

public class ComponentWithAsyncSetParameters : ComponentBase
{
	public override async Task SetParametersAsync(ParameterView parameters)
	{
		await Task.Delay(1000);
		await base.SetParametersAsync(parameters);
	}

	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

[Fact]
public void TestComponentWithAsyncSetParameters()
{
	const string expected = "<h1>HEADER TEXT</h1>";

	var component = RenderComponent<ComponentWithAsyncSetParameters>();
	component.WaitForElement("h1");
	component.MarkupMatches(expected);
}

[linkdotnet]

That seems to be an internal issue of Blazor itself, which leads to an error.
I expect that spinning up a "normal" Blazor WebApp will lead to the same exception.

If it is fine with you, I will convert this into a discussion.

[ghost]

I expect that spinning up a "normal" Blazor WebApp will lead to the same exception.

It seems like you are correct and Blazor does not like it.. Then it means that I need to come up with a new design for how values are processed (extract async logic from the SetParametersAsync).

[linkdotnet]

Can't you hook into OnParametersSetAsync?

[ghost]

Yes, it seems to be the only option. But well, I am kind of surprised because SetParametersAsync is async, but it cannot be used with other async method - probably Microsoft had the reason why it is like this, but the API seems to be invalid (SetParametersAsync should not be async then). Or maybe I can pass ParameterView.Empty - https://stackoverflow.com/questions/66717054/the-parameterview-instance-can-no-longer-be-read-because-it-has-expired-paramet

[ghost]

Ok, the final solution is:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace ClassLibrary1;

public class ComponentWithAsyncSetParameters : ComponentBase
{
	public override async Task SetParametersAsync(ParameterView parameters)
	{
		parameters.SetParameterProperties(this);
		await Task.Delay(1000);
		await base.SetParametersAsync(ParameterView.Empty);
	}

	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

public class ComponentWithoutAsyncSetParameters : ComponentBase
{
	public override async Task SetParametersAsync(ParameterView parameters)
	{
		parameters.SetParameterProperties(this);
		await Task.CompletedTask;
		await base.SetParametersAsync(ParameterView.Empty);
	}

	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

public class ComponentWithoutSetParameters : ComponentBase
{
	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1, "h1");
		builder.AddContent(2, "HEADER TEXT");
		builder.CloseElement();
	}
}

using Bunit;
using ClassLibrary1;

namespace TestProject1;

public sealed class UnitTest1 : TestContext
{
	[Fact]
	public void TestComponentWithAsyncSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithAsyncSetParameters>();
		component.WaitForElement("h1", TimeSpan.FromSeconds(5)); // Can be 2.5 as well
		component.MarkupMatches(expected);
	}
	
	[Fact]
	public void TestComponentWithoutAsyncSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithoutAsyncSetParameters>();
		component.MarkupMatches(expected);
	}
	
	[Fact]
	public void TestComponentWithoutSetParameters()
	{
		const string expected = "<h1>HEADER TEXT</h1>";

		var component = RenderComponent<ComponentWithoutSetParameters>();
		component.MarkupMatches(expected);
	}
}