前端测试策略：把预算投给高风险路径

// ❌ 坏做法：给按钮写大量测试，忽略权限逻辑
import { render, screen } from '@testing-library/react'
import { DeleteButton } from './DeleteButton'
 
test('删除按钮在管理员可见', () => {
  render(<DeleteButton user={{ role: 'admin' }} />)
  expect(screen.getByRole('button', { name: '删除' })).toBeEnabled()
})
 
test('删除按钮在查看者不可见', () => {
  render(<DeleteButton user={{ role: 'viewer' }} />)
  expect(screen.queryByRole('button', { name: '删除' })).not.toBeInTheDocument()
})
 
// 每个角色 × 每种按钮都写一遍，重复且脆弱

// ✅ 好做法：权限函数单独测试，组件只测渲染逻辑
import { canDelete, canEdit, type User, type Article } from './permissions'
 
describe('canDelete', () => {
  test('管理员可以删除自己创建的文章', () => {
    const user: User = { role: 'admin', id: '1' }
    const article: Article = { authorId: '1', status: 'draft' }
    expect(canDelete(user, article)).toBe(true)
  })
 
  test('受限编辑者不能删除继承权限的文章', () => {
    const user: User = { role: 'restricted_editor', id: '2' }
    const article: Article = { authorId: '1', status: 'published', inheritedFrom: 'editor' }
    expect(canDelete(user, article)).toBe(false)
  })
 
  test('编辑者可以删除草稿但不能删除已发布文章', () => {
    const user: User = { role: 'editor', id: '2' }
    expect(canDelete(user, { authorId: '2', status: 'draft' })).toBe(true)
    expect(canDelete(user, { authorId: '2', status: 'published' })).toBe(false)
  })
})

// ❌ 坏做法：E2E 测试用硬编码 mock 数据，和真实接口脱节
test('创建商品成功', async () => {
  // mock 数据永远是旧格式
  server.use(
    rest.post('/api/products', (req, res, ctx) => {
      return res(ctx.json({ id: '1', price: 99.00 }))
    })
  )
  
  await page.goto('/products/new')
  await page.fill('[name=title]', '测试商品')
  await page.click('button:has-text("保存")')
  await expect(page.locator('.success')).toBeVisible()
})

// ✅ 好做法：数据契约测试覆盖格式转换和边界处理
import { formatPrice, parseProductResponse, type ProductResponse } from './productMapper'
 
describe('价格格式化', () => {
  test('分为单位转换为元，保留两位小数', () => {
    expect(formatPrice(9900)).toBe('99.00')
    expect(formatPrice(10050)).toBe('100.50')
    expect(formatPrice(0)).toBe('0.00')
  })
 
  test('处理后端返回的 null 和 undefined', () => {
    expect(formatPrice(null)).toBe('0.00')
    expect(formatPrice(undefined)).toBe('0.00')
  })
})
 
describe('商品数据映射', () => {
  test('兼容新旧两种价格字段格式', () => {
    const oldFormat: ProductResponse = { id: '1', price: 99.00 }
    const newFormat: ProductResponse = { id: '1', priceInCents: 9900, taxRate: 0.13 }
    
    expect(parseProductResponse(oldFormat).priceInYuan).toBe(99.00)
    expect(parseProductResponse(newFormat).priceInYuan).toBe(99.00)
    expect(parseProductResponse(newFormat).taxRate).toBe(0.13)
  })
 
  test('处理缺失字段时的默认值', () => {
    const incomplete: Partial<ProductResponse> = { id: '1', priceInCents: 10000 }
    const result = parseProductResponse(incomplete as ProductResponse)
    expect(result.taxRate).toBe(0)
    expect(result.currency).toBe('CNY')
  })
})

// ❌ 坏做法：只测成功路径，忽略失败状态
test('文章列表正常加载', async () => {
  server.use(
    rest.get('/api/articles', (req, res, ctx) => {
      return res(ctx.json({ articles: [{ id: '1', title: '测试文章' }] }))
    })
  )
  
  render(<ArticleList />)
  await waitFor(() => {
    expect(screen.getByText('测试文章')).toBeInTheDocument()
  })
})
 
// 没有测试：接口超时、返回 500、返回空数组、返回格式错误

// ✅ 好做法：显式覆盖失败状态
import { render, screen, waitFor } from '@testing-library/react'
import { ArticleList } from './ArticleList'
import { server, rest } from '../test/server'
 
describe('文章列表错误处理', () => {
  test('接口超时显示重试按钮', async () => {
    server.use(
      rest.get('/api/articles', (req, res, ctx) => {
        return res(ctx.delay(30000)) // 模拟超时
      })
    )
    
    render(<ArticleList />)
    
    await waitFor(() => {
      expect(screen.getByText('加载失败')).toBeInTheDocument()
      expect(screen.getByRole('button', { name: '重试' })).toBeInTheDocument()
    })
  })
 
  test('接口返回 500 显示错误信息', async () => {
    server.use(
      rest.get('/api/articles', (req, res, ctx) => {
        return res(ctx.status(500), ctx.json({ message: '服务器错误' }))
      })
    )
    
    render(<ArticleList />)
    
    await waitFor(() => {
      expect(screen.getByText('服务器错误，请稍后重试')).toBeInTheDocument()
    })
  })
 
  test('返回空数组显示空状态', async () => {
    server.use(
      rest.get('/api/articles', (req, res, ctx) => {
        return res(ctx.json({ articles: [] }))
      })
    )
    
    render(<ArticleList />)
    
    await waitFor(() => {
      expect(screen.getByText('暂无文章')).toBeInTheDocument()
      expect(screen.getByRole('button', { name: '创建第一篇文章' })).toBeInTheDocument()
    })
  })
})

// ❌ 坏做法：测试实现细节，组件重构后测试就挂
test('点击按钮调用 handleSave', () => {
  const handleSave = vi.fn()
  render(<SaveButton onClick={handleSave} />)
  screen.getByRole('button').click()
  expect(handleSave).toHaveBeenCalledTimes(1)
})
 
// 组件重构成 <IconButton icon="save" label="保存" /> 后测试就失败
// 因为测试依赖的是「button 元素」而不是「保存功能」

// ✅ 好做法：测试用户行为，不依赖实现细节
test('点击保存按钮后显示成功提示', async () => {
  render(<SaveButton />)
  
  await userEvent.click(screen.getByRole('button', { name: '保存' }))
  
  await waitFor(() => {
    expect(screen.getByText('保存成功')).toBeInTheDocument()
  })
})
 
// 组件内部怎么实现不影响测试，只关心用户看到什么

// ❌ 坏做法：用 setTimeout 等待异步操作，测试慢且不稳定
test('加载数据后显示列表', async () => {
  render(<ArticleList />)
  
  // 等待 3 秒，假设接口会在这个时间内返回
  await new Promise(resolve => setTimeout(resolve, 3000))
  
  expect(screen.getByText('测试文章')).toBeInTheDocument()
})

// ✅ 好做法：用 waitFor 等待具体状态，测试快且稳定
test('加载数据后显示列表', async () => {
  render(<ArticleList />)
  
  // 等待具体元素出现，接口返回后立即继续
  await waitFor(() => {
    expect(screen.getByText('测试文章')).toBeInTheDocument()
  })
  
  // 或者用 findBy 查询，自动等待
  const article = await screen.findByText('测试文章')
  expect(article).toBeInTheDocument()
})

// ❌ 坏做法：测试覆盖所有 DOM 细节，维护成本高
test('文章卡片渲染正确', () => {
  render(<ArticleCard title="标题" date="2024-01-01" author="作者" />)
  
  const card = screen.getByTestId('article-card')
  expect(card).toHaveClass('card', 'card--large')
  expect(card.querySelector('h2')).toHaveTextContent('标题')
  expect(card.querySelector('.date')).toHaveTextContent('2024-01-01')
  expect(card.querySelector('.author')).toHaveTextContent('作者')
})

// ✅ 好做法：只测用户关心的内容，不测样式细节
test('文章卡片显示标题、日期和作者', () => {
  render(<ArticleCard title="标题" date="2024-01-01" author="作者" />)
  
  // 用户关心的是内容是否显示，不关心用什么 HTML 标签
  expect(screen.getByRole('heading', { name: /标题/ })).toBeInTheDocument()
  expect(screen.getByText('2024-01-01')).toBeInTheDocument()
  expect(screen.getByText('作者')).toBeInTheDocument()
})
 
// 样式变化（className、标签类型）不会让测试失败

// ❌ 坏做法：依赖随机数据和外部服务
test('创建商品', async () => {
  // 随机生成的商品名可能和已有数据冲突
  const productName = `商品_${Math.random().toString(36).slice(2)}`
  
  await page.goto('/products/new')
  await page.fill('[name=title]', productName)
  await page.click('button:has-text("保存")')
  
  // 依赖真实的支付接口，外部服务波动导致测试失败
  await expect(page.locator('.payment-success')).toBeVisible({ timeout: 30000 })
})

// ✅ 好做法：使用确定性数据和 mock 外部依赖
test('创建商品', async () => {
  // 使用时间戳保证唯一性，但格式固定
  const productName = `测试商品_${Date.now()}`
  
  // 测试前清理数据，避免冲突
  await cleanupProducts(productName)
  
  await page.goto('/products/new')
  await page.fill('[name=title]', productName)
  await page.click('button:has-text("保存")')
  
  // mock 支付接口，只测试前端逻辑
  await page.route('**/api/payment', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify({ success: true, orderId: 'test-order-123' })
    })
  })
  
  await expect(page.locator('.payment-success')).toBeVisible()
})
 
// 测试后清理，保证下次运行环境干净
test.afterEach(async () => {
  await cleanupProducts(productName)
})