Triggered events bubble correctly up the DOM/render tree and triggers event handlers higher up, if conditions are met

Author: egil

CHANGELOG.md

@@ -2,9 +2,11 @@
 
 All notable changes to **bUnit** will be documented in this file. The project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+<!-- The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) -->
+
 ## [UNRELEASED BETA 11]
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+The following section list all changes in beta-11.
 
 ### Added
 List of new features.
@@ -42,17 +44,17 @@ List of soon-to-be removed features.
 ### Removed
 List of now removed features.
 
+- The async event dispatcher helper methods have been removed (e.g. `ClickAsync()`), as they do not provide any benefit. If you have an event that triggers async operations in the component under test, instead use `cut.WaitForState()` or `cut.WaitForAssertion()` to await the expected state in the component.  
+
 ### Fixed
 List of any bug fixes.
 
 - Using the ComponentParameterCollectionBuilder's `Add(p => p.Param, value)` method to add a unnamed cascading value didn't create an unnnamed cascading value parameter. By [@egil](https://github.com/egil) in [#203](https://github.com/egil/bUnit/pull/203). Credits to [Ben Sampica (@benjaminsampica)](https://github.com/benjaminsampica) for reporting and helping investigate this issue.
-
-### Security
-List of fixed security vulnerabilities.
+- Triggered events now bubble correctly up the DOM tree and triggers other events of the same type. This is a **potentially breaking change,** since this changes the behaviour of event triggering and thus you might see tests start breaking as a result hereof. By [@egil](https://github.com/egil) in [#119](https://github.com/egil/bUnit/issues/119).
 
 ## [1.0.0-beta 10] - 2020-09-15
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+The following section list all changes in beta-10.
 
 ### Added
 List of new features.

src/bunit.web/EventDispatchExtensions/GeneralEventDispatchExtensions.cs

@@ -1,7 +1,10 @@
 using System;
+using System.Collections.Generic;
 using System.Globalization;
 using System.Threading.Tasks;
 using AngleSharp.Dom;
+using AngleSharp.Html.Dom;
+using AngleSharpWrappers;
 using Bunit.Rendering;
 using Microsoft.AspNetCore.Components.RenderTree;
 
@@ -12,6 +15,9 @@ namespace Bunit
 	/// </summary>
 	public static class GeneralEventDispatchExtensions
 	{
+		private static HashSet<string> NonBubblingEvents = new HashSet<string> { "onabort", "onblur", "onchange", "onerror", "onfocus", "onload", "onloadend", "onloadstart", "onmouseenter", "onmouseleave", "onprogress", "onreset", "onscroll", "onsubmit", "onunload", "ontoggle", "ondomnodeinsertedintodocument", "ondomnoderemovedfromdocument" };
+		private static HashSet<string> DisabledEventNames = new HashSet<string> { "onclick", "ondblclick", "onmousedown", "onmousemove", "onmouseup" };
+
 		/// <summary>
 		/// Raises the event <paramref name="eventName"/> on the element <paramref name="element"/>
 		/// passing the <paramref name="eventArgs"/> to the event handler.
@@ -24,20 +30,56 @@ public static Task TriggerEventAsync(this IElement element, string eventName, Ev
 		{
 			if (element is null)
 				throw new ArgumentNullException(nameof(element));
+			if (eventName is null)
+				throw new ArgumentNullException(nameof(eventName));
+			var renderer = element.Owner.Context.GetService<ITestRenderer>();
+			if (renderer is null)
+				throw new InvalidOperationException($"Blazor events can only be raised on elements rendered with the Blazor test renderer '{nameof(ITestRenderer)}'.");
 
-			var blazorEventAttr = Htmlizer.ToBlazorAttribute(eventName);
-			var eventHandlerIdString = element.GetAttribute(blazorEventAttr);
+			var eventAttrName = Htmlizer.ToBlazorAttribute(eventName);
+			var eventStopPropergationAttrName = $"{eventAttrName}:stoppropagation";
+			var result = new List<Task>();
+			var isNonBubblingEvent = NonBubblingEvents.Contains(eventName.ToLowerInvariant());
 
-			if (string.IsNullOrEmpty(eventHandlerIdString))
+			foreach (var candidate in element.GetParentsAndSelf())
+			{
+				if (candidate.TryGetEventId(eventAttrName, out var id))
+					result.Add(renderer.DispatchEventAsync(id, new EventFieldInfo() { FieldValue = eventName }, eventArgs));
+
+				if (isNonBubblingEvent || candidate.HasAttribute(eventStopPropergationAttrName) || candidate.EventIsDisabled(eventName))
+				{
+					break;
+				}
+			}
+
+			if (result.Count == 0)
 				throw new MissingEventHandlerException(element, eventName);
 
-			var eventHandlerId = ulong.Parse(eventHandlerIdString, CultureInfo.InvariantCulture);
+			return Task.WhenAll(result);
+		}
 
-			var renderer = element.Owner.Context.GetService<ITestRenderer>();
-			if (renderer is null)
-				throw new InvalidOperationException($"Blazor events can only be raised on elements rendered with the Blazor test renderer '{nameof(ITestRenderer)}'.");
+		private static bool EventIsDisabled(this IElement element, string eventName)
+		{
+			// We want to replicate the normal DOM event behavior that, for 'interactive' elements
+			// with a 'disabled' attribute, certain mouse events are suppressed
+
+			var elm = (element as ElementWrapper)?.WrappedElement ?? element;
+			switch (elm)
+			{
+				case IHtmlButtonElement:
+				case IHtmlInputElement:
+				case IHtmlTextAreaElement:
+				case IHtmlSelectElement:
+					return DisabledEventNames.Contains(eventName) && elm.IsDisabled();
+				default:
+					return false;
+			}
+		}
 
-			return renderer.DispatchEventAsync(eventHandlerId, new EventFieldInfo() { FieldValue = eventName }, eventArgs);
+		private static bool TryGetEventId(this IElement element, string blazorEventName, out ulong id)
+		{
+			var eventId = element.GetAttribute(blazorEventName);
+			return ulong.TryParse(eventId, NumberStyles.Integer, CultureInfo.InvariantCulture, out id);
 		}
 
 		/// <summary>

src/bunit.web/Extensions/Internal/AngleSharpExtensions.cs

@@ -1,4 +1,5 @@
 using System.Collections.Generic;
+using AngleSharp.Diffing.Extensions;
 using AngleSharp.Dom;
 using Bunit.Diffing;
 using Bunit.Rendering;
@@ -63,5 +64,19 @@ public static IEnumerable<INode> AsEnumerable(this INode node)
 		{
 			return nodes?.Length > 0 ? nodes[0].GetHtmlComparer() : null;
 		}
+
+		/// <summary>
+		/// Gets the parents of the <paramref name="element"/>, starting with
+		/// the <paramref name="element"/> itself.
+		/// </summary>
+		public static IEnumerable<IElement> GetParentsAndSelf(this IElement element)
+		{
+			yield return element;
+			foreach (var node in element.GetParents())
+			{
+				if (node is IElement parent)
+					yield return parent;
+			}
+		}
 	}
 }

…tensions/RefreshableElementCollection.cs …Internal/RefreshableElementCollection.cssrc/bunit.web/Extensions/RefreshableElementCollection.cs renamed to src/bunit.web/Extensions/Internal/RefreshableElementCollection.cs src/bunit.web/Extensions/RefreshableElementCollection.cs renamed to src/bunit.web/Extensions/Internal/RefreshableElementCollection.cs

@@ -24,7 +24,7 @@ internal static class Htmlizer
 		private const string BLAZOR_INTERNAL_ATTR_PREFIX = "__internal_";
 		private const string BLAZOR_CSS_SCOPE_ATTR_PREFIX = "b-";
 		internal const string BLAZOR_ATTR_PREFIX = "blazor:";
-		internal const string ELEMENT_REFERENCE_ATTR_NAME = BLAZOR_ATTR_PREFIX + "elementreference";
+		internal const string ELEMENT_REFERENCE_ATTR_NAME = BLAZOR_ATTR_PREFIX + "elementReference";
 
 		public static bool IsBlazorAttribute(string attributeName)
 		{
@@ -236,10 +236,13 @@ private static int RenderAttributes(
 					case bool flag when flag && frame.AttributeName.StartsWith(BLAZOR_INTERNAL_ATTR_PREFIX, StringComparison.Ordinal):
 						// NOTE: This was added to make it more obvious
 						//       that this is a generated/special blazor attribute
-						//	     for internal usage                    
+						//	     for internal usage
+						var nameParts = frame.AttributeName.Split('_', StringSplitOptions.RemoveEmptyEntries);
 						result.Add(" ");
 						result.Add(BLAZOR_ATTR_PREFIX);
-						result.Add(frame.AttributeName);
+						result.Add(nameParts[2]);
+						result.Add(":");
+						result.Add(nameParts[1]);
 						break;
 					case bool flag when flag:
 						result.Add(" ");

src/bunit.web/Rendering/Internal/Htmlizer.cs

@@ -0,0 +1,51 @@
+using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Bunit.TestAssets.SampleComponents
+{
+	public class EventBubbles : ComponentBase
+	{
+		[Parameter] public string ChildElementType { get; set; } = "div";
+		[Parameter] public bool ChildElementDisabled { get; set; }
+		[Parameter] public string? EventName { get; set; }
+		[Parameter] public bool GrandParentStopPropergation { get; set; }
+		[Parameter] public bool ParentStopPropergation { get; set; }
+		[Parameter] public bool ChildStopPropergation { get; set; }
+		public int GrandParentTriggerCount { get; private set; }
+		public int ParentTriggerCount { get; private set; }
+		public int ChildTriggerCount { get; private set; }
+
+		protected override void BuildRenderTree(RenderTreeBuilder builder)
+		{
+			if (EventName is null) return;
+
+			builder.OpenElement(0, "div");
+			builder.AddAttribute(1, EventName, EventCallback.Factory.Create<EventArgs>(this, (evt) => GrandParentTriggerCount++));
+			builder.AddAttribute(2, "id", "grand-parent");
+			builder.AddEventStopPropagationAttribute(3, EventName, GrandParentStopPropergation);
+			{
+				builder.OpenElement(10, "div");
+				builder.AddAttribute(11, EventName, EventCallback.Factory.Create<EventArgs>(this, (evt) => ParentTriggerCount++));
+				builder.AddAttribute(12, "id", "parent");
+				builder.AddEventStopPropagationAttribute(13, EventName, ParentStopPropergation);
+				{
+					builder.OpenElement(20, ChildElementType);
+					{
+						builder.AddAttribute(21, EventName, EventCallback.Factory.Create<EventArgs>(this, (evt) => ChildTriggerCount++));
+						builder.AddAttribute(22, "id", "child");
+						builder.AddEventStopPropagationAttribute(23, EventName, ChildStopPropergation);
+						if (ChildElementDisabled)
+						{
+							builder.AddAttribute(24, "disabled", "disabled");
+						}
+					}
+					builder.CloseElement();
+				}
+				builder.CloseElement();
+			}
+			builder.CloseElement();
+		}
+	}
+}

tests/bunit.testassets/SampleComponents/EventBubbles.cs

@@ -1,5 +1,4 @@
 using System.Reflection;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.Web;
 using Xunit;
 

tests/bunit.web.tests/EventDispatchExtensions/ClipboardEventDispatchExtensionsTest.cs

@@ -1,5 +1,4 @@
 using System.Reflection;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.Web;
 using Xunit;
 

tests/bunit.web.tests/EventDispatchExtensions/DragEventDispatchExtensionsTest.cs

@@ -3,7 +3,6 @@
 using System.Diagnostics.CodeAnalysis;
 using System.Linq;
 using System.Reflection;
-using System.Threading.Tasks;
 using AngleSharp.Dom;
 using Bunit.TestAssets.SampleComponents;
 using Shouldly;

tests/bunit.web.tests/EventDispatchExtensions/EventDispatchExtensionsTest.cs

@@ -1,5 +1,4 @@
 using System.Reflection;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.Web;
 using Xunit;