test(async_view): SSR render tests for the four UI states

Add a dioxus-ssr dev-dependency and render-level tests asserting AsyncView's
markup per state: loading spinner, empty message, error message, and the Retry
button gated on `retriable`. The rsx is built inside the rendered component so
AsyncView's default EventHandler prop is constructed within the VirtualDom
runtime.

cargo nextest run: 42 passed (was 37).

Author: farhan-syah

Cargo.lock

@@ -25,6 +25,8 @@ tokio = { version = "1", features = ["rt-multi-thread", "macros"] }
 # UI. The `router` feature re-exports the router through dioxus::prelude.
 # Desktop-only for the skeleton.
 dioxus = { version = "0.7", features = ["desktop", "router"] }
+# Test-only: render components to a string for render-level assertions.
+dioxus-ssr = "0.7"
 
 # Serialization. Kept for derive on models/preferences; no runtime parsing
 # happens in the skeleton (mock data is hardcoded Rust).

Cargo.toml

@@ -22,3 +22,6 @@ sonic-rs = { workspace = true }
 thiserror = { workspace = true }
 async-trait = { workspace = true }
 tracing = { workspace = true }
+
+[dev-dependencies]
+dioxus-ssr = { workspace = true }

nodedb-studio/Cargo.toml

@@ -71,3 +71,91 @@ pub fn AsyncView(props: AsyncViewProps) -> Element {
     // Loaded: the caller renders its own markup; AsyncView renders nothing.
     rsx! {}
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    // SSR the given root component to HTML. The rsx is built INSIDE the component
+    // (i.e. within the VirtualDom runtime) because `AsyncView`'s default
+    // `EventHandler` prop can only be constructed while a runtime is in scope.
+    fn render(app: fn() -> Element) -> String {
+        let mut dom = VirtualDom::new(app);
+        dom.rebuild_in_place();
+        dioxus_ssr::render(&dom)
+    }
+
+    #[test]
+    fn loading_renders_spinner() {
+        fn app() -> Element {
+            rsx! { AsyncView { loading: true, empty: false, error: None } }
+        }
+        let html = render(app);
+        assert!(html.contains("async-loading"));
+        assert!(html.contains("Loading"));
+    }
+
+    #[test]
+    fn empty_renders_message() {
+        fn app() -> Element {
+            rsx! {
+                AsyncView {
+                    loading: false,
+                    empty: true,
+                    error: None,
+                    empty_message: "Nothing here".to_string(),
+                }
+            }
+        }
+        let html = render(app);
+        assert!(html.contains("async-empty"));
+        assert!(html.contains("Nothing here"));
+    }
+
+    #[test]
+    fn retriable_error_shows_retry() {
+        fn app() -> Element {
+            rsx! {
+                AsyncView {
+                    loading: false,
+                    empty: false,
+                    error: Some("boom".to_string()),
+                    retriable: true,
+                }
+            }
+        }
+        let html = render(app);
+        assert!(html.contains("async-error"));
+        assert!(html.contains("boom"));
+        assert!(html.contains("Retry"));
+    }
+
+    #[test]
+    fn non_retriable_error_hides_retry() {
+        fn app() -> Element {
+            rsx! {
+                AsyncView {
+                    loading: false,
+                    empty: false,
+                    error: Some("boom".to_string()),
+                    retriable: false,
+                }
+            }
+        }
+        let html = render(app);
+        assert!(html.contains("async-error"));
+        assert!(html.contains("boom"));
+        assert!(!html.contains("Retry"));
+    }
+
+    #[test]
+    fn loaded_renders_nothing() {
+        fn app() -> Element {
+            rsx! { AsyncView { loading: false, empty: false, error: None } }
+        }
+        let html = render(app);
+        assert!(!html.contains("async-loading"));
+        assert!(!html.contains("async-empty"));
+        assert!(!html.contains("async-error"));
+    }
+}