This skill should be used when writing test cases, fixing bugs, analyzing code for potential issues, or improving test coverage for JavaScript/TypeScript applications. Use this for unit tests, integration tests, end-to-end tests, debugging runtime errors, logic bugs, performance issues, security vulnerabilities, and systematic code analysis.
Apply systematic testing methodologies and debugging techniques to JavaScript/TypeScript applications. This skill provides comprehensive testing strategies, bug analysis frameworks, and automated tools for identifying coverage gaps and untested code.
Core Capabilities
1. Writing Test Cases
Write comprehensive tests covering unit, integration, and end-to-end scenarios.
Unit Testing Approach
Structure tests using the AAA pattern (Arrange-Act-Assert):
CODEBLOCK0
Key principles:
- Test one behavior per test
Cover happy path, edge cases, and error conditions
Use descriptive test names that explain the scenario
Keep tests independent and isolated
Integration Testing Approach
Test how components work together, including database, API, and service interactions:
CODEBLOCK1
End-to-End Testing Approach
Test complete user workflows using tools like Playwright or Cypress:
CODEBLOCK2
2. Systematic Bug Analysis
Apply structured debugging methodology to identify and fix issues.
Five-Step Analysis Process
1. Reproduction: Reliably reproduce the bug
- Document exact steps to trigger
- Identify required environment/state
- Note expected vs actual behavior
2. Isolation: Narrow down the problem
- Binary search through code path
- Create minimal reproduction case
- Remove unrelated dependencies
3. Root Cause Analysis: Determine underlying cause
- Write failing test first (TDD)
- Implement the fix
- Verify test passes
5. Validation: Ensure completeness
- Run full test suite
- Test edge cases
- Verify no regressions
Common Bug Patterns
Race Conditions:
CODEBLOCK3
Null/Undefined Errors:
CODEBLOCK4
Off-by-One Errors:
CODEBLOCK5
3. Identifying Potential Issues
Proactively identify issues before they become bugs.
Security Vulnerabilities
Test for common security issues:
CODEBLOCK6
Performance Issues
Test for performance problems:
CODEBLOCK7
Logic Errors
Use parameterized tests to catch edge cases:
CODEBLOCK8
4. Test Coverage Analysis
Use automated tools to identify gaps in test coverage.
Finding Untested Code
Run the provided script to identify source files without tests:
CODEBLOCK9
The script will:
- Scan source directory for all code files
Identify which files lack corresponding test files
Categorize untested files by type (components, services, utils, etc.)
Prioritize files that need testing most
Interpretation:
- API/Services: High priority - test business logic and data operations
Models: High priority - test data validation and transformations
Hooks: Medium priority - test stateful behavior
Components: Medium priority - test complex UI logic
Utils: Low priority - test as needed for complex functions
Analyzing Coverage Reports
Run the coverage analysis script after generating coverage:
CODEBLOCK10
The script identifies:
- Files below coverage threshold (default 80%)
Statement, branch, and function coverage percentages
Priority files to improve
Coverage targets:
- Critical paths: 90%+ coverage
Business logic: 85%+ coverage
UI components: 75%+ coverage
Utilities: 70%+ coverage
5. Test Maintenance and Quality
Ensure tests remain valuable and maintainable.
Test Code Quality Principles
DRY (Don't Repeat Yourself):
CODEBLOCK11
Clear test data:
CODEBLOCK12
Avoid test interdependence:
CODEBLOCK13
Workflow Decision Tree
Follow this decision tree to determine the testing approach:
1. Adding new functionality?
- Yes → Write tests first (TDD)
- Write failing test
- Implement feature
- Verify test passes
- Refactor
- No → Go to step 2
2. Fixing a bug?
- Yes → Apply bug analysis process
- Reproduce the bug
- Write failing test demonstrating bug
- Fix the implementation
- Verify test passes
- No → Go to step 3
3. Improving test coverage?
- Yes → Use coverage tools
- Run find_untested_code.py to identify gaps
- Run analyze_coverage.py on coverage reports
- Prioritize critical paths
- Write tests for untested code
- No → Go to step 4
4. Analyzing code quality?
- Yes → Systematic review
- Check for security vulnerabilities
- Test edge cases and error handling
- Verify performance characteristics
- Review error handling
Testing Frameworks and Tools
Recommended Stack
Unit/Integration Testing:
- Jest or Vitest for test runner
Testing Library for React components
Supertest for API testing
MSW (Mock Service Worker) for API mocking
E2E Testing:
- Playwright or Cypress
Page Object Model pattern
Coverage:
- Istanbul (built into Jest/Vitest)
Coverage reports in JSON format
Running Tests
CODEBLOCK14
Reference Documentation
For detailed patterns and techniques, refer to:
- references/testing_patterns.md - Comprehensive testing patterns, best practices, and code examples
INLINECODE3 - In-depth bug analysis framework, common bug patterns, and debugging techniques
These references contain extensive examples and advanced techniques. Load them when:
- Dealing with complex testing scenarios
Need specific pattern implementations
Debugging unusual issues
Seeking best practices for specific situations
Scripts
analyze_coverage.py
Analyze Jest/Istanbul coverage reports to identify gaps:
CODEBLOCK15
Automatically finds common coverage file locations if not specified.
Output:
- Files below coverage threshold
Statement, branch, and function coverage percentages
Priority files to improve
finduntestedcode.py
Find source files without corresponding test files:
CODEBLOCK16
Output:
- Total source and test file counts
Test file coverage percentage
Untested files categorized by type (API, services, components, etc.)
Recommendations for prioritization
Best Practices Summary
1. Write tests first (TDD) when adding new features
Test behavior, not implementation - tests should survive refactoring
Keep tests independent - no shared state between tests
Use descriptive names - test names should explain the scenario