Skip to content

feat(#532): add CommentSection component with full test coverage#456

Open
olaayoade27-coder wants to merge 1 commit into
rinafcode:mainfrom
olaayoade27-coder:feat/532-comment-section-test-coverage
Open

feat(#532): add CommentSection component with full test coverage#456
olaayoade27-coder wants to merge 1 commit into
rinafcode:mainfrom
olaayoade27-coder:feat/532-comment-section-test-coverage

Conversation

@olaayoade27-coder
Copy link
Copy Markdown
Contributor

Summary

Closes #532

Implements the CommentSection component and increases test coverage as required.

Changes

New: src/components/mobile/CommentSection.tsx

  • Fetches comments via GET /api/{resourceType}s/{resourceId}/comments
  • Post new comment via POST with input cleared on success
  • Optimistic like/unlike toggle with automatic revert on API failure
  • Owner-only delete (checked by authorId vs currentUserId)
  • Loading spinner, empty state, error banner with Retry
  • Full accessibility labels on all interactive elements

New: tests/components/CommentSection.test.tsx

30 tests across 7 suites:

  • Loading state — shows/hides spinner
  • Rendering — comments, author names, count heading, empty state, correct API path per resource type
  • Input visibility — shown only when currentUserId is provided
  • Posting — POST call, list prepend, input clear, empty/whitespace guard, error banner
  • Liking — optimistic increment, optimistic decrement, revert on failure
  • Deleting — owner-only button, removes from list, DELETE call
  • Accessibility — all accessibilityLabel values verified

Modified: src/components/mobile/index.ts

  • Exported CommentSection from the mobile component barrel

Acceptance Criteria

  • Comment Section properly implements Test Coverage Increase
  • All related tests pass
  • No regression in existing functionality
  • Code follows project coding standards
  • Accessibility guidelines are followed
  • Security considerations addressed (owner-only delete, input trimming)

- CommentSection component: fetch, post, optimistic like/unlike with
  revert on failure, owner-only delete, error banner with retry,
  loading state, empty state, accessibility labels
- 30 tests across 7 suites: loading, rendering, input visibility,
  posting, liking, deleting, error handling, accessibility
- Export CommentSection from mobile component index
@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

This PR is not linked to any issue. kindly link this PR to the issue number

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants