mini-starter/mini-ui-packages/rencai-personal-info-ui/tests/unit/components/UserInfoHeader.test.tsx

/**
 * UserInfoHeader 组件测试
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import UserInfoHeader from '../../../src/components/UserInfoHeader'
import { PersonalInfoResponse } from '../../../src/components/PersonalBasicInfo'

describe('UserInfoHeader', () => {
  const mockPersonalInfo: PersonalInfoResponse = {
    name: '张三',
    gender: '男',
    idCard: '110101199001011234',
    disabilityId: 'D12345678901',
    disabilityType: '肢体残疾',
    disabilityLevel: '三级',
    phone: '13800138000',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detailedAddress: '某某街道123号',
    birthDate: '1990-01-01',
    idAddress: '北京市朝阳区某某街道123号',
    idValidDate: '2030-01-01',
    disabilityValidDate: '2025-12-31',
    canDirectContact: 1,
    isMarried: 0,
    nation: '汉族',
    jobStatus: 1,
    specificDisability: '左腿小腿截肢'
  }

  it('应该正确渲染用户信息区域', () => {
    const { container } = render(
      <UserInfoHeader personalInfo={mockPersonalInfo} loading={false} />
    )

    // 检查用户名
    expect(screen.getByText('张三')).toBeInTheDocument()

    // 检查用户状态
    expect(screen.getByText('肢体残疾 · 三级 · 在职')).toBeInTheDocument()

    // 检查渐变背景
    const gradientElement = container.querySelector('.bg-gradient-to-b')
    expect(gradientElement).toBeInTheDocument()

    // 检查头像 (姓名首字)
    expect(screen.getByText('张')).toBeInTheDocument()
  })

  it('应该显示loading状态', () => {
    const { container } = render(
      <UserInfoHeader personalInfo={null} loading={true} />
    )

    // 检查loading动画类
    const pulseElement = container.querySelector('.animate-pulse')
    expect(pulseElement).toBeInTheDocument()
  })

  it('应该在personalInfo为null时显示默认值', () => {
    const { container } = render(
      <UserInfoHeader personalInfo={null} loading={false} />
    )

    // 应该显示默认值而不是null
    expect(screen.getByText('未知用户')).toBeInTheDocument()
    expect(screen.getByText('状态未知')).toBeInTheDocument()
    expect(screen.getByText('?')).toBeInTheDocument()
    // 检查渐变背景
    const gradientElement = container.querySelector('.bg-gradient-to-b')
    expect(gradientElement).toBeInTheDocument()
  })

  it('应该正确提取姓名首字作为头像', () => {
    render(<UserInfoHeader personalInfo={mockPersonalInfo} loading={false} />)

    // 姓名首字 "张"
    expect(screen.getByText('张')).toBeInTheDocument()
  })

  it('应该正确处理待业状态', () => {
    const unemployedInfo = { ...mockPersonalInfo, jobStatus: 0 }
    render(<UserInfoHeader personalInfo={unemployedInfo} loading={false} />)

    expect(screen.getByText('肢体残疾 · 三级 · 待业')).toBeInTheDocument()
  })

  it('应该在缺少某些字段时正确显示', () => {
    const incompleteInfo = {
      ...mockPersonalInfo,
      disabilityType: '',
      disabilityLevel: ''
    }
    render(<UserInfoHeader personalInfo={incompleteInfo} loading={false} />)

    // 只显示就业状态
    expect(screen.getByText('在职')).toBeInTheDocument()
  })

  it('应该显示相机图标按钮', () => {
    const { container } = render(
      <UserInfoHeader personalInfo={mockPersonalInfo} loading={false} />
    )

    // 检查相机图标
    const cameraIcon = container.querySelector('.i-heroicons-camera-20-solid')
    expect(cameraIcon).toBeInTheDocument()
  })
})