cokit-cli 1.0.8 → 1.2.0

package/skills/web-testing/references/e2e-testing-playwright.md

@@ -0,0 +1,119 @@
+# E2E Testing with Playwright
+
+## Setup
+
+```bash
+npm init playwright@latest
+npx playwright install
+```
+
+## Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('User Login', () => {
+  test('should login successfully', async ({ page }) => {
+    await page.goto('/login');
+    await page.getByLabel('Email').fill('user@example.com');
+    await page.getByLabel('Password').fill('password123');
+    await page.getByRole('button', { name: 'Login' }).click();
+    await expect(page).toHaveURL('/dashboard');
+  });
+});
+```
+
+## Selector Priority (Accessibility-First)
+
+1. `getByRole('button', { name: 'Submit' })` - Most preferred
+2. `getByLabel('Email')` - Form fields
+3. `getByPlaceholderText('Search')` - Inputs
+4. `getByText('Welcome')` - Static text
+5. `getByTestId('submit-btn')` - Last resort
+
+## Advanced Fixtures
+
+### Worker-Scoped Authentication
+
+```typescript
+// fixtures/auth.ts
+export const test = baseTest.extend<{ authPage: Page }>({
+  authPage: [async ({ browser, request }, use, testInfo) => {
+    // API login per worker
+    const res = await request.post('/api/auth', {
+      data: { email: 'test@example.com', password: 'pass' }
+    });
+    const { token } = await res.json();
+
+    const context = await browser.newContext();
+    await context.addCookies([
+      { name: 'token', value: token, domain: 'localhost', path: '/' }
+    ]);
+    const page = await context.newPage();
+    await use(page);
+    await context.close();
+  }, { scope: 'worker' }]
+});
+```
+
+### Database Seeding Fixture
+
+```typescript
+// See ./database-testing.md for Testcontainers patterns
+```
+
+## Network Patterns
+
+### Wait for API
+
+```typescript
+const responsePromise = page.waitForResponse('**/api/users');
+await page.click('button:text("Load")');
+await responsePromise;
+```
+
+### Mock API
+
+```typescript
+await page.route('**/api/users', route =>
+  route.fulfill({ status: 200, body: JSON.stringify([]) })
+);
+```
+
+## Configuration
+
+```typescript
+export default defineConfig({
+  workers: process.env.CI ? 1 : undefined,
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+## Sharding (CI)
+
+```bash
+npx playwright test --shard=1/4
+npx playwright test --shard=2/4
+```
+
+## Commands
+
+```bash
+npx playwright test                    # Run all
+npx playwright test --ui               # UI mode
+npx playwright test --project=chromium # Specific browser
+npx playwright codegen https://example.com  # Generate
+npx playwright show-report             # View report
+```
+
+## Related
+
+- `./playwright-component-testing.md` - CT patterns
+- `./playwright-fixtures-advanced.md` - Complex fixtures
+- `./database-testing.md` - DB fixtures

package/skills/web-testing/references/functional-testing-checklist.md

@@ -0,0 +1,88 @@
+# Functional Testing Checklist
+
+## Core Features
+
+- [ ] Primary user workflows execute end-to-end
+- [ ] CRUD operations work (create, read, update, delete)
+- [ ] Error states handled gracefully
+- [ ] Validation rules enforced (email, phone, dates)
+- [ ] Search/filter functions correctly
+- [ ] Sorting works in both directions
+- [ ] Pagination displays correct data
+
+## User Workflows
+
+- [ ] Signup flow completes successfully
+- [ ] Login flow works with valid credentials
+- [ ] Password reset flow sends email and resets
+- [ ] Multi-step forms retain data between steps
+- [ ] Data persists after page refresh/navigation
+- [ ] Logout clears session completely
+- [ ] Deep links work correctly
+
+## Business Logic
+
+- [ ] Calculations correct (totals, discounts, taxes)
+- [ ] Rules enforced (age verification, region restrictions)
+- [ ] Edge cases handled (zero, negative, max values)
+- [ ] Date/time operations account for timezones
+- [ ] Currency formatting correct
+- [ ] Quantity limits enforced
+
+## Form Validation
+
+- [ ] Required fields show error when empty
+- [ ] Email format validation works
+- [ ] Password strength requirements shown
+- [ ] Phone number format accepted
+- [ ] Date picker prevents invalid dates
+- [ ] File upload validates type/size
+- [ ] Form submits only when valid
+
+## Integration Points
+
+- [ ] API calls succeed with correct parameters
+- [ ] Database operations persist
+- [ ] Third-party integrations work (payment, auth)
+- [ ] Error responses handled gracefully
+- [ ] Loading states displayed during async ops
+- [ ] Timeout handling for slow responses
+- [ ] Retry logic works on failures
+
+## Error Handling
+
+- [ ] Network errors show retry option
+- [ ] Invalid input shows helpful message
+- [ ] 401 errors trigger re-authentication
+- [ ] 403 errors show access denied
+- [ ] 404 errors show not found page
+- [ ] 500 errors logged, user sees friendly message
+- [ ] Validation errors highlight specific fields
+
+## State Management
+
+- [ ] URL reflects application state
+- [ ] Browser back/forward works correctly
+- [ ] Bookmarking preserves state
+- [ ] Shared links open correct view
+- [ ] State persists through refresh (when appropriate)
+
+## Test Priority Matrix
+
+| Priority | Category | Examples |
+|----------|----------|----------|
+| P0 (Critical) | Core flows | Signup, login, checkout, payment |
+| P1 (High) | Major features | Search, CRUD, navigation |
+| P2 (Medium) | Secondary features | Filters, sorting, pagination |
+| P3 (Low) | Edge cases | Empty states, max limits |
+
+## Test Data Checklist
+
+- [ ] Happy path data
+- [ ] Empty/null values
+- [ ] Boundary values (min, max)
+- [ ] Invalid data types
+- [ ] Unicode/special characters
+- [ ] Long strings
+- [ ] Whitespace (leading, trailing)
+- [ ] Duplicate data scenarios

package/skills/web-testing/references/interactive-testing-patterns.md

@@ -0,0 +1,89 @@
+# Interactive Testing Patterns
+
+## Form Testing
+
+```javascript
+// Text input validation
+test('validates email format', async ({ page }) => {
+  await page.fill('[name="email"]', 'invalid');
+  await page.click('button[type="submit"]');
+  await expect(page.locator('.error')).toContainText('Invalid email');
+});
+
+// Select dropdowns
+await page.selectOption('select#country', 'US');
+await page.selectOption('select#country', { label: 'United States' });
+await page.selectOption('select#tags', ['tag1', 'tag2']); // Multi-select
+
+// Checkboxes & radios
+await page.check('input[name="terms"]');
+await expect(page.locator('input[name="terms"]')).toBeChecked();
+await page.uncheck('input[name="newsletter"]');
+await page.check('input[value="premium"]'); // Radio
+
+// File uploads
+await page.setInputFiles('input[type="file"]', 'path/to/file.pdf');
+await page.setInputFiles('input[type="file"]', ['file1.pdf', 'file2.pdf']);
+
+// Date picker
+await page.fill('input[type="date"]', '2025-12-25');
+await page.click('.date-picker-trigger');
+await page.click('.calendar-day:text("25")');
+```
+
+## Keyboard Navigation
+
+```javascript
+test('keyboard accessibility', async ({ page }) => {
+  await page.keyboard.press('Tab');
+  await expect(page.locator(':focus')).toHaveAttribute('data-testid', 'first-btn');
+  await page.keyboard.press('Enter'); // Activate
+  await page.keyboard.press('Escape'); // Close modal
+  await page.keyboard.press('Shift+Tab'); // Navigate backward
+});
+```
+
+## Drag & Drop
+
+```javascript
+await page.dragAndDrop('#source', '#target');
+
+// Manual control
+const source = page.locator('#draggable');
+await source.hover();
+await page.mouse.down();
+await page.locator('#dropzone').hover();
+await page.mouse.up();
+```
+
+## Hover & Modals
+
+```javascript
+await button.hover();
+await expect(page.locator('.tooltip')).toBeVisible();
+
+// Modal workflow
+await page.click('button:text("Open")');
+await expect(page.locator('[role="dialog"]')).toBeVisible();
+await page.click('[aria-label="Close"]');
+await expect(page.locator('[role="dialog"]')).not.toBeVisible();
+```
+
+## Scroll & Wait Patterns
+
+```javascript
+await page.locator('#footer').scrollIntoViewIfNeeded();
+await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+
+// Wait patterns
+await page.waitForLoadState('networkidle');
+await Promise.all([page.waitForResponse('**/api/data'), page.click('button.load')]);
+```
+
+## Disable Animations
+
+```javascript
+await page.addStyleTag({
+  content: '* { animation-duration: 0s !important; transition-duration: 0s !important; }'
+});
+```

package/skills/web-testing/references/load-testing-k6.md

@@ -0,0 +1,93 @@
+# Load Testing with k6
+
+## Installation
+
+```bash
+brew install k6          # macOS
+winget install k6        # Windows
+docker run -i grafana/k6 run - <script.js
+```
+
+## Basic Load Test
+
+```javascript
+import http from 'k6/http';
+import { check, sleep } from 'k6';
+
+export const options = {
+  vus: 10,
+  duration: '30s',
+};
+
+export default function () {
+  const res = http.get('http://localhost:3000/api/users');
+  check(res, {
+    'status is 200': (r) => r.status === 200,
+    'response < 500ms': (r) => r.timings.duration < 500,
+  });
+  sleep(1);
+}
+```
+
+## Stress Test with Stages
+
+```javascript
+export const options = {
+  stages: [
+    { duration: '2m', target: 50 },
+    { duration: '5m', target: 50 },
+    { duration: '2m', target: 100 },
+    { duration: '2m', target: 0 },
+  ],
+  thresholds: {
+    http_req_duration: ['p(95)<500'],
+    http_req_failed: ['rate<0.01'],
+  },
+};
+```
+
+## With Authentication
+
+```javascript
+export function setup() {
+  const res = http.post(`${BASE_URL}/api/login`, {
+    email: 'test@example.com', password: 'password',
+  });
+  return { token: res.json('token') };
+}
+
+export default function (data) {
+  const params = { headers: { Authorization: `Bearer ${data.token}` } };
+  http.get(`${BASE_URL}/api/protected`, params);
+}
+```
+
+## Performance Thresholds
+
+| Metric | Good | Warning |
+|--------|------|---------|
+| p50 latency | <200ms | <500ms |
+| p95 latency | <500ms | <1s |
+| Error rate | <0.1% | <1% |
+
+## Commands
+
+```bash
+k6 run script.js
+k6 run --out json=results.json script.js
+k6 cloud script.js  # Grafana Cloud
+```
+
+## Artillery Alternative
+
+```yaml
+config:
+  target: 'http://localhost:3000'
+  phases: [{ duration: 60, arrivalRate: 10 }]
+scenarios:
+  - flow: [{ get: { url: '/api/users' } }]
+```
+
+```bash
+npx artillery run artillery.yml
+```

package/skills/web-testing/references/mobile-gesture-testing.md

@@ -0,0 +1,85 @@
+# Mobile Gesture Testing
+
+## Touch Gestures
+
+### Single-Finger
+
+```javascript
+await page.tap('button.submit');                    // Tap
+await page.locator('button').click({ delay: 1000 }); // Long press
+
+// Swipe simulation
+await page.evaluate(() => {
+  const el = document.querySelector('.carousel');
+  el.dispatchEvent(new TouchEvent('touchstart', { touches: [{ clientX: 200, clientY: 100 }] }));
+  el.dispatchEvent(new TouchEvent('touchend', { touches: [{ clientX: 50, clientY: 100 }] }));
+});
+```
+
+### Multi-Finger (Pinch/Zoom)
+
+```javascript
+await page.evaluate(() => {
+  const el = document.querySelector('[data-zoomable]');
+  const touch1 = { identifier: 0, clientX: 100, clientY: 100 };
+  const touch2 = { identifier: 1, clientX: 120, clientY: 100 };
+  el.dispatchEvent(new TouchEvent('touchstart', { touches: [touch1, touch2] }));
+  touch1.clientX = 50; touch2.clientX = 170; // Fingers apart = zoom in
+  el.dispatchEvent(new TouchEvent('touchmove', { touches: [touch1, touch2] }));
+});
+```
+
+## Orientation Testing
+
+```javascript
+const orientations = [
+  { width: 390, height: 844 },  // Portrait
+  { width: 844, height: 390 },  // Landscape
+];
+
+for (const size of orientations) {
+  await page.setViewportSize(size);
+  await expect(page).toHaveScreenshot(`mobile-${size.width}.png`);
+}
+```
+
+## Device Emulation
+
+```typescript
+// playwright.config.ts
+import { devices } from '@playwright/test';
+
+export default defineConfig({
+  projects: [
+    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
+    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
+  ],
+});
+```
+
+## Touch Target Checklist
+
+- [ ] Minimum 44x44px touch targets
+- [ ] No overlapping touch areas
+- [ ] Sufficient spacing between buttons
+- [ ] Swipe gestures have clear affordances
+
+## Real Device Gaps
+
+Emulators miss: network throttling, touch latency, gesture recognition variations.
+
+**Minimum real device testing:** iPhone (Safari iOS), Android flagship (Chrome)
+
+## Device Farm Services
+
+| Service | Devices |
+|---------|---------|
+| BrowserStack | 3000+ |
+| Sauce Labs | 2000+ |
+| AWS Device Farm | 200+ |
+
+## Commands
+
+```bash
+npx playwright test --project=mobile-chrome --project=mobile-safari
+```

package/skills/web-testing/references/performance-core-web-vitals.md

@@ -0,0 +1,124 @@
+# Performance & Core Web Vitals Testing
+
+## Core Web Vitals (2024 Targets)
+
+| Metric | Target | Description |
+|--------|--------|-------------|
+| LCP | < 2.5s | Largest Contentful Paint |
+| CLS | < 0.1 | Cumulative Layout Shift |
+| INP | < 200ms | Interaction to Next Paint (replaced FID) |
+
+## Lighthouse CI Setup
+
+```json
+// lighthouserc.json
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:3000", "http://localhost:3000/dashboard"],
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "preset": "lighthouse:recommended",
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.9 }],
+        "largest-contentful-paint": ["warn", { "maxNumericValue": 2500 }],
+        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
+        "interactive": ["warn", { "maxNumericValue": 3800 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}
+```
+
+## GitHub Actions Integration
+
+```yaml
+performance:
+  runs-on: ubuntu-latest
+  steps:
+    - uses: actions/checkout@v4
+    - run: npm ci && npm run build
+    - run: npm install -g @lhci/cli
+    - run: lhci autorun
+      env:
+        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}
+```
+
+## Playwright Performance Test
+
+```typescript
+test('measure Core Web Vitals', async ({ page }) => {
+  await page.goto('/');
+
+  const metrics = await page.evaluate(() => {
+    return new Promise((resolve) => {
+      new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        const lcp = entries.find(e => e.entryType === 'largest-contentful-paint');
+        resolve({ lcp: lcp?.startTime });
+      }).observe({ type: 'largest-contentful-paint', buffered: true });
+    });
+  });
+
+  expect(metrics.lcp).toBeLessThan(2500);
+});
+```
+
+## INP Measurement
+
+```typescript
+test('interaction responsiveness', async ({ page }) => {
+  await page.goto('/');
+
+  const inp = await page.evaluate(() => {
+    return new Promise((resolve) => {
+      let maxINP = 0;
+      new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          maxINP = Math.max(maxINP, entry.duration);
+        }
+        resolve(maxINP);
+      }).observe({ type: 'event', buffered: true, durationThreshold: 16 });
+
+      // Trigger interactions
+      document.querySelector('button')?.click();
+      setTimeout(() => resolve(maxINP), 1000);
+    });
+  });
+
+  expect(inp).toBeLessThan(200);
+});
+```
+
+## Quick Commands
+
+```bash
+npx lighthouse https://example.com --output=json
+npx @lhci/cli autorun
+npx bundlesize                    # Bundle size check
+npx webpack-bundle-analyzer stats.json
+```
+
+## Optimization Checklist
+
+### LCP
+- [ ] Lazy load below-fold images
+- [ ] Preload critical resources (`<link rel="preload">`)
+- [ ] Use CDN for static assets
+- [ ] Optimize server response time
+
+### CLS
+- [ ] Set explicit width/height on images
+- [ ] Reserve space for dynamic content
+- [ ] Use `font-display: swap` or `optional`
+- [ ] Avoid inserting content above existing
+
+### INP
+- [ ] Break long JavaScript tasks (<50ms)
+- [ ] Use `requestIdleCallback` for non-critical work
+- [ ] Implement code splitting
+- [ ] Debounce rapid user interactions

package/skills/web-testing/references/playwright-component-testing.md

@@ -0,0 +1,115 @@
+# Playwright Component Testing
+
+## Status
+
+**Production-ready** as of 2024. No longer experimental.
+
+## Setup
+
+```bash
+npm init playwright@latest -- --ct
+```
+
+## Configuration
+
+```typescript
+// playwright-ct.config.ts
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+export default defineConfig({
+  testDir: './src',
+  use: {
+    ctPort: 3100,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+});
+```
+
+## Basic Test
+
+```typescript
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Button } from './Button';
+
+test('renders button with text', async ({ mount }) => {
+  const component = await mount(<Button>Click me</Button>);
+  await expect(component).toContainText('Click me');
+});
+
+test('handles click event', async ({ mount }) => {
+  let clicked = false;
+  const component = await mount(
+    <Button onClick={() => clicked = true}>Click</Button>
+  );
+  await component.click();
+  expect(clicked).toBe(true);
+});
+```
+
+## With Props and State
+
+```typescript
+test('counter increments', async ({ mount }) => {
+  const component = await mount(<Counter initial={0} />);
+  await expect(component.getByTestId('count')).toHaveText('0');
+  await component.getByRole('button', { name: 'Increment' }).click();
+  await expect(component.getByTestId('count')).toHaveText('1');
+});
+```
+
+## Visual Regression
+
+```typescript
+test('button styles', async ({ mount }) => {
+  const component = await mount(<Button variant="primary">Submit</Button>);
+  await expect(component).toHaveScreenshot('button-primary.png');
+});
+```
+
+## Mocking
+
+```typescript
+test('with mocked data', async ({ mount }) => {
+  const component = await mount(
+    <UserContext.Provider value={{ user: { name: 'Test' } }}>
+      <Profile />
+    </UserContext.Provider>
+  );
+  await expect(component).toContainText('Test');
+});
+```
+
+## When to Use CT vs E2E
+
+| Use CT When | Use E2E When |
+|-------------|--------------|
+| Testing isolated components | Testing user flows |
+| Visual regression on components | Navigation, routing |
+| Component interactions | Full page behavior |
+| Fast feedback during dev | Integration with backend |
+
+## When to Use CT vs Vitest
+
+| Use CT When | Use Vitest When |
+|-------------|-----------------|
+| Real browser needed | Speed is priority |
+| Cross-browser testing | Unit testing logic |
+| CSS/layout verification | Mocking is simpler |
+| Complex DOM interactions | jsdom is sufficient |
+
+## Limitations
+
+- Complex object passing requires serialization
+- Slower than jsdom-based tests
+- Watch mode less efficient than Vitest
+
+## Commands
+
+```bash
+npx playwright test -c playwright-ct.config.ts
+npx playwright test -c playwright-ct.config.ts --ui
+```