Looking for how to create unit test with c# when the component creates a canvas (BECanvasComponent)

[sakvin1]

Hi,
I encounter an issue when I tried to create a unit test for a component that creating a canvas. Unit Test failed with this message.

Message:
Test method TestCanvas threw exception:
System.AggregateException: One or more errors occurred. (Object reference not set to an instance of an object.) ---> System.NullReferenceException: Object reference not set to an instance of an object.
IndexComponent.OnAfterRenderAsync(Boolean firstRender) line 24

This is the line that causes an error in Index.razor.cs.

24.     Console.WriteLine("width={0}.", m.Width.ToString());

Basically, I can't create a JS mock for Blazor.Extensions.Canvas.Canvas2D. Following are the code.

In Index.razor

@page "/Index"
@inherits IndexComponent
<BECanvas Width="800" Height="800" @ref="_canvasReference"></BECanvas>

In Index.razor.cs

using Blazor.Extensions.Canvas.Canvas2D;
using Blazor.Extensions;
public class IndexComponent : ComponentBase
{
    protected BECanvasComponent _canvasReference;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
       Canvas2DContext context = await _canvasReference.CreateCanvas2DAsync();
       var m = await context.MeasureTextAsync("Hello Blazor");
       Console.WriteLine("width={0}.", m.Width.ToString());  // Line 24 that causes the error which m returns null in this case.
    }
}

In Test.cs

[TestMethod]
public async Task TestCanvas()
{
    var jsMock = Services.AddMockJsRuntime(JsRuntimeMockMode.Loose);
    var cut = RenderComponent<Index>();
}

Please help.

[egil]

Hi @sakvin1

It looks as if the m is null in your case, i.e. the call to context.MeasureTextAsync("Hello Blazor") returns null, and when you try to access m.Width you are getting the exception.

I do not know the library you are using, so I am not sure what JSRuntime calls you need to mock to make the test pass. Maybe @galvesribeiro can help here.

[sakvin1]

Thank you @egil for your quick response,

Is there any way if I can create a context in the unit test, and then inject to the component? That would work. Since it failed to create the context when rendering the component in unit test.

Canvas2DContext context = await _canvasReference.CreateCanvas2DAsync();

[egil]

Is there any way if I can create a context in the unit test, and then inject to the component? That would work. Since it failed to create the context when rendering the component in unit test.

Canvas2DContext context = await _canvasReference.CreateCanvas2DAsync();

@sakvin1 there are two general ways of injecting dependencies into components in Blazor, through services and through cascading values. In both cases, the easiest way is if the dependencies are represented in the components that use them as interfaces (abstractions).

Then it is easy to use a framework like Moq to mock these, and inject the mock, either through the Services.AddSingleton<ICanvas2DContext>(new Mock<ICanvas2DContext>().Object), or through a cascading value, RenderComponent<IndexComponent>(CascadingValue(new Mock<ICanvas2DContext>().Object).

The problem is that <BECanvas> is a component, and we do not have a way to mock/replace those at the moment (see related issue #53).

The best solution I can come up with is for you to create an adapter around Canvas2DContext that allows you to mock it in tests and use the real in production. That is a bit of work, but will let you test your code that uses it in isolation.

The alternative is to mock the IJsRuntime (through the builtin MockJsRuntime or Moq), and setup the expected invocations from Canvas2DContext to JS and back. The problem with that approach is that you are tying your tests to the internals of Canvas2DContext, which you probably do not want to test (the authors of Canvas2DContext has supposedly done that), since if the internals of Canvas2DContext changes, then your tests will break, even if the public API of Canvas2DContext stays the same.

[egil]

I'll close this issue. If you still need help, just comment again.