Fix: Include child component JavaScript calls in response

Author: JohananOppongAmoateng

src/django_unicorn/components/unicorn_view.py

@@ -147,7 +147,7 @@ def construct_component(
     )
 
     component.calls = []
-    component.children = []
+    
 
     component._mount_result = component.mount()
     component.hydrate()

src/django_unicorn/views/response.py

@@ -23,6 +23,38 @@ def __init__(
         self.return_data = return_data
         self.partials = partials or []
 
+    def _collect_all_calls(self) -> list[dict[str, Any]]:
+        """
+        Collect JavaScript calls from this component and all its children recursively.
+
+        Returns:
+            List of call dictionaries with 'fn' and 'args' keys.
+        """
+        all_calls = list(self.component.calls)  # Start with parent's calls
+
+        # Recursively collect from all children
+        all_calls.extend(self._collect_calls_from_component(self.component))
+
+        return all_calls
+
+    def _collect_calls_from_component(self, component: UnicornView) -> list[dict[str, Any]]:
+        """
+        Helper to recursively collect calls from a component's descendants.
+
+        Args:
+            component: The component to collect calls from.
+
+        Returns:
+            List of call dictionaries from all descendants.
+        """
+        calls = []
+        for child in component.children:
+            # Add this child's calls
+            calls.extend(child.calls)
+            # Recursively collect from this child's descendants
+            calls.extend(self._collect_calls_from_component(child))
+        return calls
+
     def get_data(self) -> dict[str, Any]:
         # Sort data so it's stable
         if self.component_request.data:
@@ -34,7 +66,7 @@ def get_data(self) -> dict[str, Any]:
             "id": self.component_request.id,
             "data": self.component_request.data,
             "errors": self.component.errors,
-            "calls": self.component.calls,
+            "calls": self._collect_all_calls(),
             "checksum": generate_checksum(self.component_request.data),
         }
 
@@ -50,7 +82,7 @@ def get_data(self) -> dict[str, Any]:
             if (
                 self.component_request.hash == rendered_component_hash
                 and (not self.return_data or not self.return_data.value)
-                and not self.component.calls
+                and not self._collect_all_calls()
             ):
                 if not self.component.parent and self.component.force_render is False:
                     raise RenderNotModifiedError()

tests/views/message/test_calls.py

@@ -66,3 +66,117 @@ def test_message_calls_with_arg(client):
     response = post_and_get_response(client, url=FAKE_CALLS_COMPONENT_URL, action_queue=action_queue)
 
     assert response.get("calls") == [{"args": ["hello"], "fn": "testCall3"}]
+
+
+class FakeChildComponent(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def child_method(self):
+        self.call("createChart", {"data": "test"})
+
+
+class FakeParentComponent(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        # Create a child component
+        child = FakeChildComponent(component_name="fake-child", id="child-123")
+        child.parent = self
+        self.children.append(child)
+
+    def call_child_method(self):
+        # Parent calls child's method
+        for child in self.children:
+            if hasattr(child, "child_method") and callable(child.child_method):
+                child.child_method()  # type: ignore[call-top-callable]
+
+
+FAKE_PARENT_COMPONENT_URL = "/message/tests.views.message.test_calls.FakeParentComponent"
+
+
+def test_message_child_calls_from_parent(client):
+    """Test that child component calls are included when parent calls child method."""
+    action_queue = [
+        {
+            "payload": {"name": "call_child_method"},
+            "type": "callMethod",
+            "target": None,
+        }
+    ]
+
+    response = post_and_get_response(client, url=FAKE_PARENT_COMPONENT_URL, action_queue=action_queue)
+
+    # Verify child's JavaScript call is in the response
+    calls = response.get("calls", [])
+    assert any(call["fn"] == "createChart" for call in calls), f"Expected 'createChart' in calls, got: {calls}"
+    assert len(calls) == 1
+    assert calls[0]["args"] == [{"data": "test"}]
+
+
+class FakeGrandchildComponent(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def grandchild_method(self):
+        self.call("grandchildFunction", "nested")
+
+
+class FakeChildWithGrandchildComponent(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        # Create a grandchild component
+        grandchild = FakeGrandchildComponent(component_name="fake-grandchild", id="grandchild-456")
+        grandchild.parent = self
+        self.children.append(grandchild)
+
+    def child_method_with_call(self):
+        self.call("childFunction")
+        # Also call grandchild's method
+        for child in self.children:
+            if hasattr(child, "grandchild_method") and callable(child.grandchild_method):
+                child.grandchild_method()  # type: ignore[call-top-callable]
+
+
+class FakeParentWithNestedChildren(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        # Create a child component with its own child
+        child = FakeChildWithGrandchildComponent(component_name="fake-child-nested", id="child-nested-789")
+        child.parent = self
+        self.children.append(child)
+
+    def call_nested_children(self):
+        self.call("parentFunction")
+        # Call child's method which will also call grandchild
+        for child in self.children:
+            if hasattr(child, "child_method_with_call") and callable(child.child_method_with_call):
+                child.child_method_with_call()  # type: ignore[call-top-callable]
+
+
+FAKE_NESTED_COMPONENT_URL = "/message/tests.views.message.test_calls.FakeParentWithNestedChildren"
+
+
+def test_message_nested_child_calls(client):
+    """Test that grandchild component calls are included in deeply nested scenarios."""
+    action_queue = [
+        {
+            "payload": {"name": "call_nested_children"},
+            "type": "callMethod",
+            "target": None,
+        }
+    ]
+
+    response = post_and_get_response(client, url=FAKE_NESTED_COMPONENT_URL, action_queue=action_queue)
+
+    # Verify all levels of calls are collected: parent, child, and grandchild
+    calls = response.get("calls", [])
+    call_functions = [call["fn"] for call in calls]
+
+    assert "parentFunction" in call_functions, f"Expected 'parentFunction' in calls, got: {call_functions}"
+    assert "childFunction" in call_functions, f"Expected 'childFunction' in calls, got: {call_functions}"
+    assert "grandchildFunction" in call_functions, f"Expected 'grandchildFunction' in calls, got: {call_functions}"
+    assert len(calls) == 3

tests/views/test_m2m_overwriting.py

@@ -11,13 +11,14 @@ class M2MComponent(UnicornView):
 
     def mount(self):
         if self.component_args:
-             self.taste = Taste.objects.get(pk=self.component_args[0])
+            self.taste = Taste.objects.get(pk=self.component_args[0])
 
     def refresh(self):
         # usage: unicorn:poll="refresh"
         if self.taste:
             self.taste = Taste.objects.get(pk=self.taste.pk)
 
+
 @pytest.mark.django_db
 def test_m2m_overwriting(client):
     # Setup

tests/views/test_unit_views.py

@@ -86,6 +86,7 @@ def test_component_response_structure():
     component = Mock(spec=Component)
     component.errors = {}
     component.calls = []
+    component.children = []
     component.parent = None
     component.force_render = False