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

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

describe('AttendanceCalendar组件', () => {
  const mockRecords: AttendanceRecord[] = [
    {
      date: '2023-11-01',
      weekday: '星期三',
      checkInTime: '08:30',
      checkOutTime: '17:30',
      status: AttendanceStatus.NORMAL
    },
    {
      date: '2023-11-02',
      weekday: '星期四',
      checkInTime: '08:30',
      checkOutTime: '17:30',
      status: AttendanceStatus.NORMAL
    },
    {
      date: '2023-11-15',
      weekday: '星期三',
      checkInTime: '09:15',
      checkOutTime: '17:30',
      status: AttendanceStatus.LATE
    }
  ]

  test('应该渲染考勤日历标题', () => {
    render(
      <AttendanceCalendar
        year={2023}
        month={11}
        attendanceRecords={mockRecords}
      />
    )

    expect(screen.getByText('考勤日历')).toBeInTheDocument()
  })

  test('应该渲染星期标题', () => {
    render(
      <AttendanceCalendar
        year={2023}
        month={11}
        attendanceRecords={mockRecords}
      />
    )

    expect(screen.getByText('日')).toBeInTheDocument()
    expect(screen.getByText('一')).toBeInTheDocument()
    expect(screen.getByText('二')).toBeInTheDocument()
    expect(screen.getByText('三')).toBeInTheDocument()
    expect(screen.getByText('四')).toBeInTheDocument()
    expect(screen.getByText('五')).toBeInTheDocument()
    expect(screen.getByText('六')).toBeInTheDocument()
  })

  test('应该渲染日期网格', () => {
    const { container } = render(
      <AttendanceCalendar
        year={2023}
        month={11}
        attendanceRecords={mockRecords}
      />
    )

    // 检查是否有日期数字
    expect(screen.getByText('1')).toBeInTheDocument()
    expect(screen.getByText('15')).toBeInTheDocument()
    expect(screen.getByText('30')).toBeInTheDocument()
  })

  test('应该正确标记已打卡日期', () => {
    render(
      <AttendanceCalendar
        year={2023}
        month={11}
        attendanceRecords={mockRecords}
      />
    )

    // 11月1日有打卡记录，应该有绿色背景
    expect(screen.getByText('1')).toBeInTheDocument()
  })

  test('应该正确处理跨月情况', () => {
    render(
      <AttendanceCalendar
        year={2023}
        month={12}
        attendanceRecords={[]}
      />
    )

    // 12月应该有31天
    expect(screen.getByText('31')).toBeInTheDocument()
  })

  test('应该正确处理闰年2月', () => {
    render(
      <AttendanceCalendar
        year={2024}
        month={2}
        attendanceRecords={[]}
      />
    )

    // 2024年是闰年，2月应该有29天
    expect(screen.getByText('29')).toBeInTheDocument()
  })

  test('应该正确处理非闰年2月', () => {
    render(
      <AttendanceCalendar
        year={2023}
        month={2}
        attendanceRecords={[]}
      />
    )

    // 2023年不是闰年，2月应该有28天
    expect(screen.getByText('28')).toBeInTheDocument()
    expect(screen.queryByText('29')).not.toBeInTheDocument()
  })
})