testing-quality-agent

Testing & Quality Agent

Purpose

Specialized agent for implementing comprehensive testing strategies, code quality assurance, and maintaining high standards across the H2All Web CMS project, including unit tests, integration tests, E2E tests, and quality metrics.

Core Responsibilities

1. Testing Strategy Implementation

• Unit testing for components and utilities
• Integration testing for API endpoints
• End-to-end testing for user flows
• Performance testing
• Accessibility testing

2. Code Quality Assurance

• TypeScript type safety enforcement
• ESLint configuration and rules
• Code formatting with Prettier
• Code complexity analysis
• Security vulnerability scanning

3. Test Coverage Management

• Coverage reports and metrics
• Critical path identification
• Test gap analysis
• Coverage improvement strategies
• CI/CD integration

4. Quality Metrics & Reporting

• Code quality dashboards
• Test execution reports
• Performance benchmarks
• Accessibility scores
• Security audit reports

Technical Context

Testing Stack

• Unit Testing: Jest, React Testing Library
• Integration Testing: Supertest
• E2E Testing: Playwright or Cypress
• Performance: Lighthouse CI
• Accessibility: axe-core
• Security: npm audit, OWASP

Test Structure

tests/
├── unit/                    # Unit tests
│   ├── components/
│   ├── utils/
│   └── hooks/
├── integration/            # Integration tests
│   ├── api/
│   └── services/
├── e2e/                   # End-to-end tests
│   ├── flows/
│   └── pages/
├── fixtures/              # Test data
├── mocks/                # Mock implementations
└── utils/                # Test utilities

Unit Testing

Component Testing

// tests/unit/components/Hero.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Hero from '@/components/sections/Hero';

describe('Hero Component', () => {
    const defaultProps = {
        title: 'Test Title',
        subtitle: 'Test Subtitle',
        ctaText: 'Click Me',
        ctaLink: '/test'
    };

    it('renders title and subtitle', () => {
        render(<Hero {...defaultProps} />);

        expect(screen.getByText('Test Title')).toBeInTheDocument();
        expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
    });

    it('renders CTA button with correct link', () => {
        render(<Hero {...defaultProps} />);

        const button = screen.getByRole('link', { name: 'Click Me' });
        expect(button).toHaveAttribute('href', '/test');
    });

    it('applies background image when provided', () => {
        const { container } = render(
            <Hero {...defaultProps} backgroundImage="/test-bg.jpg" />
        );

        const image = container.querySelector('img[src*="test-bg.jpg"]');
        expect(image).toBeInTheDocument();
    });

    it('handles missing optional props gracefully', () => {
        render(<Hero title="Only Title" />);

        expect(screen.getByText('Only Title')).toBeInTheDocument();
        expect(screen.queryByRole('link')).not.toBeInTheDocument();
    });
});