Examples

// __tests__/unit/utils.test.ts
import { describe, it, expect } from 'vitest'
import { cn, formatPrice, truncate } from '@/lib/utils'
describe('cn', () => {
  it('merges class names', () => {
    expect(cn('foo', 'bar')).toBe('foo bar')
  })
  it('handles conditional classes', () => {
    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz')
  })
  it('deduplicates Tailwind classes', () => {
    expect(cn('p-4', 'p-2')).toBe('p-2')
  })
})
describe('formatPrice', () => {
  it('formats price in USD', () => {
    expect(formatPrice(2999)).toBe('$29.99')
  })
  it('handles zero', () => {
    expect(formatPrice(0)).toBe('$0.00')
  })
})
describe('truncate', () => {
  it('truncates long strings', () => {
    expect(truncate('Hello World', 5)).toBe('Hello...')
  })
  it('returns short strings unchanged', () => {
    expect(truncate('Hi', 5)).toBe('Hi')
  })
})

// __tests__/components/header.test.tsx
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Header } from '@/components/header'
describe('Header', () => {
  it('renders the logo', () => {
    render(
)
    expect(screen.getByRole('img', { name: /logo/i })).toBeInTheDocument()
  })
  it('renders navigation links', () => {
    render(
)
    expect(screen.getByRole('link', { name: /home/i })).toBeInTheDocument()
    expect(screen.getByRole('link', { name: /dashboard/i })).toBeInTheDocument()
    expect(screen.getByRole('link', { name: /settings/i })).toBeInTheDocument()
  })
  it('toggles mobile menu', async () => {
    const user = userEvent.setup()
    render(
)
    
    const menuButton = screen.getByRole('button', { name: /menu/i })
    await user.click(menuButton)
    
    expect(screen.getByRole('navigation', { name: /mobile/i })).toBeVisible()
  })
  it('shows user avatar when logged in', () => {
    render(
'John', avatar: '/john.jpg' }} />)
    expect(screen.getByRole('img', { name: /john/i })).toBeInTheDocument()
  })
})

// e2e/dashboard.spec.ts
import { test, expect } from '@playwright/test'
test.describe('Dashboard', () => {
  test.beforeEach(async ({ page }) => {
    // Log in before each test
    await page.goto('/login')
    await page.getByLabel('Email').fill('test@example.com')
    await page.getByLabel('Password').fill('password123')
    await page.getByRole('button', { name: /sign in/i }).click()
    await expect(page).toHaveURL('/dashboard')
  })
  test('displays user stats', async ({ page }) => {
    await expect(page.getByTestId('total-revenue')).toBeVisible()
    await expect(page.getByTestId('active-users')).toBeVisible()
    await expect(page.getByTestId('new-orders')).toBeVisible()
  })
  test('can filter data by date range', async ({ page }) => {
    await page.getByRole('button', { name: /last 7 days/i }).click()
    await page.getByRole('option', { name: /last 30 days/i }).click()
    
    // Wait for data to reload
    await expect(page.getByTestId('loading')).not.toBeVisible()
    
    // Verify filter was applied
    await expect(page.getByRole('button')).toContainText('Last 30 days')
  })
  test('can navigate to settings', async ({ page }) => {
    await page.getByRole('link', { name: /settings/i }).click()
    await expect(page).toHaveURL('/dashboard/settings')
    await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
  })
  test('can update profile', async ({ page }) => {
    await page.goto('/dashboard/settings')
    
    await page.getByLabel('Display Name').fill('John Updated')
    await page.getByRole('button', { name: /save/i }).click()
    
    await expect(page.getByText('Profile updated')).toBeVisible()
  })
})