Fix flaky CanRenderComponentWithPersistedState test variations

- Verify wasm resources are fully loaded before refreshing
dotnet · May 8, 2024 · 3a870ef · 3a870ef
1 parent da3aa27
commit 3a870ef
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 57 deletions.
diff --git a/src/Components/test/E2ETest/Tests/StatePersistenceTest.cs b/src/Components/test/E2ETest/Tests/StatePersistenceTest.cs
@@ -45,13 +45,13 @@ public override Task InitializeAsync()
     [InlineData(true, typeof(InteractiveWebAssemblyRenderMode), (string)null)]
     [InlineData(true, typeof(InteractiveWebAssemblyRenderMode), "WebAssemblyStreaming")]
     [InlineData(true, typeof(InteractiveAutoRenderMode), (string)null)]
-    // [InlineData(true, typeof(InteractiveAutoRenderMode), "AutoStreaming")] https://github.com/dotnet/aspnetcore/issues/50810
+    [InlineData(true, typeof(InteractiveAutoRenderMode), "AutoStreaming")]
     [InlineData(false, typeof(InteractiveServerRenderMode), (string)null)]
     [InlineData(false, typeof(InteractiveServerRenderMode), "ServerStreaming")]
     [InlineData(false, typeof(InteractiveWebAssemblyRenderMode), (string)null)]
     [InlineData(false, typeof(InteractiveWebAssemblyRenderMode), "WebAssemblyStreaming")]
-    // [InlineData(false, typeof(InteractiveAutoRenderMode), (string)null)] https://github.com/dotnet/aspnetcore/issues/50810
-    // [InlineData(false, typeof(InteractiveAutoRenderMode), "AutoStreaming")] https://github.com/dotnet/aspnetcore/issues/50810
+    [InlineData(false, typeof(InteractiveAutoRenderMode), (string)null)]
+    [InlineData(false, typeof(InteractiveAutoRenderMode), "AutoStreaming")]
     public void CanRenderComponentWithPersistedState(bool suppressEnhancedNavigation, Type renderMode, string streaming)
     {
         var mode = renderMode switch
@@ -83,7 +83,11 @@ public void CanRenderComponentWithPersistedState(bool suppressEnhancedNavigation
         }
         else
         {
-            SuppressEnhancedNavigation(true);
+            EnhancedNavigationTestUtil.SuppressEnhancedNavigation(this, true);
+            if (mode == "auto")
+            {
+                BlockWebAssemblyResourceLoad();
+            }
         }
 
         if (mode != "auto")
@@ -92,21 +96,11 @@ public void CanRenderComponentWithPersistedState(bool suppressEnhancedNavigation
         }
         else
         {
-            if (suppressEnhancedNavigation)
-            {
-                BlockWebAssemblyResourceLoad();
-            }
             // For auto mode, validate that the state is persisted for both runtimes and is able
             // to be loaded on server and wasm.
             RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming, interactiveRuntime: "server");
 
             UnblockWebAssemblyResourceLoad();
-
-            if (suppressEnhancedNavigation)
-            {
-                RenderWebAssemblyComponentAndWaitForWebAssemblyRuntime(returnUrl: Browser.Url);
-            }
-
             Browser.Navigate().Refresh();
 
             RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming, interactiveRuntime: "wasm");
@@ -151,6 +145,7 @@ private void BlockWebAssemblyResourceLoad()
     private void UnblockWebAssemblyResourceLoad()
     {
         ((IJavaScriptExecutor)Browser).ExecuteScript("window.unblockLoadBootResource()");
+        Browser.Exists(By.Id("unblocked-wasm"));
     }
 
     private void RenderComponentsWithPersistentStateAndValidate(
@@ -159,9 +154,8 @@ private void UnblockWebAssemblyResourceLoad()
         Type renderMode,
         string streaming,
         string interactiveRuntime = null,
-        string stateValue = null)
+        string stateValue = "restored")
     {
-        stateValue ??= "restored";
         // No need to navigate if we are using enhanced navigation, the tests will have already navigated to the page via a link.
         if (suppressEnhancedNavigation)
         {
@@ -198,11 +192,13 @@ private void UnblockWebAssemblyResourceLoad()
             streamingCompleted: false,
             interactiveRuntime: interactiveRuntime);
 
-        if (streaming != null)
+        if (streaming == null)
         {
-            Browser.Click(By.Id("end-streaming"));
+            return;
         }
 
+        Browser.Click(By.Id("end-streaming"));
+
         AssertPageState(
             mode: mode,
             renderMode: renderMode.Name,
@@ -240,19 +236,4 @@ private void UnblockWebAssemblyResourceLoad()
             Browser.Equal("Streaming: True", () => Browser.FindElement(By.Id("streaming")).Text);
         }
     }
-
-    private void RenderWebAssemblyComponentAndWaitForWebAssemblyRuntime(string returnUrl = null)
-    {
-        Navigate("subdir/persistent-state/page-with-webassembly-interactivity");
-
-        Browser.Equal("True", () => Browser.FindElement(By.Id("is-interactive-counter")).Text);
-
-        if (returnUrl is not null)
-        {
-            Navigate(returnUrl);
-        }
-    }
-
-    private void SuppressEnhancedNavigation(bool shouldSuppress)
-        => EnhancedNavigationTestUtil.SuppressEnhancedNavigation(this, shouldSuppress);
 }
diff --git a/...nts/test/testassets/BasicTestApp/wwwroot/JSInitializers/Modern/BasicTestApp.lib.module.js b/...nts/test/testassets/BasicTestApp/wwwroot/JSInitializers/Modern/BasicTestApp.lib.module.js
@@ -30,7 +30,6 @@ export function beforeServerStart(options) {
     return new Promise((resolve, reject) => {
         options.circuitHandlers.push({
             onCircuitOpened: () => {
-                debugger;
                 appendElement('modern-circuit-opened', 'Modern "circuitOpened"');
             },
             onCircuitClosed: () => appendElement('modern-circuit-closed', 'Modern "circuitClosed"')

diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor
@@ -18,24 +18,41 @@
     <script src="_framework/blazor.web.js" autostart="false" suppress-error="BL9992"></script>
     <script src="_content/TestContentPackage/counterInterop.js"></script>
     <script>
-        const enableClassicInitializers = sessionStorage.getItem('enable-classic-initializers') === 'true';
-        const suppressEnhancedNavigation = sessionStorage.getItem('suppress-enhanced-navigation') === 'true';
-        const blockLoadBootResource = sessionStorage.getItem('block-load-boot-resource') === 'true';
-        sessionStorage.removeItem('suppress-enhanced-navigation');
-        sessionStorage.removeItem('block-load-boot-resource');
-        sessionStorage.removeItem('enable-classic-initializers');
-
-        let loadBootResourceUnblocked = null;
-        if (blockLoadBootResource) {
-            loadBootResourceUnblocked = new Promise(resolve => {
-                window.unblockLoadBootResource = resolve;
-            });
+        function appendHiddenParagraph(id) {
+            const paragraph = document.createElement('p');
+            paragraph.id = id;
+            paragraph.style = 'display: none;';
+            document.body.appendChild(paragraph);
         }
 
-        let maxParallelResourceDownloadCount = 0;
-        let currentParallelResourceDownloadCount = 0;
-
         function callBlazorStart() {
+            const enableClassicInitializers = sessionStorage.getItem('enable-classic-initializers') === 'true';
+            const suppressEnhancedNavigation = sessionStorage.getItem('suppress-enhanced-navigation') === 'true';
+            const blockLoadBootResource = sessionStorage.getItem('block-load-boot-resource') === 'true';
+            sessionStorage.removeItem('suppress-enhanced-navigation');
+            sessionStorage.removeItem('block-load-boot-resource');
+            sessionStorage.removeItem('enable-classic-initializers');
+
+            let loadBootResourceUnblocked = null;
+            if (blockLoadBootResource) {
+                loadBootResourceUnblocked = new Promise(resolve => {
+                    window.unblockLoadBootResource = () => {
+                        var origSetItem = localStorage.setItem;
+                        localStorage.setItem = function (key) {
+                            origSetItem.apply(this, arguments);
+                            if (key.startsWith('blazor-resource-hash:')) {
+                                localStorage.setItem = origSetItem;
+                                appendHiddenParagraph('unblocked-wasm');
+                            }
+                        };
+                        resolve();
+                    }
+                });
+            }
+
+            let maxParallelResourceDownloadCount = 0;
+            let currentParallelResourceDownloadCount = 0;
+
             Blazor.start({
                 ssr: {
                     disableDomPreservation: suppressEnhancedNavigation,
@@ -71,12 +88,7 @@
                         }
                     },
                 },
-            }).then(() => {
-                const startedParagraph = document.createElement('p');
-                startedParagraph.id = 'blazor-started';
-                startedParagraph.style = 'display: none;';
-                document.body.appendChild(startedParagraph);
-            });
+            }).then(() => appendHiddenParagraph('blazor-started'));
         }
 
         if (location.search.indexOf('suppress-autostart') < 0) {

diff --git a/...s/Components.TestServer/RazorComponents/Pages/PersistentState/PageWithoutComponents.razor b/...s/Components.TestServer/RazorComponents/Pages/PersistentState/PageWithoutComponents.razor
@@ -4,7 +4,7 @@
 
 <a id="page-with-components-link" href=@($"persistent-state/page-with-components?render-mode={RenderMode}&streaming-id={StreamingId}")>Go to page with components</a>
 
-<a id="page-with-components-link-and-state" href=@($"persistent-state/page-with-components?render-mode={RenderMode}&streaming-id={StreamingId}&server-state=other")>Go to page with components</a>
+<a id="page-with-components-link-and-state" href=@($"persistent-state/page-with-components?render-mode={RenderMode}&streaming-id={StreamingId}&server-state=other")>Go to page with components and state</a>
 
 
 @code {

diff --git a/...ts/TestContentPackage/PersistentComponents/NonStreamingComponentWithPersistentState.razor b/...ts/TestContentPackage/PersistentComponents/NonStreamingComponentWithPersistentState.razor
@@ -1,6 +1,6 @@
 <p>Non streaming component with persistent state</p>
 
-<p>This component demonstrates state persistence in the absence of streaming rendering. When the component renders it will try to restore the state and if present display that it succeded in doing so and the restored value. If the state is not present, it will indicate it didn't find it and display a "fresh" value.</p>
+<p>This component demonstrates state persistence in the absence of streaming rendering. When the component renders it will try to restore the state and if present display that it succeeded in doing so and the restored value. If the state is not present, it will indicate it didn't find it and display a "fresh" value.</p>
 
 <p id="interactive">Interactive: @(!RunningOnServer)</p>
 <p id="interactive-runtime">Interactive runtime: @_interactiveRuntime</p>