import { beforeEach, describe, expect, it, vi } from 'vitest'; import { fireEvent, render, screen } from '@testing-library/react'; import DecodeResultPaper from '@/components/DecodeResultPaper'; describe('DecodeResultPaper 组件', () => { const defaultProps = { title: 'decodedFileOutput', mimeType: 'image/png', blobSize: 1024, fileName: 'decoded.png', onFileNameChange: vi.fn(), onDownload: vi.fn(), }; beforeEach(() => { vi.clearAllMocks(); }); describe('渲染测试', () => { it('应渲染标题', () => { render(); expect(screen.getByText('decodedFileOutput')).toBeInTheDocument(); }); it('应渲染 MIME 类型信息', () => { render(); expect(screen.getByText(/image\/png/)).toBeInTheDocument(); }); it('应通过 formatFileSize 渲染文件大小', () => { render(); expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument(); }); it('应渲染文件名输入框', () => { render(); const input = screen.getByDisplayValue('decoded.png'); expect(input).toBeInTheDocument(); }); it('应渲染下载按钮', () => { render(); expect(screen.getByRole('button', { name: 'download' })).toBeInTheDocument(); }); it('应渲染 children 内容', () => { render(
预览内容
, ); expect(screen.getByTestId('preview')).toBeInTheDocument(); expect(screen.getByText('预览内容')).toBeInTheDocument(); }); }); describe('交互测试', () => { it('修改文件名时应调用 onFileNameChange', () => { render(); const input = screen.getByDisplayValue('decoded.png'); fireEvent.change(input, { target: { value: 'new-name.png' } }); expect(defaultProps.onFileNameChange).toHaveBeenCalledWith('new-name.png'); }); it('点击下载按钮时应调用 onDownload', () => { render(); fireEvent.click(screen.getByRole('button', { name: 'download' })); expect(defaultProps.onDownload).toHaveBeenCalledTimes(1); }); }); describe('按钮状态', () => { it('文件名为空时下载按钮应禁用', () => { render(); expect(screen.getByRole('button', { name: 'download' })).toBeDisabled(); }); it('文件名不为空时下载按钮应启用', () => { render(); expect(screen.getByRole('button', { name: 'download' })).toBeEnabled(); }); }); });