Pydom add better support for select element (#1887)

* add tests for select options

* add classes to support select and options management

* fix add methond and implement clear on options

* fix optionsproxy.add

* fix select.add method

* add test adding a second option to select

* add tests around adding options in multiple flavors

* add test to add an option by passing the option it wants to be added before

* complete test around adding options

* add select to add test on remove

* add tests and support for selected item

* [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>
Co-authored-by: Andrea Giammarchi <andrea.giammarchi@gmail.com>

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

@@ -292,3 +292,144 @@ class TestInput:
         result = pydom[f"#tests-terminal"]
         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"
+
+
+class TestSelect:
+    def test_select_options_iter(self):
+        select = pydom[f"#test_select_element_w_options"][0]
+
+        for i, option in enumerate(select.options, 1):
+            assert option.value == f"{i}"
+            assert option.html == f"Option {i}"
+
+    def test_select_options_len(self):
+        select = pydom[f"#test_select_element_w_options"][0]
+        assert len(select.options) == 2
+
+    def test_select_options_clear(self):
+        select = pydom[f"#test_select_element_to_clear"][0]
+        assert len(select.options) == 3
+
+        select.options.clear()
+
+        assert len(select.options) == 0
+
+    def test_select_element_add(self):
+        # GIVEN the existing select element with no options
+        select = pydom[f"#test_select_element"][0]
+
+        # EXPECT the select element to have no options
+        assert len(select.options) == 0
+
+        # WHEN we add an option
+        select.options.add(value="1", html="Option 1")
+
+        # EXPECT the select element to have 1 option matching the attributes
+        # we passed in
+        assert len(select.options) == 1
+        assert select.options[0].value == "1"
+        assert select.options[0].html == "Option 1"
+
+        # WHEN we add another option (blank this time)
+        select.options.add()
+
+        # EXPECT the select element to have 2 options
+        assert len(select.options) == 2
+
+        # EXPECT the last option to have an empty value and html
+        assert select.options[1].value == ""
+        assert select.options[1].html == ""
+
+        # WHEN we add another option (this time adding it in between the other 2
+        # options by using an integer index)
+        select.options.add(value="2", html="Option 2", before=1)
+
+        # EXPECT the select element to have 3 options
+        assert len(select.options) == 3
+
+        # EXPECT the middle option to have the value and html we passed in
+        assert select.options[0].value == "1"
+        assert select.options[0].html == "Option 1"
+        assert select.options[1].value == "2"
+        assert select.options[1].html == "Option 2"
+        assert select.options[2].value == ""
+        assert select.options[2].html == ""
+
+        # WHEN we add another option (this time adding it in between the other 2
+        # options but using the option itself)
+        select.options.add(
+            value="3", html="Option 3", before=select.options[2], selected=True
+        )
+
+        # EXPECT the select element to have 3 options
+        assert len(select.options) == 4
+
+        # EXPECT the middle option to have the value and html we passed in
+        assert select.options[0].value == "1"
+        assert select.options[0].html == "Option 1"
+        assert select.options[0].selected == select.options[0]._js.selected == False
+        assert select.options[1].value == "2"
+        assert select.options[1].html == "Option 2"
+        assert select.options[2].value == "3"
+        assert select.options[2].html == "Option 3"
+        assert select.options[2].selected == select.options[2]._js.selected == True
+        assert select.options[3].value == ""
+        assert select.options[3].html == ""
+
+        # WHEN we add another option (this time adding it in between the other 2
+        # options but using the JS element of the option itself)
+        select.options.add(value="2a", html="Option 2a", before=select.options[2]._js)
+
+        # EXPECT the select element to have 3 options
+        assert len(select.options) == 5
+
+        # EXPECT the middle option to have the value and html we passed in
+        assert select.options[0].value == "1"
+        assert select.options[0].html == "Option 1"
+        assert select.options[1].value == "2"
+        assert select.options[1].html == "Option 2"
+        assert select.options[2].value == "2a"
+        assert select.options[2].html == "Option 2a"
+        assert select.options[3].value == "3"
+        assert select.options[3].html == "Option 3"
+        assert select.options[4].value == ""
+        assert select.options[4].html == ""
+
+    def test_select_options_remove(self):
+        # GIVEN the existing select element with 3 options
+        select = pydom[f"#test_select_element_to_remove"][0]
+
+        # EXPECT the select element to have 3 options
+        assert len(select.options) == 4
+        # EXPECT the options to have the values originally set
+        assert select.options[0].value == "1"
+        assert select.options[1].value == "2"
+        assert select.options[2].value == "3"
+        assert select.options[3].value == "4"
+
+        # WHEN we remove the second option (index starts at 0)
+        select.options.remove(1)
+
+        # EXPECT the select element to have 2 options
+        assert len(select.options) == 3
+        # EXPECT the options to have the values originally set but the second
+        assert select.options[0].value == "1"
+        assert select.options[1].value == "3"
+        assert select.options[2].value == "4"
+
+    def test_select_get_selected_option(self):
+        # GIVEN the existing select element with one selected option
+        select = pydom[f"#test_select_element_w_options"][0]
+
+        # WHEN we get the selected option
+        selected_option = select.options.selected
+
+        # EXPECT the selected option to be correct
+        assert selected_option.value == "2"
+        assert selected_option.html == "Option 2"
+        assert selected_option.selected == selected_option._js.selected == True