/**
* 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(
)
// 检查用户名
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(
)
// 检查loading动画类
const pulseElement = container.querySelector('.animate-pulse')
expect(pulseElement).toBeInTheDocument()
})
it('应该在personalInfo为null时显示默认值', () => {
const { container } = render(
)
// 应该显示默认值而不是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()
// 姓名首字 "张"
expect(screen.getByText('张')).toBeInTheDocument()
})
it('应该正确处理待业状态', () => {
const unemployedInfo = { ...mockPersonalInfo, jobStatus: 0 }
render()
expect(screen.getByText('肢体残疾 · 三级 · 待业')).toBeInTheDocument()
})
it('应该在缺少某些字段时正确显示', () => {
const incompleteInfo = {
...mockPersonalInfo,
disabilityType: '',
disabilityLevel: ''
}
render()
// 只显示就业状态
expect(screen.getByText('在职')).toBeInTheDocument()
})
it('应该显示相机图标按钮', () => {
const { container } = render(
)
// 检查相机图标
const cameraIcon = container.querySelector('.i-heroicons-camera-20-solid')
expect(cameraIcon).toBeInTheDocument()
})
})