How to render SectionContent in tests?

[AntonBaluev]

I have layout with SectionOutlet. On particular page (TestPage component) I use SectionContent to display some html.

var component = testContext.RenderComponent<TestPage>();
var markup = component.Markup;

markup does not contain SectionContent.

How can you test content on the SectionContent block on the page?

[linkdotnet]

The SectionContent element itself doesn't render anything. It is a mere "placeholder" for the SectionOutlet. So while in your code you can do something like:

<SectionContent SectionName="bUnit">
 <button>Click me</button>
</SectionContent>

That button will not be part of your components HTML/Markup/RenderTree. The SectionContent just "holds" that so called RenderFragment.

If you want to check certain things you can access the ChildContent and render that separately:

var cut = RenderComponent<MyComponent>();

var section = cut.FindComponent<SectionContent>();
var content = section.Instance.ChildContent;

section.Instance.SectionId.Should().Be("bUnit")
content.Should().NotBeNull();
// Here we are taking what is inside the SectionContent and render it 
var childContent = Render(content);
childContent.Find("button").TextContent.Should().Be("Click Me");

[AntonBaluev]

I have managed to get what I wanted. Here is my test.

    [Test]
    public Task FunctionPageTest()
    {
        using var testContext = new TestContext();
        var component = testContext.RenderComponent<Function>();
        var sections = component.FindComponents<SectionContent>();

        var mainSection = sections.First(s => s.Instance.SectionName == "main");
        var mainContent = mainSection.Instance.ChildContent;
        var childContent = testContext.Render(mainContent);
        return Verify(FormatHtml(childContent.Markup));
    }

I have layout with 2 sections with names - main and sitebar. But var sections has 4 items! The first one is sections[0].Instance.ChildContent.Target - PageTitle, it seems it has SectionContent component as well.

And the rest 3 items have Instance.ChildContent.Target - Function, which is my component under the test. 2 of them have expected names - "main" and "sitebar".

@linkdotnet thanks for help!