pyjs-examples 0.0.1__py3-none-any.whl

pyjs_examples/chatroom/tests/test_browser_chatroom.py

@@ -0,0 +1,59 @@
+import pytest
+from pyjs import js
+from pyjs.testing.web import mount, require_element
+from pyjs.web.dom import sessionStorage
+from pyjs.web.events import Event
+from pyjs_examples.chatroom.chatroom import ChatMessage, ChatRoomApp, ChatSnapshot
+
+pytestmark = pytest.mark.pyjs_web
+
+
+@js
+def mounted_chatroom() -> ChatRoomApp:
+    app = ChatRoomApp()
+    mount(app)
+    return app
+
+
+@js
+def test_chatroom_prompts_for_a_per_tab_display_name():
+    sessionStorage.removeItem("pyjs-chatroom-display-name")
+    app = mounted_chatroom()
+
+    assert not app.sign_in.classList.contains("hidden")
+    assert app.workspace.classList.contains("hidden")
+
+    app.name_input.value = "Alice"
+    app.name_form.dispatchEvent(Event("submit"))
+
+    assert sessionStorage.getItem("pyjs-chatroom-display-name") == "Alice"
+    assert app.getAttribute("name") == "Alice"
+    assert app.sign_in.classList.contains("hidden")
+    assert not app.workspace.classList.contains("hidden")
+
+
+@js
+def test_chatroom_renders_rooms_messages_and_presence_from_a_snapshot():
+    sessionStorage.setItem("pyjs-chatroom-display-name", "Alice")
+    app = mounted_chatroom()
+    message = ChatMessage()
+    message.id = 1
+    message.room = "design"
+    message.sender = "Bob"
+    message.text = "The new navigation is ready."
+    message.time = "09:42"
+    snapshot = ChatSnapshot()
+    snapshot.type = "snapshot"
+    snapshot.room = "design"
+    snapshot.rooms = ["general", "design"]
+    snapshot.messages = [message]
+    snapshot.users = ["Alice", "Bob"]
+
+    app.receive(snapshot)
+
+    assert app.current_room.textContent == "# design"
+    assert len(app.room_list.querySelectorAll("[data-room]")) == 2
+    assert len(app.message_list.querySelectorAll("[data-message-id]")) == 1
+    assert require_element(app.message_list, "p").textContent == "The new navigation is ready."
+    assert len(app.member_list.querySelectorAll("[data-user]")) == 2
+    assert app.member_count.textContent == "2 people"

pyjs_examples/chatroom/tests/test_chat_server.py

@@ -0,0 +1,53 @@
+import asyncio
+import json
+
+import pytest
+from pyjs_examples.chatroom.chat_server import ChatServer
+
+pytestmark = pytest.mark.pyjs_python
+
+
+class FakeConnection:
+    def __init__(self):
+        self.messages = []
+
+    async def send(self, message):
+        self.messages.append(json.loads(message))
+
+
+def test_room_creation_presence_and_messages_are_broadcast():
+    async def exercise_chat():
+        server = ChatServer()
+        alice = FakeConnection()
+        bob = FakeConnection()
+
+        await server.dispatch(alice, {"type": "join", "name": "Alice", "room": "general"})
+        await server.dispatch(bob, {"type": "join", "name": "Bob", "room": "general"})
+        await server.dispatch(alice, {"type": "create_room", "room": "Design Team"})
+        await server.dispatch(bob, {"type": "switch_room", "room": "design-team"})
+        await server.dispatch(alice, {"type": "message", "text": "Welcome to design!"})
+        await server.dispatch(bob, {"type": "message", "text": "Glad to be here."})
+
+        return server, alice.messages[-1], bob.messages[-1]
+
+    server, alice_snapshot, bob_snapshot = asyncio.run(exercise_chat())
+
+    assert list(server.rooms) == ["general", "design-team"]
+    assert alice_snapshot["room"] == "design-team"
+    assert bob_snapshot["room"] == "design-team"
+    assert alice_snapshot["users"] == ["Alice", "Bob"]
+    assert [message["text"] for message in bob_snapshot["messages"]] == [
+        "Welcome to design!",
+        "Glad to be here.",
+    ]
+
+
+def test_chat_input_is_validated():
+    async def send_invalid_message():
+        server = ChatServer()
+        connection = FakeConnection()
+        await server.dispatch(connection, {"type": "join", "name": "Alice", "room": "general"})
+        await server.dispatch(connection, {"type": "message", "text": 42})
+
+    with pytest.raises(ValueError, match="message text must be a string"):
+        asyncio.run(send_invalid_message())

pyjs_examples/chatroom/visual_test.py

@@ -0,0 +1,156 @@
+#!/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
+
+PROJECT_ROOT = Path.cwd()
+OUTPUT = PROJECT_ROOT / "screenshots"
+
+
+def server_command() -> list[str | Path]:
+    local_application = PROJECT_ROOT / "chatroom.py"
+    if local_application.is_file():
+        return [sys.executable, local_application]
+    return [sys.executable, "-m", "pyjs_examples.chatroom"]
+
+
+async def fill_and_submit(page: BrowserPage, test_id: str, value: str) -> None:
+    selector = f'[data-testid="{test_id}"]'
+    await page.fill(selector, value)
+    await page.submit(selector)
+
+
+async def state(page: BrowserPage) -> dict:
+    return {
+        "name": await page.attribute("chat-room-app", "name"),
+        "room": await page.attribute("chat-room-app", "room"),
+        "connection": await page.attribute("chat-room-app", "connection"),
+        "rooms": await page.attributes("[data-room]", "data-room"),
+        "users": await page.attributes("[data-user]", "data-user"),
+        "messages": await page.texts("[data-message-id] p"),
+        "memberCount": await page.text('[data-testid="member-count"]'),
+    }
+
+
+def verify_state(value: dict, expected_name: str) -> None:
+    expected = {
+        "name": expected_name,
+        "room": "product-design",
+        "connection": "connected",
+        "rooms": ["general", "product-design"],
+        "users": ["Alice", "Bob"],
+        "messages": [
+            "Welcome to the new room, Bob!",
+            "Thanks Alice — real-time chat is working.",
+        ],
+        "memberCount": "2 people",
+    }
+    if value != expected:
+        raise RuntimeError(f"Unexpected {expected_name} state: {json.dumps(value)}")
+
+
+async def exercise(browser: Browser, alice: BrowserPage, bob: BrowserPage) -> dict:
+    await alice.wait_for_selector('[data-testid="name-input"]', "Alice's chatroom")
+    await bob.wait_for_selector('[data-testid="name-input"]', "Bob's chatroom")
+
+    await fill_and_submit(alice, "name-input", "Alice")
+    await alice.wait_for_attribute(
+        "chat-room-app",
+        "connection",
+        "connected",
+        "Alice's connection",
+    )
+    await fill_and_submit(bob, "name-input", "Bob")
+    await bob.wait_for_attribute(
+        "chat-room-app",
+        "connection",
+        "connected",
+        "Bob's connection",
+    )
+
+    await fill_and_submit(alice, "room-input", "product-design")
+    await bob.wait_for_selector(
+        '[data-room="product-design"]',
+        "the new room in Bob's tab",
+    )
+    await bob.click('[data-room="product-design"]')
+    await alice.wait_for_count("[data-user]", 2, "both room members")
+
+    await fill_and_submit(alice, "message-input", "Welcome to the new room, Bob!")
+    await bob.wait_for_text(
+        '[data-testid="message-list"]',
+        "Welcome",
+        "Alice's message in Bob's tab",
+    )
+    await fill_and_submit(bob, "message-input", "Thanks Alice — real-time chat is working.")
+    await alice.wait_for_text(
+        '[data-testid="message-list"]',
+        "Thanks Alice",
+        "Bob's message in Alice's tab",
+    )
+
+    alice_state = await state(alice)
+    bob_state = await state(bob)
+    verify_state(alice_state, "Alice")
+    verify_state(bob_state, "Bob")
+    await alice.screenshot(OUTPUT / "chatroom-alice.png")
+    await bob.screenshot(OUTPUT / "chatroom-bob.png")
+
+    await browser.close_page(bob)
+    await alice.wait_for_count("[data-user]", 1, "Bob's departure in Alice's tab")
+    return {
+        "alice": alice_state,
+        "bob": bob_state,
+        "remainingUsers": await alice.attributes("[data-user]", "data-user"),
+        "errors": alice.exceptions + bob.exceptions,
+    }
+
+
+async def main() -> None:
+    app_port = free_port()
+    app_url = f"http://127.0.0.1:{app_port}/"
+    environment = os.environ.copy()
+    environment["PYJS_PORT"] = str(app_port)
+    with tempfile.TemporaryFile(mode="w+") as server_log:
+        server = subprocess.Popen(
+            server_command(),
+            cwd=PROJECT_ROOT,
+            env=environment,
+            stdout=server_log,
+            stderr=subprocess.STDOUT,
+        )
+        try:
+            await wait_for_http(app_url, timeout=20)
+            async with Browser() as browser:
+                alice = await browser.new_page(app_url)
+                bob = await browser.new_page(app_url)
+                await alice.set_viewport(1440, 900)
+                await bob.set_viewport(1440, 900)
+                result = await exercise(browser, alice, bob)
+                if result["errors"]:
+                    raise RuntimeError(f"Browser errors: {'; '.join(result['errors'])}")
+                OUTPUT.mkdir(parents=True, exist_ok=True)
+                (OUTPUT / "chatroom.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/counter.py

@@ -0,0 +1,73 @@
+"""A compact reactive counter demonstrating state, effects, and DOM event handling."""
+
+from pyjs import effect, js, state
+from pyjs.web.domx import CustomElement, ref, tag, tw
+from pyjs.web.events import Event
+
+
+@js
+class CounterApp(CustomElement):
+    count = state(0)
+
+    def __init__(self):
+        super().__init__()
+        self.counter_text = ref(tag("div", tw("text-4xl font-mono text-blue-600")))
+        self.sub_button = tag(
+            "button", tw("px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg"), "-"
+        )
+        self.sub_button.addEventListener("click", self.decrement)
+        self.add_button = tag(
+            "button", tw("px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg"), "+"
+        )
+        self.add_button.addEventListener("click", self.increment)
+        tag(
+            self,
+            tag(
+                "body",
+                tw("bg-gray-100 flex items-center justify-center h-screen"),
+                tag(
+                    "div",
+                    tw("bg-white shadow-md rounded-xl p-6 w-80 text-center space-y-6"),
+                    tag("h1", tw("text-2xl font-bold"), "Counter"),
+                    self.counter_text,
+                    tag(
+                        "div",
+                        tw("flex justify-center space-x-4"),
+                        self.sub_button,
+                        self.add_button,
+                    ),
+                ),
+            ),
+        )
+
+    @effect(count)
+    def render_count(self):
+        self.counter_text.textContent = str(self.count)
+
+    def decrement(self, e: Event):
+        self.count -= 1
+
+    def increment(self, e: Event):
+        self.count += 1
+
+
+def main():
+    return CounterApp()
+
+
+@js
+def test_counter_updates_its_state():
+    app = CounterApp()
+
+    app.increment(Event("click"))
+    app.increment(Event("click"))
+    app.decrement(Event("click"))
+
+    assert app.count == 1
+    assert app.counter_text.textContent == "1"
+
+
+if __name__ == "__main__":
+    from pyjs.server import serve
+
+    serve(__file__)

pyjs_examples/kanban/README.md

@@ -0,0 +1,31 @@
+# Kanban Board Example
+
+This example implements a polished board with native HTML drag-and-drop. Cards can move between
+columns, reorder at the pointer midpoint, or use visible arrow controls for the same behavior. The
+DOM is the source of truth for card order and column counts.
+
+## Run the board
+
+From the repository root:
+
+```bash
+.venv/bin/python -m pyjs_examples.kanban
+```
+
+Open the clickable URL printed by the server.
+
+## Run the tests
+
+The focused browser suite dispatches the complete drag event lifecycle and covers midpoint
+placement, invalid drops, count updates, accessibility controls, and the stored visual baseline:
+
+```bash
+.venv/bin/python -m pytest -q examples/kanban/tests --pyjs-target=web --pyjs-browser=managed
+```
+
+The end-to-end harness drives a real mouse through Chrome and writes its screenshot and structured
+state to the current directory's `screenshots/` folder:
+
+```bash
+.venv/bin/python examples/kanban/visual_test.py
+```

pyjs_examples/kanban/__init__.py

@@ -0,0 +1 @@
+"""A native drag-and-drop Kanban board built with PyJS custom elements."""

pyjs_examples/kanban/__main__.py

@@ -0,0 +1,8 @@
+import os
+
+from pyjs.server import serve
+
+serve(
+    "pyjs_examples.kanban.kanban",
+    port=int(os.environ.get("PYJS_PORT", "8000")),
+)