add tests

Author: Archmonger

src/reactpy_django/pyscript/layout_handler.py

@@ -48,6 +48,8 @@ def build_element_tree(self, layout, parent, model):
                 if key == "style":
                     for style_key, style_value in value.items():
                         setattr(element.style, style_key, style_value)
+                elif key == "className":
+                    element.className = value
                 else:
                     element.setAttribute(key, value)
             for event_name, event_handler_model in model.get(

tests/test_app/pyscript/components/child.py

@@ -1,33 +1,25 @@
 from reactpy import component, html, use_state
-from reactpy_django.components import python_to_pyscript
 
 
 @component
-def embed():
-    return html.div(
-        {"className": "embeddable"},
-        python_to_pyscript("./test_app/pyscript/components/child_embed.py"),
-    )
-
-
-@component
-def toggeable_embed():
-    state, set_state = use_state(False)
-
-    if not state:
-        return html.div(
-            {"className": "embeddable"},
+def root():
+    value, set_value = use_state(0)
+    return html.article(
+        {"id": "child"},
+        "This was embedded via a server-side component.",
+        html.div(
+            {"className": "grid"},
             html.button(
-                {"onClick": lambda x: set_state(not state)},
-                "Click to show/hide",
+                {"className": "plus", "on_click": lambda event: set_value(value + 1)},
+                "+",
             ),
-        )
-
-    return html.div(
-        {"className": "embeddable"},
-        html.button(
-            {"onClick": lambda x: set_state(not state)},
-            "Click to show/hide",
+            html.button(
+                {"className": "minus", "on_click": lambda event: set_value(value - 1)},
+                "-",
+            ),
+        ),
+        "Current value",
+        html.pre(
+            {"style": {"font-style": "bold"}, "data-value": str(value)}, str(value)
         ),
-        python_to_pyscript("./test_app/pyscript/components/child_embed.py"),
     )

tests/test_app/pyscript/components/child_embed.py

@@ -5,11 +5,20 @@
 def root():
     value, set_value = use_state(0)
     return html.article(
+        {"id": "counter"},
         html.div(
             {"className": "grid"},
-            html.button({"on_click": lambda event: set_value(value + 1)}, "+"),
-            html.button({"on_click": lambda event: set_value(value - 1)}, "-"),
+            html.button(
+                {"className": "plus", "on_click": lambda event: set_value(value + 1)},
+                "+",
+            ),
+            html.button(
+                {"className": "minus", "on_click": lambda event: set_value(value - 1)},
+                "-",
+            ),
         ),
         "Current value",
-        html.pre({"style": {"font-style": "bold"}}, str(value)),
+        html.pre(
+            {"style": {"font-style": "bold"}, "data-value": str(value)}, str(value)
+        ),
     )

tests/test_app/pyscript/components/counter.py

@@ -3,4 +3,4 @@
 
 @component
 def root():
-    return html.div("hello world")
+    return html.div({"id": "hello-world"}, "hello world")

tests/test_app/pyscript/components/hello_world.py

@@ -0,0 +1,33 @@
+from reactpy import component, html, use_state
+from reactpy_django.components import python_to_pyscript
+
+
+@component
+def parent():
+    return html.div(
+        {"id": "parent"},
+        python_to_pyscript("./test_app/pyscript/components/child.py"),
+    )
+
+
+@component
+def parent_toggle():
+    state, set_state = use_state(False)
+
+    if not state:
+        return html.div(
+            {"id": "parent-toggle"},
+            html.button(
+                {"onClick": lambda x: set_state(not state)},
+                "Click to show/hide",
+            ),
+        )
+
+    return html.div(
+        {"id": "parent-toggle"},
+        html.button(
+            {"onClick": lambda x: set_state(not state)},
+            "Click to show/hide",
+        ),
+        python_to_pyscript("./test_app/pyscript/components/child.py"),
+    )

tests/test_app/pyscript/components/server_side.py

@@ -18,9 +18,9 @@ <h1>ReactPy PyScript Test Page</h1>
     <hr>
     {% pyscript_component "./test_app/pyscript/components/counter.py" %}
     <hr>
-    {% component "test_app.pyscript.components.child.embed" %}
+    {% component "test_app.pyscript.components.server_side.parent" %}
     <hr>
-    {% component "test_app.pyscript.components.child.toggeable_embed" %}
+    {% component "test_app.pyscript.components.server_side.parent_toggle" %}
     <hr>
 </body>
 

tests/test_app/templates/pyscript.html

@@ -678,3 +678,42 @@ def test_channel_layer_components(self):
 
         finally:
             new_page.close()
+
+    def test_pyscript_components(self):
+        new_page = self.browser.new_page()
+        try:
+            new_page.goto(f"{self.live_server_url}/pyscript/")
+            new_page.wait_for_selector("#hello-world")
+
+            new_page.wait_for_selector("#counter")
+            new_page.wait_for_selector("#counter pre[data-value='0']")
+            new_page.wait_for_selector("#counter .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#counter pre[data-value='1']")
+            new_page.wait_for_selector("#counter .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#counter pre[data-value='2']")
+            new_page.wait_for_selector("#counter .minus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#counter pre[data-value='1']")
+
+            new_page.wait_for_selector("#parent")
+            new_page.wait_for_selector("#child")
+            new_page.wait_for_selector("#child pre[data-value='0']")
+            new_page.wait_for_selector("#child .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#child pre[data-value='1']")
+            new_page.wait_for_selector("#child .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#child pre[data-value='2']")
+            new_page.wait_for_selector("#child .minus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#child pre[data-value='1']")
+
+            new_page.wait_for_selector("#parent-toggle")
+            new_page.wait_for_selector("#parent-toggle button").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#parent-toggle")
+            new_page.wait_for_selector("#parent-toggle pre[data-value='0']")
+            new_page.wait_for_selector("#parent-toggle .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#parent-toggle pre[data-value='1']")
+            new_page.wait_for_selector("#parent-toggle .plus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#parent-toggle pre[data-value='2']")
+            new_page.wait_for_selector("#parent-toggle .minus").click(delay=CLICK_DELAY)
+            new_page.wait_for_selector("#parent-toggle pre[data-value='1']")
+
+        finally:
+            new_page.close()