4.0.0 • Published 6d ago

@claudeautopm/plugin-testing

Licence

MIT

Version

4.0.0

Deps

Size

36 kB

Vulns

Weekly

Summary Dependency Versions

@claudeautopm/plugin-testing

Complete testing plugin with Jest, Vitest, Testing Library, and comprehensive test strategies for frontend, backend, and E2E testing.

Version: 2.0.0 | Schema: 2.0 | Context7-Verified:

Installation

# Install the plugin package
npm install @claudeautopm/plugin-testing

# Or install globally
npm install -g @claudeautopm/plugin-testing

Context7 Integration

This plugin uses Context7 MCP server to ensure all testing patterns follow the latest official documentation:

Libraries Verified:

Vitest: /vitest-dev/vitest (1,183 snippets, trust 8.3)
Testing Library: /testing-library/testing-library-docs (499 snippets, trust 9.3)
React Testing Library: /testing-library/react-testing-library (trust 9.3)

All testing patterns, best practices, and code examples are verified against current official documentation to prevent outdated testing approaches.

What's Included

Agent

frontend-testing-engineer - Frontend unit and integration testing specialist
- Jest and Vitest configuration
- React Testing Library patterns
- Vue Test Utils patterns
- Angular testing utilities
- Component testing strategies
- Coverage analysis and optimization
- Test quality best practices

Commands

test-setup - Setup comprehensive testing framework
- Interactive framework selection (Vitest/Jest)
- Project type detection (React/Vue/Angular)
- Coverage configuration
- CI/CD integration
- Example test creation
test-coverage - Generate and analyze coverage reports
- Coverage metrics analysis
- Gap identification
- Actionable recommendations
- Trend tracking
- CI/CD integration

Rules

testing-standards - Comprehensive testing best practices
- Test-Driven Development (TDD) enforcement
- Query priority standards
- Test independence requirements
- AAA pattern structure
- Coverage quality standards
test-coverage-requirements - Coverage threshold enforcement
- Minimum coverage thresholds
- Per-directory requirements
- Pre-commit hooks
- CI/CD integration
- Mutation testing recommendations

Example Scripts

vitest-config-example.js - Vitest configuration with all features
- Coverage setup
- Sharding configuration
- Performance profiling
- Browser testing
- Dependency injection
react-testing-example.test.jsx - React Testing Library examples
- Component testing patterns
- User interaction testing
- Async operations
- MSW API mocking
- Context7-verified patterns
vue-testing-example.test.js - Vue Test Utils examples
- Vue 3 component testing
- Pinia store testing
- Event emission testing
- Async data fetching
- Context7-verified patterns

Quick Start

Using Commands

# Setup testing framework (interactive)
/test:setup

# Setup with Vitest for React project
/test:setup --framework=vitest --type=react --coverage

# Generate coverage report
/test:coverage

# Generate detailed coverage analysis
/test:coverage --detailed --html

Using Agent

@frontend-testing-engineer

I need to create comprehensive tests for my UserProfile component.

Requirements:
- Test all user interactions
- Test loading and error states
- Test form validation
- Achieve 90%+ coverage
- Include accessibility tests

Please create tests following Context7-verified best practices.

Agent Capabilities

Test Strategy Design

Test pyramid implementation
Coverage goals and metrics
Test data management
CI/CD integration

Unit Testing

Component isolation
Mock and stub creation
Test-driven development (TDD)
Snapshot testing

Integration Testing

API integration tests
Database integration
Service mocking
Contract testing

E2E Testing

User flow automation
Cross-browser testing
Mobile testing
Visual regression

Quality Assurance

Accessibility (a11y) testing
Performance benchmarking
Security testing
Code quality metrics

Examples

React Component Testing

@frontend-testing-engineer

Create test suite for ProductCard component:

Component features:
- Display product image, name, price
- Add to cart button
- Favorite toggle
- Discount badge (conditional)
- Click to view details

Requirements:
- React Testing Library
- User event simulation
- Accessibility checks
- Mock API calls
- Coverage > 90%

Include:
1. Unit tests for all features
2. Accessibility tests
3. Mock setup
4. Edge case handling
5. Test utilities

E2E Testing with Playwright

@frontend-testing-engineer

Build E2E test suite for e-commerce checkout:

User flow:
1. Browse products
2. Add items to cart
3. Apply discount code
4. Fill shipping info
5. Select payment method
6. Confirm order

Requirements:
- Playwright framework
- Page Object Model
- Test fixtures
- Cross-browser (Chrome, Firefox, Safari)
- Mobile viewport testing
- Screenshot on failure

Include:
1. Test specifications
2. Page object classes
3. Fixtures and helpers
4. CI/CD configuration
5. Reporting setup

Visual Regression Testing

@frontend-testing-engineer

Setup visual regression testing:

Components to test:
- Header navigation
- Product grid
- Sidebar filters
- Modal dialogs
- Form inputs

Requirements:
- Percy or Chromatic integration
- Multiple viewport sizes
- Theme variations (light/dark)
- State variations (empty, loading, error)
- CI/CD integration

Include:
1. Visual test configuration
2. Story definitions
3. Snapshot baselines
4. Review workflow
5. GitHub Actions setup

Accessibility Testing

@frontend-testing-engineer

Implement accessibility testing:

Requirements:
- WCAG 2.1 Level AA compliance
- Keyboard navigation
- Screen reader compatibility
- Color contrast validation
- Focus management

Tools:
- axe-core
- jest-axe
- Lighthouse CI
- NVDA/JAWS testing

Include:
1. Automated a11y tests
2. Manual testing checklist
3. CI/CD integration
4. Violation reporting
5. Remediation guidelines

Performance Testing

@frontend-testing-engineer

Create performance test suite:

Metrics to track:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Cumulative Layout Shift (CLS)
- Total Blocking Time (TBT)

Requirements:
- Lighthouse CI
- Real device testing
- Network throttling
- Budget enforcement
- Trend tracking

Include:
1. Performance test config
2. Budget definitions
3. CI/CD integration
4. Reporting dashboard
5. Optimization recommendations

Test Automation Framework

@frontend-testing-engineer

Design comprehensive test automation framework:

Test types:
- Unit tests (Jest)
- Integration tests (Testing Library)
- E2E tests (Playwright)
- Visual tests (Percy)
- A11y tests (axe)
- Performance tests (Lighthouse)

Requirements:
- Unified reporting
- Parallel execution
- Flake detection
- Smart retries
- Cost optimization

Include:
1. Framework architecture
2. Test utilities library
3. Custom matchers
4. CI/CD pipeline
5. Monitoring and alerts

Configuration

Environment Variables

Some agents benefit from environment variables:

# Testing
export JEST_TIMEOUT=30000
export PLAYWRIGHT_BROWSERS_PATH=/opt/browsers
export CI=true

# Visual testing
export PERCY_TOKEN=your-token
export CHROMATIC_PROJECT_TOKEN=your-token

# Accessibility
export AXE_CORE_VERSION=4.7.0

Agent Customization

You can customize agent behavior in .claude/config.yaml:

plugins:
  testing:
    unit:
      framework: jest
      coverage_threshold: 80
      test_match: ["**/*.test.js", "**/*.spec.js"]
    e2e:
      framework: playwright
      browsers: [chromium, firefox, webkit]
      retries: 2
    visual:
      provider: percy
      responsive_breakpoints: [375, 768, 1024, 1440]
    accessibility:
      standard: WCAG2AA
      include_best_practices: true

Documentation

Frontend Testing Engineer Guide

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

License

MIT ClaudeAutoPM Team

Keywords

claudeautopm plugin testing