Merge pull request #79 from maartenbreddels/fix_event_serialization

fix: event serialization fails for non-DOM-events

Author: mariobuikhuizen

js/src/VueRenderer.js

@@ -75,10 +75,10 @@ function pickSerializable(object, depth=0, max_depth=2) {
 }
 
 export function eventToObject(event) {
-    if (event == null) {
-        return event;
+    if (event instanceof Event) {
+        return pickSerializable(event);
     }
-    return pickSerializable(event);
+    return event;
 }
 
 export function vueRender(createElement, model, parentView, slotScopes) {

tests/ui/test_events.py

@@ -9,7 +9,7 @@
 from unittest.mock import MagicMock
 
 
-def test_widget_button(solara_test, page_session: playwright.sync_api.Page):
+def test_event_basics(solara_test, page_session: playwright.sync_api.Page):
     inner = vue.Html(tag="div", children=["Click Me!"])
     outer = vue.Html(tag="dev", children=[inner])
     mock_outer = MagicMock()
@@ -36,3 +36,26 @@ def on_click_inner(*ignore):
     inner_sel.click()
     page_session.locator("text=Clicked").wait_for()
     mock_outer.assert_called_once()
+
+
+def test_mouse_event(solara_test, page_session: playwright.sync_api.Page):
+    div = vue.Html(tag="div", children=["Click Me!"])
+    last_event_data = None
+
+    def on_click(widget, event, data):
+        nonlocal last_event_data
+        last_event_data = data
+        div.children = ["Clicked"]
+
+    div.on_event("click", on_click)
+    display(div)
+
+    # click in the div
+    box = page_session.locator("text=Click Me!").bounding_box()
+    assert box is not None
+    page_session.mouse.click(box["x"], box["y"])
+
+    page_session.locator("text=Clicked").wait_for()
+    assert last_event_data is not None
+    assert last_event_data["x"] == box["x"]
+    assert last_event_data["y"] == box["y"]

tests/ui/test_template.py

@@ -8,7 +8,7 @@
 import playwright.sync_api
 
 from IPython.display import display
-from traitlets import default, Int
+from traitlets import default, Int, Callable, Unicode
 
 
 class MyTemplate(vue.VueTemplate):
@@ -37,3 +37,36 @@ def kernel_code():
     widget.wait_for()
     widget.click()
     page_session.locator("text=Clicked 1").wait_for()
+
+
+class MyEventTemplate(vue.VueTemplate):
+    on_custom = Callable()
+    text = Unicode("Click Me").tag(sync=True)
+
+    @default("template")
+    def _default_vue_template(self):
+        return """
+        <template>
+            <div @click="custom_event('not-an-event-object')">{{text}}</div>
+        </template>
+        """
+
+    def vue_custom_event(self, data):
+        self.on_custom(data)
+
+
+def test_template_custom_event(solara_test, page_session: playwright.sync_api.Page):
+    last_event_data = None
+
+    def on_custom(data):
+        nonlocal last_event_data
+        last_event_data = data
+        div.text = "Clicked"
+
+    div = MyEventTemplate(on_custom=on_custom)
+
+    display(div)
+
+    page_session.locator("text=Click Me").click()
+    page_session.locator("text=Clicked").wait_for()
+    assert last_event_data == "not-an-event-object"