fixed navigation and performance API based fetch counting

Author: Madoshakalaka

Cargo.lock

@@ -1,7 +1,7 @@
 #![cfg(all(target_arch = "wasm32", not(target_os = "wasi")))]
 
 use simple_ssr::App;
-use ssr_e2e_harness::{fetch_ssr_html, output_element, wait_for};
+use ssr_e2e_harness::{output_element, setup_ssr_page, wait_for};
 use wasm_bindgen_test::*;
 
 wasm_bindgen_test_configure!(run_in_browser);
@@ -10,8 +10,7 @@ const SERVER_BASE: &str = "http://127.0.0.1:8080";
 
 #[wasm_bindgen_test]
 async fn hydration_succeeds() {
-    let body_html = fetch_ssr_html(SERVER_BASE, "/").await;
-    output_element().set_inner_html(&body_html);
+    setup_ssr_page(SERVER_BASE, "/").await;
     yew::Renderer::<App>::with_root(output_element()).hydrate();
 
     wait_for(

examples/simple_ssr/tests/e2e.rs

@@ -1,14 +1,13 @@
 #![cfg(all(target_arch = "wasm32", not(target_os = "wasi")))]
 
-use std::time::Duration;
-
 use gloo::utils::document;
 use ssr_e2e_harness::{
-    fetch_count, fetch_ssr_html, output_element, patch_fetch, push_route, restore_fetch, wait_for,
+    clear_resource_timings, fetch_ssr_html, navigate, output_element, resource_request_count,
+    setup_ssr_page, wait_for,
 };
 use ssr_router::{App, AppProps, LINK_ENDPOINT};
 use wasm_bindgen_test::*;
-use yew::platform::time::sleep;
+use yew::Renderer;
 
 wasm_bindgen_test_configure!(run_in_browser);
 
@@ -18,6 +17,15 @@ fn endpoint() -> String {
     format!("{SERVER_BASE}{LINK_ENDPOINT}")
 }
 
+fn make_renderer() -> Renderer<App> {
+    Renderer::<App>::with_root_and_props(
+        output_element(),
+        AppProps {
+            endpoint: endpoint().into(),
+        },
+    )
+}
+
 fn get_title_text() -> Option<String> {
     document()
         .query_selector("h1.title")
@@ -26,58 +34,69 @@ fn get_title_text() -> Option<String> {
         .map(|el| el.text_content().unwrap_or_default())
 }
 
+fn post_body_text() -> String {
+    output_element()
+        .query_selector(".section.container")
+        .ok()
+        .flatten()
+        .map(|el| el.text_content().unwrap_or_default())
+        .unwrap_or_default()
+}
+
+fn extract_text_from_html(html: &str, selector: &str) -> Option<String> {
+    let container = document().create_element("div").unwrap();
+    container.set_inner_html(html);
+    container
+        .query_selector(selector)
+        .ok()
+        .flatten()
+        .and_then(|el| el.text_content())
+}
+
 #[wasm_bindgen_test]
-async fn hydrate_post_page() {
-    let body_html = fetch_ssr_html(SERVER_BASE, "/posts/0").await;
+async fn ssr_hydration_and_client_navigation() {
+    // -- Part 1: Direct SSR visit to /posts/0 triggers no fetch to /api/link --
 
-    patch_fetch();
+    let ssr_html = fetch_ssr_html(SERVER_BASE, "/posts/0").await;
+    let ssr_title = extract_text_from_html(&ssr_html, "h1.title")
+        .expect("SSR HTML for /posts/0 should contain h1.title");
+    let ssr_body = extract_text_from_html(&ssr_html, ".section.container").unwrap_or_default();
 
-    output_element().set_inner_html(&body_html);
-    push_route("/posts/0");
-    yew::Renderer::<App>::with_root_and_props(
-        output_element(),
-        AppProps {
-            endpoint: endpoint().into(),
-        },
-    )
-    .hydrate();
+    clear_resource_timings();
+
+    output_element().set_inner_html(&ssr_html);
+    ssr_e2e_harness::push_route("/posts/0");
+    let app = make_renderer().hydrate();
 
     wait_for(
         || {
             let html = output_element().inner_html();
             html.contains("<h1 class=\"title\">") && !html.contains("Loading post...")
         },
         5000,
-        "post page content",
+        "post page content after SSR hydration",
     )
     .await;
 
-    let fc = fetch_count();
+    let link_fetches = resource_request_count(LINK_ENDPOINT);
     let title = get_title_text();
 
-    restore_fetch();
-
     assert_eq!(
-        fc, 0,
-        "direct visit to /posts/0 should not trigger any fetch (SSR provides data)"
+        link_fetches, 0,
+        "direct SSR visit to /posts/0 should not trigger any fetch to {LINK_ENDPOINT}"
     );
-    let title = title.expect("h1.title should be present on the post page");
-    assert!(!title.is_empty(), "post title should not be empty");
-}
+    let title = title.expect("h1.title should be present on the SSR post page");
+    assert!(!title.is_empty(), "SSR post title should not be empty");
 
-#[wasm_bindgen_test]
-async fn hydrate_posts_list() {
-    let body_html = fetch_ssr_html(SERVER_BASE, "/posts").await;
+    // -- Part 2: Navigate to /posts within the same app, then to /posts/0 --
 
-    output_element().set_inner_html(&body_html);
-    push_route("/posts");
-    yew::Renderer::<App>::with_root_and_props(
-        output_element(),
-        AppProps {
-            endpoint: endpoint().into(),
-        },
-    )
-    .hydrate();
+    // Yield to ensure effects (router history listener) are registered.
+    gloo::timers::future::sleep(std::time::Duration::from_millis(500)).await;
+
+    clear_resource_timings();
+
+    // Navigate to /posts first, then to /posts/0 to trigger a client-side fetch.
+    navigate("/posts");
 
     wait_for(
         || {
@@ -86,41 +105,77 @@ async fn hydrate_posts_list() {
                 .ok()
                 .flatten()
                 .is_some()
+                && get_title_text().as_deref() == Some("Posts")
         },
-        10000,
-        "post links to appear on /posts",
+        15000,
+        "posts list after client-side navigation to /posts",
     )
     .await;
 
-    // TODO: test client-side navigation triggers a fetch to /api/link.
-    // Clicking <a> elements inside wasm-bindgen-test causes real browser navigation
-    // (the test page navigates away from the test runner) because yew's event
-    // delegation (capture-phase listener on the root element) does not intercept the
-    // click. This may be because the root is the wasm-bindgen-test #output <pre>
-    // element, or because headless Firefox handles synthetic clicks differently.
-    // Needs further investigation with getEventListeners or a monkeypatched
-    // addEventListener to confirm whether yew registers its capture handler on the
-    // #output element during hydration.
-}
+    clear_resource_timings();
 
-#[wasm_bindgen_test]
-async fn hydrate_home() {
-    let body_html = fetch_ssr_html(SERVER_BASE, "/").await;
+    // HtmlElement.click() on <a> in headless Firefox triggers real browser
+    // navigation, crashing the test runner. Yew's capture-phase event delegation
+    // cannot intercept it in the wasm-bindgen-test context. Instead we use
+    // gloo-history's BrowserHistory::push() which calls pushState and directly
+    // invokes all registered history callbacks (the same codepath as yew-router's
+    // <Link> component).
+    navigate("/posts/0");
 
-    output_element().set_inner_html(&body_html);
-    push_route("/");
-    yew::Renderer::<App>::with_root_and_props(
-        output_element(),
-        AppProps {
-            endpoint: endpoint().into(),
+    wait_for(
+        || {
+            // The post page renders a "by <author>" subtitle inside a hero section.
+            // The posts LIST page subtitle says "All of our quality writing..."
+            document()
+                .query_selector("h2.subtitle")
+                .ok()
+                .flatten()
+                .map(|el| el.text_content().unwrap_or_default())
+                .is_some_and(|text| text.starts_with("by "))
         },
+        15000,
+        "post page content after client-side navigation to /posts/0",
     )
-    .hydrate();
+    .await;
+
+    // -- Part 3: Verify fetch happened and content matches SSR --
+
+    let nav_link_fetches = resource_request_count(LINK_ENDPOINT);
+    let nav_title = get_title_text();
+    let nav_body = post_body_text();
 
-    sleep(Duration::from_secs(2)).await;
-    let html = output_element().inner_html();
     assert!(
-        html.contains("Welcome"),
-        "home page should have content after hydration"
+        nav_link_fetches >= 1,
+        "client-side navigation to /posts/0 should trigger at least one fetch to {LINK_ENDPOINT}, \
+         got {nav_link_fetches}"
     );
+
+    let nav_title = nav_title.expect("h1.title should be present after client-side navigation");
+    assert_eq!(
+        ssr_title, nav_title,
+        "post title should match between SSR and client-side navigation"
+    );
+    assert_eq!(
+        ssr_body, nav_body,
+        "post body should match between SSR and client-side navigation"
+    );
+
+    app.destroy();
+    output_element().set_inner_html("");
+}
+
+#[wasm_bindgen_test]
+async fn hydrate_home() {
+    setup_ssr_page(SERVER_BASE, "/").await;
+    let app = make_renderer().hydrate();
+
+    wait_for(
+        || output_element().inner_html().contains("Welcome"),
+        5000,
+        "home page content after hydration",
+    )
+    .await;
+
+    app.destroy();
+    output_element().set_inner_html("");
 }

examples/ssr_router/tests/e2e.rs

@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 gloo = { workspace = true, features = ["futures"] }
+gloo-history = "0.2"
 web-sys = { workspace = true }
 wasm-bindgen = { workspace = true }
 js-sys = { workspace = true }