feat: redesign comments section for better UX/UI #45
@@ -132,12 +132,13 @@ def test_htmx_reply_returns_oob_reply_when_approved(client, _article, approved_c
|
|||||||
)
|
)
|
||||||
content = resp.content.decode()
|
content = resp.content.decode()
|
||||||
assert resp.status_code == 200
|
assert resp.status_code == 200
|
||||||
# OOB targets the parent's replies-container
|
# OOB targets the sibling .replies-container of the parent comment article
|
||||||
assert f"#comment-{approved_comment.id}" in content
|
assert f'hx-swap-oob="beforeend:#comment-{approved_comment.id} ~ .replies-container"' in content
|
||||||
assert "hx-swap-oob" in content
|
# Verify content is rendered (not empty due to context mismatch)
|
||||||
# Reply uses compact markup (no nested reply form)
|
assert "Replier" in content
|
||||||
assert "Reply posted!" in content
|
assert "Nice reply" in content
|
||||||
reply = Comment.objects.exclude(pk=approved_comment.pk).get()
|
reply = Comment.objects.exclude(pk=approved_comment.pk).get()
|
||||||
|
assert f"comment-{reply.id}" in content
|
||||||
assert reply.parent_id == approved_comment.id
|
assert reply.parent_id == approved_comment.id
|
||||||
assert reply.is_approved is True
|
assert reply.is_approved is True
|
||||||
|
|
||||||
|
|||||||
@@ -148,10 +148,14 @@ class CommentCreateView(View):
|
|||||||
if comment.is_approved:
|
if comment.is_approved:
|
||||||
ctx = _comment_template_context(comment, article, request)
|
ctx = _comment_template_context(comment, article, request)
|
||||||
if comment.parent_id:
|
if comment.parent_id:
|
||||||
comment_html = render_to_string("comments/_reply.html", ctx, request)
|
# _reply.html expects 'reply' context key
|
||||||
|
reply_ctx = ctx.copy()
|
||||||
|
reply_ctx["reply"] = reply_ctx.pop("comment")
|
||||||
|
comment_html = render_to_string("comments/_reply.html", reply_ctx, request)
|
||||||
|
# .replies-container is now a sibling of #comment-{id}
|
||||||
oob_html = (
|
oob_html = (
|
||||||
f'<div hx-swap-oob="beforeend:#comment-{comment.parent_id} '
|
f'<div hx-swap-oob="beforeend:#comment-{comment.parent_id} '
|
||||||
f'.replies-container">{comment_html}</div>'
|
f'~ .replies-container">{comment_html}</div>'
|
||||||
)
|
)
|
||||||
else:
|
else:
|
||||||
comment_html = render_to_string("comments/_comment.html", ctx, request)
|
comment_html = render_to_string("comments/_comment.html", ctx, request)
|
||||||
|
|||||||
Reference in New Issue
Block a user