Clicking on submit button will trigger form submit (#580)

* Dispatch onsubmit event for forms when clicking button inside the form

* Should throw exception when invoking onsubmit on non-form element

* Fix MA0006

* Remove whitespaces

Co-authored-by: Egil Hansen <[email protected]>

* Simplified tests

* Also don't consider Async version in exclusion list

* Updated changelog

Co-authored-by: Egil Hansen <[email protected]>

Author: linkdotnet

CHANGELOG.md

@@ -16,6 +16,8 @@ This release reintroduces `Stub<TComponent>` and related back into the main libr
 ### Fixed
 
 - Changed `SetParametersAndRender` such that it rethrows any exceptions thrown by the component under tests `SetParametersAsync` method. Thanks to [@bonsall](https://github.com/bonsall) for reporting the issue. Fixed by [@egil](https://github.com/egil).
+- `onclick` on a button inside a form will raise the `onsubmit` event for the form itself. Reported by [@egil]. Fixed by [@linkdotnet](https://github.com/linkdotnet).
+- Only forms are allowed to have a `onsubmit` event handler. When `onsubmit` is invoked from a non-form element results in an exception. Fixed by [@linkdotnet](https://github.com/linkdotnet).
 
 ## [1.3.42] - 2021-11-09
 

src/bunit.web/EventDispatchExtensions/TriggerEventDispatchExtensions.cs

@@ -45,16 +45,45 @@ public static Task TriggerEventAsync(this IElement element, string eventName, Ev
 
 		var isNonBubblingEvent = NonBubblingEvents.Contains(eventName.ToLowerInvariant());
 
+		var unwrappedElement = element.Unwrap();
 		if (isNonBubblingEvent)
-			return TriggerNonBubblingEventAsync(renderer, element.Unwrap(), eventName, eventArgs);
+			return TriggerNonBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs);
 
-		return TriggerBubblingEventAsync(renderer, element.Unwrap(), eventName, eventArgs);
+		return unwrappedElement switch
+		{
+			IHtmlInputElement { Type: "submit", Form: not null } input when eventName is "onclick" =>
+				TriggerFormSubmitBubblingEventAsync(renderer, input, eventArgs, input.Form),
+			IHtmlButtonElement { Type: "submit", Form: not null } button when eventName is "onclick" =>
+				TriggerFormSubmitBubblingEventAsync(renderer, button, eventArgs, button.Form),
+			_ => TriggerBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs)
+		};
+	}
+
+	private static Task TriggerFormSubmitBubblingEventAsync(ITestRenderer renderer, IElement element, EventArgs eventArgs, IHtmlFormElement form)
+	{
+		var events = GetDispatchEventTasks(renderer, element, "onclick", eventArgs);
+		events = events.Concat(GetDispatchEventTasks(renderer, form, "onsubmit", eventArgs)).ToList();
+
+		if (events.Count == 0)
+			throw new MissingEventHandlerException(element, "onclick");
+
+		return Task.WhenAll(events);
 	}
 
 	private static Task TriggerBubblingEventAsync(ITestRenderer renderer, IElement element, string eventName, EventArgs eventArgs)
+	{
+		var eventTasks = GetDispatchEventTasks(renderer, element, eventName, eventArgs);
+
+		if (eventTasks.Count == 0)
+			throw new MissingEventHandlerException(element, eventName);
+
+		return Task.WhenAll(eventTasks);
+	}
+
+	private static List<Task> GetDispatchEventTasks(ITestRenderer renderer, IElement element, string eventName, EventArgs eventArgs)
 	{
 		var eventAttrName = Htmlizer.ToBlazorAttribute(eventName);
-		var eventStopPropergationAttrName = $"{eventAttrName}:stoppropagation";
+		var eventStopPropagationAttrName = $"{eventAttrName}:stoppropagation";
 		var eventTasks = new List<Task>();
 
 		foreach (var candidate in element.GetParentsAndSelf())
@@ -73,22 +102,22 @@ private static Task TriggerBubblingEventAsync(ITestRenderer renderer, IElement e
 				}
 			}
 
-			if (candidate.HasAttribute(eventStopPropergationAttrName) || candidate.EventIsDisabled(eventName))
+			if (candidate.HasAttribute(eventStopPropagationAttrName) || candidate.EventIsDisabled(eventName))
 			{
 				break;
 			}
 		}
 
-		if (eventTasks.Count == 0)
-			throw new MissingEventHandlerException(element, eventName);
-
-		return Task.WhenAll(eventTasks);
+		return eventTasks;
 	}
 
 	private static Task TriggerNonBubblingEventAsync(ITestRenderer renderer, IElement element, string eventName, EventArgs eventArgs)
 	{
 		var eventAttrName = Htmlizer.ToBlazorAttribute(eventName);
 
+		if (string.Equals(eventName, "onsubmit", StringComparison.Ordinal) && element is not IHtmlFormElement)
+			throw new InvalidOperationException("Only forms can have a onsubmit event");
+
 		if (element.TryGetEventId(eventAttrName, out var id))
 			return renderer.DispatchEventAsync(id, new EventFieldInfo() { FieldValue = eventName }, eventArgs);
 

tests/bunit.testassets/SampleComponents/OnsubmitButton.razor

@@ -0,0 +1,3 @@
+<form @onsubmit="() => { }">
+	<button @onsubmit="() => { }"></button>
+</form>

tests/bunit.testassets/SampleComponents/SubmitFormOnClick.razor

@@ -0,0 +1,11 @@
+<form id="my-form" @onsubmit="() => FormSubmitted = true">
+	<button id="inside-form-button" type="submit" @onclick="() => Clicked = true">Submit</button>
+	<input id="inside-form-input" type="submit" @onclick="() => Clicked = true" value="Submit" />
+</form>
+
+<button id="outside-form-button" form="my-form">Submit outside</button>
+
+@code {
+    public bool FormSubmitted;
+	public bool Clicked;
+}

tests/bunit.web.tests/EventDispatchExtensions/GeneralEventDispatchExtensionsTest.cs

@@ -90,7 +90,6 @@ public void Test101()
 		[InlineData("onprogress")]
 		[InlineData("onreset")]
 		[InlineData("onscroll")]
-		[InlineData("onsubmit")]
 		[InlineData("onunload")]
 		[InlineData("ontoggle")]
 		[InlineData("onDOMNodeInsertedIntoDocument")]
@@ -232,5 +231,35 @@ public void Test303(string exceptionMessage)
 			Should.Throw<Exception>(() => cut.Find("button").Click())
 				.Message.ShouldBe(exceptionMessage);
 		}
+
+		[Fact(DisplayName = "Should handle click event first and submit form afterwards for button")]
+		public void Test304()
+		{
+			var cut = RenderComponent<SubmitFormOnClick>();
+
+			cut.Find("button").Click();
+
+			cut.Instance.FormSubmitted.ShouldBeTrue();
+			cut.Instance.Clicked.ShouldBeTrue();
+		}
+
+		[Fact(DisplayName = "Should handle click event first and submit form afterwards for input when type button")]
+		public void Test305()
+		{
+			var cut = RenderComponent<SubmitFormOnClick>();
+
+			cut.Find("#inside-form-input").Click();
+
+			cut.Instance.FormSubmitted.ShouldBeTrue();
+			cut.Instance.Clicked.ShouldBeTrue();
+		}
+
+		[Fact(DisplayName = "Should throw exception when invoking onsubmit from non form")]
+		public void Test306()
+		{
+			var cut = RenderComponent<OnsubmitButton>();
+
+			Should.Throw<InvalidOperationException>(() => cut.Find("button").Submit());
+		}
 	}
 }

tests/bunit.web.tests/EventDispatchExtensions/InputEventDispatchExtensionsTest.cs

@@ -2,9 +2,10 @@ namespace Bunit
 {
 	public class InputEventDispatchExtensionsTest : EventDispatchExtensionsTest<ChangeEventArgs>
 	{
-		private static readonly string[] ExcludedMethodsFromGenericTests = new[] { "Change", "Input" };
-		public static IEnumerable<object[]> Helpers { get; }
-			= GetEventHelperMethods(typeof(InputEventDispatchExtensions), x => !ExcludedMethodsFromGenericTests.Contains(x.Name));
+		private static readonly string[] ExcludedMethodsFromGenericTests = new[] { "Change", "Input", "Submit" };
+        public static IEnumerable<object[]> Helpers { get; }
+        	= GetEventHelperMethods(typeof(InputEventDispatchExtensions), x => !ExcludedMethodsFromGenericTests
+        	.Contains(x.Name.Replace("Async", string.Empty, StringComparison.Ordinal)));
 
 		private static readonly Fixture Fixture = new();