Issue with template params

[MartinSoka]

I have a component that contains the following params

[Parameter, EditorRequired] public IEnumerable<TItem> Items { get; set; } = default!;
[Parameter, EditorRequired] public RenderFragment<TItem> RowContent { get; set; } = default!;

When testing the component similar as in the following example https://github.com/bUnit-dev/bUnit/search?q=Template+Params.

var cut = _testContext.RenderComponent<MyTable<string>>(parameters => parameters
            .Add(p => p.Items, new[] { "Foo", "Bar", "Baz" })
            .Add(p => p.RowContent, item => $"<div>{item}</div>"));

I can see the divs in the Markup property of component under test, but when using MarkupMatches it always fails because it can't find the divs within my table. Any ideas why?

This is how the content of Markup prop looks like:

<table class=\"mud-table-root\">
			<colgroup/>
			<thead class=\"mud-table-head\">
				<tr class=\"mud-table-row\"/>
			</thead>
			<tbody class=\"mud-table-body\">
				<tr class=\"mud-table-row cursor-pointer\" blazor:onclick=\"1\" style=\"\">
					<div>Foo</div>
				</tr>
				<tr class=\"mud-table-row cursor-pointer\" blazor:onclick=\"2\" style=\"\">
					<div>Bar</div>
				</tr>
				<tr class=\"mud-table-row cursor-pointer\" blazor:onclick=\"3\" style=\"\">
					<div>Baz</div>
				</tr>
			</tbody>
		</table>

var divs = cut.FindAll("table>tbody>tr>div"); finds 0 Elements.

[linkdotnet]

Hey @MartinSoka.

simply speaking your HTML is invalid that is why it isn't working (in bUnit or in a browser). For example under a <tr> should be a <td>. If you have the following structure:

<table class="mud-table-root">
	<colgroup></colgroup>
	<thead class="mud-table-head">
		<tr class="mud-table-row"></tr>
	</thead>
	<tbody class="mud-table-body">
		<tr class="mud-table-row cursor-pointer" style="">
			<td><div>Foo</div></td>
		</tr>
		<tr class="mud-table-row cursor-pointer" style="">
			<td><div>Bar</div></td>
		</tr>
		<tr class="mud-table-row cursor-pointer" style="">
			<td><div>Baz</div></td>
		</tr>
	</tbody>
</table>

And the following selector document.querySelectorAll("table > tbody > tr > td > div") or for bUnit cut.Find("table > tbody > tr > td > div") works.

[MartinSoka]

thank you so much @linkdotnet! In my code i pass MudTd, hence i didn't notice the simple test actually invalidates the html table as the tds are missing