Invoking EventCallback on mocked child component does not update field on parent

[EHartfelt]

Hi
I have a test where I'm mocking a razor component on a page.
The component has an EventCallback that updates a private field on the parent page.
This works fine when running the application.
However, I can't get it to work in the test. In the test, I create a mock of the child component and then invoke the callback on the mock. This doesn't seem to update the field on the parent.

Here is minimal example

"Parent.razor"

@page "/"

<PageTitle>Home</PageTitle>

<ChildComponent @ref="m_childComponent" OnUpdate="newValue => m_value = newValue"/>

<h2>Value is: @m_value</h2>

"Parent.razor.cs"

public partial class Parent
{
    private int m_value = 1;
    private ChildComponent m_childComponent;
}

"ChildComponent.razor"

<h3>ChildComponent</h3>

@code {}

"ChildComponent.razor.cs"

public partial class ChildComponent : ComponentBase
{
    [Parameter]
    public EventCallback<int> OnUpdate { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await OnUpdate.InvokeAsync(42);
    }
}

"Test.cs"

[TestClass]
public class ExampleTest : Bunit.TestContext
{
    [TestMethod]
    public async Task Update_Value_On_Parent_By_Invoking_Callback()
    {
        // ARRANGE
        var childComponentMock = new Mock<ChildComponent>();
        
        ComponentFactories.Add(childComponentMock.Object);
        var newValue = 100;
        
        // ACT
        var cut = RenderComponent<Parent>();
        await childComponentMock.Object.OnUpdate.InvokeAsync(newValue);
    
        // ASSERT
        cut.Find("h2").MarkupMatches($"<h2>Value is: {newValue}</h2>");
    }
}

The test fails with the following output

Actual HTML: 
<h2>Value is: 1</h2>

Expected HTML: 
<h2>Value is: 100</h2>

I found this issue #1186 which describes a similar approach, but it uses ComponentFactories.AddStub<T>(); instead of ComponentFactories.Add(someObject);, which I need.

Can you help me?

[linkdotnet]

Hey @EHartfelt,

sorry for the late answer, but Egil and I are currently a bit busy and then OSS has to take a backseat (unfortunately).

Could you try something like:

-await childComponentMock.Object.OnUpdate.InvokeAsync(newValue);
+await cut.InvokeAsync(() => childComponentMock.Object.OnUpdate.InvokeAsync(newValue));

Plus, as this is an async operation, you might wanna resort to WaitForXXX helpers: https://bunit.dev/docs/interaction/awaiting-async-state.html

I can try to dig deeper later, if that doesn't solve the issue.

[linkdotnet]

Good point - not sure what is going on. Have to dig into this a bit.

[linkdotnet]

Sorry I didn't really come to the point investigating further.

But there is an alternative that might work better for you. Instead of providing a mock, you can create your own fake. Only the "Blazor" Public API has to match (so every parameter and public method)

public class ChildComponentFake : ComponentBase
{
  [Parameter]
  public EventCallback<int> OnUpdate { get; set; }

  public async Task TriggerOnUpdateWithNumber(int number)
  {
     await OnUpdate.InvokeAsync(number);
  }
}

You can register the component like this and trigger the function:

ComponentFactories.Add<ChildComponent, ChildComponentFake>();

var fake = cut.FindComponent<ChildComponentFake>();
await fake.InvokeAsync(() => fake.Instance.TriggerOnUpdateWithNumber(100));

I assume very strongly that Mock doesn't mirror the Parameter attribute which Blazor needs for the wiring. I hope that somewhat helps @EHartfelt

[EHartfelt]

Hi again, sorry for the late reply.

There seems to be a problem with casting from ChildComponentFake to ChildComponent.
I've added the following test class:

public class ChildComponentFake : ComponentBase
{
    [Parameter]
    public EventCallback<int> OnUpdate { get; set; }

    public async Task TriggerOnUpdateWithNumber(int number)
    {
        await OnUpdate.InvokeAsync(number);
    }
}

and updated the test

    [TestMethod]
    public async Task Update_Value_On_Parent_By_Invoking_Callback()
    {
        // ARRANGE
        ComponentFactories.Add<ChildComponent, ChildComponentFake>();
        var newValue = 100;
        
        // ACT
        var cut = RenderComponent<Parent>();
        var fake = cut.FindComponent<ChildComponentFake>();
        await fake.InvokeAsync(() => fake.Instance.TriggerOnUpdateWithNumber(newValue));
        
    
        // ASSERT
        cut.WaitForAssertion(() => cut.Find("h2").MarkupMatches($"<h2>Value is: {newValue}</h2>"), timeout: TimeSpan.FromSeconds(10));
    }

but I get the exception

System.InvalidCastException: Unable to cast object of type 'ChildComponentFake' to type 'ChildComponent'.

It seems that if ChildComponentFake inherits directly from ChildComponent then it works, but I'm not sure how well that scales for larger classes.

I'm using Bunit version 1.40.0.

[linkdotnet]

You are absolutely right, and I totally did have an oversight over your @ref="m_childComponent".

This of course changes the setup as your internal code expects a ChildComponent (or any derived class). So yes, in this case you have to derive from ChildComponent if you use it like this.

Sure you could come around with interfaces (so ChildComponent and your fake implement the same interface and you are using private ISomething ChildComponent), but that depends on your use case.

I don't think we can do much here, as this is an internal detail inside your component where we (bUnit) might not have a good hook into, to change that "issue".

[brecht-yperman-uz]

I tried setting this up using the interface, but I get the same error, it seems to be the Blazor rendering engine complaining