mini-starter/mini-ui-packages/rencai-attendance-ui/tests/unit/components/AttendanceDetails.test.tsx

/**
 * AttendanceDetails组件测试
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import { AttendanceDetails } from '@/components/AttendanceDetails'
import { AttendanceRecord, AttendanceStatus } from '@/types/attendance'

describe('AttendanceDetails组件', () => {
  const mockRecords: AttendanceRecord[] = [
    {
      date: '2023-11-25',
      weekday: '星期六',
      checkInTime: '08:30',
      checkOutTime: '17:30',
      status: AttendanceStatus.NORMAL
    },
    {
      date: '2023-11-24',
      weekday: '星期五',
      checkInTime: '09:15',
      checkOutTime: '17:30',
      status: AttendanceStatus.LATE
    },
    {
      date: '2023-11-23',
      weekday: '星期四',
      checkInTime: '08:30',
      checkOutTime: '16:30',
      status: AttendanceStatus.EARLY_LEAVE
    }
  ]

  test('应该渲染打卡明细标题', () => {
    render(<AttendanceDetails records={mockRecords} />)

    expect(screen.getByText('打卡明细')).toBeInTheDocument()
  })

  test('应该渲染所有打卡记录', () => {
    render(<AttendanceDetails records={mockRecords} />)

    // 日期和星期在同一元素中
    expect(screen.getByText((content) => content.includes('11月25日'))).toBeInTheDocument()
    expect(screen.getByText((content) => content.includes('11月24日'))).toBeInTheDocument()
    expect(screen.getByText((content) => content.includes('11月23日'))).toBeInTheDocument()
  })

  test('应该渲染打卡状态标签', () => {
    render(<AttendanceDetails records={mockRecords} />)

    expect(screen.getByText('正常')).toBeInTheDocument()
    expect(screen.getByText('迟到')).toBeInTheDocument()
    expect(screen.getByText('早退')).toBeInTheDocument()
  })

  test('应该渲染打卡时间信息', () => {
    render(<AttendanceDetails records={mockRecords} />)

    // 多个记录中有相同的打卡时间
    expect(screen.getAllByText('上班: 08:30').length).toBeGreaterThan(0)
    expect(screen.getAllByText('下班: 17:30').length).toBeGreaterThan(0)
    expect(screen.getByText('上班: 09:15')).toBeInTheDocument()
  })

  test('应该渲染空列表', () => {
    render(<AttendanceDetails records={[]} />)

    expect(screen.getByText('打卡明细')).toBeInTheDocument()
  })

  test('应该按日期倒序渲染记录', () => {
    const { container } = render(<AttendanceDetails records={mockRecords} />)

    const records = container.querySelectorAll('.border-gray-100')
    expect(records).toHaveLength(3)

    // 检查第一条记录包含11月25日
    expect(screen.getByText((content) => content.includes('11月25日'))).toBeInTheDocument()
  })
})