/** * 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() }) })