mini-starter/packages/area-management-ui/test/utils/usage-example.ts

/**
 * 测试工具使用示例
 * 展示如何在其他包中使用 area-management-ui 的测试工具
 */

import { vi } from 'vitest';

// 示例1：基本使用
export const example1 = `
// 在残疾人管理UI包的测试中
import { createAreaClientMock, mockAreaData } from '@d8d/area-management-ui/test-utils';

// Mock areaClient API
vi.mock('@d8d/area-management-ui/api', () => createAreaClientMock());

// 或者使用预设数据
vi.mock('@d8d/area-management-ui/api', () => createAreaClientMock(mockAreaData.mockAllAreas));
`;

// 示例2：使用预设mock
export const example2 = `
import { presetMocks } from '@d8d/area-management-ui/test-utils';

// 使用成功mock
vi.mock('@d8d/area-management-ui/api', () => presetMocks.success());

// 使用空数据mock
vi.mock('@d8d/area-management-ui/api', () => presetMocks.empty());

// 使用错误mock
vi.mock('@d8d/area-management-ui/api', () => presetMocks.error('network'));
`;

// 示例3：完整测试示例
export const example3 = `
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createAreaClientMock, TestWrapper } from '@d8d/area-management-ui/test-utils';
import YourComponent from './YourComponent';

// Mock areaClient
vi.mock('@d8d/area-management-ui/api', () => createAreaClientMock());

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

  it('应该正确渲染', () => {
    render(
      <TestWrapper>
        <YourComponent />
      </TestWrapper>
    );

    expect(screen.getByText('Some content')).toBeInTheDocument();
  });
});
`;

// 示例4：在残疾人管理UI包中的实际使用
export const disabilityManagementExample = `
// 文件：allin-packages/disability-person-management-ui/tests/integration/disability-person.integration.test.tsx

import { createAreaClientMock } from '@d8d/area-management-ui/test-utils';

// 替换原有的复杂mock
// 原来的：
// vi.mock('@d8d/area-management-ui/components', () => ({
//   AreaSelect: vi.fn(...),
//   AreaSelectForm: vi.fn(...),
// }));

// 现在的：
vi.mock('@d8d/area-management-ui/api', () => createAreaClientMock());

// 注意：现在我们不需要mock UI组件了！
// 可以直接使用真实的 AreaSelect 和 AreaSelectForm 组件
// 因为它们会使用我们mock的API
`;

// 示例5：在强权管理UI包中的使用
export const orderManagementExample = `
// 文件：allin-packages/order-management-ui/tests/integration/order.integration.test.tsx

import { createAreaClientMock } from '@d8d/area-management-ui/test-utils';

// 替换原有的mock
// 原来的：
// vi.mock('@d8d/area-management-ui', () => ({
//   AreaSelect: vi.fn(({ value, onChange }) => (...)),
// }));

// 现在的：
vi.mock('@d8d/area-management-ui/api', () => createAreaClientMock());

// 现在可以直接使用真实的 AreaSelect 组件
// 组件会从mock的API获取数据
`;

// 优势总结
export const advantages = `
## 使用测试工具的优势

1. **一致性**：所有包使用相同的mock逻辑
2. **维护性**：mock逻辑集中在一处，易于更新
3. **真实性**：使用真实组件，测试更接近实际使用
4. **简化测试**：减少重复的mock代码
5. **类型安全**：提供完整的TypeScript类型支持
6. **灵活性**：支持自定义数据和错误场景

## 迁移步骤

1. 安装或更新 area-management-ui 包
2. 导入测试工具：import { createAreaClientMock } from '@d8d/area-management-ui/test-utils'
3. 替换原有的 areaClient mock
4. 移除对 UI 组件的 mock（AreaSelect, AreaSelectForm）
5. 运行测试，确保一切正常
`;