import { describe, it, expect, vi, beforeEach } from 'vitest'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { FileManagement } from '../../src/components/FileManagement'; // 完整的mock响应对象 const createMockResponse = (status: number, data?: any) => ({ status, ok: status >= 200 && status < 300, body: null, bodyUsed: false, statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error', headers: new Headers(), url: '', redirected: false, type: 'basic' as ResponseType, json: async () => data || {}, text: async () => '', blob: async () => new Blob(), arrayBuffer: async () => new ArrayBuffer(0), formData: async () => new FormData(), clone: function() { return this; } }); // Mock API客户端 vi.mock('../../src/api/fileClient', () => { const mockFileClient = { index: { $get: vi.fn(() => Promise.resolve(createMockResponse(200, { data: [], pagination: { current: 1, pageSize: 10, total: 0 } }))), }, ':id': { $put: vi.fn(() => Promise.resolve(createMockResponse(200, {}))), $delete: vi.fn(() => Promise.resolve(createMockResponse(204, {}))), }, }; const mockFileClientManager = { get: vi.fn(() => mockFileClient), }; return { fileClientManager: mockFileClientManager, fileClient: mockFileClient, }; }); // Mock 文件上传组件 vi.mock('../../src/components/MinioUploader', () => ({ default: () =>
MinioUploader
, })); describe('FileManagement', () => { let queryClient: QueryClient; beforeEach(() => { queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false }, }, }); vi.clearAllMocks(); }); const renderWithQueryClient = (component: React.ReactElement) => { return render( {component} ); }; it('应该渲染文件管理组件', () => { renderWithQueryClient(); expect(screen.getByText('文件管理')).toBeInTheDocument(); expect(screen.getByText('上传文件')).toBeInTheDocument(); expect(screen.getByText('文件列表')).toBeInTheDocument(); }); it('应该显示搜索功能', () => { renderWithQueryClient(); expect(screen.getByPlaceholderText('搜索文件名称或类型')).toBeInTheDocument(); expect(screen.getByText('搜索')).toBeInTheDocument(); }); it('应该隐藏搜索功能', () => { renderWithQueryClient(); expect(screen.queryByPlaceholderText('搜索文件名称或类型')).not.toBeInTheDocument(); expect(screen.queryByText('搜索')).not.toBeInTheDocument(); }); it('应该隐藏上传按钮', () => { renderWithQueryClient(); expect(screen.queryByText('上传文件')).not.toBeInTheDocument(); }); it('应该打开上传对话框', async () => { renderWithQueryClient(); const uploadButton = screen.getByTestId('upload-file-button'); fireEvent.click(uploadButton); await waitFor(() => { expect(screen.getByTestId('upload-file-dialog')).toBeInTheDocument(); expect(screen.getByRole('heading', { name: '上传文件' })).toBeInTheDocument(); expect(screen.getByTestId('minio-uploader')).toBeInTheDocument(); }); }); it('应该显示加载状态', async () => { // Mock API调用返回加载状态 const { fileClient } = await import('../../src/api/fileClient'); (fileClient.index.$get as any).mockReturnValue(new Promise(() => {})); renderWithQueryClient(); expect(screen.getByRole('table')).toBeInTheDocument(); }); it('应该显示空状态', async () => { const { fileClient } = await import('../../src/api/fileClient'); (fileClient.index.$get as any).mockResolvedValue(createMockResponse(200, { data: [], pagination: { current: 1, pageSize: 10, total: 0 } })); renderWithQueryClient(); await waitFor(() => { expect(screen.getByText('暂无文件')).toBeInTheDocument(); }); }); });