Add support for args in component.call().

Author: adamghill

django_unicorn/components/unicorn_view.py

@@ -216,11 +216,11 @@ def reset(self):
                 )
                 pass
 
-    def call(self, function_name):
+    def call(self, function_name, *args):
         """
         Add a JavaScript method name and arguments to be called after the component is rendered.
         """
-        self.calls.append({"fn": function_name})
+        self.calls.append({"fn": function_name, "args": args})
 
     def mount(self):
         """

django_unicorn/static/js/component.js

@@ -125,7 +125,7 @@ export class Component {
     calls = calls || [];
 
     calls.forEach((call) => {
-      this.window[call.fn]();
+      this.window[call.fn](...call.args);
     });
   }
 

example/unicorn/components/js.py

@@ -7,7 +7,7 @@ def mount(self):
         pass
 
     def call_javascript(self):
-        self.call("callAlert")
+        self.call("callAlert", "world")
 
     def choose_state():
         pass

example/unicorn/templates/unicorn/js.html

@@ -1,7 +1,7 @@
 <div>
     <script>
-        function callAlert() {
-            alert("hello");
+        function callAlert(name) {
+            alert("hello, " + name);
         }
     </script>
 

tests/templatetags/test_unicorn_render.py

@@ -36,6 +36,13 @@ def mount(self):
         self.call("testCall")
 
 
+class FakeComponentCalls2(UnicornView):
+    template_name = "templates/test_component_parent.html"
+
+    def mount(self):
+        self.call("testCall2", "hello")
+
+
 def test_unicorn_render_kwarg():
     token = Token(
         TokenType.TEXT,
@@ -240,7 +247,22 @@ def test_unicorn_render_calls(settings):
 
     assert "<script" in html
     assert len(re.findall("<script", html)) == 1
-    assert '"calls":[{"fn":"testCall"}]});' in html
+    assert '"calls":[{"fn":"testCall","args":[]}]});' in html
+
+
+def test_unicorn_render_calls_with_arg(settings):
+    settings.DEBUG = True
+    token = Token(
+        TokenType.TEXT,
+        "unicorn 'tests.templatetags.test_unicorn_render.FakeComponentCalls2'",
+    )
+    unicorn_node = unicorn(None, token)
+    context = {}
+    html = unicorn_node.render(context)
+
+    assert "<script" in html
+    assert len(re.findall("<script", html)) == 1
+    assert '"calls":[{"fn":"testCall2","args":["hello"]}]});' in html
 
 
 def test_unicorn_render_calls_no_mount_call(settings):

tests/views/message/test_calls.py

@@ -11,6 +11,9 @@ def test_call(self):
     def test_call2(self):
         self.call("testCall2")
 
+    def test_call3(self):
+        self.call("testCall3", "hello")
+
 
 FAKE_CALLS_COMPONENT_URL = "/message/tests.views.message.test_calls.FakeCallsComponent"
 
@@ -25,7 +28,7 @@ def test_message_calls(client):
     )
 
     body = response.json()
-    assert body.get("calls") == [{"fn": "testCall"}]
+    assert body.get("calls") == [{"args": [], "fn": "testCall"}]
 
 
 def test_message_multiple_calls(client):
@@ -38,4 +41,20 @@ def test_message_multiple_calls(client):
     )
 
     body = response.json()
-    assert body.get("calls") == [{"fn": "testCall"}, {"fn": "testCall2"}]
+    assert body.get("calls") == [
+        {"args": [], "fn": "testCall"},
+        {"args": [], "fn": "testCall2"},
+    ]
+
+
+def test_message_calls_with_arg(client):
+    action_queue = [
+        {"payload": {"name": "test_call3"}, "type": "callMethod", "target": None,}
+    ]
+
+    response = post_and_get_response(
+        client, url=FAKE_CALLS_COMPONENT_URL, action_queue=action_queue
+    )
+
+    body = response.json()
+    assert body.get("calls") == [{"args": ["hello"], "fn": "testCall3"}]