wip: add tests and slightly refactor interpreter code

packages/desktop/headless_tests/events.rs

@@ -1,73 +1,96 @@
+use std::{collections::HashMap, ops::Deref};
+
 use dioxus::html::geometry::euclid::Vector3D;
 use dioxus::prelude::*;
 use dioxus_core::prelude::consume_context;
 use dioxus_desktop::DesktopContext;
 
+#[path = "./utils.rs"]
+mod utils;
+
 pub fn main() {
-    check_app_exits(app);
+    utils::check_app_exits(app);
 }
 
-pub(crate) fn check_app_exits(app: fn() -> Element) {
-    use dioxus_desktop::tao::window::WindowBuilder;
-    use dioxus_desktop::Config;
-    // This is a deadman's switch to ensure that the app exits
-    let should_panic = std::sync::Arc::new(std::sync::atomic::AtomicBool::new(true));
-    let should_panic_clone = should_panic.clone();
-    std::thread::spawn(move || {
-        std::thread::sleep(std::time::Duration::from_secs(60));
-        if should_panic_clone.load(std::sync::atomic::Ordering::SeqCst) {
-            eprintln!("App did not exit in time");
-            std::process::exit(exitcode::SOFTWARE);
-        }
-    });
+static RECEIVED_EVENTS: GlobalSignal<usize> = Signal::global(|| 0);
 
-    LaunchBuilder::desktop()
-        .with_cfg(Config::new().with_window(WindowBuilder::new().with_visible(true)))
-        .launch(app);
-
-    // Stop deadman's switch
-    should_panic.store(false, std::sync::atomic::Ordering::SeqCst);
-}
-
-fn mock_event(id: &'static str, value: &'static str) {
-    use_hook(move || {
-        spawn(async move {
-            tokio::time::sleep(std::time::Duration::from_millis(5000)).await;
-
-            let js = format!(
-                r#"
-                //console.log("ran");
-                // Dispatch a synthetic event
-                let event = {};
-                let element = document.getElementById('{}');
-                console.log(element, event);
-                element.dispatchEvent(event);
-                "#,
-                value, id
-            );
-
-            eval(&js).await.unwrap();
-        });
-    })
-}
-
-#[allow(deprecated)]
 fn app() -> Element {
     let desktop_context: DesktopContext = consume_context();
-    let mut received_events = use_signal(|| 0);
 
-    // button
-    mock_event(
+    let received = RECEIVED_EVENTS();
+    let expected = utils::EXPECTED_EVENTS();
+
+    if expected != 0 && received == expected {
+        println!("all events recieved");
+        desktop_context.close();
+    }
+
+    rsx! {
+        div {
+            test_mounted {}
+            test_button {}
+            test_mouse_move_div {}
+            test_mouse_click_div {}
+            test_mouse_dblclick_div {}
+            test_mouse_down_div {}
+            test_mouse_up_div {}
+            test_mouse_scroll_div {}
+            test_key_down_div {}
+            test_key_up_div {}
+            test_key_press_div {}
+            test_focus_in_div {}
+            test_focus_out_div {}
+            test_form_input {}
+        }
+    }
+}
+
+fn test_mounted() -> Element {
+    rsx! {
+        div {
+            width: "100px",
+            height: "100px",
+            onmounted: move |evt| async move {
+                let rect = evt.get_client_rect().await.unwrap();
+                println!("rect: {:?}", rect);
+                assert_eq!(rect.width(), 100.0);
+                assert_eq!(rect.height(), 100.0);
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_button() -> Element {
+    utils::mock_event(
         "button",
         r#"new MouseEvent("click", {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        button: 0,
+            view: window,
+            bubbles: true,
+            cancelable: true,
+            button: 0,
         })"#,
     );
-    // mouse_move_div
-    mock_event(
+
+    rsx! {
+        button {
+            id: "button",
+            onclick: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(event.data.held_buttons().is_empty());
+                assert_eq!(
+                    event.data.trigger_button(),
+                    Some(dioxus_html::input_data::MouseButton::Primary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_move_div() -> Element {
+    utils::mock_event(
         "mouse_move_div",
         r#"new MouseEvent("mousemove", {
         view: window,
@@ -76,8 +99,27 @@ fn app() -> Element {
         buttons: 2,
         })"#,
     );
-    // mouse_click_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "mouse_move_div",
+            onmousemove: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(
+                    event
+                        .data
+                        .held_buttons()
+                        .contains(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_click_div() -> Element {
+    utils::mock_event(
         "mouse_click_div",
         r#"new MouseEvent("click", {
         view: window,
@@ -87,8 +129,31 @@ fn app() -> Element {
         button: 2,
         })"#,
     );
-    // mouse_dblclick_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "mouse_click_div",
+            onclick: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(
+                    event
+                        .data
+                        .held_buttons()
+                        .contains(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                assert_eq!(
+                    event.data.trigger_button(),
+                    Some(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_dblclick_div() -> Element {
+    utils::mock_event(
         "mouse_dblclick_div",
         r#"new MouseEvent("dblclick", {
         view: window,
@@ -98,8 +163,34 @@ fn app() -> Element {
         button: 2,
         })"#,
     );
-    // mouse_down_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "mouse_dblclick_div",
+            ondoubleclick: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(
+                    event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary),
+                );
+                assert!(
+                    event
+                        .data
+                        .held_buttons()
+                        .contains(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                assert_eq!(
+                    event.data.trigger_button(),
+                    Some(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_down_div() -> Element {
+    utils::mock_event(
         "mouse_down_div",
         r#"new MouseEvent("mousedown", {
         view: window,
@@ -109,8 +200,31 @@ fn app() -> Element {
         button: 2,
         })"#,
     );
-    // mouse_up_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "mouse_down_div",
+            onmousedown: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(
+                    event
+                        .data
+                        .held_buttons()
+                        .contains(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                assert_eq!(
+                    event.data.trigger_button(),
+                    Some(dioxus_html::input_data::MouseButton::Secondary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_up_div() -> Element {
+    utils::mock_event(
         "mouse_up_div",
         r#"new MouseEvent("mouseup", {
         view: window,
@@ -120,8 +234,26 @@ fn app() -> Element {
         button: 0,
         })"#,
     );
-    // wheel_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "mouse_up_div",
+            onmouseup: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert!(event.data.held_buttons().is_empty());
+                assert_eq!(
+                    event.data.trigger_button(),
+                    Some(dioxus_html::input_data::MouseButton::Primary),
+                );
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_mouse_scroll_div() -> Element {
+    utils::mock_event(
         "wheel_div",
         r#"new WheelEvent("wheel", {
         view: window,
@@ -132,8 +264,26 @@ fn app() -> Element {
         bubbles: true,
         })"#,
     );
-    // key_down_div
-    mock_event(
+
+    rsx! {
+        div {
+            id: "wheel_div",
+            width: "100px",
+            height: "100px",
+            background_color: "red",
+            onwheel: move |event| {
+                println!("{:?}", event.data);
+                let dioxus_html::geometry::WheelDelta::Pixels(delta) = event.data.delta() else {
+                panic!("Expected delta to be in pixels") };
+                assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_key_down_div() -> Element {
+    utils::mock_event(
         "key_down_div",
         r#"new KeyboardEvent("keydown", {
         key: "a",
@@ -153,8 +303,24 @@ fn app() -> Element {
         bubbles: true,
         })"#,
     );
-    // key_up_div
-    mock_event(
+    rsx! {
+        input {
+            id: "key_down_div",
+            onkeydown: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert_eq!(event.data.key().to_string(), "a");
+                assert_eq!(event.data.code().to_string(), "KeyA");
+                assert_eq!(event.data.location(), Location::Standard);
+                assert!(event.data.is_auto_repeating());
+                assert!(event.data.is_composing());
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+fn test_key_up_div() -> Element {
+    utils::mock_event(
         "key_up_div",
         r#"new KeyboardEvent("keyup", {
         key: "a",
@@ -174,8 +340,25 @@ fn app() -> Element {
         bubbles: true,
         })"#,
     );
-    // key_press_div
-    mock_event(
+
+    rsx! {
+        input {
+            id: "key_up_div",
+            onkeyup: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert_eq!(event.data.key().to_string(), "a");
+                assert_eq!(event.data.code().to_string(), "KeyA");
+                assert_eq!(event.data.location(), Location::Standard);
+                assert!(!event.data.is_auto_repeating());
+                assert!(!event.data.is_composing());
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+fn test_key_press_div() -> Element {
+    utils::mock_event(
         "key_press_div",
         r#"new KeyboardEvent("keypress", {
         key: "a",
@@ -195,197 +378,94 @@ fn app() -> Element {
         bubbles: true,
         })"#,
     );
-    // focus_in_div
-    mock_event(
-        "focus_in_div",
-        r#"new FocusEvent("focusin", {bubbles: true})"#,
-    );
-    // focus_out_div
-    mock_event(
-        "focus_out_div",
-        r#"new FocusEvent("focusout",{bubbles: true})"#,
-    );
-
-    if received_events() == 13 {
-        println!("all events recieved");
-        desktop_context.close();
-    }
-
     rsx! {
-        div {
-            div {
-                width: "100px",
-                height: "100px",
-                onmounted: move |evt| async move {
-                    let rect = evt.get_client_rect().await.unwrap();
-                    println!("rect: {:?}", rect);
-                    assert_eq!(rect.width(), 100.0);
-                    assert_eq!(rect.height(), 100.0);
-                    received_events.with_mut(|x| *x += 1);
-                }
+        input {
+            id: "key_press_div",
+            onkeypress: move |event| {
+                println!("{:?}", event.data);
+                assert!(event.data.modifiers().is_empty());
+                assert_eq!(event.data.key().to_string(), "a");
+                assert_eq!(event.data.code().to_string(), "KeyA");
+                assert_eq!(event.data.location(), Location::Standard);
+                assert!(!event.data.is_auto_repeating());
+                assert!(!event.data.is_composing());
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
             }
-            button {
-                id: "button",
-                onclick: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().is_empty());
-                    assert_eq!(
-                        event.data.trigger_button(),
-                        Some(dioxus_html::input_data::MouseButton::Primary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
+        }
+    }
+}
+
+fn test_focus_in_div() -> Element {
+    utils::mock_event(
+        "focus_in_div",
+        r#"new FocusEvent("focusin", {bubbles: true})"#,
+    );
+
+    rsx! {
+        input {
+            id: "focus_in_div",
+            onfocusin: move |event| {
+                println!("{:?}", event.data);
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
             }
-            div {
-                id: "mouse_move_div",
-                onmousemove: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(
-                        event
-                            .data
-                            .held_buttons()
-                            .contains(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
+        }
+    }
+}
+
+fn test_focus_out_div() -> Element {
+    utils::mock_event(
+        "focus_out_div",
+        r#"new FocusEvent("focusout",{bubbles: true})"#,
+    );
+    rsx! {
+        input {
+            id: "focus_out_div",
+            onfocusout: move |event| {
+                println!("{:?}", event.data);
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
             }
-            div {
-                id: "mouse_click_div",
-                onclick: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(
-                        event
-                            .data
-                            .held_buttons()
-                            .contains(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    assert_eq!(
-                        event.data.trigger_button(),
-                        Some(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            div {
-                id: "mouse_dblclick_div",
-                ondoubleclick: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(
-                        event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary),
-                    );
-                    assert!(
-                        event
-                            .data
-                            .held_buttons()
-                            .contains(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    assert_eq!(
-                        event.data.trigger_button(),
-                        Some(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            div {
-                id: "mouse_down_div",
-                onmousedown: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(
-                        event
-                            .data
-                            .held_buttons()
-                            .contains(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    assert_eq!(
-                        event.data.trigger_button(),
-                        Some(dioxus_html::input_data::MouseButton::Secondary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            div {
-                id: "mouse_up_div",
-                onmouseup: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert!(event.data.held_buttons().is_empty());
-                    assert_eq!(
-                        event.data.trigger_button(),
-                        Some(dioxus_html::input_data::MouseButton::Primary),
-                    );
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            div {
-                id: "wheel_div",
-                width: "100px",
-                height: "100px",
-                background_color: "red",
-                onwheel: move |event| {
-                    println!("{:?}", event.data);
-                    let dioxus_html::geometry::WheelDelta::Pixels(delta) = event.data.delta() else {
-                    panic!("Expected delta to be in pixels") };
-                    assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            input {
-                id: "key_down_div",
-                onkeydown: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert_eq!(event.data.key().to_string(), "a");
-                    assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location(), Location::Standard);
-                    assert!(event.data.is_auto_repeating());
-                    assert!(event.data.is_composing());
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            input {
-                id: "key_up_div",
-                onkeyup: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert_eq!(event.data.key().to_string(), "a");
-                    assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location(), Location::Standard);
-                    assert!(!event.data.is_auto_repeating());
-                    assert!(!event.data.is_composing());
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            input {
-                id: "key_press_div",
-                onkeypress: move |event| {
-                    println!("{:?}", event.data);
-                    assert!(event.data.modifiers().is_empty());
-                    assert_eq!(event.data.key().to_string(), "a");
-                    assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location(), Location::Standard);
-                    assert!(!event.data.is_auto_repeating());
-                    assert!(!event.data.is_composing());
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            input {
-                id: "focus_in_div",
-                onfocusin: move |event| {
-                    println!("{:?}", event.data);
-                    received_events.with_mut(|x| *x += 1);
-                }
-            }
-            input {
-                id: "focus_out_div",
-                onfocusout: move |event| {
-                    println!("{:?}", event.data);
-                    received_events.with_mut(|x| *x += 1);
+        }
+    }
+}
+
+fn test_form_input() -> Element {
+    let mut values = use_signal(|| HashMap::new());
+
+    utils::mock_event_with_extra(
+        "form-username",
+        r#"new Event("input", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        })"#,
+        r#"element.value = "hello";"#,
+    );
+
+    let set_values = move |ev: FormEvent| {
+        values.set(ev.values());
+        eprintln!("values: {:?}", values);
+        values.with_mut(|x| {
+            assert_eq!(x.get("username").unwrap().deref(), &["hello"]);
+        });
+    };
+
+    rsx! {
+        div {
+            h1 { "Form" }
+            form {
+                id: "form",
+                oninput: move |ev| values.set(ev.values()),
+                input {
+                    r#type: "text",
+                    name: "username",
+                    id: "form-username",
+                    oninput: set_values,
                 }
+                input { r#type: "text", name: "full-name" }
+                input { r#type: "password", name: "password" }
+                input { r#type: "radio", name: "color", value: "red" }
+                input { r#type: "radio", name: "color", value: "blue" }
+                button { r#type: "submit", value: "Submit", "Submit the form" }
             }
         }
     }

packages/desktop/headless_tests/rendering.rs

@@ -2,28 +2,11 @@ use dioxus::prelude::*;
 use dioxus_core::Element;
 use dioxus_desktop::DesktopContext;
 
+#[path = "./utils.rs"]
+mod utils;
+
 fn main() {
-    check_app_exits(check_html_renders);
-}
-
-pub(crate) fn check_app_exits(app: fn() -> Element) {
-    use dioxus_desktop::Config;
-    use tao::window::WindowBuilder;
-    // This is a deadman's switch to ensure that the app exits
-    let should_panic = std::sync::Arc::new(std::sync::atomic::AtomicBool::new(true));
-    let should_panic_clone = should_panic.clone();
-    std::thread::spawn(move || {
-        std::thread::sleep(std::time::Duration::from_secs(5));
-        if should_panic_clone.load(std::sync::atomic::Ordering::SeqCst) {
-            std::process::exit(exitcode::SOFTWARE);
-        }
-    });
-
-    LaunchBuilder::desktop()
-        .with_cfg(Config::new().with_window(WindowBuilder::new().with_visible(true)))
-        .launch(app);
-
-    should_panic.store(false, std::sync::atomic::Ordering::SeqCst);
+    utils::check_app_exits(check_html_renders);
 }
 
 fn use_inner_html(id: &'static str) -> Option<String> {

packages/desktop/headless_tests/utils.rs

@@ -0,0 +1,55 @@
+use dioxus::prelude::*;
+use dioxus_core::Element;
+
+pub fn check_app_exits(app: fn() -> Element) {
+    use dioxus_desktop::tao::window::WindowBuilder;
+    use dioxus_desktop::Config;
+    // This is a deadman's switch to ensure that the app exits
+    let should_panic = std::sync::Arc::new(std::sync::atomic::AtomicBool::new(true));
+    let should_panic_clone = should_panic.clone();
+    std::thread::spawn(move || {
+        std::thread::sleep(std::time::Duration::from_secs(60));
+        if should_panic_clone.load(std::sync::atomic::Ordering::SeqCst) {
+            eprintln!("App did not exit in time");
+            std::process::exit(exitcode::SOFTWARE);
+        }
+    });
+
+    LaunchBuilder::desktop()
+        .with_cfg(Config::new().with_window(WindowBuilder::new().with_visible(true)))
+        .launch(app);
+
+    // Stop deadman's switch
+    should_panic.store(false, std::sync::atomic::Ordering::SeqCst);
+}
+
+pub static EXPECTED_EVENTS: GlobalSignal<usize> = Signal::global(|| 0);
+
+pub fn mock_event(id: &'static str, value: &'static str) {
+    mock_event_with_extra(id, value, "");
+}
+
+pub fn mock_event_with_extra(id: &'static str, value: &'static str, extra: &'static str) {
+    EXPECTED_EVENTS.with_mut(|x| *x += 1);
+
+    use_hook(move || {
+        spawn(async move {
+            tokio::time::sleep(std::time::Duration::from_millis(5000)).await;
+
+            let js = format!(
+                r#"
+                //console.log("ran");
+                // Dispatch a synthetic event
+                let event = {};
+                let element = document.getElementById('{}');
+                console.log(element, event);
+                {}
+                element.dispatchEvent(event);
+                "#,
+                value, id, extra
+            );
+
+            eval(&js).await.unwrap();
+        });
+    })
+}