How to test rendering a bound value in a razor based test into a non blazor component.

[wk-done]

Hi all,
I'm trying to test rendering a property (Firstname) bound to a custom input component.
In my test I simulated the input by

var inputElement = cut.Find("input");
inputElement.Input("John");

and test if the bound property was changed correctly. This works.
But the changed property-value is not rendered into the <p>-element:

var pElement = cut.Find("p");
pElement.MarkupMatches("<p>John</p>"); // Fails

I asked this question initially on Stack Overflow. I got an anwer that it is possible, and I was asked to head over to this repo.
So here I am 😉.

Question
For me it is not clear how to trigger a re-render so the <p>-element gets updated with the new value.
I created a minimal working example and uploaded it to this repository.

But here are is the most relevant content:

My Model

  public class Person
  {
    public string Firstname { get; set; } = null!;
    public string Lastname { get; set; } = null!;
  }

My custom input component
Just a wrapper around the input control.

<div>
  <label>@(Label??"Missing Label")
    <input type="text" @bind-value="InputValue" @bind-value:event="oninput" />
  </label>
</div>


@code {
  private string _value = null!;

  /// <summary>
  /// Gets or sets the value of the components input control.
  /// </summary>
  public string InputValue 
  {
    get => this._value;
    set => this.Value = value;
  }

  /// <summary>
  /// Gets or sets the label for the input.
  /// </summary>
  [Parameter]
  public string Label { get; set; } = null!;

  /// <summary>
  /// Gets or sets the bound value-canged event.
  /// </summary>
  [Parameter]
  public EventCallback<string> ValueChanged { get; set; }

  /// <summary>
  /// Gets or sets the bound value of the component.
  /// </summary>
  [Parameter]
  public string Value 
  {
    get
    {
      return this._value;
    }

    set
    {
      var changed = (value is null ^ this._value is null)||(value != this._value);
      this._value = value!;
      if (changed)
      {
        this.InvokeAsync(() => 
        {
          this.ValueChanged.InvokeAsync(this._value);
          this.StateHasChanged();
        });
      }
    }
  }
}

And here, the most important part
My BUnit Test

@using Bunit
@using Bunit.Rendering;
@using Microsoft.AspNetCore.Components.Forms
@using NUnit.Framework;
@using Microsoft.AspNetCore.Components;
@using Microsoft.Extensions.DependencyInjection;
@using BlazorDemo.Model;
@using BlazorDemo.Components;
@inherits Bunit.TestContext;

@code {

  [Test]
  public void TestMyInputComponent()
  {
    var testModel = new Person();
    var editCtx = new EditContext(testModel);
    var cut = Render(
      @<div>
        <EditForm EditContext="editCtx">
            <MyCustomInputComponent Label="Firstname" @bind-Value="testModel.Firstname"></MyCustomInputComponent>
        </EditForm>
        <p>@testModel.Firstname</p>
      </div>
      );

    var inputElement = cut.Find("input");
    inputElement.Input("John");

    // Passes
    Assert.That(testModel.Firstname, Is.EqualTo("John"));
    
    var pElement = cut.Find("p");
    // Fails
    pElement.MarkupMatches("<p>John</p>");
  }
}

Thank you.

[linkdotnet]

Thanks for providing the bigger picture - now with some more details, yes the way you try to achieve that isn't really working (for maybe not obvious reasons).

Your call to cut.Render(@</>) will, as you noticed on SO, also create a IRenderedComponent<IComponent>. The component is from bUnit.

To make your scenario work, you can refactor all the content inside Render in its own (test)component. And call the test like that:

var cut = Render(@<FormComponent></FormComponent>);

Or if you need the strongly typed IRenderedComponent<T>:

var cut = Render<FormComponent>(@<FormComponent></FormComponent>);

That will make your test immediately!

Now - why doesn't the original version work out of the box. As said earlier, we use a type called FragmentContainer that wraps your RenderFragment. FragmentContainer is "just" an IComponent and therefore does not implement any life-cycle you would be used to from ComponentBase. And that is the key difference here. Of course, your C# logic gets called and therefore your model gets updated, but that will never get reflected in the rendered markup.

@egil We might want to make it more clear in the docs, that Render(@<HTML></HTML>) has limitations if you try to "inline"-test some of your logic - I see that point clearly here.

[wk-done]

@linkdotnet : Thank you for the explanation.

Now I created a new "wrapping" component.

TestWrapperComponent.razor

<div>
  @this.ChildContent
</div>

@code {
  [Parameter]
  public RenderFragment ChildContent { get; set; } = null!;

  public void Refresh()
  {
    this.StateHasChanged();
  }
}

And my test looks like this now:

[Test]
public void TestMyInputComponentWithWrapper()
{
  var testModel = new Person();
  var editCtx = new EditContext(testModel);
  var cut = Render(
  @<TestWrapperComponent>
    <EditForm EditContext="editCtx">
      <MyCustomInputComponent Label="Firstname" @bind-Value="testModel.Firstname"></MyCustomInputComponent>
    </EditForm>
    <p>@testModel.Firstname</p>
  </TestWrapperComponent>
  );

  var inputElement = cut.Find("input");
  inputElement.Input("John");

  // Get the component and call a method that invokes "StateHasChanged".
  var renderedComponent = (IRenderedComponent<IComponent>)cut;
  var wrapperComponent = renderedComponent.FindComponent<TestWrapperComponent>();
  wrapperComponent.InvokeAsync(() => wrapperComponent.Instance.Refresh());

  // Passes.
  Assert.That(testModel.Firstname, Is.EqualTo("John"));

  var pElement = cut.Find("p");
  // Passes.
  pElement.MarkupMatches("<p>John</p>");
}

And it works 👍.

Thanks for the help.

[egil]

Good idea @linkdotnet. Let's do that.