BUnit Testing with Syncfusion Components

Question

I am currently in the process of Unit Testing a few components my team are building for a project, and we've set up BUnit to use as we love the flexibility of the package, but when coming to test components using the Syncfusion package, I'm not sure whether I'm writing the tests incorrectly or there is something I'm missing, but I can't get the tests to work correctly.

Example

So, I have a Syncfusion Tooltip component, that I have encapsulated into a custom component, and then used within the repo.

<div class="general-tooltip">
<SfTooltip Content="@Text" CssClass="@CssClass" Height="@Height" ID="@ID" Position="@Position" Target="@Target" Width="@Width" WindowCollision="true" IsSticky="false">
        @if (ChildContent != null)
        {
            @ChildContent
        }
        else
        {
            <span class="fa-regular fa-circle-question fa-sm" />
        }
    </SfTooltip>
</div>

Now, using BUnit I can find the component <SfTooltip> during tests, but cannot interact with it. I need to try and use the .MouseOver() event, so that I can test the content of the tooltip's popup rendered by Syncfusion. Any ideas on what to do?

My test is below and the links I have already looked through:

Syncfusion Documentation

BUnit Documentation about MouseOver event

[Fact]
public void CheckSimpleComponentPopupRendersWithCorrectText()
{
    // Add Syncfusion Service to Test, in order to render Sf components.
    using var testContext = new TestContext();
    testContext.Services.AddSyncfusionBlazor();
    testContext.Services.AddOptions();

    using var cut = testContext.RenderComponent<SimpleTooltip>();

    var tooltip = cut.FindComponent<SfTooltip>();

    tooltip.MouseOver();
}

Any help is appreciated. TIA.

Answer 1

When we are speaking in the context of unit testing, you might want to extract SyncFusion (or any 3rd party library) out of the equation. The problem is that it makes your test brittle. As the SfTooltip doesn't expose an easy way of triggering the "open" part, you might want to resort to checking whether or not your component probably sets the ChildContent. The opening part itself is not part of your logic but the ones of SfTooltip. Your test should pass/fail independent of the implementation details of SyncFusions components.

That said, you can simply retrieve the ChildContent from the instance:

var cut = testContext.RenderComponent<SimpleTooltip>(/*Some setup code*/);
var childContent = cut.FindComponent<SfTooltip>().ChildConent;

childContent.Should().NotBeNull();
// Maybe additional checks like what child content you pass in

To go a bit further here, we are offering a preview package called bUnit.generators. That enables you to fake out the whole component for a stub. With the experimental NET 8 interceptors you could write a test like that:

ComponentFactories.AddStub<SfTooltip>();

var cut = testContext.RenderComponent<SimpleTooltip>(/*Some setup code*/);

var childContent = cut,FindComponent<SfTooltipStub>().ChildContent;
childContent.Should().NotBeNull();
// Maybe additional checks like what child content you pass in