Testing a Syncfusion component using bUnit

[alecrisan]

This is a quick guide for testing syncfusion components using bUnit.
Here is a simple example of a test for the SfDialog component that checks the title of the dialog:

public class UnitTest1 : TestContext
{
    [Fact]
    public void Dialog_WhenGivenHeaderTitle_RendersSuccessfully()
    {
        //Arrange
        SetUpServices();
        string headerName = "Dialog title";

        //Act
        IRenderedComponent<Dialog> cut = RenderComponent<Dialog>(
            (nameof(Dialog.HeaderTitle), headerName)
            );

        //Assert
        Assert.Equal(headerName, cut.Instance.HeaderTitle);
    }

    private void SetUpServices()
    {
        //add the other services you need in your application
        Services.AddSyncfusionBlazor();
    }
}

Basically the most important thing you need to do is add syncfusion to the services collection: Services.AddSyncfusionBlazor();
And then you're good to go!

Razor component:

@page "/dialog"
@using Syncfusion.Blazor.Popups

<div>
    @if (this.ShowButton)
    {
        <button class="e-btn" @onclick="@OnBtnClick">Open</button>
    }
</div>

<SfDialog Width="335px" Target="#target" IsModal="true" @bind-Visible="Visibility">
    <DialogTemplates>
        <Header> Software Update </Header>
        <Content>
            <p>Your current software version is up to date.</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" />
    </DialogButtons>
    <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>
@code {
        [Parameter]
        public string HeaderTitle { get; set; }

        private bool Visibility { get; set; } = true;

        private bool ShowButton { get; set; } = false;

        private void DialogOpen(object args)
        {
            ShowButton = false;
        }
        private void DialogClose(object args)
        {
            ShowButton = true;
        }
        private void OnBtnClick()
        {
            Visibility = true;
        }
        private void DlgButtonClick()
        {
            Visibility = false;
        }
}

[Crashdummyy]

Does this still work??

Bunit.JSRuntimeUnhandledInvocationException
The invocation of 'import' with the argument [./_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js] was not expected.

          var context = new TestContext();

            context.Services.AddSyncfusionBlazor();
            
            context.Services.AddScoped(_ => toaster ?? A.Dummy<IToastService>())
                   .AddScoped(_ => gameRepo ?? A.Dummy<IGameRepository>())
                   .AddScoped(_ => defaultRepo ?? A.Dummy<IDefaultArgsRepository>());
                   
           // That one throws
           var page = context.RenderComponent<DefaultArgs>();

Page:

@page "/DefaultArgs"
@using GameBuddy.Models.Contract
@using GameBuddy.Shared
@using System.Collections.ObjectModel

@using IDefaultArgsRepository = GameBuddy.Shared.Repositories.Contracts.IDefaultArgsRepository
@using IGameRepository = GameBuddy.Shared.Repositories.Contracts.IGameRepository

@inject IDefaultArgsRepository Repo;
@inject IGameRepository GameRepo;
@inject IToastService Toaster;

<h3>DefaultArgs</h3>

<SfCheckBox Label="Apply to all existing Games" @bind-Checked="@updateEntities"/>

[Crashdummyy]

The first exception I showed is thrown.

This is the complete stacktrace

Bunit.JSRuntimeUnhandledInvocationException: The invocation of 'import' with the argument [./_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min....

Bunit.JSRuntimeUnhandledInvocationException
The invocation of 'import' with the argument [./_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js] was not expected.
   at Bunit.JSInterop.BunitJSRuntime.TryHandlePlannedInvocation[TValue](JSRuntimeInvocation invocation) in /_/src/bunit.web/JSInterop/Implementation/BunitJSRuntime.cs:line 50
   at Bunit.JSInterop.BunitJSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args) in /_/src/bunit.web/JSInterop/Implementation/BunitJSRuntime.cs:line 31
   at Bunit.JSInterop.BunitJSRuntime.InvokeAsync[TValue](String identifier, Object[] args) in /_/src/bunit.web/JSInterop/Implementation/BunitJSRuntime.cs:line 22
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Syncfusion.Blazor.Internal.SfBaseUtils.ImportModule(IJSRuntime jsRuntime, SfScriptModules scriptModule, String hashKey)
   at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Syncfusion.Blazor.Inputs.Internal.SfInputBase.OnAfterRenderAsync(Boolean firstRender)
   at Bunit.Rendering.TestRenderer.AssertNoUnhandledExceptions() in /_/src/bunit.core/Rendering/TestRenderer.cs:line 276
   at Bunit.Rendering.TestRenderer.Render[TResult](RenderFragment renderFragment, Func`2 activator) in /_/src/bunit.core/Rendering/TestRenderer.cs:line 164
   at Bunit.Rendering.TestRenderer.RenderFragment(RenderFragment renderFragment) in /_/src/bunit.core/Rendering/TestRenderer.cs:line 38
   at Bunit.Extensions.TestContextExtensions.RenderInsideRenderTree[TComponent](TestContextBase testContext, RenderFragment renderFragment) in /_/src/bunit.web/Extensions/TestContextExtensions.cs:line 20
   at Bunit.TestContext.Render[TComponent](RenderFragment renderFragment) in /_/src/bunit.web/TestContext.cs:line 61
   at Bunit.TestContext.RenderComponent[TComponent](ComponentParameter[] parameters) in /_/src/bunit

[egil]

Hmm so calling ...

context.JSInterop.SetupModule("./_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js");

... in your CreateTestContext doesnt give you a new exception?

[Crashdummyy]

Nope the exception occurs when Rendering

[egil]

Yes. What I mean is, if have the SetupModule call in the CreateTestContext method, do you get the same exception when you render your component?

If you are getting the same exception, it could mean that the name of the module name is not exactly right or that there is an error in the SetupModule method...

[Crashdummyy]

I haven't edited the code above sorry.
I do the SetupModule inside the CreateContext method.
It doesn't matter if I do this before or after builder.Services.AddSyncfusionBlazor()
I always get the same exception with the unexpected import statement

By the way I got some minor response from syncfusion on the issue at hand:

We are working on this. Due to complexity and several test case scenarios we will include this in our volume 1 release 2021. We appreciate your patience until then.

.. intriguing

I guess I'll stick with that workaround till then:
context.JSInterop.Mode = JSRuntimeMode.Loose;