More E2E tests

Author: javiercn

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -98,6 +98,7 @@ export function startCircuit(): Promise<boolean> {
 
   if (circuit.isDisposedOrDisposing()) {
     // If the current circuit is no longer available, create a new one.
+    appState = discoverServerPersistedState(document) || '';
     circuit = new CircuitManager(circuit.getRootComponentManager(), appState, options, logger);
   }
 

src/Components/Web.JS/src/Boot.Server.Common.ts

@@ -357,6 +357,10 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
       // updates.
     } else {
       this.unregisterComponent(component);
+      if (component.assignedRendererId !== undefined && component.interactiveComponentId !== undefined) {
+        const renderer = getRendererer(component.assignedRendererId);
+        renderer?.disposeComponent(component.interactiveComponentId);
+      }
 
       if (component.interactiveComponentId !== undefined) {
         // We have an interactive component for this marker, so we'll remove it.

src/Components/Web.JS/src/Services/WebRootComponentManager.ts

@@ -17,6 +17,8 @@ namespace Microsoft.AspNetCore.Components.E2ETests.Tests;
 // For Blazor Server and Webassembly, check SaveStateTest.cs
 public class StatePersistenceTest : ServerTestBase<BasicTestAppServerSiteFixture<RazorComponentEndpointsStartup<App>>>
 {
+    static int _nextStreamingIdContext;
+
     public StatePersistenceTest(
         BrowserFixture browserFixture,
         BasicTestAppServerSiteFixture<RazorComponentEndpointsStartup<App>> serverFixture,
@@ -25,9 +27,18 @@ public StatePersistenceTest(
     {
     }
 
+    // Separate contexts to ensure that caches and other state don't interfere across tests.
     public override Task InitializeAsync()
-        => InitializeAsync(BrowserFixture.StreamingContext);
+        => InitializeAsync(BrowserFixture.StreamingContext + _nextStreamingIdContext++);
 
+    // Validates that we can use persisted state across server, webasembly, and auto modes, with and without
+    // streaming rendering.
+    // For streaming rendering, we validate that the state is captured and restored after streaming completes.
+    // For enhanced navigation we validate that the state is captured at the time components are rendered for
+    // the first time on the page.
+    // For auto mode, we validate that the state is captured and restored for both server and wasm runtimes.
+    // In each case, we validate that the state is available until the initial set of components first render reaches quiescence. Similar to how it works for Server and WebAssembly.
+    // For server we validate that the state is provided every time a circuit is initialized.
     [Theory]
     [InlineData(true, typeof(InteractiveServerRenderMode), (string)null)]
     [InlineData(true, typeof(InteractiveServerRenderMode), "ServerStreaming")]
@@ -41,7 +52,7 @@ public override Task InitializeAsync()
     [InlineData(false, typeof(InteractiveWebAssemblyRenderMode), "WebAssemblyStreaming")]
     [InlineData(false, typeof(InteractiveAutoRenderMode), (string)null)]
     [InlineData(false, typeof(InteractiveAutoRenderMode), "AutoStreaming")]
-    public void CanRenderComponentWithPersistedState(bool supressEnhancedNavigation, Type renderMode, string streaming)
+    public void CanRenderComponentWithPersistedState(bool suppressEnhancedNavigation, Type renderMode, string streaming)
     {
         var mode = renderMode switch
         {
@@ -51,73 +62,167 @@ public void CanRenderComponentWithPersistedState(bool supressEnhancedNavigation,
             _ => throw new ArgumentException($"Unknown render mode: {renderMode.Name}")
         };
 
-        if (!supressEnhancedNavigation)
+        if (!suppressEnhancedNavigation)
         {
             // Navigate to a page without components first to make sure that we exercise rendering components
             // with enhanced navigation on.
-            Navigate($"subdir/persistent-state/page-no-components?render-mode={renderMode}&streaming-id={streaming}");
+            if (streaming == null)
+            {
+                Navigate($"subdir/persistent-state/page-no-components?render-mode={mode}&suppress-autostart");
+            }
+            else
+            {
+                Navigate($"subdir/persistent-state/page-no-components?render-mode={mode}&streaming-id={streaming}&suppress-autostart");
+            }
+            if (mode == "auto")
+            {
+                BlockWebAssemblyResourceLoad();
+            }
+            Browser.Click(By.Id("call-blazor-start"));
             Browser.Click(By.Id("page-with-components-link"));
         }
+        else
+        {
+            SuppressEnhancedNavigation(true);
+        }
+
+        if (mode != "auto")
+        {
+            RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming);
+        }
+        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();
+            Browser.Navigate().Refresh();
 
-        RenderComponentsWithPersistentStateAndValidate(mode, renderMode, streaming, supressEnhancedNavigation);
+            RenderComponentsWithPersistentStateAndValidate(suppressEnhancedNavigation, mode, renderMode, streaming, interactiveRuntime: "wasm");
+        }
     }
 
-    private void RenderComponentsWithPersistentStateAndValidate(string mode, Type renderMode, string streaming, bool suppressEnhancedNavigation)
+    [Theory]
+    [InlineData((string)null)]
+    [InlineData("ServerStreaming")]
+    public async Task StateIsProvidedEveryTimeACircuitGetsCreated(string streaming)
     {
-        SuppressEnhancedNavigation(suppressEnhancedNavigation);
+        var mode = "server";
         if (streaming == null)
         {
-            Navigate($"subdir/persistent-state/page-with-components?render-mode={mode}&suppress-autostart");
+            Navigate($"subdir/persistent-state/page-no-components?render-mode={mode}");
         }
         else
         {
-            Navigate($"subdir/persistent-state/page-with-components?render-mode={mode}&streaming-id={streaming}&suppress-autostart");
+            Navigate($"subdir/persistent-state/page-no-components?render-mode={mode}&streaming-id={streaming}");
         }
-        AssertPageState(
-            renderMode: renderMode.Name,
-            interactive: false,
-            stateFound: true,
-            stateValue: "restored",
-            streamingId: streaming,
-            streamingCompleted: false);
+        Browser.Click(By.Id("page-with-components-link"));
 
-        Browser.Click(By.Id("call-blazor-start"));
+        RenderComponentsWithPersistentStateAndValidate(suppresEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming);
+        Browser.Click(By.Id("page-no-components-link"));
+        // Ensure that the circuit is gone.
+        await Task.Delay(1000);
+        Browser.Click(By.Id("page-with-components-link-and-state"));
+        RenderComponentsWithPersistentStateAndValidate(suppresEnhancedNavigation: false, mode, typeof(InteractiveServerRenderMode), streaming, stateValue: "other");
+    }
+
+    private void BlockWebAssemblyResourceLoad()
+    {
+        ((IJavaScriptExecutor)Browser).ExecuteScript("sessionStorage.setItem('block-load-boot-resource', 'true')");
+
+        // Clear caches so that we can block the resource load
+        ((IJavaScriptExecutor)Browser).ExecuteScript("caches.keys().then(keys => keys.forEach(key => caches.delete(key)))");
+    }
+
+    private void UnblockWebAssemblyResourceLoad()
+    {
+        ((IJavaScriptExecutor)Browser).ExecuteScript("window.unblockLoadBootResource()");
+    }
+
+    private void RenderComponentsWithPersistentStateAndValidate(
+        bool suppresEnhancedNavigation,
+        string mode,
+        Type renderMode,
+        string streaming,
+        string interactiveRuntime = null,
+        string stateValue = null)
+    {
+        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 (suppresEnhancedNavigation)
+        {
+            // In this case we suppress auto start to check some server side state before we boot Blazor.
+            if (streaming == null)
+            {
+                Navigate($"subdir/persistent-state/page-with-components?render-mode={mode}&suppress-autostart");
+            }
+            else
+            {
+                Navigate($"subdir/persistent-state/page-with-components?render-mode={mode}&streaming-id={streaming}&suppress-autostart");
+            }
+
+            AssertPageState(
+                mode: mode,
+                renderMode: renderMode.Name,
+                interactive: false,
+                stateFound: true,
+                stateValue: stateValue,
+                streamingId: streaming,
+                streamingCompleted: false,
+                interactiveRuntime: interactiveRuntime);
+
+            Browser.Click(By.Id("call-blazor-start"));
+        }
 
         AssertPageState(
+            mode: mode,
             renderMode: renderMode.Name,
             interactive: streaming == null,
             stateFound: true,
-            stateValue: "restored",
+            stateValue: stateValue,
             streamingId: streaming,
-            streamingCompleted: false);
+            streamingCompleted: false,
+            interactiveRuntime: interactiveRuntime);
 
         if (streaming != null)
         {
             Browser.Click(By.Id("end-streaming"));
         }
 
         AssertPageState(
+            mode: mode,
             renderMode: renderMode.Name,
             interactive: true,
             stateFound: true,
-            stateValue: "restored",
+            stateValue: stateValue,
             streamingId: streaming,
-            streamingCompleted: true);
+            streamingCompleted: true,
+            interactiveRuntime: interactiveRuntime);
     }
 
     private void AssertPageState(
+        string mode,
         string renderMode,
         bool interactive,
         bool stateFound,
         string stateValue,
         string streamingId = null,
-        bool streamingCompleted = false)
+        bool streamingCompleted = false,
+        string interactiveRuntime = null)
     {
         Browser.Equal($"Render mode: {renderMode}", () => Browser.FindElement(By.Id("render-mode")).Text);
         Browser.Equal($"Streaming id:{streamingId}", () => Browser.FindElement(By.Id("streaming-id")).Text);
         Browser.Equal($"Interactive: {interactive}", () => Browser.FindElement(By.Id("interactive")).Text);
         if (streamingId == null || streamingCompleted)
         {
+            interactiveRuntime = !interactive ? "none" : mode == "server" || mode == "wasm" ? mode : (interactiveRuntime ?? throw new InvalidOperationException("Specify interactiveRuntime for auto mode"));
+
+            Browser.Equal($"Interactive runtime: {interactiveRuntime}", () => Browser.FindElement(By.Id("interactive-runtime")).Text);
             Browser.Equal($"State found:{stateFound}", () => Browser.FindElement(By.Id("state-found")).Text);
             Browser.Equal($"State value:{stateValue}", () => Browser.FindElement(By.Id("state-value")).Text);
         }

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

@@ -11,7 +11,7 @@
         // time you restart the test server
         "TESTSERVER_USE_DETERMINISTIC_PORTS": "true"
       },
-      "inspectUri": "{wsProtocol}://{url.hostname}:5005/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      //"inspectUri": "{wsProtocol}://{url.hostname}:5005/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "http://localhost:5000"
     }
   }

src/Components/test/testassets/Components.TestServer/Properties/launchSettings.json

@@ -16,11 +16,11 @@
     <CascadingValue Name="RunningOnServer" Value="true">
         @if (!string.IsNullOrEmpty(StreamingId))
         {
-            <StreamingComponentWithPersistentState @rendermode="@_renderMode" StreamingId="@StreamingId" />
+            <StreamingComponentWithPersistentState @rendermode="@_renderMode" StreamingId="@StreamingId" ServerState="@ServerState" />
         }
         else
         {
-            <NonStreamingComponentWithPersistentState @rendermode="@_renderMode" />
+            <NonStreamingComponentWithPersistentState @rendermode="@_renderMode" ServerState="@ServerState" />
         }
     </CascadingValue>
 }
@@ -29,6 +29,9 @@
     <a id="end-streaming" href="@($"persistent-state/end-streaming?streaming-id={StreamingId}")" target="_blank">End streaming</a>
 }
 
+<a id="page-no-components-link" href=@($"persistent-state/page-no-components?render-mode={RenderMode}&streaming-id={StreamingId}")>Go to page with no components</a>
+
+
 @code {
 
     private IComponentRenderMode _renderMode;
@@ -37,6 +40,8 @@
 
     [SupplyParameterFromQuery(Name = "streaming-id")] public string StreamingId { get; set; }
 
+    [SupplyParameterFromQuery(Name = "server-state")] public string ServerState { get; set; }
+
     protected override async void OnInitialized()
     {
         if (!string.IsNullOrEmpty(RenderMode))

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/PersistentState/PageWithComponents.razor

@@ -4,6 +4,9 @@
 
 <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>
+
+
 @code {
     [SupplyParameterFromQuery(Name = "render-mode")] public string RenderMode { get; set; }
 

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/PersistentState/PageWithoutComponents.razor

@@ -3,17 +3,20 @@
 <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 id="interactive">Interactive: @(!RunningOnServer)</p>
+<p id="interactive-runtime">Interactive runtime: @_interactiveRuntime</p>
 <p id="state-found">State found:@_stateFound</p>
 <p id="state-value">State value:@_stateValue</p>
 
 @code {
 
     private bool _stateFound;
     private string _stateValue;
+    private string _interactiveRuntime;
 
     [Inject] public PersistentComponentState PersistentComponentState { get; set; }
 
     [CascadingParameter(Name = nameof(RunningOnServer))] public bool RunningOnServer { get; set; }
+    [Parameter] public string ServerState { get; set; }
 
     protected override void OnInitialized()
     {
@@ -28,14 +31,18 @@
 
         if (RunningOnServer)
         {
+            _interactiveRuntime = "none";
             _stateFound = true;
-            _stateValue = "restored";
+            _stateValue = ServerState ?? "restored";
+        }else
+        {
+            _interactiveRuntime = OperatingSystem.IsBrowser() ? "wasm" : "server";
         }
     }
 
     Task PersistState()
     {
-        PersistentComponentState.PersistAsJson("NonStreamingComponentWithPersistentState", "restored");
+        PersistentComponentState.PersistAsJson("NonStreamingComponentWithPersistentState", _stateValue);
         return Task.CompletedTask;
     }
 }

src/Components/test/testassets/TestContentPackage/PersistentComponents/NonStreamingComponentWithPersistentState.razor

@@ -11,6 +11,7 @@
 }
 else
 {
+    <p id="interactive-runtime">Interactive runtime: @_interactiveRuntime</p>
     <p id="state-found">State found:@_stateFound</p>
     <p id="state-value">State value:@_stateValue</p>
 }
@@ -20,13 +21,16 @@ else
     private bool _streaming;
     private bool _stateFound;
     private string _stateValue;
+    private string _interactiveRuntime;
 
     [Inject] public PersistentComponentState PersistentComponentState { get; set; }
 
     [Inject] public AsyncOperationService StreamingManager { get; set; }
 
     [Parameter] public string StreamingId { get; set; }
 
+    [Parameter] public string ServerState { get; set; }
+
     [CascadingParameter(Name = nameof(RunningOnServer))] public bool RunningOnServer { get; set; }
 
     protected override async Task OnInitializedAsync()
@@ -39,9 +43,13 @@ else
 
         if (RunningOnServer)
         {
+            _interactiveRuntime = "none";
             _streaming = true;
             await StreamingManager.Start(StreamingId);
             _streaming = false;
+        }else
+        {
+            _interactiveRuntime = OperatingSystem.IsBrowser() ? "wasm" : "server";
         }
 
         // We do this to ensure that the state remains accessible during the entire first render
@@ -57,13 +65,13 @@ else
         if (RunningOnServer)
         {
             _stateFound = true;
-            _stateValue = "restored";
+            _stateValue = ServerState ?? "restored";
         }
     }
 
     Task PersistState()
     {
-        PersistentComponentState.PersistAsJson("NonStreamingComponentWithPersistentState", "restored");
+        PersistentComponentState.PersistAsJson("NonStreamingComponentWithPersistentState", _stateValue);
         return Task.CompletedTask;
     }
 }