// 测试完整的ApiTest组件流程 console.log('=== Testing Full ApiTest Flow ===\n'); // 模拟完整的selectedInterface对象(从上游接口传递过来) const mockSelectedInterface = { id: 123, name: '测试接口', code: 'TEST001', requestMethod: 'POST', requestAddress: 'https://api.example.com/test', contentType: 'application/json', inParams: `{ "clientNo": "string", "trackNo": "string", "weight": 3, "receiver": { "name": "string", "phone": "string", "address": "string" } }` }; // 模拟bodyConfig的初始状态 let bodyConfig = { bodyType: 'none', body: '', formData: [], urlEncoded: [], rawBody: '' }; // 模拟表格数据 let urlEncodedTableProps = { data: [] }; // 模拟处理流程 function simulateApiTestFlow(selectedInterface) { console.log('1. SelectedInterface received:', { id: selectedInterface.id, name: selectedInterface.name, contentType: selectedInterface.contentType, hasInParams: !!selectedInterface.inParams, inParamsLength: selectedInterface.inParams?.length }); // 1. 设置请求方法 let selectedMethod = 'GET'; if (selectedInterface.requestMethod) { const methodValue = selectedInterface.requestMethod; if (typeof methodValue === 'string' && ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'].includes(methodValue.toUpperCase())) { selectedMethod = methodValue.toUpperCase(); } else if (typeof methodValue === 'number') { // 数字转方法名 const methodMap = { 1: 'GET', 2: 'POST', 3: 'PUT', 4: 'DELETE', 5: 'PATCH' }; selectedMethod = methodMap[methodValue] || 'POST'; } } console.log('2. Selected method:', selectedMethod); // 2. 设置请求地址 let apiUrl = ''; if (selectedInterface.requestAddress) { apiUrl = String(selectedInterface.requestAddress); } console.log('3. API URL:', apiUrl); // 3. 设置请求类型 if (selectedInterface.contentType) { const contentTypeStr = String(selectedInterface.contentType).toLowerCase(); console.log('4. ContentType string:', contentTypeStr); if (contentTypeStr.includes('json')) { bodyConfig.bodyType = 'json'; } else if (contentTypeStr.includes('xml')) { bodyConfig.bodyType = 'xml'; } else if (contentTypeStr.includes('x-www-form-urlencoded')) { bodyConfig.bodyType = 'x-www-form-urlencoded'; } else if (contentTypeStr.includes('form-data') || contentTypeStr.includes('multipart')) { bodyConfig.bodyType = 'form-data'; } else { bodyConfig.bodyType = 'raw'; } } else { bodyConfig.bodyType = 'json'; // 默认 } console.log('5. BodyType set to:', bodyConfig.bodyType); // 4. 处理inParams数据 if (selectedInterface.inParams) { console.log('6. Processing inParams...'); if (bodyConfig.bodyType === 'json' || bodyConfig.bodyType === 'xml') { // 对于JSON/XML,直接显示格式化的数据 try { const processed = selectedInterface.inParams .replace(/\\r\\n/g, '\n') .replace(/\\n/g, '\n') .replace(/\\r/g, '\r') .replace(/\\t/g, '\t') .replace(/\\\\/g, '\\') .replace(/\\"/g, '"'); const parsed = JSON.parse(processed); bodyConfig.body = JSON.stringify(parsed, null, 2); console.log('7. Set bodyConfig.body for JSON/XML'); } catch (error) { console.warn('Failed to parse JSON:', error.message); bodyConfig.body = selectedInterface.inParams; } } else if (bodyConfig.bodyType === 'x-www-form-urlencoded') { console.log('7. Processing for x-www-form-urlencoded'); try { const rawData = selectedInterface.inParams .replace(/\\r\\n/g, '\n') .replace(/\\n/g, '\n') .replace(/\\r/g, '\r') .replace(/\\t/g, '\t') .replace(/\\\\/g, '\\') .replace(/\\"/g, '"'); const parsedData = JSON.parse(rawData); console.log('8. Parsed data:', parsedData); // 扁平化处理 const flattenedData = []; function flatten(obj, prefix = '') { if (typeof obj === 'object' && obj !== null) { Object.keys(obj).forEach(key => { const newKey = prefix ? `${prefix}.${key}` : key; if (typeof obj[key] === 'object') { flatten(obj[key], newKey); } else { flattenedData.push({ key: newKey, value: obj[key] }); } }); } else { flattenedData.push({ key: prefix, value: obj }); } } flatten(parsedData); console.log('9. Flattened data:', flattenedData); // 转换为表格格式 urlEncodedTableProps.data = flattenedData.map((item, index) => ({ id: index + 1, name: item.key, type: 1, // string类型 value: String(item.value), description: '' })); console.log('10. Final table data:', urlEncodedTableProps.data); } catch (error) { console.error('Failed to process for table:', error.message); } } } // 输出最终状态 console.log('\n=== Final State ==='); console.log('bodyConfig:', { bodyType: bodyConfig.bodyType, bodyLength: bodyConfig.body?.length || 0, formDataLength: bodyConfig.formData?.length || 0, urlEncodedLength: bodyConfig.urlEncoded?.length || 0, rawBodyLength: bodyConfig.rawBody?.length || 0 }); console.log('urlEncodedTableProps.data:', urlEncodedTableProps.data); // 检查显示条件 console.log('\n=== Display Conditions ==='); console.log('Should show JSON editor:', bodyConfig.bodyType === 'json'); console.log('Should show XML editor:', bodyConfig.bodyType === 'xml'); console.log('Should show urlEncoded table:', bodyConfig.bodyType === 'x-www-form-urlencoded'); console.log('Should show formData table:', bodyConfig.bodyType === 'form-data'); console.log('Should show raw editor:', bodyConfig.bodyType === 'raw'); } // 测试不同的场景 console.log('=== Test 1: JSON Interface ==='); simulateApiTestFlow(mockSelectedInterface); console.log('\n=== Test 2: Form-UrlEncoded Interface ==='); const formInterface = { ...mockSelectedInterface, contentType: 'application/x-www-form-urlencoded' }; simulateApiTestFlow(formInterface); console.log('\n=== Test 3: No ContentType Interface ==='); const noContentTypeInterface = { ...mockSelectedInterface }; delete noContentTypeInterface.contentType; simulateApiTestFlow(noContentTypeInterface); console.log('\n✅ Full flow test completed!');