Django と HTMX を使用した ToDo アプリの作成 - パート TDD を使用した Todo モデルの追加

これは、HTMX と Django を使用して Todo アプリを構築する方法に関するシリーズの 2 回目の投稿です。パート 1 についてはここをクリックしてください。

パート 2 では、Todo モデルを作成し、単体テストを使用してその基本機能を実装します。

Todo モデルの作成

models.py で、基本的な属性を備えた Todo モデルを作成しましょう。 Todo アイテムを UserProfile に関連付けて、ユーザーが自分のアイテムのみを表示できるようにしたいと考えています。 Todo アイテムにはタイトルとブール属性 is_completed も含まれます。 Todo モデルには、完了または未開始のほかにタスクを「進行中」として設定できる機能や期日など、将来のアイデアがたくさんありますが、それはまた後ほど。できるだけ早く画面に何かを表示できるように、ここまではシンプルにしておきましょう。

注: 実際のアプリでは、おそらく UserProfile モデルと Todo モデルの主キーとして UUID を使用することを検討する必要がありますが、ここでは単純にしておきます。

# core/models.py

from django.contrib.auth.models import AbstractUser
from django.db import models  # <-- NEW

class UserProfile(AbstractUser):
    pass

# NEW
class Todo(models.Model):
    title = models.CharField(max_length=255)
    is_completed = models.BooleanField(default=False)
    user = models.ForeignKey(
        UserProfile,
        related_name="todos",
        on_delete=models.CASCADE,
    )
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

新しいモデルの移行を実行してみましょう:

❯ uv run python manage.py makemigrations
Migrations for 'core':
  core/migrations/0002_todo.py
    + Create model Todo
❯ uv run python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, core, sessions
Running migrations:
  Applying core.0002_todo... OK

最初のテストを書く

プロジェクトの最初のテストを書いてみましょう。ユーザーには自分の ToDo アイテムのみが表示され、他のユーザーのアイテムは表示されないようにしたいと考えています。

テストの作成を支援するために、新しい開発依存関係をプロジェクト、model-bakery に追加します。これにより、ダミーの Django モデル インスタンスを作成するプロセスが簡素化されます。 pytest-django も追加します。

❯ uv add model-bakery pytest-django --dev
Resolved 27 packages in 425ms
Installed 2 packagez in 12ms
 + model-bakery==1.20.0
 + pytest-django==4.9.0

pyproject.toml では、ファイルの最後にいくつかの行を追加して、pytest を設定する必要があります。

# pyproject.toml

# NEW
[tool.pytest.ini_options]
DJANGO_SETTINGS_MODULE = "todomx.settings"
python_files = ["test_*.py", "*_test.py", "testing/python/*.py"]

次に、ユーザーが自分の ToDo にのみアクセスできることを確認する最初のテストを作成しましょう。

# core/tests/test_todo_model.py

import pytest


@pytest.mark.django_db
class TestTodoModel:
    def test_todo_items_are_associated_to_users(self, make_todo, make_user):
        [user1, user2] = make_user(_quantity=2)

        for i in range(3):
            make_todo(user=user1, title=f"user1 todo {i}")

        make_todo(user=user2, title="user2 todo")

        assert {todo.title for todo in user1.todos.all()} == {
            "user1 todo 0",
            "user1 todo 1",
            "user1 todo 2",
        }

        assert {todo.title for todo in user2.todos.all()} == {"user2 todo"}

テストで使用する予定のすべてのフィクスチャを格納する場所を確保するために、pytest の conftest.py ファイルを使用しています。 model_bakery ライブラリを使用すると、最小限の定型文で UserProfile と Todo のインスタンスを簡単に作成できます。

#core/tests/conftest.py

import pytest
from model_bakery import baker


@pytest.fixture
def make_user(django_user_model):
    def _make_user(**kwargs):
        return baker.make("core.UserProfile", **kwargs)

    return _make_user


@pytest.fixture
def make_todo(make_user):
    def _make_todo(user=None, **kwargs):
        return baker.make("core.Todo", user=user or make_user(), **kwargs)

    return _make_todo

テストを実行しましょう!

❯ uv run pytest
Test session starts (platform: darwin, Python 3.12.8, pytest 8.3.4, pytest-sugar 1.0.0)
django: version: 5.1.4, settings: todomx.settings (from ini)
configfile: pyproject.toml
plugins: sugar-1.0.0, django-4.9.0
collected 1 item

 core/tests/test_todo_model.py ✓                                                                                                                                   100% ██████████

Results (0.25s):
       1 passed

Todos の管理ページを登録する

最後に、管理ページを登録できます:

# core/admin.py

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
from .models import Todo, UserProfile # <-- NEW

# .. previous code

# NEW
@admin.register(Todo)
class TodoAdmin(admin.ModelAdmin):
    model = Todo
    list_display = ["title", "is_completed", "user"]
    list_filter = ["is_completed"]
    search_fields = ["title"]
    list_per_page = 10
    ordering = ["title"]

管理者から Todo を追加できるようになりました!

パート 2 の最後までのコード全体を確認したい場合は、Github のパート 02 ブランチで確認できます。

以上がDjango と HTMX を使用した ToDo アプリの作成 - パート TDD を使用した Todo モデルの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。