@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/testing/playwright.md

@@ -1,162 +0,0 @@
-# Playwright E2E Testing Patterns
-
-Patterns for end-to-end testing with Playwright.
-
-## Basic Test
-
-```typescript
-// tests/e2e/login.spec.ts
-import { test, expect } from '@playwright/test'
-
-test('user can log in', async ({ page }) => {
-  await page.goto('/login')
-
-  await page.fill('[name="email"]', 'test@example.com')
-  await page.fill('[name="password"]', 'password123')
-  await page.click('button[type="submit"]')
-
-  await expect(page).toHaveURL('/dashboard')
-  await expect(page.locator('h1')).toContainText('Welcome')
-})
-```
-
-## Page Object Model
-
-```typescript
-// tests/e2e/pages/login.page.ts
-import { Page, Locator } from '@playwright/test'
-
-export class LoginPage {
-  readonly page: Page
-  readonly emailInput: Locator
-  readonly passwordInput: Locator
-  readonly submitButton: Locator
-  readonly errorMessage: Locator
-
-  constructor(page: 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('[role="alert"]')
-  }
-
-  async goto() {
-    await this.page.goto('/login')
-  }
-
-  async login(email: string, password: string) {
-    await this.emailInput.fill(email)
-    await this.passwordInput.fill(password)
-    await this.submitButton.click()
-  }
-}
-
-// Usage in test
-import { LoginPage } from './pages/login.page'
-
-test('login with page object', async ({ page }) => {
-  const loginPage = new LoginPage(page)
-  await loginPage.goto()
-  await loginPage.login('test@example.com', 'password123')
-
-  await expect(page).toHaveURL('/dashboard')
-})
-```
-
-## Authentication State
-
-```typescript
-// tests/e2e/auth.setup.ts
-import { test as setup, expect } from '@playwright/test'
-
-const authFile = 'playwright/.auth/user.json'
-
-setup('authenticate', async ({ page }) => {
-  await page.goto('/login')
-  await page.fill('[name="email"]', process.env.TEST_EMAIL!)
-  await page.fill('[name="password"]', process.env.TEST_PASSWORD!)
-  await page.click('button[type="submit"]')
-
-  await expect(page).toHaveURL('/dashboard')
-
-  // Save auth state
-  await page.context().storageState({ path: authFile })
-})
-
-// playwright.config.ts
-export default defineConfig({
-  projects: [
-    { name: 'setup', testMatch: /.*\.setup\.ts/ },
-    {
-      name: 'chromium',
-      use: {
-        storageState: 'playwright/.auth/user.json'
-      },
-      dependencies: ['setup']
-    }
-  ]
-})
-```
-
-## API Mocking
-
-```typescript
-// tests/e2e/dashboard.spec.ts
-test('displays mocked data', async ({ page }) => {
-  // Mock API response
-  await page.route('/api/users', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify([
-        { id: '1', name: 'Test User' }
-      ])
-    })
-  })
-
-  await page.goto('/dashboard')
-  await expect(page.locator('text=Test User')).toBeVisible()
-})
-```
-
-## Visual Regression
-
-```typescript
-// tests/e2e/visual.spec.ts
-test('homepage visual regression', async ({ page }) => {
-  await page.goto('/')
-
-  // Full page screenshot
-  await expect(page).toHaveScreenshot('homepage.png', {
-    fullPage: true
-  })
-
-  // Element screenshot
-  await expect(page.locator('header')).toHaveScreenshot('header.png')
-})
-```
-
-## Mobile Testing
-
-```typescript
-// tests/e2e/mobile.spec.ts
-import { devices } from '@playwright/test'
-
-test.use({ ...devices['iPhone 13'] })
-
-test('mobile navigation', async ({ page }) => {
-  await page.goto('/')
-
-  // Open mobile menu
-  await page.click('[aria-label="Open menu"]')
-  await expect(page.locator('nav')).toBeVisible()
-})
-```
-
-## When to Use
-
-- User flows (login, checkout)
-- Critical paths
-- Cross-browser testing
-- Visual regression

package/skills/patterns/testing/snapshot.md

@@ -1,175 +0,0 @@
-# Snapshot Testing Patterns
-
-Patterns for snapshot testing with Vitest.
-
-## Basic Snapshot
-
-```typescript
-// tests/components/Button.test.tsx
-import { render } from '@testing-library/react'
-import { Button } from '@/components/ui/Button'
-
-it('renders correctly', () => {
-  const { container } = render(<Button>Click me</Button>)
-  expect(container).toMatchSnapshot()
-})
-```
-
-## Inline Snapshots
-
-```typescript
-// More readable for small outputs
-it('formats currency', () => {
-  expect(formatCurrency(1234.56)).toMatchInlineSnapshot(`"$1,234.56"`)
-})
-
-it('generates user display name', () => {
-  expect(getDisplayName({ firstName: 'John', lastName: 'Doe' }))
-    .toMatchInlineSnapshot(`"John Doe"`)
-})
-```
-
-## Object Snapshots
-
-```typescript
-// Snapshot complex objects
-it('transforms API response', () => {
-  const response = {
-    id: '123',
-    created_at: '2024-01-01T00:00:00Z',
-    user_name: 'johndoe'
-  }
-
-  expect(transformResponse(response)).toMatchInlineSnapshot(`
-    {
-      "id": "123",
-      "createdAt": "2024-01-01T00:00:00.000Z",
-      "userName": "johndoe"
-    }
-  `)
-})
-```
-
-## Serializers
-
-```typescript
-// vitest.config.ts
-export default defineConfig({
-  test: {
-    snapshotSerializers: ['./tests/serializers/date.ts']
-  }
-})
-
-// tests/serializers/date.ts
-export const serialize = (val: Date) => `Date<${val.toISOString()}>`
-export const test = (val: unknown) => val instanceof Date
-
-// Output in snapshots:
-// Date<2024-01-01T00:00:00.000Z>
-```
-
-## Property Matchers
-
-```typescript
-// Ignore dynamic values
-it('creates user with generated id', async () => {
-  const user = await createUser({ email: 'test@example.com' })
-
-  expect(user).toMatchSnapshot({
-    id: expect.any(String),
-    createdAt: expect.any(Date)
-  })
-})
-```
-
-## File Snapshots
-
-```typescript
-// Large output to separate files
-it('generates config file', () => {
-  const config = generateConfig({
-    name: 'my-app',
-    features: ['auth', 'api', 'db']
-  })
-
-  expect(config).toMatchFileSnapshot('./snapshots/config.json')
-})
-```
-
-## Update Snapshots
-
-```bash
-# Update all snapshots
-npm test -- --update
-
-# Update specific test file snapshots
-npm test -- Button.test.tsx --update
-
-# Interactive update (choose which to update)
-npm test -- --watch
-# Then press 'u' to update
-```
-
-## Snapshot Best Practices
-
-```typescript
-// DON'T: Snapshot too much
-it('renders page', () => {
-  const { container } = render(<ComplexPage />)
-  expect(container).toMatchSnapshot() // Too large, hard to review
-})
-
-// DO: Snapshot specific elements
-it('renders header correctly', () => {
-  const { getByRole } = render(<ComplexPage />)
-  expect(getByRole('banner')).toMatchSnapshot()
-})
-
-// DO: Use inline snapshots for small outputs
-it('formats date', () => {
-  expect(formatDate(new Date('2024-01-15')))
-    .toMatchInlineSnapshot(`"January 15, 2024"`)
-})
-
-// DON'T: Include dynamic data
-it('renders user', () => {
-  const { container } = render(<User id={Math.random()} />) // Will always fail
-  expect(container).toMatchSnapshot()
-})
-
-// DO: Use stable test data
-it('renders user', () => {
-  const { container } = render(<User id="test-id" createdAt={new Date(0)} />)
-  expect(container).toMatchSnapshot()
-})
-```
-
-## Component Snapshots
-
-```typescript
-// Snapshot multiple variants
-describe('Button', () => {
-  const variants = ['primary', 'secondary', 'danger'] as const
-  const sizes = ['sm', 'md', 'lg'] as const
-
-  variants.forEach(variant => {
-    sizes.forEach(size => {
-      it(`renders ${variant} ${size}`, () => {
-        const { container } = render(
-          <Button variant={variant} size={size}>
-            Button
-          </Button>
-        )
-        expect(container.firstChild).toMatchSnapshot()
-      })
-    })
-  })
-})
-```
-
-## When to Use
-
-- UI component output
-- Serialized data structures
-- Generated code/config
-- API response transformations

package/skills/patterns/testing/vitest.md

@@ -1,307 +0,0 @@
-# Vitest Testing Patterns
-
-Battle-tested patterns for testing with Vitest in Next.js.
-
-## Setup Configuration
-
-```typescript
-// vitest.config.ts
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./vitest.setup.ts'],
-    include: ['**/*.test.{ts,tsx}'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      exclude: ['node_modules/', '*.config.*']
-    }
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src')
-    }
-  }
-})
-```
-
-```typescript
-// vitest.setup.ts
-import '@testing-library/jest-dom/vitest'
-import { cleanup } from '@testing-library/react'
-import { afterEach, vi } from 'vitest'
-
-afterEach(() => {
-  cleanup()
-})
-
-// Mock next/navigation
-vi.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: vi.fn(),
-    replace: vi.fn(),
-    back: vi.fn()
-  }),
-  usePathname: () => '/',
-  useSearchParams: () => new URLSearchParams()
-}))
-```
-
-## Unit Testing Functions
-
-```typescript
-// lib/utils.test.ts
-import { describe, it, expect } from 'vitest'
-import { formatPrice, calculateDiscount, validateEmail } from './utils'
-
-describe('formatPrice', () => {
-  it('formats cents to dollars', () => {
-    expect(formatPrice(1000)).toBe('$10.00')
-    expect(formatPrice(1599)).toBe('$15.99')
-  })
-
-  it('handles zero', () => {
-    expect(formatPrice(0)).toBe('$0.00')
-  })
-})
-
-describe('calculateDiscount', () => {
-  it('applies percentage discount', () => {
-    expect(calculateDiscount(100, 10)).toBe(90)
-    expect(calculateDiscount(50, 50)).toBe(25)
-  })
-
-  it('returns original price for zero discount', () => {
-    expect(calculateDiscount(100, 0)).toBe(100)
-  })
-})
-
-describe('validateEmail', () => {
-  it('accepts valid emails', () => {
-    expect(validateEmail('user@example.com')).toBe(true)
-    expect(validateEmail('user+tag@domain.co.uk')).toBe(true)
-  })
-
-  it('rejects invalid emails', () => {
-    expect(validateEmail('invalid')).toBe(false)
-    expect(validateEmail('no@domain')).toBe(false)
-    expect(validateEmail('')).toBe(false)
-  })
-})
-```
-
-## Testing React Components
-
-```typescript
-// components/button.test.tsx
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { Button } from './button'
-
-describe('Button', () => {
-  it('renders with children', () => {
-    render(<Button>Click me</Button>)
-    expect(screen.getByText('Click me')).toBeInTheDocument()
-  })
-
-  it('calls onClick when clicked', () => {
-    const handleClick = vi.fn()
-    render(<Button onClick={handleClick}>Click</Button>)
-
-    fireEvent.click(screen.getByText('Click'))
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('is disabled when loading', () => {
-    render(<Button loading>Submit</Button>)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-
-  it('applies variant classes', () => {
-    render(<Button variant="destructive">Delete</Button>)
-    expect(screen.getByRole('button')).toHaveClass('bg-red-500')
-  })
-})
-```
-
-## Testing Async Components
-
-```typescript
-// components/user-profile.test.tsx
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
-import { UserProfile } from './user-profile'
-
-// Mock the fetch function
-vi.mock('@/lib/api', () => ({
-  fetchUser: vi.fn()
-}))
-
-import { fetchUser } from '@/lib/api'
-
-describe('UserProfile', () => {
-  it('shows loading state initially', () => {
-    vi.mocked(fetchUser).mockImplementation(() => new Promise(() => {}))
-
-    render(<UserProfile userId="123" />)
-    expect(screen.getByText('Loading...')).toBeInTheDocument()
-  })
-
-  it('displays user data after loading', async () => {
-    vi.mocked(fetchUser).mockResolvedValue({
-      name: 'John Doe',
-      email: 'john@example.com'
-    })
-
-    render(<UserProfile userId="123" />)
-
-    await waitFor(() => {
-      expect(screen.getByText('John Doe')).toBeInTheDocument()
-      expect(screen.getByText('john@example.com')).toBeInTheDocument()
-    })
-  })
-
-  it('shows error state on failure', async () => {
-    vi.mocked(fetchUser).mockRejectedValue(new Error('Failed'))
-
-    render(<UserProfile userId="123" />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Error loading profile')).toBeInTheDocument()
-    })
-  })
-})
-```
-
-## Testing Server Actions
-
-```typescript
-// actions/posts.test.ts
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { createPost, deletePost } from './posts'
-import { prisma } from '@/lib/db'
-import { auth } from '@/lib/auth'
-
-vi.mock('@/lib/db', () => ({
-  prisma: {
-    post: {
-      create: vi.fn(),
-      delete: vi.fn(),
-      findUnique: vi.fn()
-    }
-  }
-}))
-
-vi.mock('@/lib/auth', () => ({
-  auth: vi.fn()
-}))
-
-vi.mock('next/cache', () => ({
-  revalidatePath: vi.fn()
-}))
-
-describe('createPost', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('creates post for authenticated user', async () => {
-    vi.mocked(auth).mockResolvedValue({ userId: 'user-123' })
-    vi.mocked(prisma.post.create).mockResolvedValue({
-      id: 'post-1',
-      title: 'Test Post',
-      authorId: 'user-123'
-    })
-
-    const formData = new FormData()
-    formData.set('title', 'Test Post')
-
-    const result = await createPost(formData)
-
-    expect(result.success).toBe(true)
-    expect(prisma.post.create).toHaveBeenCalledWith({
-      data: expect.objectContaining({
-        title: 'Test Post',
-        authorId: 'user-123'
-      })
-    })
-  })
-
-  it('returns error for unauthenticated user', async () => {
-    vi.mocked(auth).mockResolvedValue({ userId: null })
-
-    const formData = new FormData()
-    formData.set('title', 'Test')
-
-    const result = await createPost(formData)
-
-    expect(result.success).toBe(false)
-    expect(result.error).toBe('Not authenticated')
-  })
-})
-```
-
-## Testing Hooks
-
-```typescript
-// hooks/use-debounce.test.ts
-import { describe, it, expect, vi } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
-import { useDebounce } from './use-debounce'
-
-describe('useDebounce', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('returns initial value immediately', () => {
-    const { result } = renderHook(() => useDebounce('hello', 500))
-    expect(result.current).toBe('hello')
-  })
-
-  it('debounces value changes', () => {
-    const { result, rerender } = renderHook(
-      ({ value }) => useDebounce(value, 500),
-      { initialProps: { value: 'hello' } }
-    )
-
-    rerender({ value: 'world' })
-    expect(result.current).toBe('hello') // Still old value
-
-    act(() => {
-      vi.advanceTimersByTime(500)
-    })
-
-    expect(result.current).toBe('world') // Now updated
-  })
-})
-```
-
-## Running Tests
-
-```bash
-# Run all tests
-npm test
-
-# Watch mode
-npm test -- --watch
-
-# Coverage report
-npm test -- --coverage
-
-# Run specific file
-npm test -- button.test.tsx
-
-# Run tests matching pattern
-npm test -- --grep "createPost"
-```