Finding component in pre-selected html fragment

[doyce]

I would like to have a FindComponent extension method available on IElement interface, if it is possible to implement, or some other feature that would allow me to search for components inside pre-selected html fragment or to identify a component residing in a specific place in it's parent component's DOM.

My specific use case is that I have a table where I select a column using the IRenderedFragment.FindAll() method and then I need to verify that each cell in the selected column contains a specific component with correct parameter value.

[egil]

Not sure I completely understand, but it should be doable with a css selector passed to FindAll, e.g.:

cut.FindAll("table tr td:nth-child(3)")

This selects all td elements that is the 3. child of a row, e.g. the 3rd column. This works as long as all rows have the same number of cells. Change the number 3 to whatever number column you want.

As for extension methods on IElement... You can use QuerySelector() or QuerySelectorAll() methods on it to query it's children.

[doyce]

Thanks for your reply, but it's not what I want. I need to find a component instace as is done with the IRenderedFragment.FindComponent() method to be able to inspect it's parameter value. How the component uses the parameter value to render it's own content should be covered by other tests specific to the component itself not to a parent component that uses it. That's why I want to inspect just the parameter value being passed.

[egil]

Have you tried IRenderedFragment.FindComponents<TChildComponent>() (note the s at the end of FindComponents)? That method gives you all components in the render tree of the specific type.

I do wonder about your motivation for testing like you describe though. It seems to me that you are testing the internals of your component under test, i.e. by asserting explicitly what parameters your component under test is passing to its child components. That is usually not something I recommend, as it leads to tests that break when they do not need to. E.g. if you change how your component under test works internally, but it still produces the same output, the tests should not fail.

Can you share a bit more about your test scenario, ideally with a simple example to make it clear what's going on. I would love to understand the scenario better.

[doyce]

Yes, I am aware of the FindComponents method. The problem is that there are multiple instances of the same component in multiple columns and I didn't find a way to filter out just the instances residing in a specific table column.

My motivation is not not to test the same aspect of the child component multiple times everywhere the component is used as a child component. It is a status icon rendering three different states based on input parameter value. There are separate tests for the StatusIcon component to verify that it renders correctly for various input values. In tests for other components that use the StatusIcon component, I don't want to repeat the same tests everytime but instead I want to verify that the component under test computes correct status value, because the input values for the StatusIcon component are already tested. It is similar approach like mocking the StatusIcon component, what is not possible in bUnit I guess. Ability to mock a child component would be another way to achieve my required behavior (and probably better).

[egil]

Yes, I am aware of the FindComponents method. The problem is that there are multiple instances of the same component in multiple columns and I didn't find a way to filter out just the instances residing in a specific table column.

I see. There is no way right now to go from an <element> in the DOM tree to the component that rendered that element in the render tree, but I do think it is possible to add.

Just to understand your requirement; you want to go from an IElement to the component that rendered it, e.g.:

// MyComponent.razor
<p>hello world</p>

var elm = cut.Find("p");
IRenderedFragment rf = elm.FindComponent();
IRenderedComponent<MyComponent> rc = elm.FindComponent<MyComponent>();

Then rf and rc references the component that rendered the P element elm.

As for your current predicament, depending on the table you are searching (do all rows have the same number of columns), you can utilize the fact that FindComponents does a depth first search, so if you do FindComponents<MyTableCell>(), then all table cells in a row will come after each other. That should allow you to pick the N'th table cell component in each row, if you know the length of the rows.

.. It is similar approach like mocking the StatusIcon component, what is not possible in bUnit I guess. Ability to mock a child component would be another way to achieve my required behavior (and probably better).

I had a feeling that was what you would need. Right now, with Blazors APIs, I have not figured out a good way to mock a component. But it does look as if Blazor will be adding the ability in the future for us to control how components are created, and that will enable us to mock them 🤞

[doyce]

I was able to achieve what I needed using your sugestion, thanks for your help.
But anyway it would be nice to have ability to search for components inside selected fragments to use in other potential use cases similar to this one.

[egil]

I was able to achieve what I needed using your sugestion, thanks for your help.

Great.

But anyway it would be nice to have ability to search for components inside selected fragments to use in other potential use cases similar to this one.

I agree. Ill add an issue for it and we can have a design discussion about the API.