Trigger onsubmit event with submit type button

[Jorn96]

I am trying to test how my form is submitted. Basically I have the following unit test:

bool toastAdded = false;
Action<Notification> toastAddCallback = (Notification n) => toastAdded = true;
try
{
    toastService.OnToastAdd += toastAddCallback;

    var cut = RenderComponent<Transaction>(parameters => parameters
        .Add(p => p.Id, 1) // For this test we need an existing transaction otherwise we get redirected.
    );

    cut.Find("#transactionform").Submit();
    Assert.True(toastAdded);
}
finally
{
    toastService.OnToastAdd -= toastAddCallback;
}

This test is working as it is supposed to but. In my use case form submission is always triggered by a button press, so I would like to use a button click to submit my form. Basically, I want to write my unit test like this:

bool toastAdded = false;
Action<Notification> toastAddCallback = (Notification n) => toastAdded = true;
try
{
    toastService.OnToastAdd += toastAddCallback;

    var cut = RenderComponent<Transaction>(parameters => parameters
        .Add(p => p.Id, 1) // For this test we need an existing transaction otherwise we get redirected.
    );

    var buttons = cut.FindAll("button[type=\"submit\"]");
    var button = buttons.Where(b => b.TextContent == "Save").FirstOrDefault();
    Assert.NotNull(button);
    button.Click();

    Assert.True(toastAdded);
}
finally
{
    toastService.OnToastAdd -= toastAddCallback;
}

However, this is not triggering my OnSubmit method. Is there anyway to get this work?

Thanks

[linkdotnet]

That is interesting. We have a special case in TriggerEventDispatchExtensions exactly for that case as long as there is a <form> element as parent to that button.

TL;DR: Inside a <form> you should be able to call Click on a button that has type "submit" which would trigger the onsbumit event handler of said form

Can you share your component under test?

[Jorn96]

Thanks, I am afk atm. My button is not in my form but linked to it through it's form attribute. So I guess it is not possible.

[linkdotnet]

Hmmm that is maybe something we should consider in the future. I never thought of that case.
But you could do that manually for now. Get the form attribute value and do a cut.Find($"#{theFormName}").Submit();

I know that is not necessarily what you where looking for, but a workaround

[Jorn96]

Yes, I was already using that work around. Thanks for your explanation! Could you point me to which parts of the file you mentioned are in charge of this behaviour?

[linkdotnet]

In TriggerBubblingEventAsync which is used for onclick we call GetDispatchEventTasks

Inside there we check for the following:

if (TryGetParentFormElementSpecialCase(candidate, eventName, out var formEventId))
{
  var info = new EventFieldInfo { FieldValue = "onsubmit" };
  eventTasks.Add(renderer.DispatchEventAsync(formEventId, info, eventArgs, ignoreUnknownEventHandlers: true));
}

This is basically checking: Do we have a button inside a form element. If so - add the onsubmit of that form element to the actions that should be dispatched.

[Jorn96]

Thanks a lot!