mini-starter/allin-packages/disability-management-ui/tests/integration/disability.integration.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 DisabilityManagement from '../../src/components/DisabilityManagement';
import { disabilityClientManager } from '../../src/api/disabilityClient';

// 完整的mock响应对象
const createMockResponse = (status: number, data?: any) => ({
  status,
  ok: status >= 200 && status < 300,
  body: null,
  bodyUsed: false,
  statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error',
  headers: new Headers(),
  url: '',
  redirected: false,
  type: 'basic' as ResponseType,
  json: async () => data || {},
  text: async () => '',
  blob: async () => new Blob(),
  arrayBuffer: async () => new ArrayBuffer(0),
  formData: async () => new FormData(),
  clone: function() { return this; }
});

// Mock API client
vi.mock('../../src/api/disabilityClient', () => {
  const mockDisabilityClient = {
    getAllDisabledPersons: {
      $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
        data: [
          {
            id: 1,
            name: '张三',
            gender: '男',
            idCard: '110101199001011234',
            disabilityId: 'CJZ20240001',
            disabilityType: '视力残疾',
            disabilityLevel: '一级',
            idAddress: '北京市东城区',
            phone: '13800138000',
            province: '北京市',
            city: '北京市',
            district: '东城区',
            createTime: '2024-01-01T00:00:00Z',
            updateTime: '2024-01-01T00:00:00Z'
          },
          {
            id: 2,
            name: '李四',
            gender: '女',
            idCard: '110101199002021234',
            disabilityId: 'CJZ20240002',
            disabilityType: '听力残疾',
            disabilityLevel: '二级',
            idAddress: '上海市黄浦区',
            phone: '13900139000',
            province: '上海市',
            city: '上海市',
            district: '黄浦区',
            createTime: '2024-01-02T00:00:00Z',
            updateTime: '2024-01-02T00:00:00Z'
          }
        ],
        total: 2
      }))),
    },
    searchDisabledPersons: {
      $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
        data: [
          {
            id: 1,
            name: '张三',
            gender: '男',
            idCard: '110101199001011234',
            disabilityId: 'CJZ20240001',
            disabilityType: '视力残疾',
            disabilityLevel: '一级',
            idAddress: '北京市东城区',
            phone: '13800138000',
            province: '北京市',
            city: '北京市',
            district: '东城区',
            createTime: '2024-01-01T00:00:00Z',
            updateTime: '2024-01-01T00:00:00Z'
          }
        ],
        total: 1
      }))),
    },
    createDisabledPerson: {
      $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
        id: 3,
        name: '王五',
        gender: '男',
        idCard: '110101199003031234',
        disabilityId: 'CJZ20240003',
        disabilityType: '肢体残疾',
        disabilityLevel: '三级',
        idAddress: '广州市天河区',
        phone: '13700137000',
        province: '广东省',
        city: '广州市',
        district: '天河区',
        createTime: '2024-01-03T00:00:00Z',
        updateTime: '2024-01-03T00:00:00Z'
      }))),
    },
    updateDisabledPerson: {
      $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
        id: 1,
        name: '张三（已更新）',
        gender: '男',
        idCard: '110101199001011234',
        disabilityId: 'CJZ20240001',
        disabilityType: '视力残疾',
        disabilityLevel: '一级',
        idAddress: '北京市东城区',
        phone: '13800138000',
        province: '北京市',
        city: '北京市',
        district: '东城区',
        createTime: '2024-01-01T00:00:00Z',
        updateTime: '2024-01-03T00:00:00Z'
      }))),
    },
    deleteDisabledPerson: {
      $post: vi.fn(() => Promise.resolve(createMockResponse(200, { success: true }))),
    },
    getDisabledPerson: {
      ':id': {
        $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
          id: 1,
          name: '张三',
          gender: '男',
          idCard: '110101199001011234',
          disabilityId: 'CJZ20240001',
          disabilityType: '视力残疾',
          disabilityLevel: '一级',
          idAddress: '北京市东城区',
          phone: '13800138000',
          province: '北京市',
          city: '北京市',
          district: '东城区',
          createTime: '2024-01-01T00:00:00Z',
          updateTime: '2024-01-01T00:00:00Z'
        }))),
      }
    },
    findByIdCard: {
      ':idCard': {
        $get: vi.fn(() => Promise.resolve(createMockResponse(200, null))),
      }
    },
    batchCreateDisabledPersons: {
      $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
        success: true,
        createdCount: 2,
        failedItems: []
      }))),
    }
  };

  const mockDisabilityClientManager = {
    get: vi.fn(() => mockDisabilityClient),
    init: vi.fn(() => mockDisabilityClient),
    reset: vi.fn(),
  };

  return {
    disabilityClientManager: mockDisabilityClientManager,
    disabilityClient: mockDisabilityClient,
  };
});

// Mock AreaSelect组件
vi.mock('@d8d/area-management-ui', () => ({
  AreaSelect: ({ onChange, value, disabled, 'data-testid': testId }: any) => (
    <div data-testid={testId || 'area-select'}>
      <select
        data-testid="area-province-select"
        onChange={(e) => onChange && onChange({ provinceId: e.target.value ? 1 : undefined })}
        value={value?.provinceId || ''}
        disabled={disabled}
      >
        <option value="">选择省份</option>
        <option value="1">北京市</option>
      </select>
      <select
        data-testid="area-city-select"
        onChange={(e) => onChange && onChange({ provinceId: 1, cityId: e.target.value ? 2 : undefined })}
        value={value?.cityId || ''}
        disabled={disabled}
      >
        <option value="">选择城市</option>
        <option value="2">北京市</option>
      </select>
      <select
        data-testid="area-district-select"
        onChange={(e) => onChange && onChange({ provinceId: 1, cityId: 2, districtId: e.target.value ? 3 : undefined })}
        value={value?.districtId || ''}
        disabled={disabled}
      >
        <option value="">选择区县</option>
        <option value="3">东城区</option>
      </select>
    </div>
  ),
}));

describe('残疾人管理集成测试', () => {
  let queryClient: QueryClient;

  beforeEach(() => {
    queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          retry: false,
        },
      },
    });
    vi.clearAllMocks();
  });

  const renderComponent = () => {
    return render(
      <QueryClientProvider client={queryClient}>
        <DisabilityManagement />
      </QueryClientProvider>
    );
  };

  it('应该正确渲染残疾人管理组件', async () => {
    renderComponent();

    // 验证标题
    expect(screen.getByText('残疾人管理')).toBeInTheDocument();
    expect(screen.getByText('管理残疾人信息，包括创建、更新、删除和查询功能')).toBeInTheDocument();

    // 验证搜索框
    expect(screen.getByTestId('search-input')).toBeInTheDocument();
    expect(screen.getByTestId('search-button')).toBeInTheDocument();

    // 验证新增按钮
    expect(screen.getByTestId('create-button')).toBeInTheDocument();

    // 等待数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
      expect(screen.getByText('李四')).toBeInTheDocument();
    });

    // 验证表格列
    expect(screen.getByText('姓名')).toBeInTheDocument();
    expect(screen.getByText('性别')).toBeInTheDocument();
    expect(screen.getByText('身份证号')).toBeInTheDocument();
    expect(screen.getByText('残疾证号')).toBeInTheDocument();
    expect(screen.getByText('残疾类型')).toBeInTheDocument();
    expect(screen.getByText('联系电话')).toBeInTheDocument();
    expect(screen.getByText('创建时间')).toBeInTheDocument();
    expect(screen.getByText('操作')).toBeInTheDocument();
  });

  it('应该能够搜索残疾人', async () => {
    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 输入搜索关键词
    const searchInput = screen.getByTestId('search-input');
    fireEvent.change(searchInput, { target: { value: '张三' } });

    // 点击搜索按钮
    const searchButton = screen.getByTestId('search-button');
    fireEvent.click(searchButton);

    // 验证搜索功能被调用
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
      expect(screen.queryByText('李四')).not.toBeInTheDocument();
    });
  });

  it('应该能够打开创建模态框并填写表单', async () => {
    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 点击新增按钮
    const createButton = screen.getByTestId('create-button');
    fireEvent.click(createButton);

    // 验证模态框打开 - 检查对话框标题
    await waitFor(() => {
      const elements = screen.getAllByText('新增残疾人');
      expect(elements.length).toBeGreaterThan(1); // 按钮和对话框标题
    });

    // 填写表单
    fireEvent.change(screen.getByTestId('name-input'), { target: { value: '王五' } });
    fireEvent.change(screen.getByTestId('gender-select'), { target: { value: '男' } });
    fireEvent.change(screen.getByTestId('id-card-input'), { target: { value: '110101199003031234' } });
    fireEvent.change(screen.getByTestId('disability-id-input'), { target: { value: 'CJZ20240003' } });
    fireEvent.change(screen.getByTestId('disability-type-input'), { target: { value: '肢体残疾' } });
    fireEvent.change(screen.getByTestId('disability-level-input'), { target: { value: '三级' } });
    fireEvent.change(screen.getByTestId('phone-input'), { target: { value: '13700137000' } });
    fireEvent.change(screen.getByTestId('id-address-input'), { target: { value: '广州市天河区' } });

    // 选择地区
    fireEvent.change(screen.getByTestId('area-province-select'), { target: { value: '1' } });
    fireEvent.change(screen.getByTestId('area-city-select'), { target: { value: '2' } });
    fireEvent.change(screen.getByTestId('area-district-select'), { target: { value: '3' } });

    // 验证表单字段
    expect(screen.getByTestId('name-input')).toHaveValue('王五');
    expect(screen.getByTestId('gender-select')).toHaveValue('男');
    expect(screen.getByTestId('id-card-input')).toHaveValue('110101199003031234');
  });

  it('应该能够编辑残疾人信息', async () => {
    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 点击编辑按钮
    const editButton = screen.getByTestId('edit-button-1');
    fireEvent.click(editButton);

    // 验证编辑模态框打开
    await waitFor(() => {
      expect(screen.getByText('编辑残疾人')).toBeInTheDocument();
    });

    // 验证表单已填充数据
    expect(screen.getByTestId('update-name-input')).toHaveValue('张三');
    expect(screen.getByTestId('update-gender-select')).toHaveValue('男');
    expect(screen.getByTestId('update-id-card-input')).toHaveValue('110101199001011234');

    // 修改姓名
    fireEvent.change(screen.getByTestId('update-name-input'), { target: { value: '张三（已更新）' } });

    // 点击更新按钮
    const updateButton = screen.getByTestId('update-submit-button');
    fireEvent.click(updateButton);

    // 验证更新API被调用
    await waitFor(() => {
      expect(screen.queryByText('编辑残疾人')).not.toBeInTheDocument();
    });
  });

  it('应该能够删除残疾人', async () => {
    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 点击删除按钮
    const deleteButton = screen.getByTestId('delete-button-1');
    fireEvent.click(deleteButton);

    // 验证删除确认对话框打开
    await waitFor(() => {
      const elements = screen.getAllByText('确认删除');
      expect(elements.length).toBeGreaterThan(1); // 对话框标题和按钮
    });

    // 点击确认删除按钮
    const confirmButton = screen.getByTestId('confirm-delete-button');
    fireEvent.click(confirmButton);

    // 验证删除API被调用
    await waitFor(() => {
      expect(screen.queryByText('确认删除')).not.toBeInTheDocument();
    });
  });

  it('应该处理表单验证错误', async () => {
    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 点击新增按钮
    const createButton = screen.getByTestId('create-button');
    fireEvent.click(createButton);

    // 验证模态框打开 - 检查对话框标题
    await waitFor(() => {
      const elements = screen.getAllByText('新增残疾人');
      expect(elements.length).toBeGreaterThan(1); // 按钮和对话框标题
    });

    // 尝试提交空表单
    const submitButton = screen.getByTestId('create-submit-button');
    fireEvent.click(submitButton);

    // 验证验证错误信息
    await waitFor(() => {
      expect(screen.getByText('姓名不能为空')).toBeInTheDocument();
      expect(screen.getByText('身份证号不能为空')).toBeInTheDocument();
      expect(screen.getByText('残疾证号不能为空')).toBeInTheDocument();
    });
  });

  it('应该处理API错误', async () => {
    // Mock API错误 - 使用mockImplementationOnce
    const mockCreate = disabilityClientManager.get().createDisabledPerson.$post as any;
    mockCreate.mockImplementationOnce(() => Promise.reject(new Error('创建失败')));

    renderComponent();

    // 等待初始数据加载
    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument();
    });

    // 打开创建模态框
    const createButton = screen.getByTestId('create-button');
    fireEvent.click(createButton);

    // 等待模态框打开 - 检查对话框标题
    await waitFor(() => {
      const dialogTitles = screen.getAllByText('新增残疾人');
      expect(dialogTitles.length).toBeGreaterThan(1); // 按钮和对话框标题
    });

    fireEvent.change(screen.getByTestId('name-input'), { target: { value: '测试用户' } });
    fireEvent.change(screen.getByTestId('gender-select'), { target: { value: '男' } });
    fireEvent.change(screen.getByTestId('id-card-input'), { target: { value: '110101199001011234' } });
    fireEvent.change(screen.getByTestId('disability-id-input'), { target: { value: 'CJZ20240001' } });
    fireEvent.change(screen.getByTestId('disability-type-input'), { target: { value: '视力残疾' } });
    fireEvent.change(screen.getByTestId('disability-level-input'), { target: { value: '一级' } });
    fireEvent.change(screen.getByTestId('phone-input'), { target: { value: '13800138000' } });
    fireEvent.change(screen.getByTestId('id-address-input'), { target: { value: '北京市东城区' } });

    // 提交表单
    const submitButton = screen.getByTestId('create-submit-button');
    fireEvent.click(submitButton);

    // 验证错误处理（toast错误消息由sonner处理，这里我们验证表单没有关闭）
    await waitFor(() => {
      const elements = screen.getAllByText('新增残疾人');
      expect(elements.length).toBeGreaterThan(1); // 按钮和对话框标题
    });
  });
});