developer-ai 1.0.0

package/skills/testing-strategy/SKILL.md

@@ -0,0 +1,501 @@
+---
+name: testing-strategy
+description: Guide for developing comprehensive testing strategies. Use when planning test coverage, choosing testing frameworks, or establishing testing practices. Covers testing pyramid, unit/integration/E2E tests, TDD, and test organization.
+---
+
+# Testing Strategy Skill
+
+This skill provides guidance for developing effective testing strategies and writing maintainable tests.
+
+## Overview
+
+A good testing strategy balances confidence, speed, and maintainability. This skill covers the testing pyramid, different test types, and best practices.
+
+## Testing Pyramid
+
+```
+        /\
+       /  \         E2E Tests
+      /----\        (Few, slow, high confidence)
+     /      \
+    /--------\      Integration Tests
+   /          \     (Some, medium speed)
+  /------------\    
+ /              \   Unit Tests
+/________________\  (Many, fast, focused)
+```
+
+### Test Distribution
+
+| Type | Coverage | Speed | Quantity |
+|------|----------|-------|----------|
+| Unit | Single function/component | Fast (ms) | ~70% |
+| Integration | Multiple modules | Medium (s) | ~20% |
+| E2E | Full user flows | Slow (s-min) | ~10% |
+
+## Unit Testing
+
+### Structure (AAA Pattern)
+
+```javascript
+describe('calculateDiscount', () => {
+  it('applies 10% discount for orders over $100', () => {
+    // Arrange
+    const order = { subtotal: 150 };
+    
+    // Act
+    const discount = calculateDiscount(order);
+    
+    // Assert
+    expect(discount).toBe(15);
+  });
+});
+```
+
+### Naming Conventions
+
+```javascript
+// Pattern: "should [expected behavior] when [condition]"
+describe('UserService', () => {
+  describe('createUser', () => {
+    it('should create user when valid data provided', () => {});
+    it('should throw ValidationError when email is invalid', () => {});
+    it('should throw ConflictError when email already exists', () => {});
+  });
+});
+```
+
+### Testing Pure Functions
+
+```javascript
+// Pure functions are easiest to test
+function sum(numbers) {
+  return numbers.reduce((a, b) => a + b, 0);
+}
+
+describe('sum', () => {
+  it('returns 0 for empty array', () => {
+    expect(sum([])).toBe(0);
+  });
+  
+  it('returns the number for single-element array', () => {
+    expect(sum([5])).toBe(5);
+  });
+  
+  it('sums all numbers in array', () => {
+    expect(sum([1, 2, 3, 4])).toBe(10);
+  });
+  
+  it('handles negative numbers', () => {
+    expect(sum([1, -2, 3])).toBe(2);
+  });
+});
+```
+
+### Testing with Mocks
+
+```javascript
+import { vi } from 'vitest';
+
+// Mock external dependencies
+const mockDatabase = {
+  findUser: vi.fn(),
+  saveUser: vi.fn(),
+};
+
+describe('UserService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  
+  it('creates user in database', async () => {
+    mockDatabase.saveUser.mockResolvedValue({ id: '123', name: 'John' });
+    
+    const service = new UserService(mockDatabase);
+    const user = await service.createUser({ name: 'John' });
+    
+    expect(mockDatabase.saveUser).toHaveBeenCalledWith({ name: 'John' });
+    expect(user.id).toBe('123');
+  });
+  
+  it('throws when database fails', async () => {
+    mockDatabase.saveUser.mockRejectedValue(new Error('DB Error'));
+    
+    const service = new UserService(mockDatabase);
+    
+    await expect(service.createUser({ name: 'John' }))
+      .rejects.toThrow('DB Error');
+  });
+});
+```
+
+## Integration Testing
+
+### API Integration Tests
+
+```javascript
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import request from 'supertest';
+import app from './app';
+
+describe('POST /api/users', () => {
+  beforeAll(async () => {
+    await setupTestDatabase();
+  });
+  
+  afterAll(async () => {
+    await cleanupTestDatabase();
+  });
+  
+  it('creates a new user', async () => {
+    const response = await request(app)
+      .post('/api/users')
+      .send({ name: 'John', email: 'john@example.com' })
+      .expect(201);
+    
+    expect(response.body).toMatchObject({
+      name: 'John',
+      email: 'john@example.com',
+    });
+    expect(response.body.id).toBeDefined();
+  });
+  
+  it('returns 400 for invalid email', async () => {
+    const response = await request(app)
+      .post('/api/users')
+      .send({ name: 'John', email: 'invalid' })
+      .expect(400);
+    
+    expect(response.body.error.code).toBe('VALIDATION_ERROR');
+  });
+  
+  it('returns 409 for duplicate email', async () => {
+    // First request succeeds
+    await request(app)
+      .post('/api/users')
+      .send({ name: 'John', email: 'duplicate@example.com' })
+      .expect(201);
+    
+    // Second request with same email fails
+    const response = await request(app)
+      .post('/api/users')
+      .send({ name: 'Jane', email: 'duplicate@example.com' })
+      .expect(409);
+    
+    expect(response.body.error.code).toBe('CONFLICT');
+  });
+});
+```
+
+### Database Integration Tests
+
+```javascript
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+describe('UserRepository', () => {
+  beforeEach(async () => {
+    // Clean database before each test
+    await prisma.user.deleteMany();
+  });
+  
+  afterAll(async () => {
+    await prisma.$disconnect();
+  });
+  
+  it('creates and retrieves user', async () => {
+    const created = await prisma.user.create({
+      data: { name: 'John', email: 'john@example.com' },
+    });
+    
+    const found = await prisma.user.findUnique({
+      where: { id: created.id },
+    });
+    
+    expect(found).toEqual(created);
+  });
+});
+```
+
+## React Component Testing
+
+### Component Unit Tests
+
+```javascript
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Button from './Button';
+
+describe('Button', () => {
+  it('renders children', () => {
+    render(<Button>Click me</Button>);
+    
+    expect(screen.getByRole('button')).toHaveTextContent('Click me');
+  });
+  
+  it('calls onClick when clicked', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    
+    fireEvent.click(screen.getByRole('button'));
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Click me</Button>);
+    
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+});
+```
+
+### Testing with User Events
+
+```javascript
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LoginForm from './LoginForm';
+
+describe('LoginForm', () => {
+  it('submits form with entered values', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    
+    render(<LoginForm onSubmit={handleSubmit} />);
+    
+    await user.type(screen.getByLabelText(/email/i), 'john@example.com');
+    await user.type(screen.getByLabelText(/password/i), 'password123');
+    await user.click(screen.getByRole('button', { name: /submit/i }));
+    
+    expect(handleSubmit).toHaveBeenCalledWith({
+      email: 'john@example.com',
+      password: 'password123',
+    });
+  });
+  
+  it('shows error for invalid email', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm onSubmit={() => {}} />);
+    
+    await user.type(screen.getByLabelText(/email/i), 'invalid');
+    await user.click(screen.getByRole('button', { name: /submit/i }));
+    
+    expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
+  });
+});
+```
+
+### Testing Async Components
+
+```javascript
+import { render, screen, waitFor } from '@testing-library/react';
+import UserProfile from './UserProfile';
+import { mockFetch } from './testUtils';
+
+describe('UserProfile', () => {
+  it('displays user data after loading', async () => {
+    mockFetch({ name: 'John Doe', email: 'john@example.com' });
+    
+    render(<UserProfile userId="123" />);
+    
+    // Initially shows loading
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+    
+    // Wait for data to appear
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    
+    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+  });
+  
+  it('displays error message on failure', async () => {
+    mockFetch(null, { status: 500 });
+    
+    render(<UserProfile userId="123" />);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeInTheDocument();
+    });
+  });
+});
+```
+
+## E2E Testing with Playwright
+
+### Basic E2E Test
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test.describe('User Registration', () => {
+  test('registers a new user', async ({ page }) => {
+    await page.goto('/register');
+    
+    await page.fill('[name="name"]', 'John Doe');
+    await page.fill('[name="email"]', 'john@example.com');
+    await page.fill('[name="password"]', 'SecurePass123!');
+    
+    await page.click('button[type="submit"]');
+    
+    // Should redirect to dashboard
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.locator('h1')).toContainText('Welcome, John');
+  });
+  
+  test('shows validation errors', async ({ page }) => {
+    await page.goto('/register');
+    
+    await page.fill('[name="email"]', 'invalid');
+    await page.click('button[type="submit"]');
+    
+    await expect(page.locator('.error')).toContainText('Invalid email');
+  });
+});
+```
+
+### Page Object Pattern
+
+```javascript
+// pages/LoginPage.js
+export class LoginPage {
+  constructor(page) {
+    this.page = page;
+    this.emailInput = page.locator('[name="email"]');
+    this.passwordInput = page.locator('[name="password"]');
+    this.submitButton = page.locator('button[type="submit"]');
+    this.errorMessage = page.locator('.error-message');
+  }
+  
+  async goto() {
+    await this.page.goto('/login');
+  }
+  
+  async login(email, password) {
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}
+
+// tests/login.spec.js
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+
+test('successful login', async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  await loginPage.goto();
+  await loginPage.login('user@example.com', 'password');
+  
+  await expect(page).toHaveURL('/dashboard');
+});
+```
+
+## Test Organization
+
+### File Structure
+
+```
+src/
+├── components/
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   ├── Button.test.tsx
+│   │   └── Button.stories.tsx
+│   └── Form/
+│       ├── Form.tsx
+│       └── Form.test.tsx
+├── services/
+│   ├── userService.ts
+│   └── userService.test.ts
+└── utils/
+    ├── validation.ts
+    └── validation.test.ts
+
+tests/
+├── integration/
+│   └── api.test.ts
+└── e2e/
+    ├── fixtures/
+    ├── pages/
+    └── specs/
+```
+
+### Test Setup
+
+```javascript
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      reporter: ['text', 'html'],
+      exclude: ['node_modules/', 'tests/'],
+    },
+  },
+});
+```
+
+```javascript
+// tests/setup.ts
+import '@testing-library/jest-dom';
+import { beforeAll, afterAll, afterEach } from 'vitest';
+import { server } from './mocks/server';
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
+## TDD Workflow
+
+### Red-Green-Refactor
+
+```javascript
+// 1. RED: Write failing test
+it('returns true for valid email', () => {
+  expect(isValidEmail('test@example.com')).toBe(true);
+});
+
+// 2. GREEN: Implement minimal code to pass
+function isValidEmail(email) {
+  return email.includes('@');
+}
+
+// 3. REFACTOR: Improve implementation
+function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+```
+
+## Testing Checklist
+
+### Unit Tests
+- [ ] Pure functions tested
+- [ ] Edge cases covered
+- [ ] Error scenarios tested
+- [ ] Mocks used appropriately
+
+### Integration Tests
+- [ ] API endpoints tested
+- [ ] Database operations verified
+- [ ] External services mocked
+
+### E2E Tests
+- [ ] Critical user flows covered
+- [ ] Cross-browser testing
+- [ ] Mobile viewports tested
+- [ ] Accessibility checked
+
+### General
+- [ ] Naming conventions followed
+- [ ] Tests are independent
+- [ ] Setup/teardown implemented
+- [ ] Coverage targets met