pyjs-examples 0.0.1__py3-none-any.whl

pyjs_examples/kanban/tests/test_browser_kanban.py

@@ -0,0 +1,150 @@
+import pytest
+from pyjs import js
+from pyjs.testing.web import assert_render, mount
+from pyjs.web.dom import Element
+from pyjs.web.dragdrop import DataTransfer, DragEvent
+from pyjs.web.events import Event
+from pyjs_examples.kanban.kanban import KanbanBoard, KanbanCard, KanbanColumn
+
+pytestmark = pytest.mark.pyjs_web
+
+
+@js
+def mounted_board() -> KanbanBoard:
+    board = KanbanBoard()
+    mount(board)
+    return board
+
+
+@js
+def card_order(column: KanbanColumn) -> str:
+    card_ids: list[str] = []
+    for card in column.cards.children:
+        card_id = card.getAttribute("data-card-id")
+        if card_id is not None:
+            card_ids.append(card_id)
+    return ",".join(card_ids)
+
+
+@js
+def drag_to(source: KanbanCard, target: Element, client_y: int = 0):
+    transfer = DataTransfer()
+    source.dispatchEvent(
+        DragEvent(
+            "dragstart",
+            bubbles=True,
+            cancelable=True,
+            dataTransfer=transfer,
+        )
+    )
+    target.dispatchEvent(
+        DragEvent(
+            "dragover",
+            bubbles=True,
+            cancelable=True,
+            clientY=client_y,
+            dataTransfer=transfer,
+        )
+    )
+    target.dispatchEvent(
+        DragEvent(
+            "drop",
+            bubbles=True,
+            cancelable=True,
+            clientY=client_y,
+            dataTransfer=transfer,
+        )
+    )
+    source.dispatchEvent(DragEvent("dragend", bubbles=True, dataTransfer=transfer))
+
+
+@js
+def drop_before(source: KanbanCard, target: KanbanCard):
+    bounds = target.getBoundingClientRect()
+    drag_to(source, target, round(bounds.top + 1))
+
+
+@js
+def drop_after(source: KanbanCard, target: KanbanCard):
+    bounds = target.getBoundingClientRect()
+    drag_to(source, target, round(bounds.bottom - 1))
+
+
+@js
+def test_drag_moves_a_card_between_columns_and_updates_counts():
+    board = mounted_board()
+
+    drag_to(board.onboarding_card, board.in_progress.cards)
+
+    assert card_order(board.todo) == "launch-checklist,customer-interview"
+    assert card_order(board.in_progress) == "drag-drop,empty-states,onboarding-audit"
+    assert board.todo.count.textContent == "2"
+    assert board.in_progress.count.textContent == "3"
+    assert board.onboarding_card.getAttribute("data-dragging") is None
+    assert not board.in_progress.cards.hasAttribute("data-drag-over")
+    assert board.status.textContent == "Audit onboarding flow moved to In progress"
+
+
+@js
+def test_drop_position_reorders_before_and_after_cards():
+    board = mounted_board()
+
+    drop_before(board.interview_card, board.onboarding_card)
+    assert card_order(board.todo) == (
+        "customer-interview,onboarding-audit,launch-checklist"
+    )
+
+    drop_after(board.interview_card, board.checklist_card)
+    assert card_order(board.todo) == (
+        "onboarding-audit,launch-checklist,customer-interview"
+    )
+
+
+@js
+def test_invalid_and_self_drops_leave_the_board_unchanged():
+    board = mounted_board()
+    initial_todo = card_order(board.todo)
+    initial_done = card_order(board.done)
+
+    drag_to(board.onboarding_card, board.onboarding_card)
+
+    invalid = DataTransfer()
+    invalid.setData("application/x-pyjs-kanban-card", "missing-card")
+    board.done.cards.dispatchEvent(
+        DragEvent("drop", bubbles=True, cancelable=True, dataTransfer=invalid)
+    )
+    board.done.cards.dispatchEvent(DragEvent("drop", bubbles=True, cancelable=True))
+
+    assert card_order(board.todo) == initial_todo
+    assert card_order(board.done) == initial_done
+    assert board.todo.count.textContent == "3"
+    assert board.done.count.textContent == "2"
+
+
+@js
+def test_arrow_controls_move_and_reorder_cards_without_dragging():
+    board = mounted_board()
+
+    board.drag_card.move_down_button.dispatchEvent(Event("click"))
+    assert card_order(board.in_progress) == "empty-states,drag-drop"
+    assert board.drag_card.move_down_button.hasAttribute("disabled")
+    assert not board.drag_card.move_up_button.hasAttribute("disabled")
+
+    board.drag_card.move_left_button.dispatchEvent(Event("click"))
+    assert card_order(board.todo) == (
+        "onboarding-audit,launch-checklist,customer-interview,drag-drop"
+    )
+    assert card_order(board.in_progress) == "empty-states"
+    assert board.todo.count.textContent == "4"
+    assert board.in_progress.count.textContent == "1"
+    assert board.drag_card.move_left_button.hasAttribute("disabled")
+
+
+@js
+def test_kanban_visual_showcase():
+    board = mounted_board()
+    drag_to(board.onboarding_card, board.in_progress.cards)
+
+    assert card_order(board.in_progress) == "drag-drop,empty-states,onboarding-audit"
+    mount(board.columns)
+    assert_render(board.columns, "kanban-board", pixel_threshold=10)

pyjs_examples/kanban/tests/test_kanban.py

@@ -0,0 +1,38 @@
+import pytest
+from pyjs.web.ssr import render_html
+from pyjs_examples.kanban.kanban import KanbanBoard, KanbanCard, main
+
+
+@pytest.mark.pyjs_python
+def test_board_renders_dom_owned_columns_and_cards():
+    board = main()
+
+    assert isinstance(board, KanbanBoard)
+    assert [len(column.cards.children) for column in (board.todo, board.in_progress, board.done)] == [
+        3,
+        2,
+        2,
+    ]
+    count_html = render_html(board.todo.count)
+    assert 'data-column-count=""' in count_html
+    assert 'aria-label="Todo card count"' in count_html
+    assert count_html.endswith(">3</span>")
+
+    first = board.todo.cards.children[0]
+    assert isinstance(first, KanbanCard)
+    assert first.getAttribute("data-card-id") == "onboarding-audit"
+    assert first.getAttribute("draggable") == "true"
+    assert first.move_left_button.hasAttribute("disabled")
+    assert first.move_up_button.hasAttribute("disabled")
+    assert not first.move_right_button.hasAttribute("disabled")
+
+
+@pytest.mark.pyjs_python
+def test_main_board_contains_accessible_drag_alternatives():
+    board = KanbanBoard()
+
+    assert board.drag_card.move_left_button.getAttribute("aria-label") == (
+        "Move Build drag-and-drop left"
+    )
+    assert board.drag_card.move_up_button.getAttribute("title") == "Move up"
+    assert board.status.getAttribute("aria-live") == "polite"

pyjs_examples/kanban/visual_test.py

@@ -0,0 +1,108 @@
+#!/usr/bin/env python3
+
+import asyncio
+import json
+import os
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
+
+from pyjs.tooling import stop_process
+from pyjs.tooling.browser import Browser, BrowserPage, free_port, wait_for_http
+
+EXAMPLE_ROOT = Path(__file__).resolve().parent
+OUTPUT = Path.cwd() / "screenshots"
+
+
+async def board_state(page: BrowserPage) -> dict:
+    return {
+        "todo": await page.attributes('[data-testid="todo-cards"] > [data-card-id]', "data-card-id"),
+        "inProgress": await page.attributes(
+            '[data-testid="in-progress-cards"] > [data-card-id]', "data-card-id"
+        ),
+        "done": await page.attributes('[data-testid="done-cards"] > [data-card-id]', "data-card-id"),
+        "counts": await page.texts("[data-column-count]"),
+        "status": await page.text("[data-board-status]"),
+        "activeDropZones": await page.attributes("[data-drag-over]", "data-testid"),
+    }
+
+
+async def exercise(page: BrowserPage) -> dict:
+    await page.wait_for_selector("kanban-board", "the hydrated Kanban board")
+    await page.drag(
+        '[data-card-id="onboarding-audit"]',
+        '[data-card-id="drag-drop"]',
+        target_y_ratio=0.2,
+    )
+    await page.wait_for(
+        "document.querySelector('[data-testid=\"in-progress-cards\"]')"
+        "?.firstElementChild?.getAttribute('data-card-id') === 'onboarding-audit'",
+        "the card to move through Chrome's native drag lifecycle",
+    )
+    await page.drag(
+        '[data-card-id="launch-checklist"]',
+        '[data-testid="done-cards"]',
+        target_y_ratio=0.95,
+    )
+    await page.wait_for(
+        "document.querySelector('[data-testid=\"done-cards\"]')"
+        "?.lastElementChild?.getAttribute('data-card-id') === 'launch-checklist'",
+        "a card dropped in the column's empty space",
+    )
+
+    result = await board_state(page)
+    expected = {
+        "todo": ["customer-interview"],
+        "inProgress": ["onboarding-audit", "drag-drop", "empty-states"],
+        "done": ["scope-release", "browser-runner", "launch-checklist"],
+        "counts": ["1", "3", "3"],
+        "status": "Write launch checklist moved to Done",
+        "activeDropZones": [],
+    }
+    if result != expected:
+        raise RuntimeError(f"Unexpected board state: {json.dumps(result)}")
+    if page.exceptions:
+        raise RuntimeError(f"Browser errors: {'; '.join(page.exceptions)}")
+
+    await page.settle()
+    await page.screenshot(OUTPUT / "kanban.png", selector="[data-kanban-board]")
+    return result
+
+
+async def main() -> None:
+    port = free_port()
+    url = f"http://127.0.0.1:{port}/"
+    environment = os.environ.copy()
+    environment["PYJS_PORT"] = str(port)
+    with tempfile.TemporaryFile(mode="w+") as server_log:
+        server = subprocess.Popen(
+            [sys.executable, "kanban.py"],
+            cwd=EXAMPLE_ROOT,
+            env=environment,
+            stdout=server_log,
+            stderr=subprocess.STDOUT,
+        )
+        try:
+            await wait_for_http(url, timeout=20)
+            async with Browser() as browser:
+                page = await browser.new_page(url)
+                await page.set_viewport(1440, 1000)
+                result = await exercise(page)
+                OUTPUT.mkdir(parents=True, exist_ok=True)
+                (OUTPUT / "kanban.json").write_text(
+                    json.dumps(result, indent=2) + "\n",
+                    encoding="utf-8",
+                )
+                print(json.dumps(result, indent=2))
+        except BaseException:
+            stop_process(server)
+            server_log.seek(0)
+            sys.stderr.write(server_log.read())
+            raise
+        finally:
+            stop_process(server)
+
+
+if __name__ == "__main__":
+    asyncio.run(main())

pyjs_examples/nativescript_counter/README.md

@@ -0,0 +1,31 @@
+# NativeScript Counter
+
+A minimal native Android application written in Python and styled with Tailwind CSS. PyJS
+transpiles the application and manages its private Node and NativeScript toolchain outside the
+source tree.
+
+With an Android SDK and at least one virtual device installed:
+
+```bash
+python -m pyjs_examples.nativescript_counter
+```
+
+The first run downloads the managed Node and NativeScript tools and creates a generated native
+build workspace under `~/.cache/pyjs/`.
+
+Run the host-side unit test normally:
+
+```bash
+python -m pytest -q examples/nativescript_counter/tests
+```
+
+Run the Android UI test on an existing emulator, or name an AVD for PyJS to start:
+
+```bash
+python -m pytest -q examples/nativescript_counter/tests \
+  --pyjs-target=android --pyjs-android-avd=Routine_Test
+```
+
+The UI test launches the generated app, finds controls by NativeScript `testID`, taps the real
+button, and waits for the native label to update. It retains a screenshot, Android UI hierarchy,
+app-scoped logcat, and JSON artifact manifest under `.pytest_cache/pyjs/artifacts/android/`.

pyjs_examples/nativescript_counter/__init__.py

@@ -0,0 +1,5 @@
+"""A minimal Android counter written in Python and rendered by NativeScript."""
+
+from .counter import Counter, create_page, main
+
+__all__ = ["Counter", "create_page", "main"]

pyjs_examples/nativescript_counter/__main__.py

@@ -0,0 +1,17 @@
+from pyjs.tooling.nativescript import NativeScriptProject
+
+from .counter import main
+
+
+def run() -> None:
+    project = NativeScriptProject(
+        main,
+        name="PyJS Counter",
+        app_id="org.pyjs.counter",
+    )
+    device = project.run_android()
+    print(f"PyJS Counter is running on {device.identifier}.")
+
+
+if __name__ == "__main__":
+    run()

pyjs_examples/nativescript_counter/counter.py

@@ -0,0 +1,54 @@
+from pyjs import js
+from pyjs.nativescript import Application, Button, EventData, Label, Page, StackLayout
+
+
+@js
+class Counter:
+    def __init__(self):
+        self.count = 0
+
+        self.value = Label()
+        self.value.id = "counter-value"
+        self.value.testID = "counter-value"
+        self.value.text = "0"
+        self.value.className = "mb-6 text-center text-6xl font-bold text-slate-50"
+
+        self.button = Button()
+        self.button.id = "increment-button"
+        self.button.testID = "increment-button"
+        self.button.text = "Increment"
+        self.button.className = "mx-8 h-14 rounded-lg bg-sky-400 text-xl font-semibold text-sky-950"
+        self.button.on(Button.tapEvent, self.increment)
+
+    def increment(self, event: EventData):
+        self.count += 1
+        self.value.text = str(self.count)
+
+    def page(self) -> Page:
+        content = StackLayout()
+        content.className = "bg-slate-950 p-8"
+        content.verticalAlignment = "middle"
+
+        title = Label()
+        title.text = "PyJS + NativeScript"
+        title.className = "mb-4 text-center text-2xl font-bold text-sky-300"
+
+        content.addChild(title)
+        content.addChild(self.value)
+        content.addChild(self.button)
+
+        page = Page()
+        page.actionBarHidden = True
+        page.className = "bg-slate-950"
+        page.content = content
+        return page
+
+
+@js
+def create_page() -> Page:
+    return Counter().page()
+
+
+@js
+def main():
+    Application.run(create_page)

pyjs_examples/nativescript_counter/tests/test_android_counter.py

@@ -0,0 +1,31 @@
+from pathlib import Path
+
+import pytest
+from pyjs.testing.android import AndroidTestSession
+from pyjs.tooling.android import AndroidSDK
+from pyjs.tooling.nativescript import NativeScriptProject
+from pyjs_examples.nativescript_counter.counter import main
+
+pytestmark = pytest.mark.pyjs_android
+
+
+def test_counter_runs_on_android(request, pyjs_artifacts_dir: Path):
+    android = AndroidSDK()
+    project = NativeScriptProject(
+        main,
+        name="PyJS Counter",
+        app_id="org.pyjs.counter",
+        android=android,
+    )
+    device = project.run_android(request.config.getoption("--pyjs-android-avd"))
+    session = AndroidTestSession(android, device, project.app_id)
+    artifacts = pyjs_artifacts_dir / "android"
+
+    with session.artifacts_on_failure(artifacts, "nativescript-counter"):
+        session.launch()
+        session.wait_for_element(test_id="counter-value", text="0")
+        session.tap_element(test_id="increment-button")
+        session.wait_for_element(test_id="counter-value", text="1")
+        assert session.log_errors() == ""
+
+    session.capture_artifacts(artifacts, "nativescript-counter")

pyjs_examples/nativescript_counter/tests/test_counter.py

@@ -0,0 +1,11 @@
+from pyjs_examples.nativescript_counter.counter import Counter
+
+
+def test_counter_updates_label():
+    counter = Counter()
+
+    counter.increment(None)
+    counter.increment(None)
+
+    assert counter.count == 2
+    assert counter.value.text == "2"

pyjs_examples/samples/__init__.py

@@ -0,0 +1 @@
+"""Small, focused PyJS samples."""

pyjs_examples/samples/state_counter/README.md

@@ -0,0 +1,19 @@
+# Reactive counter
+
+This focused PyJS sample demonstrates a state field, an effect, browser
+events, server rendering, and tests in a complete runnable project.
+
+## Run
+
+```bash
+python -m pyjs_examples.samples.state_counter
+```
+
+Open <http://127.0.0.1:8000/>.
+
+## Test
+
+```bash
+python -m pytest -q
+python -m pytest -q --pyjs-target=web
+```

pyjs_examples/samples/state_counter/__init__.py

@@ -0,0 +1 @@
+"""A focused reactive-state sample."""

pyjs_examples/samples/state_counter/__main__.py

@@ -0,0 +1,3 @@
+from pyjs.server import serve
+
+serve("pyjs_examples.samples.state_counter.state_counter")

pyjs_examples/samples/state_counter/state_counter.py

@@ -0,0 +1,60 @@
+from pyjs import effect, js, state
+from pyjs.web.domx import CustomElement, button, ref, tag
+from pyjs.web.events import Event
+
+
+@js
+class Counter(CustomElement):
+    count = state(0)
+
+    def __init__(self):
+        super().__init__()
+        self.value = ref(tag("strong", {"style": "font-size:3rem"}, "0"))
+        self.decrement_button = ref(button({"type": "button"}, "−"))
+        self.increment_button = ref(button({"type": "button"}, "+"))
+        self.decrement_button.addEventListener("click", self.decrement)
+        self.increment_button.addEventListener("click", self.increment)
+        tag(
+            self,
+            tag(
+                "main",
+                {
+                    "style": (
+                        "min-height:100vh;display:grid;place-items:center;background:#f8fafc;"
+                        "font:16px system-ui,sans-serif"
+                    )
+                },
+                tag(
+                    "section",
+                    {
+                        "style": (
+                            "display:grid;grid-template-columns:3rem 8rem 3rem;align-items:center;"
+                            "gap:1rem;text-align:center"
+                        )
+                    },
+                    self.decrement_button,
+                    self.value,
+                    self.increment_button,
+                ),
+            ),
+        )
+
+    @effect(count)
+    def render_count(self):
+        self.value.textContent = str(self.count)
+
+    def decrement(self, event: Event):
+        self.count -= 1
+
+    def increment(self, event: Event):
+        self.count += 1
+
+
+def main():
+    return Counter()
+
+
+if __name__ == "__main__":
+    from pyjs.server import serve
+
+    serve("state_counter")

pyjs_examples/samples/state_counter/tests/test_browser_state_counter.py

@@ -0,0 +1,18 @@
+import pytest
+from pyjs import js
+from pyjs.web.dom import document
+from pyjs.web.events import Event
+from pyjs_examples.samples.state_counter.state_counter import Counter
+
+pytestmark = pytest.mark.pyjs_web
+
+
+@js
+def test_counter_buttons_update_the_mounted_element():
+    document.body.replaceChildren()
+    counter = Counter()
+    document.body.append(counter)
+
+    counter.increment_button.dispatchEvent(Event("click"))
+
+    assert counter.value.textContent == "1"

pyjs_examples/samples/state_counter/tests/test_state_counter.py

@@ -0,0 +1,17 @@
+import pytest
+from pyjs import js
+from pyjs.web.events import Event
+from pyjs_examples.samples.state_counter.state_counter import Counter
+
+
+@pytest.mark.pyjs_python
+@js
+def test_counter_changes_in_both_directions():
+    counter = Counter()
+
+    counter.increment(Event("click"))
+    counter.increment(Event("click"))
+    counter.decrement(Event("click"))
+
+    assert counter.count == 1
+    assert counter.value.textContent == "1"

pyjs_examples/samples/ui_dialog/README.md

@@ -0,0 +1,19 @@
+# Dialog
+
+This focused PyJS sample places the `pyjs.web` dialog component in a
+complete runnable and tested project.
+
+## Run
+
+```bash
+python -m pyjs_examples.samples.ui_dialog
+```
+
+Open <http://127.0.0.1:8000/>.
+
+## Test
+
+```bash
+python -m pytest -q
+python -m pytest -q --pyjs-target=web
+```

pyjs_examples/samples/ui_dialog/__init__.py

@@ -0,0 +1 @@
+"""A focused accessible-dialog sample."""

pyjs_examples/samples/ui_dialog/__main__.py

@@ -0,0 +1,3 @@
+from pyjs.server import serve
+
+serve("pyjs_examples.samples.ui_dialog.ui_dialog")

pyjs_examples/samples/ui_dialog/tests/test_browser_ui_dialog.py

@@ -0,0 +1,21 @@
+import pytest
+from pyjs import js
+from pyjs.web.dom import document
+from pyjs.web.events import Event
+from pyjs_examples.samples.ui_dialog.ui_dialog import DialogSample
+
+pytestmark = pytest.mark.pyjs_web
+
+
+@js
+def test_dialog_opens_and_closes():
+    document.body.replaceChildren()
+    app = DialogSample()
+    document.body.append(app)
+
+    app.dialog.trigger.element.dispatchEvent(Event("click"))
+    assert app.dialog.is_open
+    assert app.dialog.content.dialog_element.open
+
+    app.dialog.close()
+    assert not app.dialog.is_open

pyjs_examples/samples/ui_dialog/tests/test_ui_dialog.py

@@ -0,0 +1,10 @@
+import pytest
+from pyjs_examples.samples.ui_dialog.ui_dialog import DialogSample
+
+
+@pytest.mark.pyjs_python
+def test_dialog_sample_has_an_accessible_label():
+    app = DialogSample()
+
+    assert app.dialog.content.dialog_element.getAttribute("aria-label") == "Welcome to PyJS"
+    assert app.dialog.trigger.element.getAttribute("aria-haspopup") == "dialog"