Fix comments UX regressions and HTMX/Turnstile behavior
- standardize comment and reply UI layout - target replies with stable OOB container IDs - remove stale empty-state on approved HTMX comments - initialize Turnstile widgets after HTMX swaps - add regression tests for empty-state, OOB targets, and reply form rerender Refs #48
This commit is contained in:
@@ -91,6 +91,7 @@ def test_htmx_post_returns_form_plus_oob_comment_when_approved(client, _article)
|
||||
# OOB swap appends the comment to #comments-list
|
||||
assert "hx-swap-oob" in content
|
||||
assert "Hello world" in content
|
||||
assert 'id="comments-empty-state" hx-swap-oob="delete"' in content
|
||||
comment = Comment.objects.get()
|
||||
assert comment.is_approved is True
|
||||
|
||||
@@ -132,8 +133,8 @@ def test_htmx_reply_returns_oob_reply_when_approved(client, _article, approved_c
|
||||
)
|
||||
content = resp.content.decode()
|
||||
assert resp.status_code == 200
|
||||
# OOB targets the sibling .replies-container of the parent comment article
|
||||
assert f'hx-swap-oob="beforeend:#comment-{approved_comment.id} ~ .replies-container"' in content
|
||||
# OOB targets a stable, explicit replies container for the parent comment.
|
||||
assert f'hx-swap-oob="beforeend:#replies-for-{approved_comment.id}"' in content
|
||||
# Verify content is rendered (not empty due to context mismatch)
|
||||
assert "Replier" in content
|
||||
assert "Nice reply" in content
|
||||
@@ -165,6 +166,30 @@ def test_htmx_error_with_tampered_parent_id_falls_back_to_main_form(client, _art
|
||||
assert b"comment-form-container" in resp.content
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
def test_htmx_invalid_reply_rerenders_reply_form_with_values(client, _article, approved_comment):
|
||||
"""Invalid reply keeps user input and returns the reply form container."""
|
||||
cache.clear()
|
||||
resp = client.post(
|
||||
"/comments/post/",
|
||||
{
|
||||
"article_id": _article.id,
|
||||
"parent_id": approved_comment.id,
|
||||
"author_name": "Reply User",
|
||||
"author_email": "reply@example.com",
|
||||
"body": " ",
|
||||
"honeypot": "",
|
||||
},
|
||||
HTTP_HX_REQUEST="true",
|
||||
)
|
||||
assert resp.status_code == 200
|
||||
content = resp.content.decode()
|
||||
assert f'id="reply-form-container-{approved_comment.id}"' in content
|
||||
assert "Comment form errors" in content
|
||||
assert 'value="Reply User"' in content
|
||||
assert "reply@example.com" in content
|
||||
|
||||
|
||||
# ── Turnstile Integration ────────────────────────────────────────────────────
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user