Bunit tests for editForm dependent components #744

LasVegasIs · 2022-06-03T14:35:16Z

LasVegasIs
Jun 3, 2022

Hello
I have problem with test components which connected to editForm.
I'm especially interested in the InputDate component because I created a component that inherits from it and I want to test my InputDateTime component.

I am trying to execute this:

var editForm = context.RenderComponent<EditForm>(
               ComponentParameter.CreateParameter(nameof(EditForm.Model), new SampleModel())
               );

           var component = context.RenderComponent<InputDateTime>(
               p => p
               .Add(p => p.MinimumValue, minimumValue)
               .Add(p => p.Value, value)
               );

When I am trying to render my component I have standard error:

System.InvalidOperationException : Microsoft.AspNetCore.Components.Forms.InputCheckbox requires a cascading parameter of type EditContext.
For example, you can use Microsoft.AspNetCore.Components.Forms.InputCheckbox inside an EditForm.

Also I tried this

 var component = context.RenderComponent<EditForm>(parameters => parameters
                      .AddChildContent<InputDateTime>()
                    );

error:

System.ArgumentException : Calling AddChildContent on component 'Microsoft.AspNetCore.Components.Forms.EditForm' with a generic ChildContent type (RenderFragment) is not supported. Use the 'Add(p => p.ChildContent, p => {content})' method instead. (Parameter 'childContent')

This 'Add(p => p.ChildContent, p => {content})' I can't use because I can't render InputDateTime component.

And at the moment I don't know how to correctly attach InputDateTime component to the EditForm using Bunit.TestContext or something else.
How I can test this InputDateTime if it dependent editForm component ?

Answered by egil

Jun 7, 2022

UPDATED with code that probably works :) (I actually have not tested it locally, just typing this out on my phone between meetings).

@LasVegasIs, I would probably write my test in .razor file, but if you prefer C#, then something like this should work:

var ctx = new TestContext();

var model = new SampleModel();
var editContext = new EditContext(model);
var dateFormat = "yyyy-MM-ddTHH:mm";
var minimumValue = DateTime.Now.AddDays(-2);
var minimumValueWithFormat = minimumValue.ToString(dateFormat);
var value = DateTime.Now;

var editForm = ctx.RenderComponent<CascadingValue<EditContext>>(ps => ps
  .Add(p => p.value, editContext)
  .AddChildContent<InputDateTime>(idtps => ipdtps.
    .Add(p =>

View full answer

linkdotnet · 2022-06-03T15:54:18Z

linkdotnet
Jun 3, 2022
Maintainer Sponsor

The crux is that the InputDate and all the other form elements are only valid inside a EditForm. The EditForm can provide a EditContext.

Now you added an EditForm at the beginning of your test but this EditForm is completely disconnected from your InputDateTime object. From an hierarchical point of view calling multiple times RenderComponent will create DOM elements in the same hierarchy not parent - child constellations.

Furthermore the exception is coming from a different component: InputCheckbox. That said it would be benefical if you could post a minimal and reproduceable sample including your production code and the whole test.

Maybe you don't need the EditForm at all or you can leverage the RootRenderTree but it really depends what is the exact configuration.

0 replies

LasVegasIs · 2022-06-06T09:53:19Z

LasVegasIs
Jun 6, 2022
Author

Hello, @linkdotnet
It is reproduced sample:

1) my razor component:

@using System.Globalization
<input type="datetime-local"
       value="@CurrentValueAsString"
       onchange="@((ChangeEventArgs __e) => CurrentValueAsString = __e?.Value?.ToString())"
       @attributes=InputAttributes
       format="@DateFormat"
       class=@CssClass
       />

@inherits InputDate<DateTime>

@code
{
    private const string DateFormat = "yyyy-MM-ddTHH:mm"; // Compatible with HTML date inputs
    private const string DateTimeFormatForValidation = "yyyy-MM-ddTHH:mm:ss";

    [Parameter]
    public DateTime? MinimumValue { get; set; }

    protected override string FormatValueAsString(DateTime value) => value.ToString(DateFormat);

    protected override bool TryParseValueFromString(string value, out DateTime result, out string validationErrorMessage)
    {
        var success = BindConverter.TryConvertToDateTime(value, CultureInfo.InvariantCulture, DateTimeFormatForValidation, out result);

        if (success)
        {
            validationErrorMessage = null;
            return true;
        }
        else
        {
            validationErrorMessage = string.Format(ParsingErrorMessage, FieldIdentifier.FieldName);
            return false;
        }
    }

    private IEnumerable<KeyValuePair<string, object>> InputAttributes
    {
        get
        {
            var additionalAttributes = AdditionalAttributes;
            if (additionalAttributes != null)
            {
                foreach (var attribute in additionalAttributes)
                {
                    yield return attribute;
                }
            }
            if (MinimumValue.HasValue)
            {
                var minimumValueAsString = MinimumValue.Value.ToString(DateFormat);
                yield return new KeyValuePair<string, object>("min", minimumValueAsString);
            }
        }
    }
}

2) Test for this component:

[Test]
        public void ActionProvided_ActionIsInvokedOnClick()
        {
            using var context = new Bunit.TestContext();

            string dateFormat = "yyyy-MM-ddTHH:mm";
            DateTime minimumValue = DateTime.Now.AddDays(-2);
            string minimumValueWithFormat = minimumValue.ToString(dateFormat);
            DateTime value = DateTime.Now;

           var actionMock = new Mock<Action>();

            //create EditForm form 
            var editForm = context.RenderComponent<EditForm>(
                ComponentParameter.CreateParameter(nameof(EditForm.Model), new SampleModel())
                );

            var component = context.RenderComponent<InputDateTime>(
                p => p
                .Add(p => p.MinimumValue, minimumValue)
                .Add(p => p.Value, value)
                );

            var dateTimeInput = component.Find("input");

            Assert.That(dateTimeInput.TextContent, Is.EqualTo(value));
            Assert.That(dateTimeInput.Attributes.Single(b => b.Name == "min").Value, Is.EqualTo(minimumValueWithFormat));

            dateTimeInput.Click();

            actionMock.Verify(a => a(), Times.Once);
        }

3) Error message which I have in this case:

System.InvalidOperationException : Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime requires a cascading parameter of type EditContext. For example, you can use Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime inside an EditForm.

Could you please provide example how I can to fix this error in my case ?

2 replies

linkdotnet Jun 7, 2022
Maintainer Sponsor

I don't think you need the EditForm in the first place. I am also not sure what you really want to test. The EditForm would help you providing an EditContext. But for that too work you either have to wrap your component in a component like that:

<EditForm Model="@sampleModel">
    <InputDateTime @bind-value="sampleModel.SomeProperty"></InputDateTime>
</EditForm>

But that doesn't happen in your test. When you invoke two RenderComponents like you did (in the same hierarchy), they produce a dom like that:

<EditForm></EditForm>
<InputDateTime></InputDateTime>

So InputDateTime is not a child. There are ways to make that work but again, I don't think you need this here. Foremost because you don't want to check integration here (like validation error messages etc.).

You also have a actionMock which you verify but it doesn't get passed in anywhere.

That said you want to check a production code like this: <InputDateTime @bind-Value="somePropertyOrField" MinValue="@DateTime.Now"></InputDateTime>.

@egil I guess to make @bind-Value work one has to provide all 3 underyling properties and events?

RenderComponent<InputDateTime>(p => p
    .Add(p => p.Value, ...)
    .Add(p => p.ValueExpression, ...)
    .Add(P => p.ValueChanged, ...);

Maybe this is also something where we can help the user to make it feel more natural? (If he doesn't use razor files for their testing code).

egil Jun 7, 2022
Maintainer

@linkdotnet I think you are right. We might be able to introduce an overload that make passing all the three parameters in.

LasVegasIs · 2022-06-07T11:41:21Z

LasVegasIs
Jun 7, 2022
Author

Yes I agree about that I render like this in my case:

<EditForm></EditForm>
<InputDateTime></InputDateTime>

But I want to render this using bUnit tests :

<EditForm>
  <InputDateTime></InputDateTime>
</EditForm>

But I don't know how to render it using bUnit where InputDateTime is the child component.
If I will try to render InputDateTime without editForm I will have error because InputDateTime inherited with standard component DateTime which required editForm or EditContext when it rendering:

System.InvalidOperationException : Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime requires a cascading parameter of type EditContext. For example, you can use Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime inside an EditForm.

How I can render using bUinit my InputDateTime or standard DateTime if it dependent with editForm ?

0 replies

egil · 2022-06-07T11:42:28Z

egil
Jun 7, 2022
Maintainer

UPDATED with code that probably works :) (I actually have not tested it locally, just typing this out on my phone between meetings).

@LasVegasIs, I would probably write my test in .razor file, but if you prefer C#, then something like this should work:

var ctx = new TestContext();

var model = new SampleModel();
var editContext = new EditContext(model);
var dateFormat = "yyyy-MM-ddTHH:mm";
var minimumValue = DateTime.Now.AddDays(-2);
var minimumValueWithFormat = minimumValue.ToString(dateFormat);
var value = DateTime.Now;

var editForm = ctx.RenderComponent<CascadingValue<EditContext>>(ps => ps
  .Add(p => p.value, editContext)
  .AddChildContent<InputDateTime>(idtps => ipdtps.
    .Add(p => p.MinimumValue, minimumValue)
    .Add(p => p.Value, value)));

var cut = editForm.FindComponent<InputDateTime>(); 

// assertions ...

The key is, as @linkdotnet mentions, that when you call RenderComponent, you are creating a new render tree without the previous rendered components inside it. That is why, if your InputDateTime component requires a parent component, you render that using RenderComponent and adds the InputDateTime component as child content to it.

An alternative is to use the change the root RenderTree, like this (more here https://bunit.dev/docs/providing-input/root-render-tree.html):

var ctx = new TestContext();

var model = new SampleModel();
var editContext = new EditContext(model);
var dateFormat = "yyyy-MM-ddTHH:mm";
var minimumValue = DateTime.Now.AddDays(-2);
var minimumValueWithFormat = minimumValue.ToString(dateFormat);
var value = DateTime.Now;

ctx.RendeTree.Add<CascadingValue<EditContext>>(ps => ps.Add(p => p.value, editContext));

var cut = RenderComponent<InputDateTime>(ps => ps
    .Add(p => p.MinimumValue, minimumValue)
    .Add(p => p.Value, value));

// assertions ...

When you use add a component to the root RenderTree, then it will be included as a parent to all components rendered via the RenderComponent method. So this allows you to have a common "root render tree" for all components rendered via the RenderComponent method.

Hope this helps!

0 replies

LasVegasIs · 2022-06-07T12:42:00Z

LasVegasIs
Jun 7, 2022
Author

@egil for this cases:
1.

var ctx = new TestContext();

var model = new SampleModel();
var dateFormat = "yyyy-MM-ddTHH:mm";
var minimumValue = DateTime.Now.AddDays(-2);
var minimumValueWithFormat = minimumValue.ToString(dateFormat);
var value = DateTime.Now;

var editForm = ctx.RenderComponent<EditForm>(ps => ps
  .Add(p => p.Model, model)
  .AddChildContent<InputDateTime>(idtps => ipdtps.
    .Add(p => p.MinimumValue, minimumValue)
    .Add(p => p.Value, value));

var cut = editForm.FindComponent<InputDateTime>();

I have this error:

System.ArgumentException : Calling AddChildContent on component 'Microsoft.AspNetCore.Components.Forms.EditForm' with a generic ChildContent type (RenderFragment<T>) is not supported. Use the 'Add(p => p.ChildContent, p => {content})' method instead. (Parameter 'childContent')

2.

var ctx = new TestContext();

var model = new SampleModel();
var dateFormat = "yyyy-MM-ddTHH:mm";
var minimumValue = DateTime.Now.AddDays(-2);
var minimumValueWithFormat = minimumValue.ToString(dateFormat);
var value = DateTime.Now;

ctx.RendeTree.Add<EditForm>(ps => ps.Add(p => p.Model, model));

var cut = RenderComponent<InputDateTime>(ps => ps
    .Add(p => p.MinimumValue, minimumValue)
    .Add(p => p.Value, value));

// assertions ...

this error:

System.InvalidOperationException : Unable to set property 'ChildContent' on object of type 'Microsoft.AspNetCore.Components.Forms.EditForm'. The error was: Unable to cast object of type 'Microsoft.AspNetCore.Components.RenderFragment' to type 'Microsoft.AspNetCore.Components.RenderFragment`1[Microsoft.AspNetCore.Components.Forms.EditContext]'.
  ----> System.InvalidCastException : Unable to cast object of type 'Microsoft.AspNetCore.Components.RenderFragment' to type 'Microsoft.AspNetCore.Components.RenderFragment`1[Microsoft.AspNetCore.Components.Forms.EditContext]'.

3. Also I tried to use:

	var editForm = context.RenderComponent<EditForm>(ps => ps
              .Add(p => p.Model, model)
              .AddChildContent(context.RenderComponent<InputDateTime>().Markup)
              );

the same error which I had before that InputDateTime require editForm.

I think the second example the right way in this case but somehow I need to convert Microsoft.AspNetCore.Components.RenderFragment to Microsoft.AspNetCore.Components.RenderFragment1[Microsoft.AspNetCore.Components.Forms.EditContext] when rendering InputDateTime component ?

5 replies

linkdotnet Jun 7, 2022
Maintainer Sponsor

For what do you need the EditForm @LasVegasIs? Does it really have to be embedded?

LasVegasIs Jun 7, 2022
Author

I don't need EditForm for my tests but it is required when I am trying to context.RenderComponent<InputDateTime>() component otherwise I will have error:

System.InvalidOperationException : Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime requires a cascading parameter of type EditContext. For example, you can use Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime inside an EditForm.

egil Jun 7, 2022
Maintainer

LOL, sorry, didn't actually test the code. Ill see if I can come up with an example.

And yeah, because EditForm actually requires a RenderFragment<T> and not a RenderFragment, you cannot use the root RenderTree feature.

linkdotnet Jun 7, 2022
Maintainer Sponsor

I don't need EditForm for my tests but it is required when I am trying to context.RenderComponent<InputDateTime>() component otherwise I will have error:
System.InvalidOperationException : Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime requires a cascading parameter of type EditContext. For example, you can use Nfield.Cati.Client.Pages.InterviewComponents.InputDateTime inside an EditForm.

Weird. I simply tried your example (without the EditForm) and it worked. Let's say I got a different exception :D

egil Jun 7, 2022
Maintainer

@linkdotnet, he needs to pass down an EditContext which is required by the InputBase component that his component ultimately inherits from. Thats just a POCO though, that we can new directly.

@LasVegasIs see my previous comment with an updated example that should work. Have not tested it locally, I'm replying from my phone.

LasVegasIs · 2022-06-07T14:07:31Z

LasVegasIs
Jun 7, 2022
Author

Thanks 👍 ,
the variant with CascadingValue<EditContext> is working for me:

var editForm = context.RenderComponent<CascadingValue<EditContext>>(ps => ps
              .Add(p => p.Value, editContext)
              .AddChildContent<InputDateTime>(p => p
                .Add(p => p.MinimumValue, minimumValue)
                .Add(p => p.Value, value)
                .Add(p => p.ValueExpression, () => value)
                )
              );

And I created test :)

[Test]
      public void ActionProvided_ActionIsInvokedOnClick()
      {
          using var context = new Bunit.TestContext();

          string dateFormat = "yyyy-MM-ddTHH:mm";
          DateTime minimumValue = DateTime.Now.AddDays(-2);
          string minimumValueWithFormat = minimumValue.ToString(dateFormat);
          string type = "datetime-local";
          DateTime value = DateTime.Now;
          string valueWithFormat = value.ToString(dateFormat);
          var model = new SampleModel();
          var editContext = new EditContext(model);

          var actionMock = new Mock<Action>();

          var editForm = context.RenderComponent<CascadingValue<EditContext>>(ps => ps
            .Add(p => p.Value, editContext)
            .AddChildContent<InputDateTime>(p => p
              .Add(p => p.MinimumValue, minimumValue)
              .Add(p => p.Value, value)
              .Add(p => p.ValueExpression, () => value)
              )
            );

          var dateTimeInput = editForm.Find("input");

          Assert.That(dateTimeInput.Attributes.Single(b => b.Name == "type").Value, Is.EqualTo(type));
          Assert.That(dateTimeInput.Attributes.Single(b => b.Name == "value").Value, Is.EqualTo(valueWithFormat));
          Assert.That(dateTimeInput.Attributes.Single(b => b.Name == "min").Value, Is.EqualTo(minimumValueWithFormat));
          Assert.That(dateTimeInput.Attributes.Single(b => b.Name == "format").Value, Is.EqualTo(dateFormat));
      }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bunit tests for editForm dependent components #744

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 7 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Bunit tests for editForm dependent components #744

LasVegasIs Jun 3, 2022

Replies: 6 comments · 7 replies

linkdotnet Jun 3, 2022 Maintainer Sponsor

LasVegasIs Jun 6, 2022 Author

linkdotnet Jun 7, 2022 Maintainer Sponsor

egil Jun 7, 2022 Maintainer

LasVegasIs Jun 7, 2022 Author

egil Jun 7, 2022 Maintainer

LasVegasIs Jun 7, 2022 Author

linkdotnet Jun 7, 2022 Maintainer Sponsor

LasVegasIs Jun 7, 2022 Author

egil Jun 7, 2022 Maintainer

linkdotnet Jun 7, 2022 Maintainer Sponsor

egil Jun 7, 2022 Maintainer

LasVegasIs Jun 7, 2022 Author

LasVegasIs
Jun 3, 2022

Replies: 6 comments 7 replies

linkdotnet
Jun 3, 2022
Maintainer Sponsor

LasVegasIs
Jun 6, 2022
Author

linkdotnet Jun 7, 2022
Maintainer Sponsor

egil Jun 7, 2022
Maintainer

LasVegasIs
Jun 7, 2022
Author

egil
Jun 7, 2022
Maintainer

LasVegasIs
Jun 7, 2022
Author

linkdotnet Jun 7, 2022
Maintainer Sponsor

LasVegasIs Jun 7, 2022
Author

egil Jun 7, 2022
Maintainer

linkdotnet Jun 7, 2022
Maintainer Sponsor

egil Jun 7, 2022
Maintainer

LasVegasIs
Jun 7, 2022
Author