@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/testing/component.md

@@ -1,233 +0,0 @@
-# Component Testing Patterns
-
-Patterns for testing React components.
-
-## Basic Component Test
-
-```tsx
-// __tests__/components/Button.test.tsx
-import { render, screen, fireEvent } from '@testing-library/react'
-import { Button } from '@/components/ui/Button'
-
-describe('Button', () => {
-  it('renders with text', () => {
-    render(<Button>Click me</Button>)
-    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
-  })
-
-  it('calls onClick when clicked', () => {
-    const handleClick = vi.fn()
-    render(<Button onClick={handleClick}>Click me</Button>)
-
-    fireEvent.click(screen.getByRole('button'))
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Button disabled>Click me</Button>)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-
-  it('renders with different variants', () => {
-    const { rerender } = render(<Button variant="primary">Primary</Button>)
-    expect(screen.getByRole('button')).toHaveClass('bg-blue-600')
-
-    rerender(<Button variant="secondary">Secondary</Button>)
-    expect(screen.getByRole('button')).toHaveClass('bg-gray-200')
-  })
-})
-```
-
-## Testing with User Events
-
-```tsx
-// __tests__/components/Form.test.tsx
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ContactForm } from '@/components/ContactForm'
-
-describe('ContactForm', () => {
-  it('submits form with valid data', async () => {
-    const user = userEvent.setup()
-    const onSubmit = vi.fn()
-
-    render(<ContactForm onSubmit={onSubmit} />)
-
-    await user.type(screen.getByLabelText('Name'), 'John Doe')
-    await user.type(screen.getByLabelText('Email'), 'john@example.com')
-    await user.type(screen.getByLabelText('Message'), 'Hello, this is a test message')
-
-    await user.click(screen.getByRole('button', { name: 'Submit' }))
-
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalledWith({
-        name: 'John Doe',
-        email: 'john@example.com',
-        message: 'Hello, this is a test message'
-      })
-    })
-  })
-
-  it('shows validation errors', async () => {
-    const user = userEvent.setup()
-    render(<ContactForm onSubmit={vi.fn()} />)
-
-    await user.click(screen.getByRole('button', { name: 'Submit' }))
-
-    expect(await screen.findByText('Name is required')).toBeInTheDocument()
-    expect(screen.getByText('Email is required')).toBeInTheDocument()
-  })
-})
-```
-
-## Testing Async Components
-
-```tsx
-// __tests__/components/UserList.test.tsx
-import { render, screen, waitFor } from '@testing-library/react'
-import { UserList } from '@/components/UserList'
-import { server } from '@/mocks/server'
-import { http, HttpResponse } from 'msw'
-
-describe('UserList', () => {
-  it('renders users after loading', async () => {
-    server.use(
-      http.get('/api/users', () => {
-        return HttpResponse.json([
-          { id: '1', name: 'Alice' },
-          { id: '2', name: 'Bob' }
-        ])
-      })
-    )
-
-    render(<UserList />)
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument()
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument()
-      expect(screen.getByText('Bob')).toBeInTheDocument()
-    })
-  })
-
-  it('shows error message on failure', async () => {
-    server.use(
-      http.get('/api/users', () => {
-        return HttpResponse.json({ error: 'Server error' }, { status: 500 })
-      })
-    )
-
-    render(<UserList />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Failed to load users')).toBeInTheDocument()
-    })
-  })
-})
-```
-
-## Testing with Context
-
-```tsx
-// __tests__/components/ThemeToggle.test.tsx
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ThemeProvider } from '@/contexts/ThemeContext'
-import { ThemeToggle } from '@/components/ThemeToggle'
-
-function renderWithTheme(component: React.ReactNode) {
-  return render(
-    <ThemeProvider>{component}</ThemeProvider>
-  )
-}
-
-describe('ThemeToggle', () => {
-  it('toggles theme on click', async () => {
-    const user = userEvent.setup()
-    renderWithTheme(<ThemeToggle />)
-
-    const button = screen.getByRole('button')
-    expect(button).toHaveAttribute('aria-label', 'Switch to dark mode')
-
-    await user.click(button)
-    expect(button).toHaveAttribute('aria-label', 'Switch to light mode')
-  })
-})
-```
-
-## Testing Hooks
-
-```tsx
-// __tests__/hooks/useCounter.test.ts
-import { renderHook, act } from '@testing-library/react'
-import { useCounter } from '@/hooks/useCounter'
-
-describe('useCounter', () => {
-  it('initializes with default value', () => {
-    const { result } = renderHook(() => useCounter())
-    expect(result.current.count).toBe(0)
-  })
-
-  it('initializes with provided value', () => {
-    const { result } = renderHook(() => useCounter(10))
-    expect(result.current.count).toBe(10)
-  })
-
-  it('increments count', () => {
-    const { result } = renderHook(() => useCounter())
-
-    act(() => {
-      result.current.increment()
-    })
-
-    expect(result.current.count).toBe(1)
-  })
-
-  it('decrements count', () => {
-    const { result } = renderHook(() => useCounter(5))
-
-    act(() => {
-      result.current.decrement()
-    })
-
-    expect(result.current.count).toBe(4)
-  })
-})
-```
-
-## Testing Server Components
-
-```tsx
-// __tests__/components/UserProfile.test.tsx
-// For Server Components, test the rendered output
-import { render, screen } from '@testing-library/react'
-
-// Mock the data fetching
-vi.mock('@/lib/users', () => ({
-  getUser: vi.fn().mockResolvedValue({
-    id: '1',
-    name: 'John Doe',
-    email: 'john@example.com'
-  })
-}))
-
-// Import after mocking
-import { UserProfile } from '@/components/UserProfile'
-
-describe('UserProfile', () => {
-  it('renders user information', async () => {
-    const Component = await UserProfile({ userId: '1' })
-    render(Component)
-
-    expect(screen.getByText('John Doe')).toBeInTheDocument()
-    expect(screen.getByText('john@example.com')).toBeInTheDocument()
-  })
-})
-```
-
-## When to Use
-
-- UI components
-- Form validation
-- User interactions
-- State management

package/skills/patterns/testing/coverage.md

@@ -1,207 +0,0 @@
-# Test Coverage Patterns
-
-Patterns for measuring and improving test coverage.
-
-## Vitest Coverage Setup
-
-```typescript
-// vitest.config.ts
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      exclude: [
-        'node_modules/',
-        'tests/',
-        '**/*.d.ts',
-        '**/*.config.ts',
-        '**/types.ts'
-      ],
-      thresholds: {
-        lines: 80,
-        functions: 80,
-        branches: 80,
-        statements: 80
-      }
-    }
-  }
-})
-```
-
-## Run with Coverage
-
-```bash
-# Generate coverage report
-npm run test -- --coverage
-
-# Watch mode with coverage
-npm run test -- --coverage --watch
-
-# Coverage for specific files
-npm run test -- --coverage src/lib/
-```
-
-## Coverage Thresholds
-
-```typescript
-// vitest.config.ts - Per-file thresholds
-export default defineConfig({
-  test: {
-    coverage: {
-      thresholds: {
-        // Global thresholds
-        lines: 80,
-
-        // Per-file thresholds
-        'src/lib/auth.ts': {
-          lines: 100,
-          functions: 100
-        },
-        'src/lib/utils.ts': {
-          lines: 90
-        }
-      }
-    }
-  }
-})
-```
-
-## Istanbul Ignore Comments
-
-```typescript
-// Ignore specific lines
-/* istanbul ignore next */
-if (process.env.NODE_ENV === 'development') {
-  console.log('Debug mode')
-}
-
-// Ignore entire function
-/* istanbul ignore next */
-function devOnlyHelper() {
-  // This won't affect coverage
-}
-
-// Ignore else branch
-if (condition) {
-  doSomething()
-} /* istanbul ignore else */ else {
-  // Edge case that's hard to test
-}
-```
-
-## Critical Path Coverage
-
-```typescript
-// Ensure critical paths are always tested
-// tests/critical-paths.test.ts
-
-describe('Critical Paths', () => {
-  describe('Authentication', () => {
-    it('handles login success')
-    it('handles login failure')
-    it('handles session expiry')
-    it('handles logout')
-  })
-
-  describe('Payment Processing', () => {
-    it('handles successful payment')
-    it('handles declined card')
-    it('handles webhook verification')
-    it('handles refunds')
-  })
-
-  describe('Data Integrity', () => {
-    it('validates user input')
-    it('sanitizes output')
-    it('handles concurrent updates')
-  })
-})
-```
-
-## Branch Coverage
-
-```typescript
-// Ensure all branches are tested
-function getDiscount(user: User, order: Order): number {
-  // Branch 1: Premium user
-  if (user.isPremium) {
-    // Branch 1a: Large order
-    if (order.total > 100) {
-      return 0.2
-    }
-    // Branch 1b: Small order
-    return 0.1
-  }
-
-  // Branch 2: Regular user
-  if (order.total > 200) {
-    return 0.05
-  }
-
-  // Branch 3: No discount
-  return 0
-}
-
-// Tests for all branches
-describe('getDiscount', () => {
-  it('returns 20% for premium user with large order', () => {
-    expect(getDiscount({ isPremium: true }, { total: 150 })).toBe(0.2)
-  })
-
-  it('returns 10% for premium user with small order', () => {
-    expect(getDiscount({ isPremium: true }, { total: 50 })).toBe(0.1)
-  })
-
-  it('returns 5% for regular user with large order', () => {
-    expect(getDiscount({ isPremium: false }, { total: 250 })).toBe(0.05)
-  })
-
-  it('returns 0% for regular user with small order', () => {
-    expect(getDiscount({ isPremium: false }, { total: 50 })).toBe(0)
-  })
-})
-```
-
-## CI Coverage Gates
-
-```yaml
-# .github/workflows/test.yml
-name: Test
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - run: npm ci
-      - run: npm test -- --coverage
-
-      - name: Check coverage thresholds
-        run: |
-          COVERAGE=$(cat coverage/coverage-summary.json | jq '.total.lines.pct')
-          if (( $(echo "$COVERAGE < 80" | bc -l) )); then
-            echo "Coverage $COVERAGE% is below 80% threshold"
-            exit 1
-          fi
-
-      - name: Upload coverage
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage/lcov.info
-```
-
-## When to Use
-
-- Quality gates
-- CI/CD pipelines
-- Critical code paths
-- Refactoring validation

package/skills/patterns/testing/fixtures.md

@@ -1,225 +0,0 @@
-# Test Fixtures Patterns
-
-Patterns for creating and managing test data.
-
-## Factory Functions
-
-```typescript
-// tests/factories/user.ts
-import { faker } from '@faker-js/faker'
-
-interface UserInput {
-  id?: string
-  email?: string
-  name?: string
-  role?: 'USER' | 'ADMIN'
-  createdAt?: Date
-}
-
-export function createUser(overrides: UserInput = {}) {
-  return {
-    id: faker.string.uuid(),
-    email: faker.internet.email(),
-    name: faker.person.fullName(),
-    role: 'USER' as const,
-    createdAt: faker.date.past(),
-    ...overrides
-  }
-}
-
-// Usage
-const user = createUser({ role: 'ADMIN' })
-const users = Array.from({ length: 5 }, () => createUser())
-```
-
-## Builder Pattern
-
-```typescript
-// tests/factories/post.ts
-class PostBuilder {
-  private data = {
-    id: faker.string.uuid(),
-    title: faker.lorem.sentence(),
-    content: faker.lorem.paragraphs(3),
-    published: false,
-    authorId: faker.string.uuid(),
-    createdAt: new Date()
-  }
-
-  withTitle(title: string) {
-    this.data.title = title
-    return this
-  }
-
-  published() {
-    this.data.published = true
-    return this
-  }
-
-  byAuthor(authorId: string) {
-    this.data.authorId = authorId
-    return this
-  }
-
-  build() {
-    return { ...this.data }
-  }
-}
-
-export const postBuilder = () => new PostBuilder()
-
-// Usage
-const post = postBuilder()
-  .withTitle('My Post')
-  .published()
-  .byAuthor('user-123')
-  .build()
-```
-
-## Database Fixtures
-
-```typescript
-// tests/fixtures/database.ts
-import { prisma } from '@/lib/db'
-import { createUser } from '../factories/user'
-
-export async function seedUser(overrides = {}) {
-  const data = createUser(overrides)
-  return prisma.user.create({ data })
-}
-
-export async function seedUsers(count: number) {
-  const users = Array.from({ length: count }, () => createUser())
-  return prisma.user.createMany({ data: users })
-}
-
-export async function cleanDatabase() {
-  const tables = ['Post', 'Comment', 'User']
-
-  for (const table of tables) {
-    await prisma.$executeRawUnsafe(`TRUNCATE TABLE "${table}" CASCADE`)
-  }
-}
-
-// Test setup
-beforeEach(async () => {
-  await cleanDatabase()
-})
-```
-
-## Fixture Files
-
-```typescript
-// tests/fixtures/products.json
-[
-  {
-    "id": "prod_1",
-    "name": "Basic Plan",
-    "price": 999,
-    "currency": "usd"
-  },
-  {
-    "id": "prod_2",
-    "name": "Pro Plan",
-    "price": 2999,
-    "currency": "usd"
-  }
-]
-
-// tests/fixtures/index.ts
-import products from './products.json'
-
-export const fixtures = {
-  products,
-  users: [
-    { id: 'user_1', email: 'admin@test.com', role: 'ADMIN' },
-    { id: 'user_2', email: 'user@test.com', role: 'USER' }
-  ]
-}
-```
-
-## Scenario Fixtures
-
-```typescript
-// tests/fixtures/scenarios.ts
-export async function setupTeamWithMembers() {
-  const owner = await seedUser({ role: 'ADMIN' })
-  const team = await prisma.team.create({
-    data: {
-      name: 'Test Team',
-      ownerId: owner.id
-    }
-  })
-
-  const members = await Promise.all([
-    seedUser(),
-    seedUser(),
-    seedUser()
-  ])
-
-  await prisma.teamMember.createMany({
-    data: members.map(m => ({
-      userId: m.id,
-      teamId: team.id,
-      role: 'MEMBER'
-    }))
-  })
-
-  return { owner, team, members }
-}
-
-// Usage in test
-it('lists team members', async () => {
-  const { team, members } = await setupTeamWithMembers()
-
-  const result = await getTeamMembers(team.id)
-  expect(result).toHaveLength(members.length)
-})
-```
-
-## Playwright Fixtures
-
-```typescript
-// tests/e2e/fixtures.ts
-import { test as base } from '@playwright/test'
-import { LoginPage } from './pages/login.page'
-import { DashboardPage } from './pages/dashboard.page'
-
-type Fixtures = {
-  loginPage: LoginPage
-  dashboardPage: DashboardPage
-  authenticatedPage: void
-}
-
-export const test = base.extend<Fixtures>({
-  loginPage: async ({ page }, use) => {
-    await use(new LoginPage(page))
-  },
-
-  dashboardPage: async ({ page }, use) => {
-    await use(new DashboardPage(page))
-  },
-
-  authenticatedPage: async ({ page }, use) => {
-    await page.goto('/login')
-    await page.fill('[name="email"]', 'test@example.com')
-    await page.fill('[name="password"]', 'password')
-    await page.click('button[type="submit"]')
-    await page.waitForURL('/dashboard')
-    await use()
-  }
-})
-
-// Usage
-test('authenticated user can access settings', async ({ authenticatedPage, page }) => {
-  await page.goto('/settings')
-  await expect(page).toHaveURL('/settings')
-})
-```
-
-## When to Use
-
-- Consistent test data
-- Complex object creation
-- Database seeding
-- Reusable scenarios