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 API客户端 vi.mock('../../src/api/fileClient', () => ({ fileClient: { $get: vi.fn(), ':id': { $put: vi.fn(), $delete: vi.fn(), }, }, })); // 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.getByText('上传文件'); fireEvent.click(uploadButton); await waitFor(() => { expect(screen.getByText('上传文件')).toBeInTheDocument(); expect(screen.getByTestId('minio-uploader')).toBeInTheDocument(); }); }); it('应该显示加载状态', () => { // Mock API调用返回加载状态 const { fileClient } = require('../../src/api/fileClient'); fileClient.$get.mockReturnValue(new Promise(() => {})); renderWithQueryClient(); expect(screen.getByRole('table')).toBeInTheDocument(); }); it('应该显示空状态', async () => { const { fileClient } = require('../../src/api/fileClient'); fileClient.$get.mockResolvedValue({ ok: true, json: async () => ({ data: [], pagination: { current: 1, pageSize: 10, total: 0 } }) }); renderWithQueryClient(); await waitFor(() => { expect(screen.getByText('暂无文件')).toBeInTheDocument(); }); }); });