How to test two-way binding correctly?

[celophi]

I have two very simple components (parent and child) that communicate via two-way binding.

@* Child.razor *@
<h3>@currentValue</h3>

@code {
    [Parameter] public string Value { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    private string currentValue;

    protected override void OnParametersSet()
    {
        this.currentValue = Value;
    }
}

@* Parent.razor *@
<h3>Parent</h3>

<Child @bind-Value="Value" />

<button id="mybtn" type="button" @onclick="OnbuttonClick">clickme</button>

@code {
    [Parameter] public string Value { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    private void OnbuttonClick()
    {
        this.ValueChanged.InvokeAsync("button clicked");
    }
}

I wrote a very simple POC test class:

public class TwoWayBindingTest : TestContext
{
    private string Value { get; set; } = "no event";

    [Fact(DisplayName = "Markup should contain the button clicked text that was bound.")]
    public async Task Test1()
    {
        var component = RenderComponent<Parent>(p => p.Bind(c => c.Value, Value, newValue => Value = newValue));

        component.Find("#mybtn").Click();

        component.Markup.Should().Contain("button clicked");
    }
}

The test fails, and if I place a breakpoint on OnParametersSet, the variable currentValue is not updated with the new value that should have been updated via two-way binding. If I place a breakpoint on .Bind(c => c.Value, Value, newValue => Value = newValue), I can see this code execute and the Value parameter set with the newValue, but it does not propagate to OnParametersSet correctly.

What is the appropriate way to get two-way binding to work? I have been referring to the bUnit docs for a clearer example, but cannot find one.

Any help is appreciate. Thank you.

[linkdotnet]

Hey,

I am currently on my mobile so can only keep it short. The page you are referring covers exactly your case:

https://bunit.dev/docs/providing-input/passing-parameters-to-components.html?tabs=csharp#configure-two-way-with-component-parameters-bind-directive

let me know if that helps.

[celophi]

Thanks for replying. I re-read that documentation, but it doesn't seem to address the problem. Specifically, how do I get bUnit to set the new bound parameters automatically?

After ValueChanged is invoked, OnParametersSet is being called with the old value (the one originally set when the test case was set up). It is not being called with the new value as a result of this line newValue => Value = newValue.

[linkdotnet]

Maybe to debug the issue.
Could you rewrite your test to use the razor syntax? There you can easily use the @Bind directive.
The bind method should set the internal value - if that doesn’t happen it indicates a faulty behaviour in bUnit.

I am currently on vacation so I can’t have a deeper look until next week.

[celophi]

Sure. I did rewrite the test and the same problem persists.

@using BlazorApp1.Components.Pages
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Microsoft.Extensions.DependencyInjection
@using AngleSharp.Dom
@using Bunit
@using Bunit.TestDoubles
@using FluentAssertions;

@inherits TestContext
@code
{
    private string Value = "no event";

    [Fact]
    public void Test1()
    {
        var cut = Render(@<Parent @bind-Value="Value" />);

        cut.Find("#mybtn").Click();

        cut.Markup.Should().Contain("button clicked");
    }
}

Perhaps this should be recorded as a bug then.