Value property to PyDom.Element and ElementCollection (#1828)

* add base test for input value field

* add value property to Element

* add test for non supported element

* prevent users to set value attribute on elements that do not support it

* add test for setting value on collections

* add value property to collection and add more tests

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

pyscript.core/src/stdlib/pyweb/pydom.py

@@ -131,6 +131,22 @@ class Element(BaseElement):
     def id(self, value):
         self._js.id = value
 
+    @property
+    def value(self):
+        return self._js.value
+
+    @value.setter
+    def value(self, value):
+        # in order to avoid confusion to the user, we don't allow setting the
+        # value of elements that don't have a value attribute
+        if not hasattr(self._js, "value"):
+            raise AttributeError(
+                f"Element {self._js.tagName} has no value attribute. If you want to "
+                "force a value attribute, set it directly using the `_js.value = <value>` "
+                "javascript API attribute instead."
+            )
+        self._js.value = value
+
     def clone(self, new_id=None):
         clone = Element(self._js.cloneNode(True))
         clone.id = new_id
@@ -264,6 +280,14 @@ class ElementCollection:
     def html(self, value):
         self._set_attribute("html", value)
 
+    @property
+    def value(self):
+        return self._get_attribute("value")
+
+    @value.setter
+    def value(self, value):
+        self._set_attribute("value", value)
+
     @property
     def children(self):
         return self._elements

pyscript.core/test/pyscript_dom/index.html

@@ -64,8 +64,8 @@
       <h2 id="multi-elem-h2" class="multi-elems">Content multi-elem-h2</h2>
 
       <form>
-        <input id="test_rr_input_txt" type="text" value="Content test_rr_input_txt">
-        <input id="test_rr_input_btn" type="button" value="Content test_rr_input_btn">
+        <input id="test_rr_input_text" type="text" value="Content test_rr_input_text">
+        <input id="test_rr_input_button" type="button" value="Content test_rr_input_button">
         <input id="test_rr_input_email" type="email" value="Content test_rr_input_email">
         <input id="test_rr_input_password" type="password" value="Content test_rr_input_password">
       </form>
@@ -89,7 +89,6 @@
       const log = console.log.bind(console)
       let testsStarted = false;
       console.log = (...args) => {
-        log("---IN---");
         let txt = args.join(" ");
         let token = "<br>";
         if (txt.endsWith("FAILED"))

pyscript.core/test/pyscript_dom/tests/test_dom.py

@@ -244,3 +244,51 @@ class TestCreation:
         assert new_el.parent == parent_div
 
         assert pydom[selector][0].children[0] == new_el
+
+
+class TestInput:
+    input_ids = [
+        "test_rr_input_text",
+        "test_rr_input_button",
+        "test_rr_input_email",
+        "test_rr_input_password",
+    ]
+
+    def test_value(self):
+        for id_ in self.input_ids:
+            expected_type = id_.split("_")[-1]
+            result = pydom[f"#{id_}"]
+            input_el = result[0]
+            assert input_el._js.type == expected_type
+            assert input_el.value == f"Content {id_}" == input_el._js.value
+
+            # Check that we can set the value
+            new_value = f"New Value {expected_type}"
+            input_el.value = new_value
+            assert input_el.value == new_value
+
+            # Check that we can set the value back to the original using
+            # the collection
+            new_value = f"Content {id_}"
+            result.value = new_value
+            assert input_el.value == new_value
+
+    def test_set_value_collection(self):
+        for id_ in self.input_ids:
+            input_el = pydom[f"#{id_}"]
+
+            assert input_el.value[0] == f"Content {id_}" == input_el[0].value
+
+            new_value = f"New Value {id_}"
+            input_el.value = new_value
+            assert input_el.value[0] == new_value == input_el[0].value
+
+    def test_element_without_value(self):
+        result = pydom[f"#tests-terminal"][0]
+        with pytest.raises(AttributeError):
+            result.value = "some value"
+
+    def test_element_without_collection(self):
+        result = pydom[f"#tests-terminal"]
+        with pytest.raises(AttributeError):
+            result.value = "some value"

pyscript.core/types/stdlib/pyscript.d.ts

@@ -1,13 +1,14 @@
-declare namespace _default {
-    let pyscript: {
+declare const _default: {
+    pyscript: {
         "__init__.py": string;
         "display.py": string;
         "event_handling.py": string;
         "magic_js.py": string;
         "util.py": string;
     };
-    let pyweb: {
+    "pyscript.py": string;
+    pyweb: {
         "pydom.py": string;
     };
-}
+};
 export default _default;