Add more integration tests for py-components and examples (#709)

* Add more integration tests for py-components and examples

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

* remove xfail mark since we merged fix for issue 707

Co-authored-by: Fabio Pliger <fabio.pliger@gmail.com>

pyscriptjs/tests/integration/test_py_box.py

@@ -0,0 +1,18 @@
+from .support import PyScriptTest
+
+
+class TestPyButton(PyScriptTest):
+    def test_box(self):
+        self.pyscript_run(
+            """
+            <py-box>
+                <py-box>
+                </py-box>
+            </py-box>
+            """
+        )
+
+        pybox_element = self.page.query_selector_all("py-box")
+
+        assert len(pybox_element) == 2
+        assert pybox_element[1].get_attribute("class") == "py-box-child"

pyscriptjs/tests/integration/test_py_inputbox.py

@@ -0,0 +1,42 @@
+import time
+
+import pytest
+
+from .support import PyScriptTest
+
+
+class TestPyInputBox(PyScriptTest):
+    @pytest.mark.xfail
+    def test_input_box_typing(self):
+        """
+        This test fails in a similar fashion as the pybutton
+        test so it's xfailed for now.
+
+        [JS exception   ] TypeError: Cannot use 'in' operator to search for 'runPythonAsync' in undefined
+            at http://127.0.0.1:8080/build/pyscript.js:305:38
+            at Object.subscribe (http://127.0.0.1:8080/build/pyscript.js:46:13)
+            at PyButton.runAfterRuntimeInitialized (http://127.0.0.1:8080/build/pyscript.js:304:27)
+            at PyButton.connectedCallback (http://127.0.0.1:8080/build/pyscript.js:26856:18)
+            at http://127.0.0.1:8080/build/pyscript.js:27075:20
+            at http://127.0.0.1:8080/build/pyscript.js:27093:3
+        """  # noqa: E501
+        self.pyscript_run(
+            """
+            <py-inputbox label="my input">
+                import js
+                def on_keypress(evt):
+                    if evt.key == "Enter":
+                        js.console.info(evt.target.value)
+            </py-inputbox>
+            """
+        )
+        assert self.console.info.lines == []
+        input = self.page.locator("input")
+        # We need to wait some time before we can type any text
+        # otherwise it won't be registered. This was the smallest
+        # amount that seems to work.
+        time.sleep(0.1)
+        input.type("Hello")
+        input.press("Enter")
+
+        assert self.console.info.text == "Hello"

pyscriptjs/tests/integration/test_py_repl.py

@@ -0,0 +1,77 @@
+import pytest
+
+from .support import PyScriptTest
+
+
+class TestPyRepl(PyScriptTest):
+    def test_repl_loads(self):
+        self.pyscript_run(
+            """
+            <py-repl id="my-repl" auto-generate="true"> </py-repl>
+            """
+        )
+
+        py_repl = self.page.query_selector("py-repl")
+        assert py_repl
+        assert "Python" in py_repl.inner_text()
+
+    @pytest.mark.xfail
+    def test_repl_runs_on_button_press(self):
+        """
+        Current this test fails due to an exception when we iterate over
+        'importmaps'
+
+        [  2.28 JS exception   ] TypeError: importmaps is not iterable
+            at PyRepl._register_esm (http://127.0.0.1:8080/build/pyscript.js:227:37)
+            at PyRepl.evaluate (http://127.0.0.1:8080/build/pyscript.js:252:22)
+            at http://127.0.0.1:8080/build/pyscript.js:23678:21
+            at runFor (http://127.0.0.1:8080/build/pyscript.js:11780:25)
+            at runHandlers (http://127.0.0.1:8080/build/pyscript.js:11789:17)
+            at Object.keydown (http://127.0.0.1:8080/build/pyscript.js:11691:20)
+            at InputState.runCustomHandlers (http://127.0.0.1:8080/build/pyscript.js:8194:37)
+            at HTMLDivElement.<anonymous> (http://127.0.0.1:8080/build/pyscript.js:8156:30)
+        """
+        self.pyscript_run(
+            """
+            <py-repl id="my-repl" auto-generate="true"> </py-repl>
+            """
+        )
+
+        self.page.locator("py-repl").type("print(2+2)")
+
+        # We only have one button in the page
+        self.page.locator("button").click()
+
+        # The result gets the id of the repl + n
+        repl_result = self.page.locator("#my-repl-1")
+
+        assert repl_result.inner_text() == "4"
+
+    @pytest.mark.xfail
+    def test_repl_runs_with_shift_enter(self):
+        """
+        Current this test fails due to an exception when we iterate over
+        'importmaps'
+
+        [  2.28 JS exception   ] TypeError: importmaps is not iterable
+            at PyRepl._register_esm (http://127.0.0.1:8080/build/pyscript.js:227:37)
+            at PyRepl.evaluate (http://127.0.0.1:8080/build/pyscript.js:252:22)
+            at http://127.0.0.1:8080/build/pyscript.js:23678:21
+            at runFor (http://127.0.0.1:8080/build/pyscript.js:11780:25)
+            at runHandlers (http://127.0.0.1:8080/build/pyscript.js:11789:17)
+            at Object.keydown (http://127.0.0.1:8080/build/pyscript.js:11691:20)
+            at InputState.runCustomHandlers (http://127.0.0.1:8080/build/pyscript.js:8194:37)
+            at HTMLDivElement.<anonymous> (http://127.0.0.1:8080/build/pyscript.js:8156:30)
+        """
+        self.pyscript_run(
+            """
+            <py-repl id="my-repl" auto-generate="true"> </py-repl>
+            """
+        )
+        self.page.locator("py-repl").type("2+2")
+
+        # Confirm that we get a result by using the keys shortcut
+        self.page.keyboard.press("Shift+Enter")
+        repl_result = self.page.locator("#my-repl-1")
+
+        assert repl_result.text_content() == "4"

pyscriptjs/tests/integration/test_py_title.py

@@ -0,0 +1,16 @@
+from .support import PyScriptTest
+
+
+class TestPyTitle(PyScriptTest):
+    def test_title_shows_on_page(self):
+        self.pyscript_run(
+            """
+            <py-title>Hello, World!</py-title>
+            """
+        )
+
+        py_title = self.page.query_selector("py-title")
+        # check that we do have py-title in the page, if not
+        # py_title will be none
+        assert py_title
+        assert py_title.text_content() == "Hello, World!"

pyscriptjs/tests/integration/test_zz_examples.py

@@ -74,11 +74,22 @@ class TestExamples(PyScriptTest):
             assert False, "Espresso time not found :("
 
     def test_altair(self):
-        # XXX improve this test
         self.goto("examples/altair.html")
         self.wait_for_pyscript()
         assert self.page.title() == "Altair"
         wait_for_render(self.page, "*", '<canvas.*?class=\\"marks\\".*?>')
+        save_as_png_link = self.page.locator("text=Save as PNG")
+        see_source_link = self.page.locator("text=View Source")
+
+        # These shouldn't be visible since we didn't click the menu
+        assert not save_as_png_link.is_visible()
+        assert not see_source_link.is_visible()
+
+        self.page.locator("summary").click()
+
+        # Let's confirm that the links are visible now after clicking the menu
+        assert save_as_png_link.is_visible()
+        assert see_source_link.is_visible()
 
     def test_bokeh(self):
         # XXX improve this test
@@ -159,25 +170,61 @@ class TestExamples(PyScriptTest):
         wait_for_render(self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>")
 
     def test_repl(self):
-        # XXX improve this test
         self.goto("examples/repl.html")
         self.wait_for_pyscript()
         assert self.page.title() == "REPL"
         wait_for_render(self.page, "*", "<py-repl.*?>")
 
+        self.page.locator("py-repl").type("print('Hello, World!')")
+        self.page.locator("button").click()
+
+        assert self.page.locator("#my-repl-1").text_content() == "Hello, World!"
+
+        # Confirm that using the second repl still works properly
+        self.page.locator("#my-repl-2").type("2*2")
+        self.page.keyboard.press("Shift+Enter")
+
+        assert self.page.locator("#my-repl-2-2").text_content() == "4"
+
     def test_repl2(self):
-        # XXX improve this test
         self.goto("examples/repl2.html")
         self.wait_for_pyscript()
         assert self.page.title() == "Custom REPL Example"
         wait_for_render(self.page, "*", "<py-repl.*?>")
+        # confirm we can import utils and run one command
+        self.page.locator("py-repl").type("import utils\nutils.now()")
+        self.page.locator("button").click()
+        # utils.now returns current date time
+        content = self.page.content()
+        pattern = "\\d+/\\d+/\\d+, \\d+:\\d+:\\d+"  # e.g. 08/09/2022 15:57:32
+        assert re.search(pattern, content)
 
     def test_todo(self):
-        # XXX improve this test
         self.goto("examples/todo.html")
         self.wait_for_pyscript()
         assert self.page.title() == "Todo App"
         wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
+        todo_input = self.page.locator("input")
+        submit_task_button = self.page.locator("button")
+
+        todo_input.type("Fold laundry")
+        submit_task_button.click()
+
+        first_task = self.page.locator("#task-0")
+        assert "Fold laundry" in first_task.inner_text()
+
+        task_checkbox = first_task.locator("input")
+        # Confirm that the new task isn't checked
+        assert not task_checkbox.is_checked()
+
+        # Let's mark it as done now
+        task_checkbox.check()
+
+        # Basic check that the task has the line-through class
+        assert (
+            '<p class="m-0 inline line-through">Fold laundry</p>'
+            in first_task.inner_html()
+        )
 
     @pytest.mark.xfail(reason="JsError, issue #673")
     def test_todo_pylist(self):
@@ -188,12 +235,21 @@ class TestExamples(PyScriptTest):
         wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
 
     def test_toga_freedom(self):
-        # XXX improve this test
         self.goto("examples/toga/freedom.html")
         self.wait_for_pyscript()
         assert self.page.title() in ["Loading...", "Freedom Units"]
         wait_for_render(self.page, "*", "<(main|div).*?id=['\"]toga_\\d+['\"].*?>")
 
+        page_content = self.page.content()
+
+        assert "Fahrenheit" in page_content
+        assert "Celsius" in page_content
+
+        self.page.locator("#toga_f_input").fill("105")
+        self.page.locator("button#toga_calculate").click()
+        result = self.page.locator("#toga_c_input")
+        assert "40.555" in result.input_value()
+
     @pytest.mark.xfail(reason="it never finishes loading, issue #678")
     def test_webgl_raycaster_index(self):
         # XXX improve this test