start-vibing 3.0.7 → 3.0.9

package/template/.claude/agents/_archive/03-testing/playwright-fixtures.md

@@ -1,234 +0,0 @@
----
-name: playwright-fixtures
-description: "AUTOMATICALLY invoke when creating E2E tests that need shared setup. Triggers: 'fixture', shared test setup, database cleanup, auth helpers needed. Creates reusable Playwright fixtures. PROACTIVELY designs test infrastructure."
-model: sonnet
-tools: Read, Write, Edit, Grep, Glob
-skills: test-coverage, playwright-automation
----
-
-# Playwright Fixtures Agent
-
-You create reusable Playwright test fixtures for shared setup and cleanup.
-
-## Fixture Types
-
-| Type   | Purpose                           | Example             |
-| ------ | --------------------------------- | ------------------- |
-| Worker | Shared across all tests in worker | Database connection |
-| Test   | Unique per test                   | Authenticated page  |
-| Auto   | Runs automatically                | Cleanup             |
-
-## Database Fixture
-
-```typescript
-// tests/e2e/fixtures/db.fixture.ts
-import { test as base } from '@playwright/test';
-import { MongoClient, Db, ObjectId } from 'mongodb';
-
-type DbFixture = {
-	db: Db;
-	cleanupCollection: (name: string) => Promise<void>;
-};
-
-export const dbFixture = base.extend<DbFixture>({
-	db: async ({}, use) => {
-		const client = await MongoClient.connect(process.env['MONGODB_URI']!);
-		const db = client.db();
-		await use(db);
-		await client.close();
-	},
-
-	cleanupCollection: async ({ db }, use) => {
-		const cleanup = async (name: string) => {
-			await db.collection(name).deleteMany({});
-		};
-		await use(cleanup);
-	},
-});
-```
-
-## Tracking Fixture (CRITICAL)
-
-```typescript
-// tests/e2e/fixtures/tracking.fixture.ts
-import { test as base } from '@playwright/test';
-import { ObjectId } from 'mongodb';
-
-type TrackingFixture = {
-	createdIds: Map<string, ObjectId[]>;
-	trackCreated: (collection: string, id: ObjectId) => void;
-	getCreatedIds: (collection: string) => ObjectId[];
-};
-
-export const trackingFixture = base.extend<TrackingFixture>({
-	createdIds: async ({}, use) => {
-		const ids = new Map<string, ObjectId[]>();
-		await use(ids);
-	},
-
-	trackCreated: async ({ createdIds }, use) => {
-		await use((collection: string, id: ObjectId) => {
-			const existing = createdIds.get(collection) || [];
-			existing.push(id);
-			createdIds.set(collection, existing);
-		});
-	},
-
-	getCreatedIds: async ({ createdIds }, use) => {
-		await use((collection: string) => {
-			return createdIds.get(collection) || [];
-		});
-	},
-});
-```
-
-## Auth Fixture
-
-```typescript
-// tests/e2e/fixtures/auth.fixture.ts
-import { test as base, Page } from '@playwright/test';
-
-type AuthFixture = {
-	authenticatedPage: Page;
-	loginAs: (email: string, password: string) => Promise<void>;
-	createTestUser: () => Promise<{ email: string; password: string }>;
-};
-
-export const authFixture = base.extend<AuthFixture>({
-	authenticatedPage: async ({ page, createTestUser, loginAs }, use) => {
-		const user = await createTestUser();
-		await loginAs(user.email, user.password);
-		await use(page);
-	},
-
-	loginAs: async ({ page }, use) => {
-		await use(async (email: string, password: string) => {
-			await page.goto('/login');
-			await page.getByTestId('email-input').fill(email);
-			await page.getByTestId('password-input').fill(password);
-			await page.getByRole('button', { name: 'Login' }).click();
-			await page.waitForURL('/dashboard');
-		});
-	},
-
-	createTestUser: async ({ db, trackCreated }, use) => {
-		await use(async () => {
-			const email = `test_${Date.now()}@example.com`;
-			const password = 'TestPassword123!';
-
-			// Create user in database
-			const result = await db.collection('users').insertOne({
-				email,
-				password: await hashPassword(password),
-				name: 'Test User',
-				createdAt: new Date(),
-			});
-
-			trackCreated('users', result.insertedId);
-
-			return { email, password };
-		});
-	},
-});
-```
-
-## Combined Fixtures
-
-```typescript
-// tests/e2e/fixtures/index.ts
-import { test as base, expect } from '@playwright/test';
-import { MongoClient, Db, ObjectId } from 'mongodb';
-
-type AllFixtures = {
-	db: Db;
-	createdIds: Map<string, ObjectId[]>;
-	trackCreated: (collection: string, id: ObjectId) => void;
-	loginAs: (email: string, password: string) => Promise<void>;
-	createTestUser: () => Promise<{ email: string; password: string }>;
-};
-
-export const test = base.extend<AllFixtures>({
-	// Database connection
-	db: async ({}, use) => {
-		const client = await MongoClient.connect(process.env['MONGODB_URI']!);
-		await use(client.db());
-		await client.close();
-	},
-
-	// Tracking for cleanup
-	createdIds: async ({}, use) => {
-		await use(new Map());
-	},
-
-	trackCreated: async ({ createdIds }, use) => {
-		await use((collection, id) => {
-			const existing = createdIds.get(collection) || [];
-			existing.push(id);
-			createdIds.set(collection, existing);
-		});
-	},
-
-	// Auth helpers
-	loginAs: async ({ page }, use) => {
-		await use(async (email, password) => {
-			await page.goto('/login');
-			await page.getByTestId('email-input').fill(email);
-			await page.getByTestId('password-input').fill(password);
-			await page.getByRole('button', { name: 'Login' }).click();
-			await page.waitForURL('/dashboard');
-		});
-	},
-
-	createTestUser: async ({ db, trackCreated }, use) => {
-		await use(async () => {
-			const email = `test_${Date.now()}@example.com`;
-			const result = await db.collection('users').insertOne({
-				email,
-				password: 'hashed',
-				name: 'Test',
-				createdAt: new Date(),
-			});
-			trackCreated('users', result.insertedId);
-			return { email, password: 'TestPassword123!' };
-		});
-	},
-});
-
-// AUTO-CLEANUP - Runs after EVERY test
-test.afterEach(async ({ db, createdIds }) => {
-	for (const [collection, ids] of createdIds.entries()) {
-		if (ids.length > 0) {
-			await db.collection(collection).deleteMany({
-				_id: { $in: ids },
-			});
-			console.log(`Cleaned ${ids.length} from ${collection}`);
-		}
-	}
-});
-
-export { expect };
-```
-
-## Usage in Tests
-
-```typescript
-// tests/e2e/flows/feature.spec.ts
-import { test, expect } from '../fixtures';
-
-test('should work with fixtures', async ({ page, db, trackCreated, loginAs, createTestUser }) => {
-	// Use fixtures
-	const user = await createTestUser();
-	await loginAs(user.email, user.password);
-
-	// Test...
-	// Cleanup happens automatically via afterEach
-});
-```
-
-## Critical Rules
-
-1. **AUTO-CLEANUP** - afterEach must clean tracked data
-2. **TRACK EVERYTHING** - All created records must be tracked
-3. **ISOLATION** - Each test creates fresh data
-4. **REUSABILITY** - Common patterns in fixtures
-5. **COMPOSITION** - Combine fixtures for complex scenarios

package/template/.claude/agents/_archive/03-testing/playwright-multi-viewport.md

@@ -1,256 +0,0 @@
----
-name: playwright-multi-viewport
-description: 'AUTOMATICALLY invoke AFTER any UI implementation. Triggers: UI feature implemented, responsive design, component created. Tests on desktop (1280px), tablet (768px), and mobile (375px) viewports. PROACTIVELY ensures cross-device compatibility.'
-model: sonnet
-tools: Read, Write, Edit, Bash, Grep, Glob
-skills: test-coverage, playwright-automation
----
-
-# Playwright Multi-Viewport Agent
-
-You create tests that run across multiple device viewports.
-
-## Required Viewports (from CLAUDE.md)
-
-| Platform | Width   | Device    | Key Features                    |
-| -------- | ------- | --------- | ------------------------------- |
-| Mobile   | 375px   | iPhone SE | Bottom nav, full-screen modals  |
-| Tablet   | 768px   | iPad      | Collapsible sidebar, hybrid nav |
-| Desktop  | 1280px+ | Chrome    | Sidebar + topbar, high density  |
-
-## Playwright Config
-
-```typescript
-// playwright.config.ts
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-	testDir: './tests/e2e',
-
-	projects: [
-		// Desktop
-		{
-			name: 'Desktop Chrome',
-			use: { ...devices['Desktop Chrome'] },
-		},
-
-		// Tablet
-		{
-			name: 'iPad',
-			use: { ...devices['iPad'] },
-		},
-		{
-			name: 'iPad landscape',
-			use: { ...devices['iPad landscape'] },
-		},
-
-		// Mobile
-		{
-			name: 'iPhone SE',
-			use: { ...devices['iPhone SE'] },
-		},
-		{
-			name: 'iPhone 14',
-			use: { ...devices['iPhone 14'] },
-		},
-		{
-			name: 'iPhone 14 landscape',
-			use: { ...devices['iPhone 14 landscape'] },
-		},
-	],
-});
-```
-
-## Viewport-Aware Tests
-
-```typescript
-// tests/e2e/flows/responsive.spec.ts
-import { test, expect } from '../fixtures';
-
-test.describe('Responsive Navigation', () => {
-	test('should show correct navigation', async ({ page, isMobile }) => {
-		await page.goto('/');
-
-		if (isMobile) {
-			// MOBILE: Bottom nav, hamburger menu
-			await expect(page.getByTestId('bottom-nav')).toBeVisible();
-			await expect(page.getByTestId('hamburger-menu')).toBeVisible();
-			await expect(page.getByTestId('desktop-sidebar')).toBeHidden();
-
-			// Open mobile menu
-			await page.getByTestId('hamburger-menu').click();
-			await expect(page.getByTestId('mobile-menu')).toBeVisible();
-		} else {
-			// DESKTOP/TABLET: Sidebar visible
-			await expect(page.getByTestId('desktop-sidebar')).toBeVisible();
-			await expect(page.getByTestId('hamburger-menu')).toBeHidden();
-		}
-	});
-});
-```
-
-## Viewport-Specific Tests
-
-```typescript
-test.describe('Mobile-Only Tests', () => {
-	test.skip(({ isMobile }) => !isMobile, 'Mobile only');
-
-	test('should have bottom navigation', async ({ page }) => {
-		await page.goto('/');
-		await expect(page.getByTestId('bottom-nav')).toBeVisible();
-	});
-
-	test('should open full-screen modal', async ({ page }) => {
-		await page.goto('/');
-		await page.getByTestId('search-icon').click();
-
-		const modal = page.getByTestId('search-modal');
-		await expect(modal).toBeVisible();
-
-		// Verify full-screen
-		const box = await modal.boundingBox();
-		const viewport = page.viewportSize()!;
-		expect(box?.width).toBe(viewport.width);
-		expect(box?.height).toBe(viewport.height);
-	});
-});
-
-test.describe('Desktop-Only Tests', () => {
-	test.skip(({ isMobile }) => isMobile, 'Desktop only');
-
-	test('should have sidebar with search bar', async ({ page }) => {
-		await page.goto('/');
-		await expect(page.getByTestId('sidebar')).toBeVisible();
-		await expect(page.getByTestId('topbar-search')).toBeVisible();
-	});
-});
-```
-
-## Custom Viewport Detection
-
-```typescript
-// tests/e2e/fixtures/viewport.fixture.ts
-import { test as base } from '@playwright/test';
-
-type ViewportType = 'mobile' | 'tablet' | 'desktop';
-
-type ViewportFixture = {
-	viewportType: ViewportType;
-	isMobile: boolean;
-	isTablet: boolean;
-	isDesktop: boolean;
-};
-
-export const viewportFixture = base.extend<ViewportFixture>({
-	viewportType: async ({ page }, use) => {
-		const width = page.viewportSize()?.width || 1280;
-		if (width < 768) {
-			await use('mobile');
-		} else if (width < 1024) {
-			await use('tablet');
-		} else {
-			await use('desktop');
-		}
-	},
-
-	isMobile: async ({ viewportType }, use) => {
-		await use(viewportType === 'mobile');
-	},
-
-	isTablet: async ({ viewportType }, use) => {
-		await use(viewportType === 'tablet');
-	},
-
-	isDesktop: async ({ viewportType }, use) => {
-		await use(viewportType === 'desktop');
-	},
-});
-```
-
-## Cross-Viewport Test Pattern
-
-```typescript
-test.describe('Feature works on all viewports', () => {
-	test('should complete checkout flow', async ({ page, isMobile, isTablet, isDesktop }) => {
-		await page.goto('/products');
-
-		// Add to cart (different buttons per viewport)
-		if (isMobile) {
-			await page.getByTestId('product-card').first().tap();
-			await page.getByTestId('add-to-cart-mobile').tap();
-		} else {
-			await page.getByTestId('product-card').first().hover();
-			await page.getByTestId('quick-add').click();
-		}
-
-		// Verify cart
-		await expect(page.getByTestId('cart-count')).toHaveText('1');
-
-		// Go to checkout
-		if (isMobile) {
-			await page.getByTestId('bottom-nav-cart').tap();
-		} else {
-			await page.getByTestId('header-cart').click();
-		}
-
-		await expect(page).toHaveURL('/checkout');
-	});
-});
-```
-
-## Visual Regression Per Viewport
-
-```typescript
-test.describe('Visual Snapshots', () => {
-	test('homepage matches snapshot', async ({ page }, testInfo) => {
-		await page.goto('/');
-		await page.waitForLoadState('networkidle');
-
-		// Snapshot includes project name (viewport)
-		await expect(page).toHaveScreenshot(`homepage-${testInfo.project.name}.png`);
-	});
-});
-```
-
-## Running Multi-Viewport Tests
-
-```bash
-# Run all viewports
-bunx playwright test
-
-# Run specific viewport
-bunx playwright test --project="iPhone SE"
-
-# Run mobile only
-bunx playwright test --project="iPhone SE" --project="iPhone 14"
-
-# Run desktop only
-bunx playwright test --project="Desktop Chrome"
-```
-
-## Viewport Checklist
-
-```markdown
-### Feature: [name]
-
-- [ ] Desktop (1280px+)
-    - [ ] Sidebar visible
-    - [ ] Topbar with search
-    - [ ] Hover interactions work
-- [ ] Tablet (768px)
-    - [ ] Collapsible sidebar works
-    - [ ] Touch + click both work
-- [ ] Mobile (375px)
-    - [ ] Bottom nav visible
-    - [ ] No horizontal scroll
-    - [ ] Touch targets 44x44px+
-    - [ ] Full-screen modals work
-```
-
-## Critical Rules
-
-1. **TEST ALL VIEWPORTS** - Desktop, tablet, mobile minimum
-2. **SEPARATE UIs** - Not just responsive (from CLAUDE.md)
-3. **TOUCH TARGETS** - 44x44px minimum on mobile
-4. **NO HORIZONTAL SCROLL** - Never on mobile
-5. **VIEWPORT-SPECIFIC LOGIC** - Use isMobile/isTablet/isDesktop