/**
* 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()
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()
expect(screen.getByText('默认')).toBeInTheDocument()
})
it('不应该为非默认卡显示默认标识', () => {
const nonDefaultCard = { ...mockBankCard, isDefault: 0 }
render()
expect(screen.queryByText('默认')).not.toBeInTheDocument()
})
it('应该正确脱敏卡号', () => {
render()
// 卡号应该脱敏显示为: **** **** **** 4567
expect(screen.getByText('**** **** **** 4567')).toBeInTheDocument()
})
it('应该在bankName为null时使用subBankName', () => {
const cardWithoutBankName = { ...mockBankCard, bankName: null }
render()
expect(screen.getByText('中国工商银行北京分行朝阳支行')).toBeInTheDocument()
})
it('不应该在cardType为null时渲染卡类型', () => {
const cardWithoutType = { ...mockBankCard, cardType: null }
render()
// 卡类型不应该被渲染
expect(screen.queryByText('一类卡')).not.toBeInTheDocument()
})
})