Forráskód Böngészése

✅ test(area-select-form): 优化集成测试的交互逻辑和模拟数据

- 引入 userEvent 库以提供更真实的用户交互模拟
- 更新模拟 API 返回的城市名称以更准确反映实际数据(北京市辖区、上海市辖区)
- 改进测试选择逻辑,使用 userEvent.selectOptions 直接操作隐藏的 select 元素
- 使用 findAllByText 处理多个匹配的文本元素,确保点击正确的显示元素
- 优化等待逻辑和元素状态检查,提升测试稳定性和可读性
yourname 2 hete
szülő
commit
21e47d3610

+ 32 - 31
packages/area-management-ui/tests/integration/area-select-form.integration.test.tsx

@@ -7,6 +7,7 @@ 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({
@@ -42,7 +43,7 @@ vi.mock('../../src/api/areaClient', () => ({
               status: 200,
               json: async () => ({
                 data: [
-                  { id: 3, name: '北京市', level: 2, parentId: 1 }
+                  { id: 3, name: '北京市辖区', level: 2, parentId: 1 }
                 ]
               })
             };
@@ -52,7 +53,7 @@ vi.mock('../../src/api/areaClient', () => ({
               status: 200,
               json: async () => ({
                 data: [
-                  { id: 4, name: '上海市', level: 2, parentId: 2 }
+                  { id: 4, name: '上海市辖区', level: 2, parentId: 2 }
                 ]
               })
             };
@@ -217,22 +218,22 @@ describe('AreaSelectForm 集成测试', () => {
   it('应该正确更新表单字段值当选择省份和城市时', async () => {
     render(<TestForm />);
 
+    const provinceSelect = screen.getByTestId('test-area-province');
     // 等待省份数据加载
     await waitFor(() => {
-      expect(screen.getByTestId('test-area-province')).toBeInTheDocument();
+      expect(provinceSelect).toBeInTheDocument();
+      expect(provinceSelect).not.toHaveAttribute('disabled');
     });
 
     // 使用fireEvent点击省份选择
-    const provinceSelect = screen.getByTestId('test-area-province');
     fireEvent.click(provinceSelect);
 
-    // 等待选项出现
-    await waitFor(() => {
-      expect(screen.getByText('北京市')).toBeInTheDocument();
-    });
-
-    // 选择北京市
-    fireEvent.click(screen.getByText('北京市'));
+    // 选择北京市 - 尝试直接设置隐藏的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(() => {
@@ -244,13 +245,13 @@ describe('AreaSelectForm 集成测试', () => {
     const citySelect = screen.getByTestId('test-area-city');
     fireEvent.click(citySelect);
 
-    // 等待城市选项出现
+    // 等待城市选项出现 - 城市数据应该是"北京市辖区"
     await waitFor(() => {
-      expect(screen.getByText('北京市')).toBeInTheDocument();
+      expect(screen.getByText('北京市辖区')).toBeInTheDocument();
     });
 
-    // 选择北京市(城市)
-    fireEvent.click(screen.getByText('北京市'));
+    // 选择北京市辖区(城市)
+    fireEvent.click(screen.getByText('北京市辖区'));
 
     // 提交表单
     const submitButton = screen.getByTestId('submit-button');
@@ -277,14 +278,14 @@ describe('AreaSelectForm 集成测试', () => {
       fireEvent.click(provinceSelect);
     });
 
-    // 等待选项出现
-    await waitFor(() => {
-      expect(screen.getByText('北京市')).toBeInTheDocument();
-    });
+    // 等待选项出现 - 使用 findAllByText 来处理多个匹配
+    const beijingOptions = await screen.findAllByText('北京市');
+    // 第一个是隐藏的option,第二个是显示的span
+    expect(beijingOptions.length).toBeGreaterThanOrEqual(2);
 
-    // 选择北京市
+    // 选择北京市 - 点击显示的span元素(第二个)
     await act(async () => {
-      fireEvent.click(screen.getByText('北京市'));
+      fireEvent.click(beijingOptions[1]);
     });
 
     // 等待城市选择启用
@@ -345,14 +346,14 @@ describe('AreaSelectForm 集成测试', () => {
       fireEvent.click(provinceSelect);
     });
 
-    // 等待选项出现
-    await waitFor(() => {
-      expect(screen.getByText('北京市')).toBeInTheDocument();
-    });
+    // 等待选项出现 - 使用 findAllByText 来处理多个匹配
+    const beijingOptions = await screen.findAllByText('北京市');
+    // 第一个是隐藏的option,第二个是显示的span
+    expect(beijingOptions.length).toBeGreaterThanOrEqual(2);
 
-    // 选择北京市
+    // 选择北京市 - 点击显示的span元素(第二个)
     await act(async () => {
-      fireEvent.click(screen.getByText('北京市'));
+      fireEvent.click(beijingOptions[1]);
     });
 
     // 等待城市选择启用
@@ -367,14 +368,14 @@ describe('AreaSelectForm 集成测试', () => {
       fireEvent.click(citySelect);
     });
 
-    // 等待城市选项出现
+    // 等待城市选项出现 - 城市数据应该是"北京市辖区"
     await waitFor(() => {
-      expect(screen.getByText('北京市')).toBeInTheDocument();
+      expect(screen.getByText('北京市辖区')).toBeInTheDocument();
     });
 
-    // 选择北京市(城市)
+    // 选择北京市辖区(城市)
     await act(async () => {
-      fireEvent.click(screen.getByText('北京市'));
+      fireEvent.click(screen.getByText('北京市辖区'));
     });
 
     // 等待区县选择启用