import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

// 模拟 react-router-dom 的 useNavigate
vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useNavigate: () => vi.fn(),
  };
});

describe('App 组件', () => {
  beforeEach(() => {
    // 清除 localStorage
    window.localStorage.clear();
  });

  it('应该渲染网站标题', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    
    expect(screen.getByText('PT网站')).toBeInTheDocument();
    expect(screen.getByText('欢迎来到PT网站')).toBeInTheDocument();
  });

  it('当用户未登录时应该显示游客角色', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    
    expect(screen.getByText('(游客)')).toBeInTheDocument();
  });

  it('当用户是管理员时应该显示管理面板菜单', () => {
    // 模拟管理员登录
    window.localStorage.setItem('user', JSON.stringify({ 
      username: 'admin', 
      role: 'admin',
      avatar: 'avatar-url' 
    }));
    
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    
    expect(screen.getByText('管理面板')).toBeInTheDocument();
    expect(screen.getByText('管理员专区')).toBeInTheDocument();
  });

  it('当用户是版主时应该显示版主专区', () => {
    // 模拟版主登录
    window.localStorage.setItem('user', JSON.stringify({ 
      username: 'moderator', 
      role: 'moderator',
      avatar: 'avatar-url' 
    }));
    
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    
    expect(screen.getByText('版主专区')).toBeInTheDocument();
  });
});