mini-starter/packages/file-management-ui/tests/components/FileManagement.test.tsx

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: () => <div data-testid="minio-uploader">MinioUploader</div>,
}));

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(
      <QueryClientProvider client={queryClient}>
        {component}
      </QueryClientProvider>
    );
  };

  it('应该渲染文件管理组件', () => {
    renderWithQueryClient(<FileManagement />);

    expect(screen.getByText('文件管理')).toBeInTheDocument();
    expect(screen.getByText('上传文件')).toBeInTheDocument();
    expect(screen.getByText('文件列表')).toBeInTheDocument();
  });

  it('应该显示搜索功能', () => {
    renderWithQueryClient(<FileManagement showSearch={true} />);

    expect(screen.getByPlaceholderText('搜索文件名称或类型')).toBeInTheDocument();
    expect(screen.getByText('搜索')).toBeInTheDocument();
  });

  it('应该隐藏搜索功能', () => {
    renderWithQueryClient(<FileManagement showSearch={false} />);

    expect(screen.queryByPlaceholderText('搜索文件名称或类型')).not.toBeInTheDocument();
    expect(screen.queryByText('搜索')).not.toBeInTheDocument();
  });

  it('应该隐藏上传按钮', () => {
    renderWithQueryClient(<FileManagement showUploadButton={false} />);

    expect(screen.queryByText('上传文件')).not.toBeInTheDocument();
  });

  it('应该打开上传对话框', async () => {
    renderWithQueryClient(<FileManagement />);

    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(<FileManagement />);

    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(<FileManagement />);

    await waitFor(() => {
      expect(screen.getByText('暂无文件')).toBeInTheDocument();
    });
  });
});