mini-starter/packages/area-management-ui/tests/integration/area-select-form.integration.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AreaSelectForm } from '../../src/components/AreaSelectForm';
import { Button } from '@d8d/shared-ui-components/components/ui/button';
import { Form } from '@d8d/shared-ui-components/components/ui/form';
import userEvent from '@testing-library/user-event';

// 测试用的schema
const TestSchema = z.object({
  province: z.string().min(1, '省份不能为空'),
  city: z.string().min(1, '城市不能为空'),
  district: z.string().optional(),
});

type TestFormData = z.infer<typeof TestSchema>;

// Mock API 调用
vi.mock('../../src/api/areaClient', () => ({
  areaClientManager: {
    get: vi.fn(() => ({
      index: {
        $get: vi.fn(async ({ query }) => {
          const filters = JSON.parse(query.filters);

          if (filters.level === 1) {
            // 省份数据
            return {
              status: 200,
              json: async () => ({
                data: [
                  { id: 1, name: '北京市', level: 1, parentId: null },
                  { id: 2, name: '上海市', level: 1, parentId: null }
                ]
              })
            };
          } else if (filters.level === 2 && filters.parentId === 1) {
            // 北京市的城市数据
            return {
              status: 200,
              json: async () => ({
                data: [
                  { id: 3, name: '北京市辖区', level: 2, parentId: 1 }
                ]
              })
            };
          } else if (filters.level === 2 && filters.parentId === 2) {
            // 上海市的城市数据
            return {
              status: 200,
              json: async () => ({
                data: [
                  { id: 4, name: '上海市辖区', level: 2, parentId: 2 }
                ]
              })
            };
          } else if (filters.level === 3 && filters.parentId === 3) {
            // 北京市的区县数据
            return {
              status: 200,
              json: async () => ({
                data: [
                  { id: 5, name: '东城区', level: 3, parentId: 3 },
                  { id: 6, name: '西城区', level: 3, parentId: 3 }
                ]
              })
            };
          } else if (filters.level === 3 && filters.parentId === 4) {
            // 上海市的区县数据
            return {
              status: 200,
              json: async () => ({
                data: [
                  { id: 7, name: '黄浦区', level: 3, parentId: 4 },
                  { id: 8, name: '徐汇区', level: 3, parentId: 4 }
                ]
              })
            };
          }

          return {
            status: 200,
            json: async () => ({ data: [] })
          };
        })
      }
    }))
  }
}));

// 创建测试用的 QueryClient
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

// 测试组件
const TestForm = () => {
  const form = useForm<TestFormData>({
    resolver: zodResolver(TestSchema),
    defaultValues: {
      province: '',
      city: '',
      district: '',
    },
    mode: 'onSubmit', // 使用onSubmit模式，这是默认值
  });

  const onSubmit = vi.fn();

  return (
    <QueryClientProvider client={createTestQueryClient()}>
      <FormProvider {...form}>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <AreaSelectForm<TestFormData>
              provinceName="province"
              cityName="city"
              districtName="district"
              label="地区选择"
              required={true}
              testIdPrefix="test-area"
            />
            <Button type="submit" data-testid="submit-button">
              提交
            </Button>
          </form>
        </Form>
      </FormProvider>
    </QueryClientProvider>
  );
};

describe('AreaSelectForm 集成测试', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('应该正确渲染AreaSelectForm组件', async () => {
    render(<TestForm />);

    expect(screen.getByText('地区选择')).toBeInTheDocument();
    // 检查是否包含必填标记（星号）
    const label = screen.getByText('地区选择');
    expect(label.parentElement).toContainHTML('*');

    // 等待省份数据加载
    await waitFor(() => {
      expect(screen.getByText('选择省份')).toBeInTheDocument();
    });
  });

  it('应该显示省份和城市的验证错误当表单提交时', async () => {
    const TestFormWithRef = () => {
      const form = useForm<TestFormData>({
        resolver: zodResolver(TestSchema),
        defaultValues: {
          province: '',
          city: '',
          district: '',
        },
        mode: 'onSubmit',
      });

      const onSubmit = vi.fn();

      return (
        <QueryClientProvider client={createTestQueryClient()}>
          <FormProvider {...form}>
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)}>
                <AreaSelectForm<TestFormData>
                  provinceName="province"
                  cityName="city"
                  districtName="district"
                  label="地区选择"
                  required={true}
                  testIdPrefix="test-area"
                />
                <Button type="submit" data-testid="submit-button">
                  提交
                </Button>
              </form>
            </Form>
          </FormProvider>
        </QueryClientProvider>
      );
    };

    render(<TestFormWithRef />);

    // 初始状态不应该有验证错误
    expect(screen.queryByText('省份不能为空')).not.toBeInTheDocument();
    expect(screen.queryByText('城市不能为空')).not.toBeInTheDocument();

    // 提交表单（不选择任何省份和城市）
    const submitButton = screen.getByTestId('submit-button');
    await act(async () => {
      fireEvent.click(submitButton);
    });

    // 等待一下，让验证完成
    await new Promise(resolve => setTimeout(resolve, 100));

    // 等待验证错误显示
    await waitFor(() => {
      expect(screen.getByText('省份不能为空')).toBeInTheDocument();
      expect(screen.getByText('城市不能为空')).toBeInTheDocument();
    }, { timeout: 3000 });
  });

  it('应该正确更新表单字段值当选择省份和城市时', async () => {
    render(<TestForm />);

    const provinceSelect = screen.getByTestId('test-area-province');
    // 等待省份数据加载
    await waitFor(() => {
      expect(provinceSelect).toBeInTheDocument();
      expect(provinceSelect).not.toHaveAttribute('disabled');
    });

    // 使用fireEvent点击省份选择
    fireEvent.click(provinceSelect);

    // 选择北京市 - 尝试直接设置隐藏的select元素的值
    // 查找隐藏的select元素
    const hiddenSelect = screen.getByTestId('test-area-province').parentElement?.querySelector('select[aria-hidden="true"]');
    if (hiddenSelect) {
      await userEvent.selectOptions(hiddenSelect, '1');
    }

    // 等待城市选择启用 - 检查aria-disabled属性或disabled属性
    await waitFor(() => {
      const citySelect = screen.getByTestId('test-area-city');
      expect(citySelect).not.toHaveAttribute('disabled');
    }, { timeout: 2000 });

    // 点击城市选择
    const citySelect = screen.getByTestId('test-area-city');
    fireEvent.click(citySelect);

    // 等待城市选项出现 - 城市数据应该是"北京市辖区"
    await waitFor(() => {
      expect(screen.getByText('北京市辖区')).toBeInTheDocument();
    });

    // 选择北京市辖区（城市）
    fireEvent.click(screen.getByText('北京市辖区'));

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

    // 不应该有验证错误
    await waitFor(() => {
      expect(screen.queryByText('省份不能为空')).not.toBeInTheDocument();
      expect(screen.queryByText('城市不能为空')).not.toBeInTheDocument();
    });
  });

  it('应该显示验证错误当只选择省份不选择城市时', async () => {
    render(<TestForm />);

    // 等待省份数据加载
    await waitFor(() => {
      expect(screen.getByTestId('test-area-province')).toBeInTheDocument();
    });

    // 点击省份选择
    const provinceSelect = screen.getByTestId('test-area-province');
    await act(async () => {
      fireEvent.click(provinceSelect);
    });

    // 等待选项出现 - 使用 findAllByText 来处理多个匹配
    const beijingOptions = await screen.findAllByText('北京市');
    // 第一个是隐藏的option，第二个是显示的span
    expect(beijingOptions.length).toBeGreaterThanOrEqual(2);

    // 选择北京市 - 点击显示的span元素（第二个）
    await act(async () => {
      fireEvent.click(beijingOptions[1]);
    });

    // 等待城市选择启用
    await waitFor(() => {
      const citySelect = screen.getByTestId('test-area-city');
      expect(citySelect).not.toHaveAttribute('disabled');
    }, { timeout: 2000 });

    // 提交表单（不选择城市）
    const submitButton = screen.getByTestId('submit-button');
    await act(async () => {
      fireEvent.click(submitButton);
    });

    // 应该只有城市验证错误
    await waitFor(() => {
      expect(screen.queryByText('省份不能为空')).not.toBeInTheDocument();
      expect(screen.getByText('城市不能为空')).toBeInTheDocument();
    }, { timeout: 3000 });
  });

  it('应该显示验证错误当只选择城市不选择省份时', async () => {
    render(<TestForm />);

    // 等待省份数据加载
    await waitFor(() => {
      expect(screen.getByText('选择省份')).toBeInTheDocument();
    });

    // 注意：在真实的 AreaSelect 组件中，城市选择在省份未选择时是禁用的
    // 所以这个测试用例在真实组件中可能无法直接测试
    // 我们改为测试初始状态提交表单的情况

    // 提交表单（不选择任何省份和城市）
    const submitButton = screen.getByTestId('submit-button');
    await act(async () => {
      fireEvent.click(submitButton);
    });

    // 应该显示省份和城市的验证错误
    await waitFor(() => {
      expect(screen.getByText('省份不能为空')).toBeInTheDocument();
      expect(screen.getByText('城市不能为空')).toBeInTheDocument();
    });
  });

  it('应该正确处理区县字段（可选）', async () => {
    render(<TestForm />);

    // 等待省份数据加载
    await waitFor(() => {
      expect(screen.getByTestId('test-area-province')).toBeInTheDocument();
    });

    // 点击省份选择
    const provinceSelect = screen.getByTestId('test-area-province');
    await act(async () => {
      fireEvent.click(provinceSelect);
    });

    // 等待选项出现 - 使用 findAllByText 来处理多个匹配
    const beijingOptions = await screen.findAllByText('北京市');
    // 第一个是隐藏的option，第二个是显示的span
    expect(beijingOptions.length).toBeGreaterThanOrEqual(2);

    // 选择北京市 - 点击显示的span元素（第二个）
    await act(async () => {
      fireEvent.click(beijingOptions[1]);
    });

    // 等待城市选择启用
    await waitFor(() => {
      const citySelect = screen.getByTestId('test-area-city');
      expect(citySelect).not.toHaveAttribute('disabled');
    }, { timeout: 2000 });

    // 点击城市选择
    const citySelect = screen.getByTestId('test-area-city');
    await act(async () => {
      fireEvent.click(citySelect);
    });

    // 等待城市选项出现 - 城市数据应该是"北京市辖区"
    await waitFor(() => {
      expect(screen.getByText('北京市辖区')).toBeInTheDocument();
    });

    // 选择北京市辖区（城市）
    await act(async () => {
      fireEvent.click(screen.getByText('北京市辖区'));
    });

    // 等待区县选择启用
    await waitFor(() => {
      const districtSelect = screen.getByTestId('test-area-district');
      expect(districtSelect).not.toHaveAttribute('disabled');
    }, { timeout: 2000 });

    // 点击区县选择
    const districtSelect = screen.getByTestId('test-area-district');
    await act(async () => {
      fireEvent.click(districtSelect);
    });

    // 等待区县选项出现
    await waitFor(() => {
      expect(screen.getByText('东城区')).toBeInTheDocument();
    });

    // 选择东城区
    await act(async () => {
      fireEvent.click(screen.getByText('东城区'));
    });

    // 提交表单
    const submitButton = screen.getByTestId('submit-button');
    await act(async () => {
      fireEvent.click(submitButton);
    });

    // 不应该有验证错误
    await waitFor(() => {
      expect(screen.queryByText('省份不能为空')).not.toBeInTheDocument();
      expect(screen.queryByText('城市不能为空')).not.toBeInTheDocument();
    });
  });

  it('应该支持禁用状态', async () => {
    const DisabledTestForm = () => {
      const form = useForm<TestFormData>({
        resolver: zodResolver(TestSchema),
        defaultValues: {
          province: '',
          city: '',
          district: '',
        },
      });

      return (
        <QueryClientProvider client={createTestQueryClient()}>
          <FormProvider {...form}>
            <Form {...form}>
              <AreaSelectForm<TestFormData>
                provinceName="province"
                cityName="city"
                districtName="district"
                label="地区选择"
                required={true}
                disabled={true}
                testIdPrefix="test-area"
              />
            </Form>
          </FormProvider>
        </QueryClientProvider>
      );
    };

    render(<DisabledTestForm />);

    // 等待省份数据加载
    await waitFor(() => {
      expect(screen.getByText('选择省份')).toBeInTheDocument();
    });

    // 检查省份选择触发器是否被禁用
    // 注意：shadcn/ui 的 Select 组件禁用状态需要通过 aria-disabled 或 disabled 属性检查
    const provinceTrigger = screen.getByText('选择省份');
    // 在实际的 shadcn/ui Select 组件中，禁用状态可能通过父元素的属性或样式体现
    // 这里我们主要验证组件能正常渲染且不会抛出错误
    expect(provinceTrigger).toBeInTheDocument();
  });
});