mini-starter/mini-ui-packages/rencai-employment-ui/tests/unit/components/SalaryRecords.test.tsx

/**
 * SalaryRecords组件测试
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import Taro from '@tarojs/taro'
import { SalaryRecords } from '@/components/SalaryRecords'

describe('SalaryRecords组件', () => {
  const mockRecords = [
    {
      orderId: 1,
      orderName: '数据标注员',
      companyName: '测试科技有限公司',
      salaryAmount: 4800,
      joinDate: '2023-08-15',
      month: '2023-11'
    },
    {
      orderId: 1,
      orderName: '数据标注员',
      companyName: '测试科技有限公司',
      salaryAmount: 4800,
      joinDate: '2023-08-15',
      month: '2023-10'
    },
    {
      orderId: 1,
      orderName: '数据标注员',
      companyName: '测试科技有限公司',
      salaryAmount: 4800,
      joinDate: '2023-08-15',
      month: '2023-09'
    }
  ]

  beforeEach(() => {
    ;(Taro.showToast as jest.Mock).mockClear()
  })

  it('应该渲染薪资记录列表', () => {
    render(<SalaryRecords records={mockRecords} loading={false} />)

    expect(screen.getByText('薪资记录')).toBeInTheDocument()
    expect(screen.getByText('2023年11月')).toBeInTheDocument()
    expect(screen.getByText('2023年10月')).toBeInTheDocument()
  })

  it('应该显示查看全部按钮', () => {
    render(<SalaryRecords records={mockRecords} loading={false} showViewAll={true} />)

    expect(screen.getByText('查看全部')).toBeInTheDocument()
  })

  it('应该只显示最近3条记录', () => {
    const manyRecords = [
      ...mockRecords,
      {
        orderId: 1,
        orderName: '数据标注员',
        companyName: '测试科技有限公司',
        salaryAmount: 4800,
        joinDate: '2023-08-15',
        month: '2023-08'
      },
      {
        orderId: 1,
        orderName: '数据标注员',
        companyName: '测试科技有限公司',
        salaryAmount: 4800,
        joinDate: '2023-08-15',
        month: '2023-07'
      }
    ]

    const { container } = render(
      <SalaryRecords records={manyRecords} loading={false} showViewAll={false} />
    )

    // 应该只显示3条记录
    const recordElements = container.querySelectorAll('.border-gray-100')
    expect(recordElements.length).toBe(3)
  })

  it('应该显示加载状态', () => {
    render(<SalaryRecords records={[]} loading={true} />)

    expect(screen.getByText('加载中...')).toBeInTheDocument()
  })

  it('应该显示无数据状态', () => {
    render(<SalaryRecords records={[]} loading={false} />)

    expect(screen.getByText('暂无薪资记录')).toBeInTheDocument()
  })

  it('应该处理查看全部点击', () => {
    const onViewAll = jest.fn()
    render(
      <SalaryRecords
        records={mockRecords}
        loading={false}
        onViewAll={onViewAll}
        showViewAll={true}
      />
    )

    const viewAllButton = screen.getByText('查看全部')
    viewAllButton.click()

    expect(onViewAll).toHaveBeenCalledTimes(1)
  })
})