UserProfileSummary.test.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import React from 'react'
  2. import { render, screen } from '@testing-library/react'
  3. import '@testing-library/jest-dom'
  4. import { UserProfileSummary } from '../../src/components/UserProfileSummary'
  5. describe('UserProfileSummary', () => {
  6. const mockProfile = {
  7. id: 1,
  8. name: '张明',
  9. disabilityType: '肢体残疾',
  10. disabilityLevel: '三级',
  11. stats: {
  12. thisMonthAttendance: 28,
  13. totalAttendance: 156,
  14. thisMonthSalary: 4800
  15. }
  16. }
  17. it('应该渲染用户头像(姓名首字)', () => {
  18. render(<UserProfileSummary profile={mockProfile} />)
  19. expect(screen.getByText('张')).toBeInTheDocument()
  20. })
  21. it('应该渲染用户姓名', () => {
  22. render(<UserProfileSummary profile={mockProfile} />)
  23. expect(screen.getByText('张明')).toBeInTheDocument()
  24. })
  25. it('应该渲染残疾类型和等级', () => {
  26. render(<UserProfileSummary profile={mockProfile} />)
  27. expect(screen.getByText('肢体残疾 · 三级')).toBeInTheDocument()
  28. })
  29. it('应该渲染统计数据', () => {
  30. render(<UserProfileSummary profile={mockProfile} />)
  31. expect(screen.getByText('28')).toBeInTheDocument() // 本月出勤
  32. expect(screen.getByText('156')).toBeInTheDocument() // 累计出勤
  33. expect(screen.getByText('¥4,800')).toBeInTheDocument() // 本月薪资
  34. })
  35. it('应该渲染统计标签', () => {
  36. render(<UserProfileSummary profile={mockProfile} />)
  37. expect(screen.getByText('本月出勤')).toBeInTheDocument()
  38. expect(screen.getByText('累计出勤')).toBeInTheDocument()
  39. expect(screen.getByText('本月薪资')).toBeInTheDocument()
  40. })
  41. it('应该处理空姓名情况', () => {
  42. const emptyNameProfile = { ...mockProfile, name: '' }
  43. const { container } = render(<UserProfileSummary profile={emptyNameProfile} />)
  44. // 头像文字应该为空span,检查头像容器是否存在
  45. const avatarContainer = container.querySelector('.w-16.h-16.rounded-full')
  46. expect(avatarContainer).toBeInTheDocument()
  47. })
  48. })