order.integration.test.tsx 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043
  1. import { describe, it, expect, vi, beforeEach } from 'vitest';
  2. import { render, screen, fireEvent, waitFor } from '@testing-library/react';
  3. import userEvent from '@testing-library/user-event';
  4. import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  5. import OrderManagement from '../../src/components/OrderManagement';
  6. import { orderClientManager } from '../../src/api/orderClient';
  7. import { OrderStatus, WorkStatus } from '@d8d/allin-enums';
  8. // Mock 区域选择器组件
  9. vi.mock('@d8d/area-management-ui', () => ({
  10. AreaSelect: vi.fn(({ value, onChange }) => {
  11. return (
  12. <div data-testid="area-select-mock">
  13. <select
  14. data-testid="area-select-province"
  15. value={value?.provinceId || ''}
  16. onChange={(e) => onChange && onChange({ provinceId: e.target.value ? parseInt(e.target.value) : undefined, cityId: undefined, districtId: undefined })}
  17. >
  18. <option value="">选择省份</option>
  19. <option value="1">省份1</option>
  20. <option value="2">省份2</option>
  21. </select>
  22. <select
  23. data-testid="area-select-city"
  24. value={value?.cityId || ''}
  25. onChange={(e) => onChange && onChange({ ...value, cityId: e.target.value ? parseInt(e.target.value) : undefined, districtId: undefined })}
  26. >
  27. <option value="">选择城市</option>
  28. <option value="3">城市1</option>
  29. <option value="4">城市2</option>
  30. </select>
  31. <select
  32. data-testid="area-select-district"
  33. value={value?.districtId || ''}
  34. onChange={(e) => onChange && onChange({ ...value, districtId: e.target.value ? parseInt(e.target.value) : undefined })}
  35. >
  36. <option value="">选择区县</option>
  37. <option value="5">区县1</option>
  38. <option value="6">区县2</option>
  39. </select>
  40. </div>
  41. );
  42. })
  43. }));
  44. // Mock 文件选择器组件
  45. vi.mock('@d8d/file-management-ui', () => ({
  46. FileSelector: vi.fn(({ value, onChange }) => {
  47. return (
  48. <div data-testid="file-selector-mock">
  49. <input
  50. type="file"
  51. data-testid="file-input"
  52. onChange={(e) => {
  53. if (onChange && e.target.files?.[0]) {
  54. onChange('mock-file-id-123');
  55. }
  56. }}
  57. />
  58. {value && <div data-testid="selected-file">已选择文件: {value}</div>}
  59. </div>
  60. );
  61. })
  62. }));
  63. // Mock 残疾人选择器组件
  64. vi.mock('@d8d/allin-disability-person-management-ui', () => ({
  65. DisabledPersonSelector: vi.fn(({ open, onOpenChange, onSelect, mode, disabledIds }) => {
  66. if (!open) return null;
  67. return (
  68. <div data-testid="disabled-person-selector-mock">
  69. <div>残疾人选择器模拟</div>
  70. <button
  71. data-testid="select-person-button"
  72. onClick={() => {
  73. const mockPerson = {
  74. id: 1,
  75. name: '测试残疾人',
  76. gender: '男',
  77. disabilityId: 'D123456',
  78. disabilityType: '肢体残疾',
  79. disabilityLevel: '三级',
  80. phone: '13800138000'
  81. };
  82. onSelect(mode === 'multiple' ? [mockPerson] : mockPerson);
  83. // 不立即关闭残疾人选择器,让测试控制关闭时机
  84. // 测试中会在适当的时候点击关闭按钮
  85. }}
  86. style={{ pointerEvents: 'auto' }} // 确保按钮可以点击
  87. >
  88. 选择测试人员
  89. </button>
  90. <button
  91. data-testid="close-selector-button"
  92. onClick={() => onOpenChange(false)}
  93. style={{ pointerEvents: 'auto' }} // 确保按钮可以点击
  94. >
  95. 关闭
  96. </button>
  97. </div>
  98. );
  99. })
  100. }));
  101. // Mock 平台选择器组件
  102. vi.mock('@d8d/allin-platform-management-ui', () => ({
  103. PlatformSelector: vi.fn(({ value, onChange, placeholder, 'data-testid': testId }) => {
  104. return (
  105. <select
  106. data-testid={testId || 'platform-selector-mock'}
  107. value={value || ''}
  108. onChange={(e) => onChange && onChange(e.target.value ? parseInt(e.target.value) : 0)}
  109. >
  110. <option value="">{placeholder || '选择平台'}</option>
  111. <option value="1">平台1</option>
  112. <option value="2">平台2</option>
  113. <option value="3">平台3</option>
  114. </select>
  115. );
  116. })
  117. }));
  118. // Mock 公司选择器组件
  119. vi.mock('@d8d/allin-company-management-ui', () => ({
  120. CompanySelector: vi.fn(({ value, onChange, placeholder, 'data-testid': testId }) => {
  121. return (
  122. <select
  123. data-testid={testId || 'company-selector-mock'}
  124. value={value || ''}
  125. onChange={(e) => onChange && onChange(e.target.value ? parseInt(e.target.value) : 0)}
  126. >
  127. <option value="">{placeholder || '选择公司'}</option>
  128. <option value="1">公司1</option>
  129. <option value="2">公司2</option>
  130. <option value="3">公司3</option>
  131. </select>
  132. );
  133. })
  134. }));
  135. // Mock 渠道选择器组件
  136. vi.mock('@d8d/allin-channel-management-ui', () => ({
  137. ChannelSelector: vi.fn(({ value, onChange, placeholder, 'data-testid': testId }) => {
  138. return (
  139. <select
  140. data-testid={testId || 'channel-selector-mock'}
  141. value={value || ''}
  142. onChange={(e) => onChange && onChange(e.target.value ? parseInt(e.target.value) : 0)}
  143. >
  144. <option value="">{placeholder || '选择渠道'}</option>
  145. <option value="1">渠道1</option>
  146. <option value="2">渠道2</option>
  147. <option value="3">渠道3</option>
  148. </select>
  149. );
  150. })
  151. }));
  152. // 完整的mock响应对象
  153. const createMockResponse = (status: number, data?: any) => ({
  154. status,
  155. ok: status >= 200 && status < 300,
  156. body: null,
  157. bodyUsed: false,
  158. statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error',
  159. headers: new Headers(),
  160. url: '',
  161. redirected: false,
  162. type: 'basic' as ResponseType,
  163. json: async () => data || {},
  164. text: async () => '',
  165. blob: async () => new Blob(),
  166. arrayBuffer: async () => new ArrayBuffer(0),
  167. formData: async () => new FormData(),
  168. clone: function() { return this; }
  169. });
  170. // Mock API client
  171. vi.mock('../../src/api/orderClient', () => {
  172. const mockOrderClient = {
  173. list: {
  174. $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
  175. data: [
  176. {
  177. id: 1,
  178. orderName: '测试订单1',
  179. platformId: 1,
  180. companyId: 1,
  181. channelId: 1,
  182. expectedStartDate: '2024-01-01T00:00:00Z',
  183. expectedEndDate: '2024-12-31T00:00:00Z',
  184. orderStatus: OrderStatus.DRAFT,
  185. workStatus: WorkStatus.NOT_WORKING,
  186. provinceId: 1,
  187. cityId: 2,
  188. districtId: 3,
  189. address: '测试地址',
  190. contactPerson: '张三',
  191. contactPhone: '13800138001',
  192. remark: '测试备注',
  193. createTime: '2024-01-01T00:00:00Z',
  194. updateTime: '2024-01-01T00:00:00Z'
  195. },
  196. {
  197. id: 2,
  198. orderName: '测试订单2',
  199. platformId: 2,
  200. companyId: 2,
  201. channelId: 2,
  202. expectedStartDate: '2024-02-01T00:00:00Z',
  203. expectedEndDate: '2024-12-31T00:00:00Z',
  204. orderStatus: OrderStatus.CONFIRMED,
  205. workStatus: WorkStatus.PRE_WORKING,
  206. provinceId: 4,
  207. cityId: 5,
  208. districtId: 6,
  209. address: '测试地址2',
  210. contactPerson: '李四',
  211. contactPhone: '13800138002',
  212. remark: '测试备注2',
  213. createTime: '2024-02-01T00:00:00Z',
  214. updateTime: '2024-02-01T00:00:00Z'
  215. }
  216. ],
  217. total: 2
  218. }))),
  219. },
  220. create: {
  221. $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
  222. id: 3,
  223. orderName: '新订单',
  224. platformId: 3,
  225. companyId: 3,
  226. channelId: 3,
  227. expectedStartDate: '2024-03-01T00:00:00Z',
  228. expectedEndDate: '2024-12-31T00:00:00Z',
  229. orderStatus: OrderStatus.DRAFT,
  230. workStatus: WorkStatus.NOT_WORKING,
  231. provinceId: 7,
  232. cityId: 8,
  233. districtId: 9,
  234. address: '新地址',
  235. contactPerson: '王五',
  236. contactPhone: '13800138003',
  237. remark: '新备注',
  238. createTime: '2024-03-01T00:00:00Z',
  239. updateTime: '2024-03-01T00:00:00Z'
  240. }))),
  241. },
  242. update: {
  243. ':id': {
  244. $put: vi.fn(() => Promise.resolve(createMockResponse(200, {
  245. id: 1,
  246. orderName: '更新后的订单',
  247. platformId: 1,
  248. companyId: 1,
  249. channelId: 1,
  250. expectedStartDate: '2024-01-01T00:00:00Z',
  251. expectedEndDate: '2024-12-31T00:00:00Z',
  252. orderStatus: OrderStatus.CONFIRMED,
  253. workStatus: WorkStatus.PRE_WORKING,
  254. provinceId: 1,
  255. cityId: 2,
  256. districtId: 3,
  257. address: '更新后的地址',
  258. contactPerson: '张三',
  259. contactPhone: '13800138001',
  260. remark: '更新后的备注',
  261. createTime: '2024-01-01T00:00:00Z',
  262. updateTime: '2024-03-01T00:00:00Z'
  263. }))),
  264. },
  265. },
  266. delete: {
  267. ':id': {
  268. $delete: vi.fn(() => Promise.resolve(createMockResponse(200, { success: true }))),
  269. },
  270. },
  271. detail: {
  272. ':id': {
  273. $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
  274. id: 1,
  275. orderName: '测试订单1',
  276. platformId: 1,
  277. companyId: 1,
  278. channelId: 1,
  279. expectedStartDate: '2024-01-01T00:00:00Z',
  280. expectedEndDate: '2024-12-31T00:00:00Z',
  281. orderStatus: OrderStatus.DRAFT,
  282. workStatus: WorkStatus.NOT_WORKING,
  283. provinceId: 1,
  284. cityId: 2,
  285. districtId: 3,
  286. address: '测试地址',
  287. contactPerson: '张三',
  288. contactPhone: '13800138001',
  289. remark: '测试备注',
  290. createTime: '2024-01-01T00:00:00Z',
  291. updateTime: '2024-01-01T00:00:00Z'
  292. }))),
  293. },
  294. },
  295. activate: {
  296. ':orderId': {
  297. $post: vi.fn(() => Promise.resolve(createMockResponse(200, { success: true }))),
  298. },
  299. },
  300. close: {
  301. ':orderId': {
  302. $post: vi.fn(() => Promise.resolve(createMockResponse(200, { success: true }))),
  303. },
  304. },
  305. ':orderId': {
  306. persons: {
  307. batch: {
  308. $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
  309. success: true,
  310. message: '批量添加人员成功',
  311. addedCount: 2
  312. }))),
  313. },
  314. },
  315. },
  316. assets: {
  317. create: {
  318. $post: vi.fn(() => Promise.resolve(createMockResponse(200, {
  319. id: 1,
  320. orderId: 1,
  321. personId: 1,
  322. assetType: 'ID_CARD',
  323. assetFileType: 'IMAGE',
  324. fileId: 1,
  325. relatedTime: '2024-01-01T00:00:00Z',
  326. createTime: '2024-01-01T00:00:00Z',
  327. updateTime: '2024-01-01T00:00:00Z'
  328. }))),
  329. },
  330. query: {
  331. $get: vi.fn(() => Promise.resolve(createMockResponse(200, {
  332. data: [],
  333. total: 0
  334. }))),
  335. },
  336. delete: {
  337. ':id': {
  338. $delete: vi.fn(() => Promise.resolve(createMockResponse(200, {
  339. success: true,
  340. message: '删除成功'
  341. }))),
  342. },
  343. },
  344. },
  345. };
  346. const mockOrderClientManager = {
  347. getInstance: vi.fn(() => ({
  348. get: vi.fn(() => mockOrderClient),
  349. reset: vi.fn(),
  350. })),
  351. get: vi.fn(() => mockOrderClient),
  352. reset: vi.fn(),
  353. };
  354. return {
  355. orderClientManager: mockOrderClientManager,
  356. orderClient: mockOrderClient,
  357. };
  358. });
  359. // Mock toast
  360. vi.mock('sonner', () => ({
  361. toast: {
  362. success: vi.fn(),
  363. error: vi.fn(),
  364. },
  365. }));
  366. describe('订单管理集成测试', () => {
  367. let queryClient: QueryClient;
  368. beforeEach(() => {
  369. queryClient = new QueryClient({
  370. defaultOptions: {
  371. queries: {
  372. retry: false,
  373. },
  374. },
  375. });
  376. vi.clearAllMocks();
  377. });
  378. const renderOrderManagement = () => {
  379. return render(
  380. <QueryClientProvider client={queryClient}>
  381. <OrderManagement />
  382. </QueryClientProvider>
  383. );
  384. };
  385. describe('CRUD流程测试', () => {
  386. it('应该成功加载订单列表', async () => {
  387. renderOrderManagement();
  388. // 等待数据加载
  389. await waitFor(() => {
  390. expect(screen.getByText('测试订单1')).toBeInTheDocument();
  391. expect(screen.getByText('测试订单2')).toBeInTheDocument();
  392. });
  393. // 验证表格渲染
  394. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  395. expect(screen.getByTestId('order-row-2')).toBeInTheDocument();
  396. // 验证状态徽章
  397. expect(screen.getByText('草稿')).toBeInTheDocument();
  398. expect(screen.getByText('已确认')).toBeInTheDocument();
  399. expect(screen.getByText('未就业')).toBeInTheDocument();
  400. expect(screen.getByText('待就业')).toBeInTheDocument();
  401. });
  402. it('应该成功创建订单', async () => {
  403. renderOrderManagement();
  404. // 点击创建订单按钮
  405. const createButton = screen.getByTestId('create-order-button');
  406. fireEvent.click(createButton);
  407. // 验证订单表单模态框打开
  408. await waitFor(() => {
  409. expect(screen.getByTestId('create-order-dialog-title')).toBeInTheDocument();
  410. });
  411. // 这里可以添加表单填写和提交的测试
  412. // 由于表单组件比较复杂,这里只验证模态框能正常打开
  413. });
  414. it('应该成功编辑订单', async () => {
  415. renderOrderManagement();
  416. // 等待数据加载
  417. await waitFor(() => {
  418. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  419. });
  420. // 调试:打印所有test ID
  421. const allElements = screen.getAllByTestId(/.*/);
  422. console.debug('所有test ID:', allElements.map(el => el.getAttribute('data-testid')));
  423. // 先点击下拉菜单触发器,然后点击编辑按钮
  424. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  425. expect(menuTrigger).toBeInTheDocument();
  426. // 使用userEvent.click代替fireEvent.click,更好地模拟用户交互
  427. await userEvent.click(menuTrigger);
  428. // 等待下拉菜单打开,然后点击编辑按钮
  429. await waitFor(() => {
  430. // 检查下拉菜单内容是否渲染 - 使用更精确的选择器
  431. // 下拉菜单中的"操作"是DropdownMenuLabel,而表格中的"操作"是表头
  432. // 我们可以检查下拉菜单中的特定元素
  433. const editButton = screen.getByTestId('edit-order-button-1');
  434. expect(editButton).toBeInTheDocument();
  435. });
  436. const editButton = screen.getByTestId('edit-order-button-1');
  437. await userEvent.click(editButton);
  438. // 验证编辑表单模态框打开
  439. await waitFor(() => {
  440. expect(screen.getByText('编辑订单')).toBeInTheDocument();
  441. });
  442. });
  443. it('应该成功删除订单', async () => {
  444. renderOrderManagement();
  445. // 等待数据加载
  446. await waitFor(() => {
  447. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  448. });
  449. // 先点击下拉菜单触发器,然后点击删除按钮
  450. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  451. expect(menuTrigger).toBeInTheDocument();
  452. await userEvent.click(menuTrigger);
  453. // 等待下拉菜单打开,然后点击删除按钮
  454. await waitFor(() => {
  455. const deleteButton = screen.getByTestId('delete-order-button-1');
  456. expect(deleteButton).toBeInTheDocument();
  457. });
  458. const deleteButton = screen.getByTestId('delete-order-button-1');
  459. await userEvent.click(deleteButton);
  460. // 验证删除确认对话框显示
  461. await waitFor(() => {
  462. expect(screen.getByTestId('delete-confirm-dialog')).toBeInTheDocument();
  463. expect(screen.getByTestId('delete-confirm-dialog-title')).toHaveTextContent('删除订单');
  464. expect(screen.getByTestId('delete-confirm-dialog-description')).toHaveTextContent('确定要删除这个订单吗?此操作不可撤销。');
  465. });
  466. // 点击确认按钮
  467. const confirmButton = screen.getByTestId('delete-confirm-dialog-confirm');
  468. await userEvent.click(confirmButton);
  469. // 验证API调用
  470. await waitFor(() => {
  471. expect(orderClientManager.get().delete[':id'].$delete).toHaveBeenCalledWith({
  472. param: { id: 1 },
  473. });
  474. });
  475. });
  476. it('应该成功激活订单', async () => {
  477. renderOrderManagement();
  478. // 等待数据加载
  479. await waitFor(() => {
  480. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  481. });
  482. // 先打开下拉菜单,然后点击激活按钮(只有草稿状态的订单才有激活按钮)
  483. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  484. expect(menuTrigger).toBeInTheDocument();
  485. await userEvent.click(menuTrigger);
  486. // 等待下拉菜单打开,然后点击激活按钮
  487. await waitFor(() => {
  488. const activateButton = screen.getByTestId('activate-order-button-1');
  489. expect(activateButton).toBeInTheDocument();
  490. });
  491. const activateButton = screen.getByTestId('activate-order-button-1');
  492. await userEvent.click(activateButton);
  493. // 验证激活确认对话框显示
  494. await waitFor(() => {
  495. expect(screen.getByTestId('activate-confirm-dialog')).toBeInTheDocument();
  496. expect(screen.getByTestId('activate-confirm-dialog-title')).toHaveTextContent('激活订单');
  497. expect(screen.getByTestId('activate-confirm-dialog-description')).toHaveTextContent('确定要激活这个订单吗?订单激活后将进入进行中状态。');
  498. });
  499. // 点击确认按钮
  500. const confirmButton = screen.getByTestId('activate-confirm-dialog-confirm');
  501. await userEvent.click(confirmButton);
  502. // 验证API调用
  503. await waitFor(() => {
  504. expect(orderClientManager.get().activate[':orderId'].$post).toHaveBeenCalledWith({
  505. param: { orderId: 1 },
  506. });
  507. });
  508. });
  509. it('应该成功关闭订单', async () => {
  510. renderOrderManagement();
  511. // 等待数据加载
  512. await waitFor(() => {
  513. expect(screen.getByTestId('order-row-2')).toBeInTheDocument();
  514. });
  515. // 先打开下拉菜单,然后点击关闭按钮(只有已确认或进行中的订单有关闭按钮)
  516. const menuTrigger = screen.getByTestId('order-menu-trigger-2');
  517. expect(menuTrigger).toBeInTheDocument();
  518. await userEvent.click(menuTrigger);
  519. // 等待下拉菜单打开,然后点击关闭按钮
  520. await waitFor(() => {
  521. const closeButton = screen.getByTestId('close-order-button-2');
  522. expect(closeButton).toBeInTheDocument();
  523. });
  524. const closeButton = screen.getByTestId('close-order-button-2');
  525. await userEvent.click(closeButton);
  526. // 验证关闭确认对话框显示
  527. await waitFor(() => {
  528. expect(screen.getByTestId('close-confirm-dialog')).toBeInTheDocument();
  529. expect(screen.getByTestId('close-confirm-dialog-title')).toHaveTextContent('关闭订单');
  530. expect(screen.getByTestId('close-confirm-dialog-description')).toHaveTextContent('确定要关闭这个订单吗?订单关闭后将无法再添加人员或资产。');
  531. });
  532. // 点击确认按钮
  533. const confirmButton = screen.getByTestId('close-confirm-dialog-confirm');
  534. await userEvent.click(confirmButton);
  535. // 验证API调用
  536. await waitFor(() => {
  537. expect(orderClientManager.get().close[':orderId'].$post).toHaveBeenCalledWith({
  538. param: { orderId: 2 },
  539. });
  540. });
  541. });
  542. it('应该可以取消删除操作', async () => {
  543. renderOrderManagement();
  544. // 等待数据加载
  545. await waitFor(() => {
  546. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  547. });
  548. // 先点击下拉菜单触发器,然后点击删除按钮
  549. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  550. expect(menuTrigger).toBeInTheDocument();
  551. await userEvent.click(menuTrigger);
  552. // 等待下拉菜单打开,然后点击删除按钮
  553. await waitFor(() => {
  554. const deleteButton = screen.getByTestId('delete-order-button-1');
  555. expect(deleteButton).toBeInTheDocument();
  556. });
  557. const deleteButton = screen.getByTestId('delete-order-button-1');
  558. await userEvent.click(deleteButton);
  559. // 验证删除确认对话框显示
  560. await waitFor(() => {
  561. expect(screen.getByTestId('delete-confirm-dialog')).toBeInTheDocument();
  562. });
  563. // 点击取消按钮
  564. const cancelButton = screen.getByTestId('delete-confirm-dialog-cancel');
  565. await userEvent.click(cancelButton);
  566. // 验证对话框关闭
  567. await waitFor(() => {
  568. expect(screen.queryByTestId('delete-confirm-dialog')).not.toBeInTheDocument();
  569. });
  570. // 验证API没有被调用
  571. expect(orderClientManager.get().delete[':id'].$delete).not.toHaveBeenCalled();
  572. });
  573. });
  574. describe('文件上传集成测试', () => {
  575. it('应该成功打开资产关联模态框', async () => {
  576. renderOrderManagement();
  577. // 等待数据加载
  578. await waitFor(() => {
  579. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  580. });
  581. // 先打开下拉菜单,然后点击添加资产按钮
  582. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  583. expect(menuTrigger).toBeInTheDocument();
  584. await userEvent.click(menuTrigger);
  585. // 等待下拉菜单打开,然后点击添加资产按钮
  586. await waitFor(() => {
  587. const addAssetButton = screen.getByTestId('add-asset-button-1');
  588. expect(addAssetButton).toBeInTheDocument();
  589. });
  590. const addAssetButton = screen.getByTestId('add-asset-button-1');
  591. await userEvent.click(addAssetButton);
  592. // 验证资产关联模态框打开
  593. await waitFor(() => {
  594. expect(screen.getByTestId('order-person-asset-dialog-title')).toBeInTheDocument();
  595. });
  596. // 验证文件选择器组件存在 - 可能需要在表单中才会显示
  597. // 先验证模态框基本结构
  598. expect(screen.getByTestId('order-person-asset-dialog-title')).toBeInTheDocument();
  599. // 文件选择器可能在选择了残疾人才显示,这里先跳过具体验证
  600. });
  601. });
  602. describe('区域选择器集成测试', () => {
  603. it('应该成功打开订单表单并显示区域选择器', async () => {
  604. renderOrderManagement();
  605. // 点击创建订单按钮
  606. const createButton = screen.getByTestId('create-order-button');
  607. fireEvent.click(createButton);
  608. // 验证订单表单模态框打开
  609. await waitFor(() => {
  610. expect(screen.getByTestId('create-order-dialog-title')).toBeInTheDocument();
  611. });
  612. // 验证区域选择器组件存在
  613. expect(screen.getByTestId('area-select-mock')).toBeInTheDocument();
  614. });
  615. });
  616. describe('枚举常量集成测试', () => {
  617. it('应该正确显示订单状态枚举', async () => {
  618. renderOrderManagement();
  619. // 等待数据加载 - 验证表格中的订单状态Badge
  620. await waitFor(() => {
  621. // 使用更精确的选择器,避免与Select选项冲突
  622. const orderRow = screen.getByTestId('order-row-1');
  623. expect(orderRow).toBeInTheDocument();
  624. // 验证表格中有订单状态显示
  625. expect(screen.getByText('测试订单1')).toBeInTheDocument();
  626. });
  627. // 验证订单状态筛选器
  628. const statusFilter = screen.getByTestId('filter-order-status-select');
  629. expect(statusFilter).toBeInTheDocument();
  630. // 点击筛选器查看选项
  631. fireEvent.click(statusFilter);
  632. // 验证枚举选项存在
  633. await waitFor(() => {
  634. // 使用test ID验证枚举选项
  635. expect(screen.getByTestId('order-status-option-all')).toBeInTheDocument();
  636. expect(screen.getByTestId('order-status-option-draft')).toBeInTheDocument();
  637. expect(screen.getByTestId('order-status-option-confirmed')).toBeInTheDocument();
  638. expect(screen.getByTestId('order-status-option-in-progress')).toBeInTheDocument();
  639. expect(screen.getByTestId('order-status-option-completed')).toBeInTheDocument();
  640. expect(screen.getByTestId('order-status-option-cancelled')).toBeInTheDocument();
  641. });
  642. });
  643. it('应该正确显示工作状态枚举', async () => {
  644. renderOrderManagement();
  645. // 等待数据加载 - 验证表格中的工作状态Badge
  646. await waitFor(() => {
  647. // 使用更精确的选择器,避免与Select选项冲突
  648. const orderRow = screen.getByTestId('order-row-1');
  649. expect(orderRow).toBeInTheDocument();
  650. // 验证表格中有工作状态显示
  651. expect(screen.getByText('测试订单1')).toBeInTheDocument();
  652. });
  653. // 验证工作状态筛选器
  654. const workStatusFilter = screen.getByTestId('filter-work-status-select');
  655. expect(workStatusFilter).toBeInTheDocument();
  656. // 点击筛选器查看选项
  657. fireEvent.click(workStatusFilter);
  658. // 验证枚举选项存在
  659. await waitFor(() => {
  660. // 使用test ID验证枚举选项
  661. expect(screen.getByTestId('work-status-option-all')).toBeInTheDocument();
  662. expect(screen.getByTestId('work-status-option-not-working')).toBeInTheDocument();
  663. expect(screen.getByTestId('work-status-option-pre-working')).toBeInTheDocument();
  664. expect(screen.getByTestId('work-status-option-working')).toBeInTheDocument();
  665. expect(screen.getByTestId('work-status-option-resigned')).toBeInTheDocument();
  666. });
  667. });
  668. });
  669. describe('人员管理测试', () => {
  670. it('应该成功打开人员选择器', async () => {
  671. renderOrderManagement();
  672. // 等待数据加载
  673. await waitFor(() => {
  674. expect(screen.getByTestId('order-row-1')).toBeInTheDocument();
  675. });
  676. // 先打开下拉菜单,然后点击添加人员按钮
  677. const menuTrigger = screen.getByTestId('order-menu-trigger-1');
  678. expect(menuTrigger).toBeInTheDocument();
  679. await userEvent.click(menuTrigger);
  680. // 等待下拉菜单打开,然后点击添加人员按钮
  681. await waitFor(() => {
  682. const addPersonsButton = screen.getByTestId('add-persons-button-1');
  683. expect(addPersonsButton).toBeInTheDocument();
  684. });
  685. const addPersonsButton = screen.getByTestId('add-persons-button-1');
  686. await userEvent.click(addPersonsButton);
  687. // 验证人员选择器模态框打开
  688. await waitFor(() => {
  689. expect(screen.getByTestId('batch-add-persons-dialog-title')).toBeInTheDocument();
  690. });
  691. });
  692. });
  693. describe('搜索和筛选测试', () => {
  694. it('应该支持按订单名称搜索', async () => {
  695. renderOrderManagement();
  696. // 等待数据加载
  697. await waitFor(() => {
  698. expect(screen.getByTestId('search-order-name-input')).toBeInTheDocument();
  699. });
  700. // 输入搜索关键词
  701. const searchInput = screen.getByTestId('search-order-name-input');
  702. fireEvent.change(searchInput, { target: { value: '测试订单1' } });
  703. // 点击搜索按钮
  704. const searchButton = screen.getByTestId('search-button');
  705. fireEvent.click(searchButton);
  706. // 验证API调用
  707. // 实际测试中应该验证API调用参数
  708. });
  709. it('应该支持按订单状态筛选', async () => {
  710. renderOrderManagement();
  711. // 等待数据加载
  712. await waitFor(() => {
  713. expect(screen.getByTestId('filter-order-status-select')).toBeInTheDocument();
  714. });
  715. // 选择订单状态
  716. const statusFilter = screen.getByTestId('filter-order-status-select');
  717. fireEvent.click(statusFilter);
  718. // 选择"草稿"状态
  719. await waitFor(() => {
  720. const draftOption = screen.getByText('草稿');
  721. fireEvent.click(draftOption);
  722. });
  723. // 点击搜索按钮
  724. const searchButton = screen.getByTestId('search-button');
  725. fireEvent.click(searchButton);
  726. // 验证API调用
  727. // 实际测试中应该验证API调用参数
  728. });
  729. it('应该支持按工作状态筛选', async () => {
  730. renderOrderManagement();
  731. // 等待数据加载
  732. await waitFor(() => {
  733. expect(screen.getByTestId('filter-work-status-select')).toBeInTheDocument();
  734. });
  735. // 选择工作状态
  736. const workStatusFilter = screen.getByTestId('filter-work-status-select');
  737. fireEvent.click(workStatusFilter);
  738. // 选择"未就业"状态
  739. await waitFor(() => {
  740. const notWorkingOption = screen.getByText('未就业');
  741. fireEvent.click(notWorkingOption);
  742. });
  743. // 点击搜索按钮
  744. const searchButton = screen.getByTestId('search-button');
  745. fireEvent.click(searchButton);
  746. // 验证API调用
  747. // 实际测试中应该验证API调用参数
  748. });
  749. });
  750. describe('创建订单人员绑定测试', () => {
  751. it('应该成功创建订单并绑定人员', async () => {
  752. renderOrderManagement();
  753. // 点击创建订单按钮
  754. const createButton = screen.getByTestId('create-order-button');
  755. await userEvent.click(createButton);
  756. // 验证订单表单模态框打开
  757. await waitFor(() => {
  758. // 调试:打印所有test ID
  759. const allElements = screen.getAllByTestId(/.*/);
  760. console.debug('所有test ID:', allElements.map(el => el.getAttribute('data-testid')));
  761. expect(screen.getByTestId('create-order-dialog-title')).toBeInTheDocument();
  762. });
  763. // 验证人员选择区域显示
  764. // 使用更精确的选择器,避免与CardTitle中的文本冲突
  765. await waitFor(() => {
  766. expect(screen.getByTestId('select-persons-button')).toBeInTheDocument();
  767. });
  768. // 验证描述文本
  769. expect(screen.getByText('创建订单时必须至少选择一名残疾人')).toBeInTheDocument();
  770. // 点击选择残疾人按钮
  771. const selectPersonsButton = screen.getByTestId('select-persons-button');
  772. await userEvent.click(selectPersonsButton);
  773. // 验证残疾人选择器打开
  774. await waitFor(() => {
  775. expect(screen.getByTestId('disabled-person-selector-mock')).toBeInTheDocument();
  776. });
  777. // 选择测试人员
  778. const selectPersonButton = screen.getByTestId('select-person-button');
  779. await userEvent.click(selectPersonButton);
  780. // 等待残疾人选择器关闭(选择人员后会自动关闭)
  781. await waitFor(() => {
  782. expect(screen.queryByTestId('disabled-person-selector-mock')).not.toBeInTheDocument();
  783. });
  784. // 调试:查看当前渲染的所有元素
  785. console.debug('选择人员后,所有可见文本:', Array.from(screen.getAllByText(/.*/)).map(el => el.textContent).filter(t => t && t.trim()));
  786. // 首先验证订单表单仍然打开
  787. await waitFor(() => {
  788. // 调试:打印所有test ID
  789. const allElements = screen.getAllByTestId(/.*/);
  790. console.debug('选择人员后所有test ID:', allElements.map(el => el.getAttribute('data-testid')));
  791. expect(screen.getByTestId('create-order-dialog-title')).toBeInTheDocument();
  792. });
  793. // 验证人员被添加到列表
  794. await waitFor(() => {
  795. // 使用getAllByText因为可能有多个元素包含相同文本
  796. const personElements = screen.getAllByText('测试残疾人');
  797. expect(personElements.length).toBeGreaterThan(0);
  798. const disabilityTypeElements = screen.getAllByText('肢体残疾');
  799. expect(disabilityTypeElements.length).toBeGreaterThan(0);
  800. const levelElements = screen.getAllByText('三级');
  801. expect(levelElements.length).toBeGreaterThan(0);
  802. });
  803. // 填写订单基本信息
  804. const orderNameInput = screen.getByPlaceholderText('请输入订单名称');
  805. fireEvent.change(orderNameInput, { target: { value: '测试订单带人员' } });
  806. // 选择平台 - 使用select元素直接选择
  807. const platformSelect = screen.getByTestId('platform-selector');
  808. await userEvent.selectOptions(platformSelect, '1');
  809. // 选择公司
  810. const companySelect = screen.getByTestId('company-selector');
  811. await userEvent.selectOptions(companySelect, '1');
  812. // 选择渠道
  813. const channelSelect = screen.getByTestId('channel-selector');
  814. await userEvent.selectOptions(channelSelect, '1');
  815. // 填写开始日期
  816. const startDateInputs = screen.getAllByLabelText('预计开始日期');
  817. const startDateInput = startDateInputs[0]; // 第一个是datetime-local输入框
  818. fireEvent.change(startDateInput, { target: { value: '2024-01-01T00:00' } });
  819. // 填写结束日期
  820. const endDateInputs = screen.getAllByLabelText('预计结束日期');
  821. const endDateInput = endDateInputs[0];
  822. fireEvent.change(endDateInput, { target: { value: '2024-12-31T00:00' } });
  823. // 填写联系人手机号
  824. const contactPhoneInput = screen.getByPlaceholderText('请输入联系电话');
  825. fireEvent.change(contactPhoneInput, { target: { value: '13800138000' } });
  826. // 填写人员详情
  827. const salaryInput = screen.getByTestId('salary-detail-input-1');
  828. fireEvent.change(salaryInput, { target: { value: '5000元/月' } });
  829. // 提交表单
  830. const submitButton = screen.getByRole('button', { name: /创建/ });
  831. fireEvent.click(submitButton);
  832. // 验证API调用
  833. await waitFor(() => {
  834. // 验证创建订单API被调用
  835. const mockOrderClient = orderClientManager.get();
  836. expect(mockOrderClient.create.$post).toHaveBeenCalledWith({
  837. json: expect.objectContaining({
  838. orderName: '测试订单带人员',
  839. platformId: 1,
  840. companyId: 1,
  841. channelId: 1,
  842. })
  843. });
  844. // 验证批量添加人员API被调用
  845. expect(mockOrderClient[':orderId'].persons.batch.$post).toHaveBeenCalledWith({
  846. param: { orderId: expect.any(Number) },
  847. json: {
  848. persons: expect.arrayContaining([
  849. expect.objectContaining({
  850. personId: 1,
  851. salaryDetail: '5000元/月'
  852. })
  853. ])
  854. }
  855. });
  856. });
  857. });
  858. it('应该验证至少选择一名人员', async () => {
  859. renderOrderManagement();
  860. // 点击创建订单按钮
  861. const createButton = screen.getByTestId('create-order-button');
  862. fireEvent.click(createButton);
  863. // 验证订单表单模态框打开
  864. await waitFor(() => {
  865. expect(screen.getByTestId('create-order-dialog-title')).toBeInTheDocument();
  866. });
  867. // 填写订单基本信息但不选择人员
  868. const orderNameInput = screen.getByPlaceholderText('请输入订单名称');
  869. fireEvent.change(orderNameInput, { target: { value: '测试订单无人员' } });
  870. // 尝试提交表单
  871. const submitButton = screen.getByRole('button', { name: /创建/ });
  872. fireEvent.click(submitButton);
  873. // 验证表单验证错误
  874. await waitFor(() => {
  875. expect(screen.getByText('至少选择一名人员')).toBeInTheDocument();
  876. });
  877. // 验证创建订单API没有被调用
  878. const mockOrderClient = orderClientManager.get();
  879. expect(mockOrderClient.create.$post).not.toHaveBeenCalled();
  880. });
  881. });
  882. describe('错误处理测试', () => {
  883. it('应该处理API错误', async () => {
  884. // Mock API错误
  885. const mockOrderClient = orderClientManager.get();
  886. mockOrderClient.list.$get.mockImplementationOnce(() =>
  887. Promise.resolve(createMockResponse(500, {
  888. code: 500,
  889. message: '服务器错误'
  890. }))
  891. );
  892. renderOrderManagement();
  893. // 验证错误处理
  894. await waitFor(() => {
  895. expect(screen.getByText(/加载失败/)).toBeInTheDocument();
  896. });
  897. });
  898. });
  899. });