Convert IRenderedFragment to IElement

[mycarrysun]

I'd like to be able to go from an IRenderedFragment to an IElement because of the ComputeCurrentStyle method that exists only on IElement.

Any ideas?

[linkdotnet]

Hey @mycarrysun hope you are doing good,

an IRenderFragment is the just a Blazor component if you wanna say so. AngleSharp or your IElement is based on the actual DOM element(s) and not on the "Blazor representation".

If you have a component called MyComponent with the following content:

<h3 class="header text-center">MyTitle</h3>
<button @onclick="DoesSomething">Press me if you can</button>

<AnotherBlazorComponent></AnotherBlazorComponent>

Now it depends a bit what you really want to achieve. You can get the h3 element like that:

IRenderFragment<MyComponent> cut = RenderComponent<MyComponent>();
var h3 = cut.Find("h3"); // also Find("h3") would work
var classes = h3.ComputeCurrentStyle(); // This contains all the classes associated with the h3 element

So it boils down what element you exactly want.
If this answer doesn't help maybe a small sample-code from your side would make it easier.

Cheers
Steven

[mycarrysun]

That helps, thank you for the link

[mycarrysun]

From looking at the source, bunit uses AngleSharp.Dom under the hood which is where ComputeCurrentStyle comes from. Does that just not work at all with bunit? Can bunit not be configured for it to work?

[egil]

Why is ComputeCurrentStyle even in this library then if we aren't supposed to use it? We're going in circles now.

That is part of AngleSharp.Css, not directly bUnit.

With bUnit you are able to test an individual components logic and rendered markup independent of a full Blazor app. When you ask bUnit to render a component or multiple components, you are not in a "page" or "browser" context, so there is no way for bUnit to know what style sheets to lead in relation to a component consistently.

It's not possible with the currently API in bUnit for you to specify external stylesheet you want to be available in the context of the component(s) you are rendering. It could be something we could investigate for V2, but not something V1 supports.

[mycarrysun]

It's not possible with the currently API in bUnit for you to specify external stylesheet you want to be available in the context of the component(s) you are rendering. It could be something we could investigate for V2, but not something V1 supports.

Ok that's basically what I was trying to figure out. Thanks for sticking with me til the end 😄

[egil]

From looking at the source, bunit uses AngleSharp.Dom under the hood which is where ComputeCurrentStyle comes from. Does that just not work at all with bunit? Can bunit not be configured for it to work?

It might. You could try to load a style sheet after a render through cut.Nodes[0].Owner. However in V1, bUnit recreates the DOM nodes after render, so you would probably have to redo that after each render.