testing
Testing Software
MCP Tools
Chrome DevTools (E2E testing):
- Automate user flows in real browser
- Capture screenshots for visual regression
- Run Lighthouse for accessibility testing
- Profile performance during test runs
Testing Pyramid
- Unit Tests (Many): Fast, isolated, test single units
- Integration Tests (Some): Test component interactions
- E2E Tests (Few): Test complete user flows — use Chrome DevTools
Workflows
- Analyze: Use Glob and Grep to identify untested code
- Unit Tests: Cover all public functions
- Edge Cases: Test boundaries and error conditions
- Integration: Test external dependencies
- E2E: Use Chrome DevTools for browser automation
- Regression: Add test for each bug fix
Test Quality Standards
Deterministic
Tests must produce the same result every time.
Isolated
Tests should not depend on each other or shared state.
Clear
Test names should describe the behavior being tested.
Test Patterns
Arrange-Act-Assert (AAA) (TypeScript Example)
test("user registration sends welcome email", async () => {
// Arrange
const emailService = new MockEmailService();
const userService = new UserService(emailService);
// Act
await userService.register("test@example.com");
// Assert
expect(emailService.sentEmails).toContainEqual({
to: "test@example.com",
subject: "Welcome!"
});
});
E2E Testing with Chrome DevTools
// Use Chrome DevTools MCP for browser automation
// - Navigate to pages
// - Fill forms and click buttons
// - Capture screenshots for visual regression
// - Run Lighthouse accessibility audits
// - Check console for errors
Commands (Examples by Language)
# Run tests
npm test
pytest
go test ./...
# With coverage
npm test -- --coverage
pytest --cov=src
go test -cover ./...
Finding Untested Code
Use Glob and Grep to identify gaps:
- Use Glob to find all source files and test files
- Check which source files have corresponding test files
- Use Grep to see if functions are referenced in tests
More from dralgorhythm/claude-agentic-framework
react-native-reanimated
React Native Reanimated 4.x animation patterns. Use when adding animations, transitions, entering/exiting effects, or gesture-driven animations to React Native screens. Replaces Framer Motion for mobile.
102optimizing-code
Improve code performance without changing behavior. Use when code fails latency/throughput requirements. Covers profiling, caching, and algorithmic optimization.
44react-patterns
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
41threat-modeling
Identify and analyze security threats. Use when designing systems, reviewing architecture, or assessing risk. Covers STRIDE methodology.
41defense-in-depth
Apply layered security architecture. Use when designing security controls, hardening systems, or reviewing security posture. Covers multiple security layers.
40react-native-patterns
React Native component and interaction patterns. Use when building Pressable components, ScrollViews, lists, bottom sheets, accessibility, navigation, or handling RN-specific requirements like Text wrapping and touch targets.
40