Test Todo app

test_todo_app/README.md

@@ -0,0 +1,17 @@
+# Testing FastHTML Todo App
+
+This project implements a few simple unit tests for [FastHTML Todo list application](https://github.com/AnswerDotAI/fasthtml-example/tree/main/01_todo_app) using Pytest and [FastHTML Client](https://docs.fastht.ml/api/core.html#client).
+
+
+When running in test mode, the app now relies on a in-memory instance of Sqlite to make sure data is reset on every run. Test client and database table instance are defined as Pytest fixtures in `tests/conftest.py`.
+
+## Running Locally
+
+To run the app locally:
+
+1. Clone the repository
+2. Navigate to the project directory
+3. Run `poetry install` to install dependencies
+4. Run the following command: `poetry run python main.py`
+5. To run tests, use `poetry run pytest tests`
+

test_todo_app/main.py

@@ -0,0 +1,8 @@
+from fasthtml.common import *
+from todos import create_app
+
+# actual app creation process moved to todos.py
+# this way we can support different modes of the app (i.e. dev, test)
+# you can further extend create_app to support a more fine-grained configuration 
+app, _ = create_app()
+serve()

test_todo_app/picovars.css

@@ -0,0 +1,2 @@
+:root { --pico-font-size: 100%; }
+

test_todo_app/pyproject.toml

@@ -0,0 +1,16 @@
+[tool.poetry]
+name = "test-todo-app"
+version = "0.1.0"
+description = "Test a FastHTML app"
+authors = ["Philip Nuzhnyi <[email protected]>"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+python-fasthtml = "^0.6.0"
+pytest = "^8.3.3"
+
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

test_todo_app/tests/conftest.py

@@ -0,0 +1,10 @@
+import pytest
+from typing import Tuple
+from fasthtml.common import Client, Table
+from todos import create_app
+
+@pytest.fixture
+def test_client_and_database() -> Tuple[Client, Table]:
+    """test_client_and_database will be available to all test functions in the project"""
+    app, todos = create_app(mode="test")
+    return Client(app=app), todos

test_todo_app/tests/test_routes.py

@@ -0,0 +1,32 @@
+def test_landing_page(test_client_and_database):
+    client, todos = test_client_and_database
+    res = client.get("/")
+    assert res.status_code == 200
+    assert "Todo list" in res.text
+    assert todos.count == 0
+
+def test_adding_new_todo(test_client_and_database):
+    client, todos = test_client_and_database
+    res = client.post("/", data={"title": "Test Todo"})
+    assert res.status_code == 200
+    assert todos.count == 1
+    assert todos.get(1).title == "Test Todo"
+
+def test_updating_existing_todo(test_client_and_database):
+    client, todos = test_client_and_database
+    todos.insert({"title": "Test Todo"})
+
+    res = client.put("/", data={"id": 1, "title": "Updated Todo", "done": 1})
+    assert res.status_code == 200
+
+    assert todos.count == 1
+    assert todos.get(1).title == "Updated Todo"
+    assert todos.get(1).done == True
+
+def test_deleting_existing_todo(test_client_and_database):
+    client, todos = test_client_and_database
+    todos.insert({"title": "Test Todo"})
+
+    res = client.delete("/todos/1")
+    assert res.status_code == 200
+    assert todos.count == 0

test_todo_app/todos.py

@@ -0,0 +1,56 @@
+from fasthtml.common import *
+from typing import Literal, Tuple
+
+def create_app(mode: Literal["dev", "test"] = "dev") -> Tuple[FastHTML, Table]:
+    app,rt,todos,Todo = fast_app(
+        'data/todos.db' if mode == 'dev' else ':memory:',
+        hdrs=[Style(':root { --pico-font-size: 100%; }')],
+        id=int, title=str, done=bool, pk='id')
+
+    id_curr = 'current-todo'
+    def tid(id): return f'todo-{id}'
+
+    @patch
+    def __ft__(self:Todo):
+        show = AX(self.title, f'/todos/{self.id}', id_curr)
+        edit = AX('edit',     f'/edit/{self.id}' , id_curr)
+        dt = ' ✅' if self.done else ''
+        return Li(show, dt, ' | ', edit, id=tid(self.id))
+
+    def mk_input(**kw): return Input(id="new-title", name="title", placeholder="New Todo", required=True, **kw)
+
+    @rt("/")
+    def get():
+        add = Form(Group(mk_input(), Button("Add")),
+                hx_post="/", target_id='todo-list', hx_swap="beforeend")
+        card = Card(Ul(*todos(), id='todo-list'),
+                    header=add, footer=Div(id=id_curr)),
+        title = 'Todo list'
+        return Title(title), Main(H1(title), card, cls='container')
+
+    @rt("/todos/{id}")
+    def delete(id:int):
+        todos.delete(id)
+        return clear(id_curr)
+
+    @rt("/")
+    def post(todo:Todo): return todos.insert(todo), mk_input(hx_swap_oob='true')
+
+    @rt("/edit/{id}")
+    def get(id:int):
+        res = Form(Group(Input(id="title"), Button("Save")),
+            Hidden(id="id"), CheckboxX(id="done", label='Done'),
+            hx_put="/", target_id=tid(id), id="edit")
+        return fill_form(res, todos.get(id))
+
+    @rt("/")
+    def put(todo: Todo): return todos.upsert(todo), clear(id_curr)
+
+    @rt("/todos/{id}")
+    def get(id:int):
+        todo = todos.get(id)
+        btn = Button('delete', hx_delete=f'/todos/{todo.id}',
+                    target_id=tid(todo.id), hx_swap="outerHTML")
+        return Div(Div(todo.title), btn)
+
+    return app, todos