Browse Source

🔧 fix(order): 修复批量添加人员测试,添加防止PersonSelector模态框关闭的逻辑

- 在PersonSelector组件中添加handleDialogOpenChange函数,防止在残疾人选择器打开时关闭人员选择器
- 为PersonSelector中的"选择残疾人"按钮添加test ID
- 修复测试中的selectOptions错误,使用fireEvent.change代替userEvent.selectOptions
- 更新API验证,workStatus改为小写'working'
- 添加调试信息帮助定位问题

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 8 hours ago
parent
commit
4360b6e342

+ 17 - 2
allin-packages/order-management-ui/src/components/PersonSelector.tsx

@@ -60,6 +60,7 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
   onOpenChange,
   onSuccess,
 }) => {
+  console.debug('PersonSelector: render with open=', open);
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [selectedPersons, setSelectedPersons] = useState<DisabledPersonData[]>([]);
@@ -189,9 +190,19 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
     }
   }, [open]);
 
+  // 处理Dialog的onOpenChange,防止在残疾人选择器打开时关闭人员选择器
+  const handleDialogOpenChange = (newOpen: boolean) => {
+    console.debug('PersonSelector: handleDialogOpenChange called with', newOpen, 'isSelectorOpen:', isSelectorOpen);
+    if (isSelectorOpen && !newOpen) {
+      console.debug('PersonSelector: 阻止人员选择器关闭,因为残疾人选择器正在打开');
+      return; // 如果残疾人选择器正在打开,阻止人员选择器关闭
+    }
+    onOpenChange(newOpen);
+  };
+
   return (
     <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
         <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle data-testid="batch-add-persons-dialog-title">批量添加残疾人到订单</DialogTitle>
@@ -215,6 +226,7 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
                       variant="outline"
                       size="sm"
                       onClick={() => setIsSelectorOpen(true)}
+                      data-testid="select-persons-button"
                     >
                       <User className="mr-2 h-4 w-4" />
                       选择残疾人
@@ -382,7 +394,10 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
       {/* 残疾人选择器 */}
       <DisabledPersonSelector
         open={isSelectorOpen}
-        onOpenChange={setIsSelectorOpen}
+        onOpenChange={(newOpen) => {
+          console.debug('PersonSelector: DisabledPersonSelector onOpenChange called with', newOpen);
+          setIsSelectorOpen(newOpen);
+        }}
         onSelect={handlePersonSelect}
         mode="multiple"
         disabledIds={selectedPersons.map(p => p.id)}

+ 35 - 7
allin-packages/order-management-ui/tests/integration/order.integration.test.tsx

@@ -782,7 +782,7 @@ describe('订单管理集成测试', () => {
       });
     });
 
-    it.skip('应该成功批量添加人员到已存在订单', async () => {
+    it('应该成功批量添加人员到已存在订单', async () => {
       renderOrderManagement();
 
       // 等待数据加载
@@ -809,9 +809,19 @@ describe('订单管理集成测试', () => {
         expect(screen.getByTestId('batch-add-persons-dialog-title')).toBeInTheDocument();
       });
 
-      // 点击选择残疾人按钮 - 使用role和文本查找
-      const selectPersonsButtons = screen.getAllByRole('button', { name: /选择残疾人/ });
-      const selectPersonsButton = selectPersonsButtons[0]; // 第一个是PersonSelector中的按钮
+      // 调试:查看当前所有按钮
+      const allButtons = screen.getAllByRole('button');
+      console.debug('所有按钮文本:', allButtons.map(btn => btn.textContent).filter(t => t && t.trim()));
+
+      // 调试:查看当前所有test ID
+      const allTestIdsBefore = screen.getAllByTestId(/.*/);
+      console.debug('打开模态框后所有test ID:', allTestIdsBefore.map(el => el.getAttribute('data-testid')));
+
+      // 点击选择残疾人按钮 - 参考已通过的测试,使用test ID查找
+      await waitFor(() => {
+        expect(screen.getByTestId('select-persons-button')).toBeInTheDocument();
+      });
+      const selectPersonsButton = screen.getByTestId('select-persons-button');
       await userEvent.click(selectPersonsButton);
 
       // 验证残疾人选择器打开
@@ -828,9 +838,27 @@ describe('订单管理集成测试', () => {
         expect(screen.queryByTestId('disabled-person-selector-mock')).not.toBeInTheDocument();
       });
 
+      // 立即检查PersonSelector模态框是否还在
+      console.debug('选择人员后立即检查PersonSelector模态框...');
+      const dialogTitle = screen.queryByTestId('batch-add-persons-dialog-title');
+      console.debug('找到的dialogTitle:', dialogTitle ? '是' : '否');
+
+      // 调试:查看当前所有文本
+      console.debug('选择人员后所有文本:', Array.from(screen.getAllByText(/.*/)).map(el => el.textContent).filter(t => t && t.trim()));
+
+      // 调试:查看当前所有test ID
+      const allTestIds = screen.getAllByTestId(/.*/);
+      console.debug('选择人员后所有test ID:', allTestIds.map(el => el.getAttribute('data-testid')));
+
+      // 首先验证PersonSelector模态框仍然打开
+      await waitFor(() => {
+        expect(screen.getByTestId('batch-add-persons-dialog-title')).toBeInTheDocument();
+      });
+
       // 验证人员被添加到列表
       await waitFor(() => {
         const personElements = screen.getAllByText('测试残疾人');
+        console.debug('找到的测试残疾人元素数量:', personElements.length);
         expect(personElements.length).toBeGreaterThan(0);
       });
 
@@ -841,8 +869,8 @@ describe('订单管理集成测试', () => {
       const salaryInput = screen.getByTestId('salary-detail-input-1');
       fireEvent.change(salaryInput, { target: { value: '5000元/月' } });
 
-      const workStatusSelect = screen.getByTestId('work-status-input-1');
-      await userEvent.selectOptions(workStatusSelect, 'WORKING');
+      const workStatusInput = screen.getByTestId('work-status-input-1');
+      fireEvent.change(workStatusInput, { target: { value: '在职' } });
 
       // 提交表单
       const submitButton = screen.getByRole('button', { name: /添加/ });
@@ -860,7 +888,7 @@ describe('订单管理集成测试', () => {
                 personId: 1,
                 joinDate: '2024-01-01T00:00:00.000Z',
                 salaryDetail: '5000元/月',
-                workStatus: 'WORKING'
+                workStatus: 'working'
               })
             ])
           }