PR feedback and some test fixes

Author: ryanbrandenburg

src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/index.html

@@ -15,8 +15,8 @@
 
     <div id="error-ui">
         An unhandled error has occurred.
-        <a href class='reload'>Reload</a>
-        <a class='dismiss'>🗙</a>
+        <a href class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>

src/Components/Samples/BlazorServerApp/Shared/MainLayout.razor

@@ -16,6 +16,6 @@
 </div>
 <div id="error-ui">
     An unhandled error has occurred.
-    <a class='reload'>Reload</a>
-    <a class='dismiss'>X</a>
+    <a class="reload">Reload</a>
+    <a class="dismiss">X</a>
 </div>

src/Components/test/E2ETest/Tests/ErrorNotificationClientSideTest.cs

@@ -1,6 +1,7 @@
 // Copyright (c) .NET Foundation. All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
+using System;
 using BasicTestApp;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
@@ -11,6 +12,7 @@
 
 namespace Microsoft.AspNetCore.Components.E2ETest.Tests
 {
+    [Collection("ErrorNotification")] // When the clientside and serverside tests run together it seems to cause failures, possibly due to connection lose on exception.
     public class ErrorNotificationClientSideTest : ServerTestBase<ToggleExecutionModeServerFixture<Program>>
     {
         public ErrorNotificationClientSideTest(
@@ -31,30 +33,34 @@ protected override void InitializeAsyncCore()
         }
 
         [Fact]
-        public void ShowsErrorNotificationClientSide_OnError()
+        public void ShowsErroNotification_OnError_Dismiss()
         {
             var errorUi = Browser.FindElement(By.Id("error-ui"));
             Assert.Equal("none", errorUi.GetCssValue("display"));
 
             var causeErrorButton = Browser.FindElement(By.TagName("button"));
             causeErrorButton.Click();
 
-            Browser.Exists(By.CssSelector("#error-ui[style='display: block;']"));
+            Browser.Exists(By.CssSelector("#error-ui[style='display: block;']"), TimeSpan.FromSeconds(10));
 
             var reload = Browser.FindElement(By.ClassName("reload"));
             reload.Click();
 
-            Browser.MountTestComponent<ErrorComponent>();
-            causeErrorButton = Browser.Exists(By.TagName("button"));
-            errorUi = Browser.FindElement(By.Id("error-ui"));
+            Browser.DoesNotExist(By.TagName("button"));
+        }
+
+        [Fact]
+        public void ShowsErrorNotification_OnError_Reload()
+        {
+            var causeErrorButton = Browser.Exists(By.TagName("button"));
+            var errorUi = Browser.FindElement(By.Id("error-ui"));
             Assert.Equal("none", errorUi.GetCssValue("display"));
 
             causeErrorButton.Click();
-            Assert.Equal("block", errorUi.GetCssValue("display"));
+            Browser.Exists(By.CssSelector("#error-ui[style='display: block;']"));
 
             var dismiss = Browser.FindElement(By.ClassName("dismiss"));
             dismiss.Click();
-            Browser.Exists(By.CssSelector("#error-ui"));
             Browser.Exists(By.CssSelector("#error-ui[style='display: none;']"));
         }
     }

src/Components/test/E2ETest/Tests/ErrorNotificationServerSideTest.cs

@@ -2,7 +2,6 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
 using BasicTestApp;
-using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
 using Microsoft.AspNetCore.Components.E2ETest.ServerExecutionTests;
 using Microsoft.AspNetCore.E2ETesting;
@@ -12,7 +11,8 @@
 
 namespace Microsoft.AspNetCore.Components.E2ETest.Tests
 {
-    public class ErrorNotificationServerSideTest : ServerTestBase<ToggleExecutionModeServerFixture<Program>>
+    [Collection("ErrorNotification")] // When the clientside and serverside tests run together it seems to cause failures, possibly due to connection lose on exception.
+    public class ErrorNotificationServerSideTest : ErrorNotificationClientSideTest
     {
         public ErrorNotificationServerSideTest(
             BrowserFixture browserFixture,
@@ -30,34 +30,5 @@ protected override void InitializeAsyncCore()
             Browser.Exists(By.Id("error-ui"));
             Browser.Exists(By.TagName("button"));
         }
-
-        [Fact]
-        public void ShowsErrorNotificationServerSide_OnError()
-        {
-            var errorUi = Browser.FindElement(By.Id("error-ui"));
-            Assert.Equal("none", errorUi.GetCssValue("display"));
-
-            var causeErrorButton = Browser.FindElement(By.TagName("button"));
-            causeErrorButton.Click();
-
-            Browser.Exists(By.CssSelector("#error-ui[style='display: block;']"));
-
-            var reload = Browser.FindElement(By.ClassName("reload"));
-            reload.Click();
-
-            Browser.MountTestComponent<ErrorComponent>();
-            causeErrorButton = Browser.Exists(By.TagName("button"));
-            errorUi = Browser.FindElement(By.Id("error-ui"));
-            Assert.Equal("none", errorUi.GetCssValue("display"));
-
-            causeErrorButton.Click();
-            Assert.Equal("block", errorUi.GetCssValue("display"));
-
-            var dismiss = Browser.FindElement(By.ClassName("dismiss"));
-            dismiss.Click();
-            Browser.Exists(By.CssSelector("#error-ui"));
-            Browser.Exists(By.CssSelector("#error-ui[style='display: none;']"));
-            Assert.Equal("none", errorUi.GetCssValue("display"));
-        }
     }
 }

src/Components/test/testassets/BasicTestApp/Index.razor

@@ -20,6 +20,7 @@
         <option value="BasicTestApp.DispatchingComponent">Dispatching to sync context</option>
         <option value="BasicTestApp.DuplicateAttributesComponent">Duplicate attributes</option>
         <option value="BasicTestApp.ElementRefComponent">Element ref component</option>
+        <option value="BasicTestApp.ErrorComponent">Error throwing</option>
         <option value="BasicTestApp.EventBubblingComponent">Event bubbling</option>
         <option value="BasicTestApp.EventCallbackTest.EventCallbackCases">EventCallback</option>
         <option value="BasicTestApp.EventCasesComponent">Event cases</option>
@@ -67,7 +68,6 @@
         <option value="BasicTestApp.SvgWithChildComponent">SVG with child component</option>
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
-        <option value="BasicTestApp.ErrorComponent">Error throwing</option>
     </select>
 
     <span id="runtime-info"><code><tt>@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</tt></code></span>
@@ -83,7 +83,6 @@
     @((RenderFragment)RenderSelectedComponent)
 </app>
 
-
 <div id="error-ui">
     An unhandled error has occurred.
     <a href class='reload'>Reload</a>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Pages/_Host.cshtml

@@ -24,8 +24,8 @@
         <environment include="Development">
             An unhandled exception has occurred. See browser dev tools for details.
         </environment>
-        <a href class='reload'>Reload</a>
-        <a class='dismiss'>🗙</a>
+        <a href class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
     </div>
 
     <script src="_framework/blazor.server.js"></script>

src/Shared/E2ETesting/WaitAssert.cs

@@ -47,6 +47,13 @@ public static void Single(this IWebDriver driver, Func<IEnumerable> actualValues
         public static IWebElement Exists(this IWebDriver driver, By finder)
             => Exists(driver, finder, default);
 
+        public static void DoesNotExist(this IWebDriver driver, By finder, TimeSpan timeout = default)
+            => WaitAssertCore(driver, () =>
+            {
+                var elements = driver.FindElements(finder);
+                Assert.Empty(elements);
+            }, timeout);
+
         public static IWebElement Exists(this IWebDriver driver, By finder, TimeSpan timeout)
             => WaitAssertCore(driver, () =>
             {