front/test-full-api-test-flow.js

// 测试完整的ApiTest组件流程
const VERBOSE_SCRIPT_LOGS = process.env.DEBUG_SCRIPT_LOGS === 'true';
if (!VERBOSE_SCRIPT_LOGS) {
  console.log = () => {};
  console.warn = () => {};
}

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!');