Fix: Properly escape single quotes in Unicorn.call() arguments

Author: JohananOppongAmoateng

src/django_unicorn/static/unicorn/js/unicorn.js

@@ -171,7 +171,10 @@ export function call(componentNameOrKey, methodName, ...args) {
   args.forEach((arg) => {
     if (typeof arg !== "undefined") {
       if (typeof arg === "string") {
-        argString = `${argString}'${arg}', `;
+        // Use JSON.stringify to properly escape quotes and special characters
+        // Then replace double quotes with single quotes for Python compatibility
+        const escapedArg = JSON.stringify(arg).slice(1, -1).replace(/\\"/g, '"').replace(/'/g, "\\'");
+        argString = `${argString}'${escapedArg}', `;
       } else {
         argString = `${argString}${arg}, `;
       }

tests/call_method_parser/test_parse_call_method_name.py

@@ -82,3 +82,44 @@ def test_special_method_with_parens():
     actual = parse_call_method_name("$reset()")
 
     assert actual == expected
+
+
+def test_string_with_single_quotes():
+    expected = ("set_name", ("It's a test",), {})
+    actual = parse_call_method_name("set_name('It\\'s a test')")
+
+    assert actual == expected
+
+
+def test_string_with_double_quotes():
+    expected = ("set_name", ('He said "hello"',), {})
+    actual = parse_call_method_name('set_name(\'He said "hello"\')')
+
+    assert actual == expected
+
+
+def test_string_with_backslashes():
+    expected = ("set_name", ("C:\\Users\\test",), {})
+    actual = parse_call_method_name("set_name('C:\\\\Users\\\\test')")
+
+    assert actual == expected
+
+
+def test_complex_chemical_name_issue_607():
+    """Test for issue #607: string values with single quotes break function calls"""
+    chemical_name = "Chloro(2-dicyclohexylphosphino-3,6-dimethoxy-2',4',6'-tri-i-propyl-1,1'-biphenyl)(2'-amino-1,1'-biphenyl-2-yl)palladium(II)"
+    expected = ("set_new_catalyst", (chemical_name,), {})
+    actual = parse_call_method_name(
+        "set_new_catalyst('Chloro(2-dicyclohexylphosphino-3,6-dimethoxy-2\\',"
+        "4\\',6\\'-tri-i-propyl-1,1\\'-biphenyl)(2\\'-amino-1,1\\'-biphenyl-2-yl)palladium(II)')"
+    )
+
+    assert actual == expected
+
+
+def test_string_with_mixed_quotes_and_parentheses():
+    expected = ("set_name", ("test(with 'quotes' and \"double\")",), {})
+    actual = parse_call_method_name("set_name('test(with \\'quotes\\' and \"double\")')")
+
+    assert actual == expected
+

tests/js/unicorn/call.test.js

@@ -35,3 +35,61 @@ test("call a method with string and int argument", (t) => {
 
   call("text-inputs", "testMethod", "test1", 2);
 });
+
+test("call a method with string containing single quotes", (t) => {
+  const component = getComponent();
+  components[component.id] = component;
+
+  component.callMethod = (methodName) => {
+    t.true(methodName === "testMethod('It\\'s a test')");
+  };
+
+  call("text-inputs", "testMethod", "It's a test");
+});
+
+test("call a method with string containing double quotes", (t) => {
+  const component = getComponent();
+  components[component.id] = component;
+
+  component.callMethod = (methodName) => {
+    t.true(methodName === 'testMethod(\'He said "hello"\')');
+  };
+
+  call("text-inputs", "testMethod", 'He said "hello"');
+});
+
+test("call a method with string containing backslashes", (t) => {
+  const component = getComponent();
+  components[component.id] = component;
+
+  component.callMethod = (methodName) => {
+    t.true(methodName === "testMethod('C:\\\\Users\\\\test')");
+  };
+
+  call("text-inputs", "testMethod", "C:\\Users\\test");
+});
+
+test("call a method with complex chemical name (issue #607)", (t) => {
+  const component = getComponent();
+  components[component.id] = component;
+
+  const chemicalName = "Chloro(2-dicyclohexylphosphino-3,6-dimethoxy-2',4',6'-tri-i-propyl-1,1'-biphenyl)(2'-amino-1,1'-biphenyl-2-yl)palladium(II)";
+
+  component.callMethod = (methodName) => {
+    t.true(methodName === `testMethod('Chloro(2-dicyclohexylphosphino-3,6-dimethoxy-2\\',4\\',6\\'-tri-i-propyl-1,1\\'-biphenyl)(2\\'-amino-1,1\\'-biphenyl-2-yl)palladium(II)')`);
+  };
+
+  call("text-inputs", "testMethod", chemicalName);
+});
+
+test("call a method with string containing both quotes and parentheses", (t) => {
+  const component = getComponent();
+  components[component.id] = component;
+
+  component.callMethod = (methodName) => {
+    t.true(methodName === "testMethod('test(with \\'quotes\\' and \"double\")')");
+  };
+
+  call("text-inputs", "testMethod", "test(with 'quotes' and \"double\")");
+});
+