developer-ai 1.0.0

package/skills/webapp-testing/SKILL.md

@@ -0,0 +1,309 @@
+---
+name: webapp-testing
+description: Comprehensive toolkit for testing web applications. Use when testing frontend functionality, debugging UI behavior, writing test cases, setting up testing frameworks, or verifying browser compatibility. Includes strategies for unit tests, integration tests, E2E tests, and visual regression testing.
+---
+
+# Web Application Testing Skill
+
+This skill provides guidance for comprehensive web application testing, from unit tests to end-to-end testing strategies.
+
+## Overview
+
+Effective web testing requires a balanced approach across multiple testing layers. This skill helps you write better tests and choose the right testing strategy for each scenario.
+
+## Testing Pyramid
+
+### Unit Tests (Base - Most Tests)
+- Test individual functions/components in isolation
+- Fast execution, easy to debug
+- Mock external dependencies
+- Aim for 70-80% of total tests
+
+### Integration Tests (Middle)
+- Test component interactions
+- Verify API integrations work correctly
+- Test database operations
+- Aim for 15-20% of total tests
+
+### E2E Tests (Top - Fewest Tests)
+- Test complete user flows
+- Verify critical paths work
+- Slower but most realistic
+- Aim for 5-10% of total tests
+
+## Testing Framework Setup
+
+### React Testing (Vitest + Testing Library)
+```javascript
+// vitest.config.js
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './src/test/setup.js',
+  },
+});
+```
+
+### Vue Testing
+```javascript
+// vitest.config.js
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+  },
+});
+```
+
+### E2E Testing (Playwright)
+```javascript
+// playwright.config.js
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  use: {
+    baseURL: 'http://localhost:3000',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+## Component Testing Patterns
+
+### Testing User Interactions
+```javascript
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './Button';
+
+test('calls onClick when clicked', async () => {
+  const handleClick = vi.fn();
+  render(<Button onClick={handleClick}>Click me</Button>);
+  
+  await fireEvent.click(screen.getByRole('button'));
+  
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+```
+
+### Testing Async Operations
+```javascript
+import { render, screen, waitFor } from '@testing-library/react';
+import { UserProfile } from './UserProfile';
+
+test('loads and displays user data', async () => {
+  render(<UserProfile userId="123" />);
+  
+  // Wait for loading to complete
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+  });
+  
+  expect(screen.getByText('John Doe')).toBeInTheDocument();
+});
+```
+
+### Testing Form Validation
+```javascript
+test('shows validation errors for invalid input', async () => {
+  render(<ContactForm />);
+  
+  // Submit empty form
+  await fireEvent.click(screen.getByRole('button', { name: /submit/i }));
+  
+  expect(screen.getByText('Email is required')).toBeInTheDocument();
+  expect(screen.getByText('Name is required')).toBeInTheDocument();
+});
+```
+
+## E2E Testing Patterns
+
+### Page Object Model
+```javascript
+// e2e/pages/LoginPage.js
+export class LoginPage {
+  constructor(page) {
+    this.page = page;
+    this.emailInput = page.locator('[data-testid="email"]');
+    this.passwordInput = page.locator('[data-testid="password"]');
+    this.submitButton = page.locator('[data-testid="submit"]');
+  }
+
+  async login(email, password) {
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}
+```
+
+### Testing Critical User Flows
+```javascript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from './pages/LoginPage';
+
+test('user can complete checkout flow', async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  
+  await page.goto('/');
+  await loginPage.login('user@example.com', 'password');
+  
+  // Add item to cart
+  await page.click('[data-testid="add-to-cart"]');
+  await page.click('[data-testid="cart-icon"]');
+  
+  // Proceed to checkout
+  await page.click('[data-testid="checkout-button"]');
+  
+  // Verify order confirmation
+  await expect(page.locator('.order-confirmation')).toBeVisible();
+});
+```
+
+## Accessibility Testing
+
+### Automated A11y Checks
+```javascript
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test('page should be accessible', async ({ page }) => {
+  await page.goto('/');
+  
+  const results = await new AxeBuilder({ page }).analyze();
+  
+  expect(results.violations).toEqual([]);
+});
+```
+
+### Manual A11y Checklist
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color contrast meets WCAG AA
+- [ ] Keyboard navigation works
+- [ ] Focus indicators are visible
+- [ ] Screen reader announces content correctly
+
+## Visual Regression Testing
+
+### Using Playwright Screenshots
+```javascript
+test('homepage visual regression', async ({ page }) => {
+  await page.goto('/');
+  
+  await expect(page).toHaveScreenshot('homepage.png', {
+    maxDiffPixels: 100,
+  });
+});
+```
+
+## API Testing
+
+### Testing API Endpoints
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('API returns user data', async ({ request }) => {
+  const response = await request.get('/api/users/123');
+  
+  expect(response.ok()).toBeTruthy();
+  
+  const data = await response.json();
+  expect(data).toHaveProperty('id', '123');
+  expect(data).toHaveProperty('email');
+});
+```
+
+## Test Organization Best Practices
+
+### File Structure
+```
+src/
+├── components/
+│   ├── Button/
+│   │   ├── Button.jsx
+│   │   ├── Button.test.jsx
+│   │   └── Button.module.css
+e2e/
+├── pages/
+│   └── LoginPage.js
+├── tests/
+│   └── auth.spec.js
+└── fixtures/
+    └── users.json
+```
+
+### Naming Conventions
+- Describe what is being tested
+- Use clear, descriptive names
+- Group related tests with `describe`
+
+```javascript
+describe('Button component', () => {
+  describe('when clicked', () => {
+    test('calls onClick handler', () => {});
+    test('does not call handler when disabled', () => {});
+  });
+  
+  describe('accessibility', () => {
+    test('has correct ARIA attributes', () => {});
+  });
+});
+```
+
+## Debugging Tests
+
+### Common Issues and Solutions
+
+**Flaky tests:**
+- Add proper wait conditions
+- Don't rely on timing
+- Use data-testid for stable selectors
+
+**Slow tests:**
+- Mock external APIs
+- Use test database snapshots
+- Parallelize test execution
+
+**Hard to debug:**
+- Use trace viewer in Playwright
+- Add descriptive error messages
+- Log intermediate states
+
+## CI/CD Integration
+
+### GitHub Actions Example
+```yaml
+name: Tests
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm test
+      - run: npx playwright install
+      - run: npm run test:e2e
+```
+
+## Summary Checklist
+
+When setting up tests:
+- [ ] Choose appropriate test types for each feature
+- [ ] Set up testing frameworks correctly
+- [ ] Follow testing pyramid proportions
+- [ ] Use Page Object Model for E2E
+- [ ] Include accessibility testing
+- [ ] Add visual regression tests for critical UI
+- [ ] Configure CI/CD integration
+- [ ] Document testing approach for team