mini-starter/packages/auth-management-ui/tests/unit/LoginPage.test.tsx

import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { screen, fireEvent, waitFor } from '@testing-library/react';
import { LoginPage } from '../../src/components/LoginPage';
import { AuthProvider } from '../../src/hooks/AuthProvider';
import { renderWithProviders } from '../test-utils';

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

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

// Mock shared UI components - 简化mock避免复杂渲染问题
vi.mock('@d8d/shared-ui-components', () => ({
  Button: ({ children, ...props }: any) => React.createElement('button', { ...props, 'data-testid': 'button' }, children),
  Card: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card' }, children),
  CardContent: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card-content' }, children),
  CardDescription: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card-description' }, children),
  CardFooter: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card-footer' }, children),
  CardHeader: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card-header' }, children),
  CardTitle: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'card-title' }, children),
  Form: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'form' }, children),
  FormControl: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'form-control' }, children),
  FormField: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'form-field' }, children),
  FormItem: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'form-item' }, children),
  FormLabel: ({ children, ...props }: any) => React.createElement('label', { ...props, 'data-testid': 'form-label' }, children),
  FormMessage: ({ children, ...props }: any) => React.createElement('div', { ...props, 'data-testid': 'form-message' }, children),
  Input: ({ ...props }: any) => React.createElement('input', { ...props, 'data-testid': 'input' }),
}));

describe('LoginPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  const renderWithAuthProvider = (component: React.ReactElement) => {
    return renderWithProviders(
      <AuthProvider>
        {component}
      </AuthProvider>
    );
  };

  it('应该渲染登录页面', () => {
    renderWithAuthProvider(<LoginPage />);

    // 验证页面基本结构
    expect(screen.getByTestId('card')).toBeInTheDocument();
    expect(screen.getByTestId('form')).toBeInTheDocument();
    expect(screen.getByTestId('button')).toBeInTheDocument();
  });

  it('应该显示用户名和密码输入框', () => {
    renderWithAuthProvider(<LoginPage />);

    // 验证输入框存在
    const inputs = screen.getAllByTestId('input');
    expect(inputs.length).toBeGreaterThan(0);
  });

  it('应该显示登录按钮', () => {
    renderWithAuthProvider(<LoginPage />);

    // 验证按钮存在
    const buttons = screen.getAllByTestId('button');
    expect(buttons.length).toBeGreaterThan(0);
  });
});