|
@@ -7,6 +7,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
|
import { AreaSelectForm } from '../../src/components/AreaSelectForm';
|
|
import { AreaSelectForm } from '../../src/components/AreaSelectForm';
|
|
|
import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
|
import { Form } from '@d8d/shared-ui-components/components/ui/form';
|
|
import { Form } from '@d8d/shared-ui-components/components/ui/form';
|
|
|
|
|
+import userEvent from '@testing-library/user-event';
|
|
|
|
|
|
|
|
// 测试用的schema
|
|
// 测试用的schema
|
|
|
const TestSchema = z.object({
|
|
const TestSchema = z.object({
|
|
@@ -42,7 +43,7 @@ vi.mock('../../src/api/areaClient', () => ({
|
|
|
status: 200,
|
|
status: 200,
|
|
|
json: async () => ({
|
|
json: async () => ({
|
|
|
data: [
|
|
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,
|
|
status: 200,
|
|
|
json: async () => ({
|
|
json: async () => ({
|
|
|
data: [
|
|
data: [
|
|
|
- { id: 4, name: '上海市', level: 2, parentId: 2 }
|
|
|
|
|
|
|
+ { id: 4, name: '上海市辖区', level: 2, parentId: 2 }
|
|
|
]
|
|
]
|
|
|
})
|
|
})
|
|
|
};
|
|
};
|
|
@@ -217,22 +218,22 @@ describe('AreaSelectForm 集成测试', () => {
|
|
|
it('应该正确更新表单字段值当选择省份和城市时', async () => {
|
|
it('应该正确更新表单字段值当选择省份和城市时', async () => {
|
|
|
render(<TestForm />);
|
|
render(<TestForm />);
|
|
|
|
|
|
|
|
|
|
+ const provinceSelect = screen.getByTestId('test-area-province');
|
|
|
// 等待省份数据加载
|
|
// 等待省份数据加载
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
|
- expect(screen.getByTestId('test-area-province')).toBeInTheDocument();
|
|
|
|
|
|
|
+ expect(provinceSelect).toBeInTheDocument();
|
|
|
|
|
+ expect(provinceSelect).not.toHaveAttribute('disabled');
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 使用fireEvent点击省份选择
|
|
// 使用fireEvent点击省份选择
|
|
|
- const provinceSelect = screen.getByTestId('test-area-province');
|
|
|
|
|
fireEvent.click(provinceSelect);
|
|
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属性
|
|
// 等待城市选择启用 - 检查aria-disabled属性或disabled属性
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -244,13 +245,13 @@ describe('AreaSelectForm 集成测试', () => {
|
|
|
const citySelect = screen.getByTestId('test-area-city');
|
|
const citySelect = screen.getByTestId('test-area-city');
|
|
|
fireEvent.click(citySelect);
|
|
fireEvent.click(citySelect);
|
|
|
|
|
|
|
|
- // 等待城市选项出现
|
|
|
|
|
|
|
+ // 等待城市选项出现 - 城市数据应该是"北京市辖区"
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
|
- expect(screen.getByText('北京市')).toBeInTheDocument();
|
|
|
|
|
|
|
+ expect(screen.getByText('北京市辖区')).toBeInTheDocument();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 选择北京市(城市)
|
|
|
|
|
- fireEvent.click(screen.getByText('北京市'));
|
|
|
|
|
|
|
+ // 选择北京市辖区(城市)
|
|
|
|
|
+ fireEvent.click(screen.getByText('北京市辖区'));
|
|
|
|
|
|
|
|
// 提交表单
|
|
// 提交表单
|
|
|
const submitButton = screen.getByTestId('submit-button');
|
|
const submitButton = screen.getByTestId('submit-button');
|
|
@@ -277,14 +278,14 @@ describe('AreaSelectForm 集成测试', () => {
|
|
|
fireEvent.click(provinceSelect);
|
|
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 () => {
|
|
await act(async () => {
|
|
|
- fireEvent.click(screen.getByText('北京市'));
|
|
|
|
|
|
|
+ fireEvent.click(beijingOptions[1]);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 等待城市选择启用
|
|
// 等待城市选择启用
|
|
@@ -345,14 +346,14 @@ describe('AreaSelectForm 集成测试', () => {
|
|
|
fireEvent.click(provinceSelect);
|
|
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 () => {
|
|
await act(async () => {
|
|
|
- fireEvent.click(screen.getByText('北京市'));
|
|
|
|
|
|
|
+ fireEvent.click(beijingOptions[1]);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 等待城市选择启用
|
|
// 等待城市选择启用
|
|
@@ -367,14 +368,14 @@ describe('AreaSelectForm 集成测试', () => {
|
|
|
fireEvent.click(citySelect);
|
|
fireEvent.click(citySelect);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 等待城市选项出现
|
|
|
|
|
|
|
+ // 等待城市选项出现 - 城市数据应该是"北京市辖区"
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
|
- expect(screen.getByText('北京市')).toBeInTheDocument();
|
|
|
|
|
|
|
+ expect(screen.getByText('北京市辖区')).toBeInTheDocument();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 选择北京市(城市)
|
|
|
|
|
|
|
+ // 选择北京市辖区(城市)
|
|
|
await act(async () => {
|
|
await act(async () => {
|
|
|
- fireEvent.click(screen.getByText('北京市'));
|
|
|
|
|
|
|
+ fireEvent.click(screen.getByText('北京市辖区'));
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 等待区县选择启用
|
|
// 等待区县选择启用
|