mini-starter/src/client/__integration_tests__/admin/login.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginPage } from '@/client/admin/pages/Login';
import { TestWrapper } from '@/client/__test_utils__/test-render';

// Mock 认证钩子和导航
const mockLogin = vi.fn();
const mockNavigate = vi.fn();

vi.mock('../hooks/AuthProvider', () => ({
  useAuth: () => ({
    login: mockLogin,
  }),
}));

vi.mock('react-router', () => ({
  useNavigate: () => mockNavigate,
}));

// Mock toast
vi.mock('sonner', () => ({
  toast: {
    success: vi.fn(),
    error: vi.fn(),
  }
}));

describe('LoginPage 集成测试', () => {
  const user = userEvent.setup();

  beforeEach(() => {
    vi.clearAllMocks();
    mockLogin.mockResolvedValue(undefined);
  });

  it('应该正确渲染登录页面标题和品牌元素', async () => {
    render(<LoginPage />);

    expect(screen.getByText('管理后台登录')).toBeInTheDocument();
    expect(screen.getByText('请输入您的账号和密码继续操作')).toBeInTheDocument();
    expect(screen.getByText('欢迎登录')).toBeInTheDocument();
  });

  it('应该包含用户名和密码输入字段', async () => {
    render(<LoginPage />);

    expect(screen.getByLabelText('用户名')).toBeInTheDocument();
    expect(screen.getByLabelText('密码')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('请输入用户名')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('请输入密码')).toBeInTheDocument();
  });

  it('应该显示密码可见性切换按钮', async () => {
    render(<LoginPage />);

    const passwordInput = screen.getByPlaceholderText('请输入密码');
    expect(passwordInput).toHaveAttribute('type', 'password');

    const toggleButton = screen.getByRole('button', { name: /toggle password visibility/i });
    await user.click(toggleButton);

    expect(passwordInput).toHaveAttribute('type', 'text');
  });

  it('应该验证表单必填字段', async () => {
    render(<LoginPage />);

    const submitButton = screen.getByRole('button', { name: '登录' });
    await user.click(submitButton);

    // 验证错误消息显示
    expect(screen.getByText('请输入用户名')).toBeInTheDocument();
    expect(screen.getByText('请输入密码')).toBeInTheDocument();
  });

  it('应该成功处理登录表单提交', async () => {
    render(<LoginPage />);

    // 填写表单
    await user.type(screen.getByLabelText('用户名'), 'admin');
    await user.type(screen.getByLabelText('密码'), 'admin123');

    const submitButton = screen.getByRole('button', { name: '登录' });
    await user.click(submitButton);

    // 验证登录函数被调用
    await waitFor(() => {
      expect(mockLogin).toHaveBeenCalledWith('admin', 'admin123');
    });

    // 验证导航发生
    expect(mockNavigate).toHaveBeenCalledWith('/admin/dashboard');
  });

  it('应该处理登录失败场景', async () => {
    const errorMessage = '认证失败';
    mockLogin.mockRejectedValue(new Error(errorMessage));

    render(<LoginPage />);

    // 填写表单
    await user.type(screen.getByLabelText('用户名'), 'admin');
    await user.type(screen.getByLabelText('密码'), 'wrongpassword');

    const submitButton = screen.getByRole('button', { name: '登录' });
    await user.click(submitButton);

    // 验证错误 toast 被调用
    await waitFor(() => {
      const { error } = vi.mocked(require('sonner').toast);
      expect(error).toHaveBeenCalledWith(errorMessage);
    });
  });

  it('应该显示加载状态当登录进行中', async () => {
    // 模拟异步登录
    mockLogin.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));

    render(<LoginPage />);

    // 填写表单并提交
    await user.type(screen.getByLabelText('用户名'), 'admin');
    await user.type(screen.getByLabelText('密码'), 'admin123');

    const submitButton = screen.getByRole('button', { name: '登录' });
    await user.click(submitButton);

    // 验证加载状态显示
    expect(screen.getByText('登录中...')).toBeInTheDocument();
    expect(submitButton).toBeDisabled();

    // 等待登录完成
    await waitFor(() => {
      expect(screen.queryByText('登录中...')).not.toBeInTheDocument();
    });
  });

  it('应该显示测试账号信息', async () => {
    render(<LoginPage />);

    expect(screen.getByText('测试账号:')).toBeInTheDocument();
    expect(screen.getByText('admin')).toBeInTheDocument();
    expect(screen.getByText('admin123')).toBeInTheDocument();
  });

  it('应该包含版权信息和联系链接', async () => {
    render(<LoginPage />);

    const currentYear = new Date().getFullYear();
    expect(screen.getByText(`© ${currentYear} 管理系统. 保留所有权利.`)).toBeInTheDocument();
    expect(screen.getByText('遇到问题？')).toBeInTheDocument();
    expect(screen.getByText('联系管理员')).toBeInTheDocument();
  });

  it('应该具有正确的样式类名', async () => {
    const { container } = render(<LoginPage />);

    // 验证背景渐变
    const bgGradient = container.querySelector('.bg-gradient-to-br');
    expect(bgGradient).toBeInTheDocument();

    // 验证卡片阴影
    const shadowCard = container.querySelector('.shadow-xl');
    expect(shadowCard).toBeInTheDocument();

    // 验证响应式 padding
    const responsivePadding = container.querySelector('.px-4.sm\:px-6.lg\:px-8');
    expect(responsivePadding).toBeInTheDocument();
  });

  it('应该包含正确的图标', async () => {
    render(<LoginPage />);

    // 验证用户图标
    const userIcons = screen.getAllByRole('img', { hidden: true });
    expect(userIcons.length).toBeGreaterThan(0);

    // 验证锁图标
    expect(screen.getByLabelText('username-icon')).toBeInTheDocument();
    expect(screen.getByLabelText('password-icon')).toBeInTheDocument();
  });
});