add e2e Performance API fetch counting and navigation tests

Author: Madoshakalaka

Cargo.lock

@@ -47,6 +47,7 @@ ssr-e2e-harness = { path = "../../tools/ssr-e2e-harness" }
 
 [dev-dependencies]
 yew = { path = "../../packages/yew", features = ["hydration"] }
+yew-link = { path = "../../packages/yew-link", features = ["hydration"] }
 
 [features]
 ssr = ["yew/ssr", "yew-link/ssr", "yew-link/axum"]

examples/ssr_router/Cargo.toml

@@ -1,7 +1,10 @@
-use ssr_router::App;
+use ssr_router::{App, AppProps, LINK_ENDPOINT};
 
 fn main() {
     #[cfg(target_arch = "wasm32")]
     wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
-    yew::Renderer::<App>::new().hydrate();
+    yew::Renderer::<App>::with_props(AppProps {
+        endpoint: LINK_ENDPOINT.into(),
+    })
+    .hydrate();
 }

examples/ssr_router/src/bin/ssr_router_hydrate.rs

@@ -17,7 +17,9 @@ use futures::stream::{self, StreamExt};
 use hyper::body::Incoming;
 use hyper_util::rt::TokioIo;
 use hyper_util::server;
-use ssr_router::{LinkedAuthor, LinkedPost, LinkedPostMeta, ServerApp, ServerAppProps};
+use ssr_router::{
+    LinkedAuthor, LinkedPost, LinkedPostMeta, ServerApp, ServerAppProps, LINK_ENDPOINT,
+};
 use tokio::net::TcpListener;
 use tower::Service;
 use tower_http::cors::CorsLayer;
@@ -134,7 +136,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
 
     let app = Router::new()
         .route(
-            "/api/link",
+            LINK_ENDPOINT,
             post(linked_state_handler).with_state(arc_resolver),
         )
         .fallback_service(

examples/ssr_router/src/bin/ssr_router_server.rs

@@ -8,6 +8,8 @@ use yew::prelude::*;
 use yew_link::{linked_state, use_linked_state, LinkProvider, ResolverProp};
 use yew_router::prelude::*;
 
+pub const LINK_ENDPOINT: &str = "/api/link";
+
 #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
 pub struct LinkedPost(pub content::Post);
 
@@ -402,11 +404,16 @@ fn switch(routes: function_router::Route) -> Html {
     }
 }
 
+#[derive(Properties, PartialEq)]
+pub struct AppProps {
+    pub endpoint: AttrValue,
+}
+
 #[component]
-pub fn App() -> Html {
+pub fn App(props: &AppProps) -> Html {
     html! {
         <BrowserRouter>
-            <LinkProvider endpoint="/api/link">
+            <LinkProvider endpoint={props.endpoint.clone()}>
                 <function_router::components::nav::Nav />
                 <main>
                     <Switch<function_router::Route> render={switch} />
@@ -442,7 +449,7 @@ pub fn ServerApp(props: &ServerAppProps) -> Html {
 
     html! {
         <Router history={history}>
-            <LinkProvider endpoint="/api/link" resolver={props.resolver.clone()}>
+            <LinkProvider endpoint={LINK_ENDPOINT} resolver={props.resolver.clone()}>
                 <function_router::components::nav::Nav />
                 <main>
                     <Switch<function_router::Route> render={switch} />

examples/ssr_router/src/lib.rs

@@ -1,17 +1,31 @@
 #![cfg(all(target_arch = "wasm32", not(target_os = "wasi")))]
 
-use std::time::Duration;
-
-use function_router::App;
 use gloo::utils::document;
-use ssr_e2e_harness::{output_element, setup_ssr_page, wait_for};
+use ssr_e2e_harness::{
+    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);
 
 const SERVER_BASE: &str = "http://127.0.0.1:8080";
 
+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")
@@ -20,29 +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() {
-    setup_ssr_page(SERVER_BASE, "/posts/0").await;
-    yew::Renderer::<App>::with_root(output_element()).hydrate();
+async fn ssr_hydration_and_client_navigation() {
+    // -- Part 1: Direct SSR visit to /posts/0 triggers no fetch to /api/link --
+
+    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();
+
+    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 title = get_title_text().expect("h1.title should be present on the post page");
-    assert!(!title.is_empty(), "post title should not be empty");
-}
+    let link_fetches = resource_request_count(LINK_ENDPOINT);
+    let title = get_title_text();
 
-#[wasm_bindgen_test]
-async fn hydrate_posts_list() {
-    setup_ssr_page(SERVER_BASE, "/posts").await;
-    yew::Renderer::<App>::with_root(output_element()).hydrate();
+    assert_eq!(
+        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 SSR post page");
+    assert!(!title.is_empty(), "SSR post title should not be empty");
+
+    // -- Part 2: Navigate to /posts within the same app, then to /posts/0 --
+
+    // 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(
         || {
@@ -51,22 +105,69 @@ 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;
+
+    clear_resource_timings();
+
+    navigate("/posts/0");
+
+    wait_for(
+        || {
+            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",
+    )
+    .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();
+
+    assert!(
+        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;
-    yew::Renderer::<App>::with_root(output_element()).hydrate();
+    let app = make_renderer().hydrate();
 
-    sleep(Duration::from_secs(2)).await;
-    let html = output_element().inner_html();
-    assert!(
-        html.contains("Welcome"),
-        "home page should have content after hydration"
-    );
+    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

@@ -33,7 +33,7 @@ features = [
 ]
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3"
+wasm-bindgen-test.workspace = true
 serde = { workspace = true, features = ["derive"] }
 yew = { version = "0.22.1", path = "../yew", features = ["csr"] }
 

packages/yew-router/Cargo.toml

@@ -85,7 +85,7 @@ tokio = { workspace = true, features = ["rt", "rt-multi-thread", "macros"] }
 tokio = { workspace = true, features = ["macros", "rt", "time"] }
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3"
+wasm-bindgen-test.workspace = true
 gloo = { workspace = true, features = ["futures"] }
 wasm-bindgen-futures.workspace = true
 trybuild = { workspace = true }

packages/yew/Cargo.toml

@@ -406,8 +406,8 @@ mod tests {
         input
             .dispatch_event(
                 &Event::new_with_event_init_dict("blur", &{
-                    let mut dict = EventInit::new();
-                    dict.bubbles(false);
+                    let dict = EventInit::new();
+                    dict.set_bubbles(false);
                     dict
                 })
                 .unwrap(),
@@ -731,21 +731,23 @@ mod tests {
     #[test]
     fn oninput() {
         test_input_listener(|| {
-            web_sys::InputEvent::new_with_event_init_dict(
-                "input",
-                web_sys::InputEventInit::new().bubbles(true),
-            )
+            web_sys::InputEvent::new_with_event_init_dict("input", &{
+                let init = web_sys::InputEventInit::new();
+                init.set_bubbles(true);
+                init
+            })
             .unwrap()
         })
     }
 
     #[test]
     fn onchange() {
         test_input_listener(|| {
-            web_sys::Event::new_with_event_init_dict(
-                "change",
-                web_sys::EventInit::new().bubbles(true),
-            )
+            web_sys::Event::new_with_event_init_dict("change", &{
+                let init = web_sys::EventInit::new();
+                init.set_bubbles(true);
+                init
+            })
             .unwrap()
         })
     }

packages/yew/src/dom_bundle/btag/listeners.rs

@@ -5,5 +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 }