Experience using BUnit with FluentUIComponents

[PascalVorwerk]

Hi, i am wondering if people have experience using BUnit with the FluentUI Components. I am currently experiencing some issues with disposing components.

public class MccMainLayoutTest : BaseTest
{
    public BunitAuthorizationContext AuthContext;
    
    public MccMainLayoutTest()
    {
        
        AuthContext = AddAuthorization();
        SetupFluentUiInvocations();
    }

    private void SetupFluentUiInvocations()
    {
        var module = JSInterop.SetupModule(
            "./_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js?v=4.9.3.24205");
        module.SetupVoid("bodyFont.withDefault", "RO Sans, Calibri, Arial, Verdana, sans-serif");
    }
   
    [Fact]
    public async Task MccMainLayoutTest_Unauthorized_ShowsNotification()
    {
        // Arrange
        AuthContext.SetAuthorized("TEST USER", AuthorizationState.Unauthorized);
        
        // Act
        var cut = Render<MccMainLayout>();
        
        // Assert
        var component = cut.FindComponent<NotAuthorizedNotification>();
        Assert.NotNull(component);
        Assert.Equal("<div class=\"fluent-messagebar-notification intent-error\" style=\"width: 500px; border: 1px solid;\" blazor:onfocusin=\"1\" blazor:onfocusout=\"2\" b-ig2qs97tvl><div class=\"fluent-messagebar-notification-icon\" b-ig2qs97tvl><svg style=\"width: 20px; fill: var(--error);\" focusable=\"false\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" blazor:onkeydown=\"3\" blazor:onclick=\"4\"><title>error</title><path d=\"M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z\"/></svg></div><div class=\"fluent-messagebar-notification-message\" title=\"Authorisatie\" b-ig2qs97tvl>Authorisatie</div><div class=\"fluent-messagebar-notification-close\" b-ig2qs97tvl><svg class=\"fluent-messagebar-notification-close\" style=\"width: 16px; fill: var(--neutral-foreground-rest); cursor: pointer;\" focusable=\"false\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" blazor:onkeydown=\"5\" blazor:onclick=\"6\"><path d=\"m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z\"/></svg></div><div class=\"fluent-messagebar-notification-content\" b-ig2qs97tvl>U heeft geen rechten om deze</div></div>", component.Markup);

        await _context.DisposeAsync();
    }
}

public class BaseTest : AsyncBunitContext
{
    protected MockHttpMessageHandler MockHttp { get; set; }
    protected AsyncBunitContext _context;

    protected BaseTest()
    {
        MockHttp = Services.AddMockHttpClient();
        Services.AddFluentUIComponents();
        Services.AddSingleton<Navigation>();
        _context = new AsyncBunitContext();
    }
    
}

public class AsyncBunitContext : BunitContext, IAsyncDisposable
{
    public new async ValueTask DisposeAsync()
    {
        // Manually dispose of services that require asynchronous disposal
        if (Services is IAsyncDisposable asyncDisposableServiceProvider)
        {
            await asyncDisposableServiceProvider.DisposeAsync();
        }
        else
        {
            // Fallback to standard dispose
            Dispose();
        }
    }
}

The following exception is thrown when running the test:

System.InvalidOperationException: 'Microsoft.FluentUI.AspNetCore.Components.DesignTokens.BodyFont' type only implements IAsyncDisposable. Use DisposeA...

System.InvalidOperationException
'Microsoft.FluentUI.AspNetCore.Components.DesignTokens.BodyFont' type only implements IAsyncDisposable. Use DisposeAsync to dispose the container.
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.ServiceProviderEngineScope.Dispose()
   at Bunit.BunitServiceProvider.Dispose() in /_/src/bunit/BunitServiceProvider.cs:line 160
   at Bunit.BunitContext.Dispose(Boolean disposing) in /_/src/bunit/BunitContext.cs:line 127
   at Bunit.BunitContext.Dispose() in /_/src/bunit/BunitContext.cs:line 69
   at Xunit.Sdk.ExecutionTimer.Aggregate(Action action) in /_/src/xunit.execution/Sdk/Frameworks/ExecutionTimer.cs:line 31
   at ReflectionAbstractionExtensions.DisposeTestClass(ITest test, Object testClass, IMessageBus messageBus, ExecutionTimer timer, CancellationTokenSource cancellationTokenSource) in /_/src/xunit.execution/Extensions/ReflectionAbstractionExtensions.cs:line 79
   at Xunit.Sdk.TestInvoker`1.<>c__DisplayClass45_0.<RunAsync>b__1() in /_/src/xunit.execution/Sdk/Frameworks/Runners/TestInvoker.cs:line 184
   at Xunit.Sdk.ExceptionAggregator.Run(Action code) in /_/src/xunit.core/Sdk/ExceptionAggregator.cs:line 73

I've tried a few things (like creating my own Bunitcontext that disposes its services itself, but it does not seem to work, i am pretty new in this field.

[vnbaaij]

Hi Pascal,

Did you see we have a pretty big test project, which uses bUnit, in our solution? There are about 840 tests in there so maybe you can find some pointers there.

[PascalVorwerk]

Oh no i did not realize it was also working with BUnit to do the testing! I will definetly check it out and see if i can find why this test of mine is not working like i want it too :)