Is it possible to render content from the Root Render Tree?

[groogiam]

I'm running into a situation where I want to test some functionality that opens in a popup. The component that I am using (Telerik Window) renders that window as part of the Root Component. See Important Notes. My question is there any way to render and interact with root component which is added via ctx.RenderTree.Add<TelerikRootComponent>();? Thanks.

[egil]

Hi @groogiam, good quesiton.

A few points on this:

1. Try not to test Telerik's code, thats 3rd party code, not yours. That is not your job, you are paying them to do that for you.
2. What you want to test is your interaction with TelerikWindow, that you are calling the correct methods on it at the expected time, e.g. toggling the Visible attribute.

To achieve the second point, I would probably look at mocking TelerikWindow. See https://bunit.dev/docs/providing-input/substituting-components.html. You might also find some inspiration here: https://youtu.be/Co7QetPYiO4

@EdCharbeneau might have more good ideas to share on this.

[groogiam]

@egil Thanks for the points. I'm still looking for a way around this. I understand the point of not wanting to test the TelerikWindow functionality but the problem here is that the window contains functionality that is part of the component under unit test. The contents/functionality of the window are non trivial and are logically part of the operation being tested.

[egil]

Would it work if you stubbed the TelerikWindow and got the render fragment passed to WindowContent (or stub WindowContent if it's a component and get the render fragment from ChildContent), and then take that render fragment and pass it to the TestContext.Render method?

That would render the content without the telerik logic around it.

That said, I'm not familiar with the component in question, so I might have to refer you over to Progress' support for more help on this.

[groogiam]

I'll give that a shot and open a ticket with Telerik support to see if they can provide an further guidance. Thanks again for your help and your contributions to this project.

[egil]

Please link back to this discussion from your ticket, and if you find a solution, also please post an answer here, so others might benefit from your work.

[groogiam]

Below is a summary from the response from Telerik.

The Window component and all popups in general are rendered not in their place of declaration but on root level. Therefore, you should look for their content inside the TelerikRootComponent. You can find some more details in this regard in the readme file of our testing sample - see the last bullet in this section covering popup components. In addition, here you can check the example of testing the content of a Window component - https://github.com/telerik/blazor-ui/blob/master/testing/bUnit-justmock/Telerik.Blazor.BUnit.JustMock/DemoSample/WindowButtonPage.cs.

This approach basically extends the test context to include an instance of the TelerikRootComponent. Instead of adding it directly it is first rendered and then added to the RenderTree as cascading parameter. The render instance can then be stored as a property an used later. I am still however running into an issue where the event handlers do not seem to function on the root context. E.g. clicking buttons is not triggering any blazor code to execute. I have a question out to Telerik and will update this answer when I get that resolved.

@egil This solution requires you set all this up by extending the TestContext. I was trying to just get an instance of the TelerikRoot component using the out of box TestContext via Renderer.FindComponent? This requires passing in a parent and I couldn't figure out what that would be for the root level components. Is that possible?

[egil]

I think this should work:

var root = RenderComponent<TelerikRootComponent>(ps => ps.AddChildContent<MyComponent>());
var cut = root.FindComponent<MyComponent>();

Then, root will contain the TelerikRootComponent and whatever is rendered by that, and you can access the full DOM tree from that point and downwards. This should help with passing parameters to the child component, if needed: https://bunit.dev/docs/providing-input/passing-parameters-to-components.html#passing-a-component-with-parameters-to-the-childcontent-parameter

[alesandrino]

Thanks for this snippet!
I used this to test components which depend on MudPopoverProvider in MudBlazor:

var target = ctx.RenderComponent<PopoverMock>(b => b.AddChildContent<MyComponent>());

public class PopoverMock : ComponentBase
{
	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenComponent<MudPopoverProvider>(0);
		builder.CloseComponent();
		builder.AddContent(1, ChildContent);
	}

#nullable enable
	[Parameter]
	public RenderFragment? ChildContent { get; set; }
#nullable restore
}