mini-starter/mini-ui-packages/rencai-personal-info-ui/tests/unit/components/BankCardItem.test.tsx

/**
 * BankCardItem 组件测试
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import BankCardItem, { BankCardInfo } from '../../../src/components/BankCardItem'
import { maskCardNumber } from '../../../src/utils/maskUtils'

describe('BankCardItem', () => {
  const mockBankCard: BankCardInfo = {
    id: 1,
    subBankName: '中国工商银行北京分行朝阳支行',
    bankName: '中国工商银行',
    cardNumber: '6222020200001234567',
    cardholderName: '张三',
    cardType: '一类卡',
    isDefault: 1,
    fileUrl: null
  }

  it('应该正确渲染银行卡信息', () => {
    const { container } = render(<BankCardItem bankCard={mockBankCard} />)

    expect(screen.getByText('中国工商银行')).toBeInTheDocument()
    expect(screen.getByText(maskCardNumber('6222020200001234567'))).toBeInTheDocument()
    expect(screen.getByText('一类卡')).toBeInTheDocument()
    expect(screen.getByText('持卡人：张三')).toBeInTheDocument()

    // 检查蓝色背景样式
    const cardElement = container.querySelector('.bg-blue-50')
    expect(cardElement).toBeInTheDocument()
  })

  it('应该为默认卡显示默认标识', () => {
    render(<BankCardItem bankCard={mockBankCard} />)

    expect(screen.getByText('默认')).toBeInTheDocument()
  })

  it('不应该为非默认卡显示默认标识', () => {
    const nonDefaultCard = { ...mockBankCard, isDefault: 0 }
    render(<BankCardItem bankCard={nonDefaultCard} />)

    expect(screen.queryByText('默认')).not.toBeInTheDocument()
  })

  it('应该正确脱敏卡号', () => {
    render(<BankCardItem bankCard={mockBankCard} />)

    // 卡号应该脱敏显示为: **** **** **** 4567
    expect(screen.getByText('**** **** **** 4567')).toBeInTheDocument()
  })

  it('应该在bankName为null时使用subBankName', () => {
    const cardWithoutBankName = { ...mockBankCard, bankName: null }
    render(<BankCardItem bankCard={cardWithoutBankName} />)

    expect(screen.getByText('中国工商银行北京分行朝阳支行')).toBeInTheDocument()
  })

  it('不应该在cardType为null时渲染卡类型', () => {
    const cardWithoutType = { ...mockBankCard, cardType: null }
    render(<BankCardItem bankCard={cardWithoutType} />)

    // 卡类型不应该被渲染
    expect(screen.queryByText('一类卡')).not.toBeInTheDocument()
  })
})