testing plain InputTextArea @bind-Value

[ClemensOesterle]

I have a blazor project where I use standard EditForm / InputTextArea,

<EditForm Model="@MyModel" OnValidSubmit="HandleSubmit">
    <InputTextArea id="my-textarea" @bind-Value="@MyModel.Value" 
      @oninput="@(async (e) => await HandleInputTextAreaChange(e))" />
    <button id="submit-button" type="submit">Submit</button>
</EditForm>
@code {
    public class Model
    {
        public string Value { get; set; }
    }

    [CascadingParameter(Name = "Model")]
    public Model MyModel { get; set; }

    private async Task HandleInputTextAreaChange(ChangeEventArgs e)
    {
        await Task.CompletedTask;
    }
    private async Task HandleSubmit()
    {
        // Model.Value should now be updated 
    }
}

but when i try to run it in a bunit test the @bind-Value does not propagate the updated value, which is working fine when running the application.

using Bunit;
using FluentAssertions;

namespace TestProject1
{
    public class UnitTest1
    {
        [Fact]
        public void Test_Databinding()
        {
            var model = new BUnitDataBinding.Pages.Component.Model();
            var ctx = new TestContext();
            var cut = ctx.RenderComponent<BUnitDataBinding.Pages.Component>
                   (parameters => parameters.Add(p => p.MyModel, model));
            var myTextArea = cut.Find("#my-textarea");
            myTextArea.Input("asdf");
            var submitButton = cut.Find("#submit-button");
            submitButton.Click();
            model.Value.Should().Be("asdf");
        }
    }
}

Can one of you guys tell me what I am doing wrong resp. overlooking here?

Thanks in advance

Clemens

[egil]

If you are doing stuff asynchronously in your event handler you might need this: https://bunit.dev/docs/verification/async-assertion

I'm about to board a plane, so that's the best guess right now.

[linkdotnet]

Hey @ClemensOesterle,

your HandleSubmit method is asynchronous. That said Blazor gives back the control to your user code at the await boundary. Click() will not "wait" until your whole asynchronous operation is finished. To get a general idea how you built test which deal with asynchronous methods have a look here: https://bunit.dev/docs/interaction/awaiting-async-state.html

In your particular case there are two things you could do. The first (and preferred) way: utilize WaitForAssertion.

submitButton.Click();
cut.WaitForAssertion(() => model.Value.Should().Be("asdf"));

In theory you could use ClickAsync instead of Click but that comes with other pitfalls. That is why I would suggest use WaitForAssertion. More about that here: https://bunit.dev/docs/verification/async-assertion

[ClemensOesterle]

Thanks for your quick reply but even when I use the WaitForAssertion with a timespan of 30 seconds, the issue remains.

[Fact]
public void Test_Databinding()
{
    var model = new BUnitDataBinding.Pages.Component.Model();
    var ctx = new TestContext();
    var cut = ctx.RenderComponent<BUnitDataBinding.Pages.Component>
            (parameters => parameters.Add(p => p.MyModel, model));
    var myTextArea = cut.Find("#my-textarea");
    myTextArea.Input("asdf");
    var submitButton = cut.Find("#submit-button");
    submitButton.Click();
    cut.WaitForAssertion(() => model.Value.Should().Be("asdf"), new TimeSpan(0, 0, 0, seconds: 30, 0));
}

  Message: 
Bunit.Extensions.WaitForHelpers.WaitForFailedException : The assertion did not pass within the timeout period.
---- Expected model.Value to be "asdf", but found <null>.

  Stack Trace: 
RenderedFragmentWaitForHelperExtensions.WaitForAssertion(IRenderedFragmentBase renderedFragment, Action assertion, Nullable`1 timeout) line 61
--- End of stack trace from previous location ---
RenderedFragmentWaitForHelperExtensions.WaitForAssertion(IRenderedFragmentBase renderedFragment, Action assertion, Nullable`1 timeout) line 71
UnitTest1.Test_Databinding() line 19

[linkdotnet]

Yeah I found a second problem: You are using: myTextArea.Input("asdf"); but it should be myTextArea.Change("asdf");

Your @oninput basically returns a completed task without doing anything. Remember bUnit is not a browser: Input doesn't mean it simulates key-strokes. Input means it calls the oninput event with parameters. The same applies for Change... change will call onchange with the correct set of parameters.

If you change that line it will work.

[ClemensOesterle]

Yes that worked, thanks for spending time on this question even on Swiss national day.

[linkdotnet]

Haha no worries :D