Scroll in enhanced navigation behaves same as in client side routing

[ilonatommy]

Description

1. External navigation scrolls to the top -> see resetScrollAfterNextBatch() in enhanced nav
2. But it does not scroll if it's self-navigation (or self-navigation with query), to make enhanced nav behave the same as introduced in NavigateTo does not scroll to the top in internal navigation to same url #60190 for client side navigation.
3. Streaming rendering loads parts of the page with a delay, so the tests required a tool to make sure the full page is loaded: WaitForElementToBeVisible extension was added. Without it, the tests with enableStreaming=true would not be deterministic.
4. Enhanced backwards/forwards: the history produced by forwards/backwards actions are handled properly by the browser navigation, even when enhanced navigation is switched on.

Fixes #51646

[Copilot]

Copilot reviewed 5 out of 9 changed files in this pull request and generated 1 comment.

Files not reviewed (4)

• src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollPositionTests.razor: Evaluated as low risk
• src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollPositionTestsNoStreaming.razor: Evaluated as low risk
• src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollingToHash.razor: Evaluated as low risk
• src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollingToHashNoStreaming.razor: Evaluated as low risk

Comments suppressed due to low confidence (1)

src/Components/Web.JS/src/Services/NavigationEnhancement.ts:98

• The function saveScrollPosition should handle cases where the state is null or undefined. Add a check to ensure the state is correctly handled.

const currentState = history.state || {};

[ilonatommy]

Running the tests locally on repeat revealed an issue with browser's navigation. When we use programmatic navigation, it does not always load the new page (the history state changes but the DOM stays the same, we can see it as failure to render the element of id="test-info-hash", that should replace id="test-info-scroll"). It happens on the 1st run of the tests, with and without streaming and increasing the timeout does not impact it. On the next runs, the test case switches automatically to enhanced nav, even though "sessionStorage.setItem('suppress-enhanced-navigation', 'true')" is set at the beginning of the test.

List of affected test cases:

- Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnBackwardsForwardsAction(enableStreaming: True, useEnhancedNavigation: False, programmaticNavigation: True) 
- Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnBackwardsForwardsAction(enableStreaming: False, useEnhancedNavigation: False, programmaticNavigation: True) 
- Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnNavigation(enableStreaming: True, useEnhancedNavigation: False, programmaticNavigation: True) 
- Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnNavigation(enableStreaming: False, useEnhancedNavigation: False, programmaticNavigation: True) 

error:

Message: 
OpenQA.Selenium.WebDriverTimeoutException : Timed out after 20 seconds
---- OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"css selector","selector":"#test\-info\-hash"}
  (Session info: chrome=133.0.6943.99); For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception

    Stack Trace: 
DefaultWait`1.ThrowTimeoutException(String exceptionMessage, Exception lastException)
DefaultWait`1.Until[TResult](Func`2 condition, CancellationToken token)
WebDriverExtensions.WaitForElementToBeVisible(IWebDriver browser, By by, Int32 timeoutInSeconds) line 28
EnhancedNavigationTest.AssertWeAreOnHashPage() line 834
EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnBackwardsForwardsAction(Boolean enableStreaming, Boolean useEnhancedNavigation, Boolean programmaticNavigation) line 753
InvokeStub_EnhancedNavigationTest.EnhancedNavigationScrollBehavesSameAsBrowserOnBackwardsForwardsAction(Object, Span`1)
MethodBaseInvoker.InvokeWithFewArgs(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)

[ilonatommy]

The test cases that fall into this path:

aspnetcore/src/Components/Web.JS/src/Services/NavigationManager.ts

Line 122 in a2e3677

performInternalNavigation(absoluteUri, false, options.replaceHistoryEntry, options.historyEntryState, skipLocationChangingCallback);

are failing. This is not an issue connected with this PR and it happens on main as well.

[javiercn]

Looks great!

Good job on the testing aspects of this feature, I know this is not a simple area and the coverage looks thorough!