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

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

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

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

// Mock shared UI components - 改进mock策略避免React警告
vi.mock('@d8d/shared-ui-components', () => ({
  Button: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('button', { ...safeProps, 'data-testid': 'button' }, children);
  },
  Card: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card' }, children);
  },
  CardContent: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card-content' }, children);
  },
  CardDescription: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card-description' }, children);
  },
  CardFooter: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card-footer' }, children);
  },
  CardHeader: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card-header' }, children);
  },
  CardTitle: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'card-title' }, children);
  },
  Form: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'form' }, children);
  },
  FormControl: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'form-control' }, children);
  },
  FormField: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'form-field' }, children);
  },
  FormItem: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'form-item' }, children);
  },
  FormLabel: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('label', { ...safeProps, 'data-testid': 'form-label' }, children);
  },
  FormMessage: ({ children, ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('div', { ...safeProps, 'data-testid': 'form-message' }, children);
  },
  Input: ({ ...props }: any) => {
    const { render, handleSubmit, setValue, getValues, resetField, clearErrors, setError, setFocus, getFieldState, formState, subscribe, trigger, register, watch, reset, unregister, ...safeProps } = props;
    return React.createElement('input', { ...safeProps, 'data-testid': 'input' });
  },
}));

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

  it('应该渲染默认登录页面', () => {
    renderWithProviders(React.createElement(AuthManagement));

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

  it('应该支持自定义子组件', () => {
    const CustomComponent = () => React.createElement('div', { 'data-testid': 'custom-component' }, 'Custom Auth Component');

    renderWithProviders(
      React.createElement(AuthManagement, null,
        React.createElement(CustomComponent)
      )
    );

    expect(screen.getByTestId('custom-component')).toBeInTheDocument();
  });

  it('应该支持自定义登录页面', () => {
    const CustomLoginPage = () => React.createElement('div', { 'data-testid': 'custom-login-page' }, 'Custom Login Page');

    renderWithProviders(React.createElement(AuthManagement, { customLoginPage: CustomLoginPage }));

    expect(screen.getByTestId('custom-login-page')).toBeInTheDocument();
  });
});