import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import { UserProfileSummary } from '../../src/components/UserProfileSummary'

describe('UserProfileSummary', () => {
  const mockProfile = {
    id: 1,
    name: '张明',
    disabilityType: '肢体残疾',
    disabilityLevel: '三级',
    stats: {
      thisMonthAttendance: 28,
      totalAttendance: 156,
      thisMonthSalary: 4800
    }
  }

  it('应该渲染用户头像（姓名首字）', () => {
    render(<UserProfileSummary profile={mockProfile} />)
    expect(screen.getByText('张')).toBeInTheDocument()
  })

  it('应该渲染用户姓名', () => {
    render(<UserProfileSummary profile={mockProfile} />)
    expect(screen.getByText('张明')).toBeInTheDocument()
  })

  it('应该渲染残疾类型和等级', () => {
    render(<UserProfileSummary profile={mockProfile} />)
    expect(screen.getByText('肢体残疾 · 三级')).toBeInTheDocument()
  })

  it('应该渲染统计数据', () => {
    render(<UserProfileSummary profile={mockProfile} />)
    expect(screen.getByText('28')).toBeInTheDocument() // 本月出勤
    expect(screen.getByText('156')).toBeInTheDocument() // 累计出勤
    expect(screen.getByText('¥4,800')).toBeInTheDocument() // 本月薪资
  })

  it('应该渲染统计标签', () => {
    render(<UserProfileSummary profile={mockProfile} />)
    expect(screen.getByText('本月出勤')).toBeInTheDocument()
    expect(screen.getByText('累计出勤')).toBeInTheDocument()
    expect(screen.getByText('本月薪资')).toBeInTheDocument()
  })

  it('应该处理空姓名情况', () => {
    const emptyNameProfile = { ...mockProfile, name: '' }
    const { container } = render(<UserProfileSummary profile={emptyNameProfile} />)
    // 头像文字应该为空span，检查头像容器是否存在
    const avatarContainer = container.querySelector('.w-16.h-16.rounded-full')
    expect(avatarContainer).toBeInTheDocument()
  })
})