Repository navigation
Can't Find Elements in ChildContent #512
Description
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 buttonTest that works:
var disclosure = RenderComponent<HeadlessDisclosure>();
var cut = RenderComponent<HeadlessDisclosureButton>(parameters => parameters
.AddCascadingValue(disclosure.Instance)
);
var button = cut.Find("button");
// do stuff with buttonExpected 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.
Activity
egil commentedon Oct 14, 2021
hi @thalaeg
Thanks for reaching out.
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 commentedon Oct 14, 2021
@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 usingFindorFindAll, both of which are shorthands forQuerySelectorandQuerySelectorAllrespectively, 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 commentedon Oct 14, 2021
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
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_Issue512I may be using it incorrectly! Most of the time, the component (my
HeadlessDisclosure) will likely be casted to adivrather than atemplate, but I was trying to make it generic.Unfortunently, it would not be easy to share the
HeadlessDisclosurecode 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
bunitthing. So feel free to close the issue! Perhaps a note in the documentation abouttemplates might be warrented? Unsure on that bit. Thanks for creating such a cool testing project. Go you!!egil commentedon Oct 14, 2021
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.