Adding tests

Author: ryanbrandenburg

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

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

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -1,6 +1,7 @@
 import { MethodHandle, System_Object, System_String, System_Array, Pointer, Platform } from '../Platform';
 import { getFileNameFromUrl } from '../Url';
 import { attachDebuggerHotkey, hasDebuggingEnabled } from './MonoDebugger';
+import { showErrorNotification } from '../../BootErrors';
 
 const assemblyHandleCache: { [assemblyName: string]: number } = {};
 const typeHandleCache: { [fullyQualifiedTypeName: string]: number } = {};
@@ -233,31 +234,9 @@ function createEmscriptenModuleInstance(loadAssemblyUrls: string[], onReady: ()
 
   module.print = line => (suppressMessages.indexOf(line) < 0 && console.log(`WASM: ${line}`));
 
-  const errorUiReloads = document.querySelectorAll<HTMLElement>('#error-ui .reload');
-  errorUiReloads.forEach(reload => {
-    reload.onclick = function (e) {
-      location.reload();
-      e.preventDefault();
-    };
-  });
-
-  let errorUiDismiss = document.querySelectorAll<HTMLElement>('#error-ui .dismiss');
-  errorUiDismiss.forEach(dismiss => {
-    dismiss.onclick = function (e) {
-      const errorUi = document.querySelector<HTMLElement>('#error-ui');
-      if (errorUi) {
-        errorUi.style.display = 'none';
-      }
-      e.preventDefault();
-    };
-  });
-
   module.printErr = line => {
     console.error(`WASM: ${line}`);
-    let errorUi = document.querySelector('#error-ui') as HTMLElement;
-    if (errorUi) {
-      errorUi.style.display = 'block';
-    }
+    showErrorNotification();
   };
   module.preRun = [];
   module.postRun = [];

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

@@ -0,0 +1,61 @@
+// 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 BasicTestApp;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
+using Microsoft.AspNetCore.E2ETesting;
+using OpenQA.Selenium;
+using Xunit;
+using Xunit.Abstractions;
+
+namespace Microsoft.AspNetCore.Components.E2ETest.Tests
+{
+    public class ErrorNotificationClientSideTest : ServerTestBase<ToggleExecutionModeServerFixture<Program>>
+    {
+        public ErrorNotificationClientSideTest(
+            BrowserFixture browserFixture,
+            ToggleExecutionModeServerFixture<Program> serverFixture,
+            ITestOutputHelper output)
+            : base(browserFixture, serverFixture, output)
+        {
+        }
+
+        protected override void InitializeAsyncCore()
+        {
+            // On WebAssembly, page reloads are expensive so skip if possible
+            Navigate(ServerPathBase, noReload: _serverFixture.ExecutionMode == ExecutionMode.Client);
+            Browser.MountTestComponent<ErrorComponent>();
+            Browser.Exists(By.Id("error-ui"));
+            Browser.Exists(By.TagName("button"));
+        }
+
+        [Fact]
+        public void ShowsErrorNotificationClientSide_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;']"));
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+// 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 BasicTestApp;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
+using Microsoft.AspNetCore.Components.E2ETest.ServerExecutionTests;
+using Microsoft.AspNetCore.E2ETesting;
+using OpenQA.Selenium;
+using Xunit;
+using Xunit.Abstractions;
+
+namespace Microsoft.AspNetCore.Components.E2ETest.Tests
+{
+    public class ErrorNotificationServerSideTest : ServerTestBase<ToggleExecutionModeServerFixture<Program>>
+    {
+        public ErrorNotificationServerSideTest(
+            BrowserFixture browserFixture,
+            ToggleExecutionModeServerFixture<Program> serverFixture,
+            ITestOutputHelper output)
+            : base(browserFixture, serverFixture.WithServerExecution(), output)
+        {
+        }
+
+        protected override void InitializeAsyncCore()
+        {
+            // On WebAssembly, page reloads are expensive so skip if possible
+            Navigate(ServerPathBase, noReload: _serverFixture.ExecutionMode == ExecutionMode.Server);
+            Browser.MountTestComponent<ErrorComponent>();
+            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/ErrorComponent.razor

@@ -0,0 +1,22 @@
+<div>
+    <h2>Error throwing button</h2>
+    <p>
+        <button @onclick="@(IncrementCount)">Click me</button>
+    </p>
+</div>
+
+@code {
+    int currentCount = 0;
+
+    void IncrementCount()
+    {
+        currentCount++;
+        throw new NotImplementedException("Doing crazy things!");
+    }
+
+    public void Reset()
+    {
+        currentCount = 0;
+        StateHasChanged();
+    }
+}

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

@@ -1,6 +1,6 @@
 @using Microsoft.AspNetCore.Components.Rendering
 <div id="test-selector">
-  Select test:
+    Select test:
     <select id="test-selector-select" @bind=SelectedComponentTypeName>
         <option value="none">Choose...</option>
         <option value="BasicTestApp.AddRemoveChildComponents">Add/remove child components</option>
@@ -67,6 +67,7 @@
         <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>
@@ -82,6 +83,13 @@
     @((RenderFragment)RenderSelectedComponent)
 </app>
 
+
+<div id="error-ui">
+    An unhandled error has occurred.
+    <a href class='reload'>Reload</a>
+    <a class='dismiss' style="cursor: pointer;">🗙</a>
+</div>
+
 @code {
     string SelectedComponentTypeName { get; set; } = "none";
 

src/Components/test/testassets/BasicTestApp/wwwroot/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="utf-8" />
     <title>Basic test app</title>
@@ -9,6 +10,7 @@
     <!-- Used by ExternalContentPackage -->
     <link href="_content/TestContentPackage/styles.css" rel="stylesheet" />
 </head>
+
 <body>
     <root>Loading...</root>
 
@@ -31,4 +33,5 @@
     <!-- Used by ExternalContentPackage -->
     <script src="_content/TestContentPackage/prompt.js"></script>
 </body>
+
 </html>

src/Components/test/testassets/BasicTestApp/wwwroot/style.css

@@ -6,6 +6,14 @@
     outline: 1px solid red;
 }
 
+#error-ui {
+    display: none;
+}
+
+    #error-ui dismiss {
+        cursor: pointer;
+    }
+
 .validation-message {
     color: red;
 }

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

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