Can't Find Elements in ChildContent

[thalaeg]

Finding elements in ChildComponents

When trying to find elements in AddChildContent the system will error (first test example). You have to instead look directly in the cut (second test example)

Say you had a parent element (HeadlessDisclosure) that is a div and cascades itself to a child (HeadlessDisclosureButton) which is a button. I want to grab the button element with the Find(cssSelector).

The expected razor

<HeadlessDisclosure>
    <HeadlessDisclosureButton />
</HeadlessDisclosure>

would result in

<div>
    <button />
<div>

Here is the first test (that fails). The Node of the disclosure has 1 element (the div), but not direct children. Instead, if you look in the Node's content, you will see the button.

var disclosure = RenderComponent<HeadlessDisclosure>(parameters => parameters
    .AddChildContent<HeadlessDisclosureButton>()
);

var button = disclosure.Find("button"); // Bunit.ElementNotFoundException : No elements were found that matches the selector 'button'
// do stuff with button

Test that works:

var disclosure = RenderComponent<HeadlessDisclosure>();
var cut = RenderComponent<HeadlessDisclosureButton>(parameters => parameters
    .AddCascadingValue(disclosure.Instance)
);

var button = cut.Find("button");
// do stuff with button

Expected behavior:

I want the top test to be able to find elements

Version info:

• bUnit version: <PackageReference Include="bunit.web" Version="1.2.49" />
• .NET Runtime and Blazor version: <TargetFramework>net6.0</TargetFramework>
• OS type and version: Windows

Additional Info

Here is a screen grab of the markup of disclosure. So I know it is getting the correct markup.

[egil]

hi @thalaeg

Thanks for reaching out.

The expected razor

<HeadlessDisclosure>
    <HeadlessDisclosureButton />
</HeadlessDisclosure>

would result in

<div>
    <button />
<div>

Looking at the markup from your component, it seems like it is wrapping the <button> in a <template> element, and not a <div> element as you say it should.

Can you perhaps share more about your <HeadlessDisclosure> and <HeadlessDisclosureButton>, e.g. just the minimal amount of code to reproduce the bug you are describing?

[egil]

@thalaeg I think the problem is that you are using the <template> element. Content inside a template element is not added to the document object model (more about the tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), and can thus not be found using Find or FindAll, both of which are shorthands for QuerySelector and QuerySelectorAll respectively, so that is why `Find("button") doesn't return an element.

That's not just a bUnit thing, it's also how it works in the browser, so you may be using the <template> element incorrectly in this case.

[thalaeg]

Hi @egil. I was having some problems with .NET 6 rc1 so I had to upgrade to rc2 this morning to fix that issue. Sorry for the delay.

Yes, I mistyped in my initial issue.

I was expecting

<template>
    <button />
</template>

The problem does relate to template. I just created this basic repo to replicate the issue if you want to check it out further. https://github.com/thalaeg/Bunit_Issue512

I may be using it incorrectly! Most of the time, the component (my HeadlessDisclosure) will likely be casted to a div rather than a template, but I was trying to make it generic.

Unfortunently, it would not be easy to share the HeadlessDisclosure code quite yet, working on moving it to a public Github project. It is being developed by my company and we are iterating on it pretty quick and don't want a bunch of breaking changes at first. However, that small project above replicates it well.

I believe you are correct that it is not a bunit thing. So feel free to close the issue! Perhaps a note in the documentation about templates might be warrented? Unsure on that bit. Thanks for creating such a cool testing project. Go you!!

[egil]

Thanks for the update and good luck. I'll convert this issue to an discussion, that way it's still searchable for others that might run into similar things.