fix tests using key path event targets

Author: rmorshea

src/idom/core/events.py

@@ -73,7 +73,7 @@ def on(
             stop_propagation:
                 Block the event from propagating further up the DOM.
             prevent_default:
-                Stops the default actional associate with the event from taking place.
+                Stops the default action associate with the event from taking place.
 
         Returns:
             A decorator which accepts an event handler function as its first argument.
@@ -133,12 +133,10 @@ class EventHandler:
     The event handler object acts like a coroutine when called.
 
     Parameters:
-        event_name:
-            The camel case name of the event.
-        target_id:
-            A unique identifier for the event handler. This is generally used if
-            an element has more than on event handler for the same event type. If
-            no ID is provided one will be generated automatically.
+        stop_propagation:
+            Block the event from propagating further up the DOM.
+        prevent_default:
+            Stops the default action associate with the event from taking place.
     """
 
     __slots__ = (
@@ -160,13 +158,12 @@ def __init__(
         self._func_handlers: List[Callable[..., Any]] = []
 
     def add(self, function: Callable[..., Any]) -> "EventHandler":
-        """Add a callback to the event handler.
+        """Add a callback function or coroutine to the event handler.
 
         Parameters:
             function:
-                The event handler function. Its parameters may indicate event attributes
-                which should be sent back from the fronend unless otherwise specified by
-                the ``properties`` parameter.
+                The event handler function accepting parameters sent by the client.
+                Typically this is a single ``event`` parameter that is a dictionary.
         """
         if asyncio.iscoroutinefunction(function):
             self._coro_handlers.append(function)
@@ -175,7 +172,7 @@ def add(self, function: Callable[..., Any]) -> "EventHandler":
         return self
 
     def remove(self, function: Callable[..., Any]) -> None:
-        """Remove the function from the event handler.
+        """Remove the given function or coroutine from this event handler.
 
         Raises:
             ValueError: if not found
@@ -185,6 +182,11 @@ def remove(self, function: Callable[..., Any]) -> None:
         else:
             self._func_handlers.remove(function)
 
+    def clear(self) -> None:
+        """Remove all functions and coroutines from this event handler"""
+        self._coro_handlers.clear()
+        self._func_handlers.clear()
+
     async def __call__(self, data: List[Any]) -> Any:
         """Trigger all callbacks in the event handler."""
         if self._coro_handlers:

src/idom/core/layout.py

@@ -230,7 +230,7 @@ def _render_model_attributes(
 
         model_event_handlers = new_state.model["eventHandlers"] = {}
         for event, handler in handlers_by_event.items():
-            target = old_state.targets_by_event.get(event, id(handler))
+            target = old_state.targets_by_event.get(event, hex_id(handler))
             new_state.targets_by_event[event] = target
             self._event_handlers[target] = handler
             model_event_handlers[event] = {

tests/general_utils.py

@@ -5,6 +5,8 @@
 from weakref import ref
 
 import idom
+from idom.core.events import EventHandler
+from idom.core.utils import hex_id
 
 
 @contextmanager
@@ -19,11 +21,41 @@ def patch_slots_object(obj, attr, new_value):
         setattr(obj, attr, old_value)
 
 
+class EventCatcher:
+    """Utility for capturing the target of an event handler
+
+    Example:
+        .. code-block::
+
+            event_catcher = EventCatcher()
+
+            @idom.component
+            def MyComponent():
+                state, set_state = idom.hooks.use_state(0)
+                handler = event_catcher.capture(lambda event: set_state(state + 1))
+                return idom.html.button({"onClick": handler}, "Click me!")
+    """
+
+    def __init__(self):
+        self._event_handler = EventHandler()
+
+    @property
+    def target(self) -> str:
+        return hex_id(self._event_handler)
+
+    def capture(self, function) -> EventHandler:
+        """Called within the body of a component to create a captured event handler"""
+        self._event_handler.clear()
+        self._event_handler.add(function)
+        return self._event_handler
+
+
 class HookCatcher:
     """Utility for capturing a LifeCycleHook from a component
 
-    Eleftample:
+    Example:
         .. code-block::
+
             component_hook = HookCatcher()
 
             @idom.component

tests/test_core/test_dispatcher.py

@@ -10,22 +10,26 @@
     SingleViewDispatcher,
 )
 from idom.core.layout import Layout, LayoutEvent
-from tests.general_utils import assert_same_items
+from tests.general_utils import EventCatcher, assert_same_items
 
 
 async def test_shared_state_dispatcher():
     done = asyncio.Event()
     changes_1 = []
     changes_2 = []
+
     event_name = "onEvent"
-    target_id = f"/{event_name}"
+    event_catcher = EventCatcher()
 
-    events_to_inject = [LayoutEvent(target=target_id, data=[])] * 4
+    events_to_inject = [LayoutEvent(target=event_catcher.target, data=[])] * 4
 
     async def send_1(patch):
         changes_1.append(patch.changes)
 
     async def recv_1():
+        # Need this to yield control back to event loop otherwise we block indefinitely
+        # for some reason. Realistically this await would be on some client event, so
+        # this isn't too contrived.
         await asyncio.sleep(0)
         try:
             return events_to_inject.pop(0)
@@ -43,7 +47,8 @@ async def recv_2():
     @idom.component
     def Clickable():
         count, set_count = idom.hooks.use_state(0)
-        return idom.html.div({event_name: lambda: set_count(count + 1), "count": count})
+        handler = event_catcher.capture(lambda: set_count(count + 1))
+        return idom.html.div({event_name: handler, "count": count})
 
     async with SharedViewDispatcher(Layout(Clickable())) as dispatcher:
         await dispatcher.run(send_1, recv_1, "1")
@@ -56,7 +61,7 @@ def Clickable():
                 "path": "/eventHandlers",
                 "value": {
                     event_name: {
-                        "target": target_id,
+                        "target": event_catcher.target,
                         "preventDefault": False,
                         "stopPropagation": False,
                     }

tests/test_core/test_layout.py

@@ -7,7 +7,7 @@
 import idom
 from idom.core.layout import LayoutEvent, LayoutUpdate
 from idom.core.utils import hex_id
-from tests.general_utils import HookCatcher, assert_same_items
+from tests.general_utils import EventCatcher, HookCatcher, assert_same_items
 
 
 def test_layout_update_create_from_apply_to():
@@ -286,15 +286,19 @@ def use_toggle(init=False):
 
 async def test_model_key_preserves_callback_identity_for_common_elements():
     called_good_trigger = idom.Ref(False)
+    good_event_catcher = EventCatcher()
+    bad_event_catcher = EventCatcher()
 
     @idom.component
     def MyComponent():
         reverse_children, set_reverse_children = use_toggle()
 
+        @good_event_catcher.capture
         def good_trigger():
             called_good_trigger.current = True
             set_reverse_children()
 
+        @bad_event_catcher.capture
         def bad_trigger():
             raise ValueError("Called bad trigger")
 
@@ -313,7 +317,7 @@ def bad_trigger():
     async with idom.Layout(MyComponent()) as layout:
         await layout.render()
         for i in range(3):
-            event = LayoutEvent("/good/onClick", [])
+            event = LayoutEvent(good_event_catcher.target, [])
             await layout.dispatch(event)
 
             assert called_good_trigger.current
@@ -325,6 +329,8 @@ def bad_trigger():
 
 async def test_model_key_preserves_callback_identity_for_components():
     called_good_trigger = idom.Ref(False)
+    good_event_catcher = EventCatcher()
+    bad_event_catcher = EventCatcher()
 
     @idom.component
     def RootComponent():
@@ -339,19 +345,25 @@ def RootComponent():
 
     @idom.component
     def Trigger(set_reverse_children, key):
-        def callback():
-            if key == "good":
+        if key == "good":
+
+            @good_event_catcher.capture
+            def callback():
                 called_good_trigger.current = True
                 set_reverse_children()
-            else:
+
+        else:
+
+            @bad_event_catcher.capture
+            def callback():
                 raise ValueError("Called bad trigger")
 
         return idom.html.button({"onClick": callback, "id": "good"}, "good")
 
     async with idom.Layout(RootComponent()) as layout:
         await layout.render()
         for i in range(3):
-            event = LayoutEvent("/good/onClick", [])
+            event = LayoutEvent(good_event_catcher.target, [])
             await layout.dispatch(event)
 
             assert called_good_trigger.current