agentvibes 3.0.0 → 3.2.0

package/.bmad/bmm/testarch/knowledge/intercept-network-call.md

@@ -0,0 +1,280 @@
+# Intercept Network Call Utility
+
+## Principle
+
+Intercept network requests with a single declarative call that returns a Promise. Automatically parse JSON responses, support both spy (observe) and stub (mock) patterns, and use powerful glob pattern matching for URL filtering.
+
+## Rationale
+
+Vanilla Playwright's network interception requires multiple steps:
+
+- `page.route()` to setup, `page.waitForResponse()` to capture
+- Manual JSON parsing
+- Verbose syntax for conditional handling
+- Complex filter predicates
+
+The `interceptNetworkCall` utility provides:
+
+- **Single declarative call**: Setup and wait in one statement
+- **Automatic JSON parsing**: Response pre-parsed, strongly typed
+- **Flexible URL patterns**: Glob matching with picomatch
+- **Spy or stub modes**: Observe real traffic or mock responses
+- **Concise API**: Reduces boilerplate by 60-70%
+
+## Pattern Examples
+
+### Example 1: Spy on Network (Observe Real Traffic)
+
+**Context**: Capture and inspect real API responses for validation.
+
+**Implementation**:
+
+```typescript
+import { test } from '@seontechnologies/playwright-utils/intercept-network-call/fixtures';
+
+test('should spy on users API', async ({ page, interceptNetworkCall }) => {
+  // Setup interception BEFORE navigation
+  const usersCall = interceptNetworkCall({
+    url: '**/api/users', // Glob pattern
+  });
+
+  await page.goto('/dashboard');
+
+  // Wait for response and access parsed data
+  const { responseJson, status } = await usersCall;
+
+  expect(status).toBe(200);
+  expect(responseJson).toHaveLength(10);
+  expect(responseJson[0]).toHaveProperty('name');
+});
+```
+
+**Key Points**:
+
+- Intercept before navigation (critical for race-free tests)
+- Returns Promise with `{ responseJson, status, requestBody }`
+- Glob patterns (`**` matches any path segment)
+- JSON automatically parsed
+
+### Example 2: Stub Network (Mock Response)
+
+**Context**: Mock API responses for testing UI behavior without backend.
+
+**Implementation**:
+
+```typescript
+test('should stub users API', async ({ page, interceptNetworkCall }) => {
+  const mockUsers = [
+    { id: 1, name: 'Test User 1' },
+    { id: 2, name: 'Test User 2' },
+  ];
+
+  const usersCall = interceptNetworkCall({
+    url: '**/api/users',
+    fulfillResponse: {
+      status: 200,
+      body: mockUsers,
+    },
+  });
+
+  await page.goto('/dashboard');
+  await usersCall;
+
+  // UI shows mocked data
+  await expect(page.getByText('Test User 1')).toBeVisible();
+  await expect(page.getByText('Test User 2')).toBeVisible();
+});
+```
+
+**Key Points**:
+
+- `fulfillResponse` mocks the API
+- No backend needed
+- Test UI logic in isolation
+- Status code and body fully controllable
+
+### Example 3: Conditional Response Handling
+
+**Context**: Different responses based on request method or parameters.
+
+**Implementation**:
+
+```typescript
+test('conditional mocking', async ({ page, interceptNetworkCall }) => {
+  await interceptNetworkCall({
+    url: '**/api/data',
+    handler: async (route, request) => {
+      if (request.method() === 'POST') {
+        // Mock POST success
+        await route.fulfill({
+          status: 201,
+          body: JSON.stringify({ id: 'new-id', success: true }),
+        });
+      } else if (request.method() === 'GET') {
+        // Mock GET with data
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify([{ id: 1, name: 'Item' }]),
+        });
+      } else {
+        // Let other methods through
+        await route.continue();
+      }
+    },
+  });
+
+  await page.goto('/data-page');
+});
+```
+
+**Key Points**:
+
+- `handler` function for complex logic
+- Access full `route` and `request` objects
+- Can mock, continue, or abort
+- Flexible for advanced scenarios
+
+### Example 4: Error Simulation
+
+**Context**: Testing error handling in UI when API fails.
+
+**Implementation**:
+
+```typescript
+test('should handle API errors gracefully', async ({ page, interceptNetworkCall }) => {
+  // Simulate 500 error
+  const errorCall = interceptNetworkCall({
+    url: '**/api/users',
+    fulfillResponse: {
+      status: 500,
+      body: { error: 'Internal Server Error' },
+    },
+  });
+
+  await page.goto('/dashboard');
+  await errorCall;
+
+  // Verify UI shows error state
+  await expect(page.getByText('Failed to load users')).toBeVisible();
+  await expect(page.getByTestId('retry-button')).toBeVisible();
+});
+
+// Simulate network timeout
+test('should handle timeout', async ({ page, interceptNetworkCall }) => {
+  await interceptNetworkCall({
+    url: '**/api/slow',
+    handler: async (route) => {
+      // Never respond - simulates timeout
+      await new Promise(() => {});
+    },
+  });
+
+  await page.goto('/slow-page');
+
+  // UI should show timeout error
+  await expect(page.getByText('Request timed out')).toBeVisible({ timeout: 10000 });
+});
+```
+
+**Key Points**:
+
+- Mock error statuses (4xx, 5xx)
+- Test timeout scenarios
+- Validate error UI states
+- No real failures needed
+
+### Example 5: Multiple Intercepts (Order Matters!)
+
+**Context**: Intercepting different endpoints in same test - setup order is critical.
+
+**Implementation**:
+
+```typescript
+test('multiple intercepts', async ({ page, interceptNetworkCall }) => {
+  // ✅ CORRECT: Setup all intercepts BEFORE navigation
+  const usersCall = interceptNetworkCall({ url: '**/api/users' });
+  const productsCall = interceptNetworkCall({ url: '**/api/products' });
+  const ordersCall = interceptNetworkCall({ url: '**/api/orders' });
+
+  // THEN navigate
+  await page.goto('/dashboard');
+
+  // Wait for all (or specific ones)
+  const [users, products] = await Promise.all([usersCall, productsCall]);
+
+  expect(users.responseJson).toHaveLength(10);
+  expect(products.responseJson).toHaveLength(50);
+});
+```
+
+**Key Points**:
+
+- Setup all intercepts before triggering actions
+- Use `Promise.all()` to wait for multiple calls
+- Order: intercept → navigate → await
+- Prevents race conditions
+
+## URL Pattern Matching
+
+**Supported glob patterns:**
+
+```typescript
+'**/api/users'; // Any path ending with /api/users
+'/api/users'; // Exact match
+'**/users/*'; // Any users sub-path
+'**/api/{users,products}'; // Either users or products
+'**/api/users?id=*'; // With query params
+```
+
+**Uses picomatch library** - same pattern syntax as Playwright's `page.route()` but cleaner API.
+
+## Comparison with Vanilla Playwright
+
+| Vanilla Playwright                                          | intercept-network-call                                       |
+| ----------------------------------------------------------- | ------------------------------------------------------------ |
+| `await page.route('/api/users', route => route.continue())` | `const call = interceptNetworkCall({ url: '**/api/users' })` |
+| `const resp = await page.waitForResponse('/api/users')`     | (Combined in single statement)                               |
+| `const json = await resp.json()`                            | `const { responseJson } = await call`                        |
+| `const status = resp.status()`                              | `const { status } = await call`                              |
+| Complex filter predicates                                   | Simple glob patterns                                         |
+
+**Reduction:** ~5-7 lines → ~2-3 lines per interception
+
+## Related Fragments
+
+- `network-first.md` - Core pattern: intercept before navigate
+- `network-recorder.md` - HAR-based offline testing
+- `overview.md` - Fixture composition basics
+
+## Anti-Patterns
+
+**❌ Intercepting after navigation:**
+
+```typescript
+await page.goto('/dashboard'); // Navigation starts
+const usersCall = interceptNetworkCall({ url: '**/api/users' }); // Too late!
+```
+
+**✅ Intercept before navigate:**
+
+```typescript
+const usersCall = interceptNetworkCall({ url: '**/api/users' }); // First
+await page.goto('/dashboard'); // Then navigate
+const { responseJson } = await usersCall; // Then await
+```
+
+**❌ Ignoring the returned Promise:**
+
+```typescript
+interceptNetworkCall({ url: '**/api/users' }); // Not awaited!
+await page.goto('/dashboard');
+// No deterministic wait - race condition
+```
+
+**✅ Always await the intercept:**
+
+```typescript
+const usersCall = interceptNetworkCall({ url: '**/api/users' });
+await page.goto('/dashboard');
+await usersCall; // Deterministic wait
+```

package/.bmad/bmm/testarch/knowledge/log.md

@@ -0,0 +1,294 @@
+# Log Utility
+
+## Principle
+
+Use structured logging that integrates with Playwright's test reports. Support object logging, test step decoration, and multiple log levels (info, step, success, warning, error, debug).
+
+## Rationale
+
+Console.log in Playwright tests has limitations:
+
+- Not visible in HTML reports
+- No test step integration
+- No structured output
+- Lost in terminal noise during CI
+
+The `log` utility provides:
+
+- **Report integration**: Logs appear in Playwright HTML reports
+- **Test step decoration**: `log.step()` creates collapsible steps in UI
+- **Object logging**: Automatically formats objects/arrays
+- **Multiple levels**: info, step, success, warning, error, debug
+- **Optional console**: Can disable console output but keep report logs
+
+## Pattern Examples
+
+### Example 1: Basic Logging Levels
+
+**Context**: Log different types of messages throughout test execution.
+
+**Implementation**:
+
+```typescript
+import { log } from '@seontechnologies/playwright-utils';
+
+test('logging demo', async ({ page }) => {
+  await log.step('Navigate to login page');
+  await page.goto('/login');
+
+  await log.info('Entering credentials');
+  await page.fill('#username', 'testuser');
+
+  await log.success('Login successful');
+
+  await log.warning('Rate limit approaching');
+
+  await log.debug({ userId: '123', sessionId: 'abc' });
+
+  // Errors still throw but get logged first
+  try {
+    await page.click('#nonexistent');
+  } catch (error) {
+    await log.error('Click failed', false); // false = no console output
+    throw error;
+  }
+});
+```
+
+**Key Points**:
+
+- `step()` creates collapsible steps in Playwright UI
+- `info()`, `success()`, `warning()` for different message types
+- `debug()` for detailed data (objects/arrays)
+- `error()` with optional console suppression
+- All logs appear in test reports
+
+### Example 2: Object and Array Logging
+
+**Context**: Log structured data for debugging without cluttering console.
+
+**Implementation**:
+
+```typescript
+test('object logging', async ({ apiRequest }) => {
+  const { body } = await apiRequest({
+    method: 'GET',
+    path: '/api/users',
+  });
+
+  // Log array of objects
+  await log.debug(body); // Formatted as JSON in report
+
+  // Log specific object
+  await log.info({
+    totalUsers: body.length,
+    firstUser: body[0]?.name,
+    timestamp: new Date().toISOString(),
+  });
+
+  // Complex nested structures
+  await log.debug({
+    request: {
+      method: 'GET',
+      path: '/api/users',
+      timestamp: Date.now(),
+    },
+    response: {
+      status: 200,
+      body: body.slice(0, 3), // First 3 items
+    },
+  });
+});
+```
+
+**Key Points**:
+
+- Objects auto-formatted as pretty JSON
+- Arrays handled gracefully
+- Nested structures supported
+- All visible in Playwright report attachments
+
+### Example 3: Test Step Organization
+
+**Context**: Organize test execution into collapsible steps for better readability in reports.
+
+**Implementation**:
+
+```typescript
+test('organized with steps', async ({ page, apiRequest }) => {
+  await log.step('ARRANGE: Setup test data');
+  const { body: user } = await apiRequest({
+    method: 'POST',
+    path: '/api/users',
+    body: { name: 'Test User' },
+  });
+
+  await log.step('ACT: Perform user action');
+  await page.goto(`/users/${user.id}`);
+  await page.click('#edit');
+  await page.fill('#name', 'Updated Name');
+  await page.click('#save');
+
+  await log.step('ASSERT: Verify changes');
+  await expect(page.getByText('Updated Name')).toBeVisible();
+
+  // In Playwright UI, each step is collapsible
+});
+```
+
+**Key Points**:
+
+- `log.step()` creates collapsible sections
+- Organize by Arrange-Act-Assert
+- Steps visible in Playwright trace viewer
+- Better debugging when tests fail
+
+### Example 4: Conditional Logging
+
+**Context**: Log different messages based on environment or test conditions.
+
+**Implementation**:
+
+```typescript
+test('conditional logging', async ({ page }) => {
+  const isCI = process.env.CI === 'true';
+
+  if (isCI) {
+    await log.info('Running in CI environment');
+  } else {
+    await log.debug('Running locally');
+  }
+
+  const isKafkaWorking = await checkKafkaHealth();
+
+  if (!isKafkaWorking) {
+    await log.warning('Kafka unavailable - skipping event checks');
+  } else {
+    await log.step('Verifying Kafka events');
+    // ... event verification
+  }
+});
+```
+
+**Key Points**:
+
+- Log based on environment
+- Skip logging with conditionals
+- Use appropriate log levels
+- Debug info for local, minimal for CI
+
+### Example 5: Integration with Auth and API
+
+**Context**: Log authenticated API requests with tokens (safely).
+
+**Implementation**:
+
+```typescript
+import { test } from '@seontechnologies/playwright-utils/fixtures';
+
+// Helper to create safe token preview
+function createTokenPreview(token: string): string {
+  if (!token || token.length < 10) return '[invalid]';
+  return `${token.slice(0, 6)}...${token.slice(-4)}`;
+}
+
+test('should log auth flow', async ({ authToken, apiRequest }) => {
+  await log.info(`Using token: ${createTokenPreview(authToken)}`);
+
+  await log.step('Fetch protected resource');
+  const { status, body } = await apiRequest({
+    method: 'GET',
+    path: '/api/protected',
+    headers: { Authorization: `Bearer ${authToken}` },
+  });
+
+  await log.debug({
+    status,
+    bodyPreview: {
+      id: body.id,
+      recordCount: body.data?.length,
+    },
+  });
+
+  await log.success('Protected resource accessed successfully');
+});
+```
+
+**Key Points**:
+
+- Never log full tokens (security risk)
+- Use preview functions for sensitive data
+- Combine with auth and API utilities
+- Log at appropriate detail level
+
+## Log Levels Guide
+
+| Level     | When to Use                         | Shows in Report      | Shows in Console |
+| --------- | ----------------------------------- | -------------------- | ---------------- |
+| `step`    | Test organization, major actions    | ✅ Collapsible steps | ✅ Yes           |
+| `info`    | General information, state changes  | ✅ Yes               | ✅ Yes           |
+| `success` | Successful operations               | ✅ Yes               | ✅ Yes           |
+| `warning` | Non-critical issues, skipped checks | ✅ Yes               | ✅ Yes           |
+| `error`   | Failures, exceptions                | ✅ Yes               | ✅ Configurable  |
+| `debug`   | Detailed data, objects              | ✅ Yes (attached)    | ✅ Configurable  |
+
+## Comparison with console.log
+
+| console.log             | log Utility               |
+| ----------------------- | ------------------------- |
+| Not in reports          | Appears in reports        |
+| No test steps           | Creates collapsible steps |
+| Manual JSON.stringify() | Auto-formats objects      |
+| No log levels           | 6 log levels              |
+| Lost in CI output       | Preserved in artifacts    |
+
+## Related Fragments
+
+- `overview.md` - Basic usage and imports
+- `api-request.md` - Log API requests
+- `auth-session.md` - Log auth flow (safely)
+- `recurse.md` - Log polling progress
+
+## Anti-Patterns
+
+**❌ Logging objects in steps:**
+
+```typescript
+await log.step({ user: 'test', action: 'create' }); // Shows empty in UI
+```
+
+**✅ Use strings for steps, objects for debug:**
+
+```typescript
+await log.step('Creating user: test'); // Readable in UI
+await log.debug({ user: 'test', action: 'create' }); // Detailed data
+```
+
+**❌ Logging sensitive data:**
+
+```typescript
+await log.info(`Password: ${password}`); // Security risk!
+await log.info(`Token: ${authToken}`); // Full token exposed!
+```
+
+**✅ Use previews or omit sensitive data:**
+
+```typescript
+await log.info('User authenticated successfully'); // No sensitive data
+await log.debug({ tokenPreview: token.slice(0, 6) + '...' });
+```
+
+**❌ Excessive logging in loops:**
+
+```typescript
+for (const item of items) {
+  await log.info(`Processing ${item.id}`); // 100 log entries!
+}
+```
+
+**✅ Log summary or use debug level:**
+
+```typescript
+await log.step(`Processing ${items.length} items`);
+await log.debug({ itemIds: items.map((i) => i.id) }); // One log entry
+```