fix: Custom elements with attributes throw exception

linkdotnet · linkdotnet · commit 38d84d61d50f · 2023-04-25T19:07:28.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ All notable changes to **bUnit** will be documented in this file. The project ad
 
 ## [Unreleased]
 
+### Fixed
+
+- Custom elements with attributes throw `ArgumentException` with `MarkupMatches`. Reported by [@candritzky](https://github.com/candritzky). Fixed by [@linkdotnet](https://github.com/linkdotnet).
 
 ### Changed 
 
diff --git a/src/bunit.web/Diffing/BlazorDiffingHelpers.cs b/src/bunit.web/Diffing/BlazorDiffingHelpers.cs
@@ -1,4 +1,5 @@
 using AngleSharp.Diffing.Core;
+using AngleSharp.Dom;
 using AngleSharp.Html.Dom;
 
 namespace Bunit.Diffing;
@@ -33,7 +34,7 @@ internal static IEnumerable<Comparison> UnknownElementMatch(
 		SourceCollection testSources)
 	{
 		var lastMatchedTestNodeIndex = -1;
-		foreach (var control in controlSources.GetUnmatched())
+		foreach (var control in controlSources.GetUnmatched().Where(c => c.Node is IElement))
 		{
 			var comparison = TryFindMatchingNodes(control, testSources, lastMatchedTestNodeIndex + 1);
 			if (comparison.HasValue)
@@ -46,7 +47,7 @@ internal static IEnumerable<Comparison> UnknownElementMatch(
 
 	private static Comparison? TryFindMatchingNodes(in ComparisonSource control, SourceCollection testSources, int startIndex)
 	{
-		foreach (var test in testSources.GetUnmatched(startIndex))
+		foreach (var test in testSources.GetUnmatched(startIndex).Where(t => t.Node is IElement))
 		{
 			if (control.Node is IHtmlUnknownElement
 				|| test.Node is IHtmlUnknownElement
diff --git a/tests/bunit.testassets/SampleComponents/CustomElementWithAttribute.razor b/tests/bunit.testassets/SampleComponents/CustomElementWithAttribute.razor
@@ -0,0 +1,3 @@
+<div class="main">
+<my-button emphasis="primary-highlight" disabled>Add new<my-icon slot="icon" size="s32"></my-icon></my-button>
+</div>
diff --git a/tests/bunit.web.tests/Asserting/MarkupMatchesAssertExtensionsTest.cs b/tests/bunit.web.tests/Asserting/MarkupMatchesAssertExtensionsTest.cs
@@ -137,4 +137,18 @@ public void Test015()
 		// in a known context (e.g. <svg> or <foreignObject>)
 		path.MarkupMatches("<path />");
 	}
+
+	[Fact(DisplayName = "Werid")]
+	public void Test016()
+	{
+		const string expectedMarkup = @"<div class=""main"">
+			<my-button emphasis=""primary-highlight"" disabled>Add new<my-icon slot=""icon"" size=""s32""></my-icon></my-button>
+			</div>
+			";
+
+		// Act
+		var chart = RenderComponent<CustomElementWithAttribute>();
+
+		chart.MarkupMatches(expectedMarkup);
+	}
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`using AngleSharp.Diffing.Core;`
	`2`	`+using AngleSharp.Dom;`
`2`	`3`	`using AngleSharp.Html.Dom;`
`3`	`4`
`4`	`5`	`namespace Bunit.Diffing;`
`@@ -33,7 +34,7 @@ internal static IEnumerable<Comparison> UnknownElementMatch(`
`33`	`34`	`SourceCollection testSources)`
`34`	`35`	`{`
`35`	`36`	`var lastMatchedTestNodeIndex = -1;`
`36`		`- foreach (var control in controlSources.GetUnmatched())`
	`37`	`+ foreach (var control in controlSources.GetUnmatched().Where(c => c.Node is IElement))`
`37`	`38`	`{`
`38`	`39`	`var comparison = TryFindMatchingNodes(control, testSources, lastMatchedTestNodeIndex + 1);`
`39`	`40`	`if (comparison.HasValue)`
`@@ -46,7 +47,7 @@ internal static IEnumerable<Comparison> UnknownElementMatch(`
`46`	`47`
`47`	`48`	`private static Comparison? TryFindMatchingNodes(in ComparisonSource control, SourceCollection testSources, int startIndex)`
`48`	`49`	`{`
`49`		`- foreach (var test in testSources.GetUnmatched(startIndex))`
	`50`	`+ foreach (var test in testSources.GetUnmatched(startIndex).Where(t => t.Node is IElement))`
`50`	`51`	`{`
`51`	`52`	`if (control.Node is IHtmlUnknownElement`
`52`	`53`	`\|\| test.Node is IHtmlUnknownElement`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div class="main">`
	`2`	`+<my-button emphasis="primary-highlight" disabled>Add new<my-icon slot="icon" size="s32"></my-icon></my-button>`
	`3`	`+</div>`