TraceStudio-dev/web_v0/tests/TEST_INTEGRATION.js

/**
 * 前端功能集成测试
 * 用于验证 Param 绑定、EdgeType、暴露端口等功能
 * 
 * 使用方法：
 * 1. 在浏览器开发工具中粘贴此脚本
 * 2. 调用测试函数，如 testParamBinding()
 */

// ============= 测试工具函数 =============

function log(...args) {
  console.log(`[TraceStudio Test] ${new Date().toLocaleTimeString()}`, ...args)
}

function success(msg) {
  console.log(`%c✅ ${msg}`, 'color: #22c55e; font-weight: bold')
}

function error(msg) {
  console.error(`%c❌ ${msg}`, 'color: #ef4444; font-weight: bold')
}

function warn(msg) {
  console.warn(`%c⚠️ ${msg}`, 'color: #f59e0b; font-weight: bold')
}

// ============= 1. Param 绑定测试 =============

async function testParamBinding() {
  log('开始测试：Param 绑定模式')
  
  // 从 DOM 查找 Inspector 并验证是否存在绑定模式按钮
  const inspectorDiv = document.querySelector('[class*="Inspector"]') || document.body
  const modeButtons = inspectorDiv.querySelectorAll('button')
  const hasStaticBtn = Array.from(modeButtons).some(b => b.textContent.includes('静态值'))
  const hasContextBtn = Array.from(modeButtons).some(b => b.textContent.includes('Context'))
  const hasExposedBtn = Array.from(modeButtons).some(b => b.textContent.includes('暴露端口'))
  
  if (hasStaticBtn && hasContextBtn && hasExposedBtn) {
    success('发现三种 Param 绑定模式按钮')
  } else {
    error(`缺少绑定模式按钮: 静态=${hasStaticBtn}, Context=${hasContextBtn}, 暴露=${hasExposedBtn}`)
  }
  
  // 检查 Context 下拉列表
  const contextSelects = inspectorDiv.querySelectorAll('select')
  if (contextSelects.length > 0) {
    const options = contextSelects[0].querySelectorAll('option')
    const hasGlobalOption = Array.from(options).some(o => o.value.includes('$Global'))
    if (hasGlobalOption) {
      success(`Context 下拉列表已初始化，共 ${options.length} 个选项`)
    } else {
      warn('Context 下拉列表缺少 $Global 变量')
    }
  }
}

// ============= 2. EdgeType 测试 =============

async function testEdgeType() {
  log('开始测试：连线 EdgeType 和 strokeWidth')
  
  // 从 React Flow 的 edge 元素中提取 edge 数据
  const svgEdges = document.querySelectorAll('svg path[stroke]')
  const edgeData = {
    arrayEdges: 0,
    scalarEdges: 0,
    strokeWidths: new Set()
  }
  
  svgEdges.forEach((path) => {
    const strokeWidth = path.getAttribute('stroke-width')
    if (strokeWidth) {
      edgeData.strokeWidths.add(strokeWidth)
      if (parseInt(strokeWidth) === 4) edgeData.arrayEdges++
      else if (parseInt(strokeWidth) === 3) edgeData.scalarEdges++
    }
  })
  
  if (edgeData.strokeWidths.size > 0) {
    success(`检测到 ${edgeData.arrayEdges} 条数组边（4px）和 ${edgeData.scalarEdges} 条标量边（3px）`)
    log(`检测到的 strokeWidth 值：${Array.from(edgeData.strokeWidths).join(', ')}`)
  } else {
    warn('未检测到任何连线，请先创建节点连接')
  }
}

// ============= 3. 暴露端口测试 =============

async function testExposedPorts() {
  log('开始测试：暴露端口显示')
  
  // 查找节点中的暴露端口指示符
  const exposedIndicators = document.querySelectorAll('[style*="rgb(236, 72, 153)"]')
  if (exposedIndicators.length > 0) {
    success(`检测到 ${exposedIndicators.length} 个暴露端口指示区域`)
  }
  
  // 检查节点中的 Handle（React Flow 端口）
  const handles = document.querySelectorAll('.react-flow__handle')
  const exposedHandles = Array.from(handles).filter(h => {
    const style = h.getAttribute('style') || ''
    // 暴露端口应该是粉红色（#ec4899）或绿色（#22c55e）
    return style.includes('236') || style.includes('34, 197') || h.classList.contains('exposed')
  })
  
  if (exposedHandles.length > 0) {
    success(`检测到 ${exposedHandles.length} 个暴露端口 Handle`)
  } else {
    warn('未检测到暴露端口，请先在 Inspector 中点击 ⚡ 暴露端口')
  }
}

// ============= 4. 节点数据结构测试 =============

async function testNodeDataStructure() {
  log('开始测试：节点数据结构（bindings, exposedPorts）')
  
  // 尝试从 window.__INITIAL_STATE__ 或其他全局状态中提取
  let nodeData = null
  
  if (window.__TRACE_STUDIO_STATE__) {
    nodeData = window.__TRACE_STUDIO_STATE__.nodes
  }
  
  if (!nodeData) {
    warn('无法访问全局状态，使用 React DevTools 检查')
    log('请在 React DevTools 中查看 Store 的 nodes 属性')
    return
  }
  
  const firstNode = nodeData[0]
  if (firstNode) {
    const hasBindings = 'bindings' in firstNode
    const hasExposedPorts = 'exposedPorts' in firstNode
    
    if (hasBindings) success(`节点包含 bindings 字段`)
    else warn('节点缺少 bindings 字段')
    
    if (hasExposedPorts) success(`节点包含 exposedPorts 字段`)
    else warn('节点缺少 exposedPorts 字段')
    
    log('第一个节点结构:', firstNode)
  }
}

// ============= 5. API 响应测试 =============

async function testAPIResponse() {
  log('开始测试：API /api/plugins 响应')
  
  try {
    const response = await fetch('/api/plugins')
    const data = await response.json()
    
    if (response.ok) {
      success('API /api/plugins 响应成功')
      
      // 检查返回的插件是否包含扩展字段
      const firstPlugin = Object.values(data.plugins || {})[0]
      if (firstPlugin) {
        const hasInputs = 'inputs' in firstPlugin
        const hasOutputs = 'outputs' in firstPlugin
        const hasParamSchema = 'param_schema' in firstPlugin
        const hasContextVars = 'context_vars' in firstPlugin
        
        log(`插件字段检查：inputs=${hasInputs}, outputs=${hasOutputs}, param_schema=${hasParamSchema}, context_vars=${hasContextVars}`)
        
        if (hasInputs && hasOutputs && hasParamSchema && hasContextVars) {
          success('API 已返回四大属性（inputs/outputs/param_schema/context_vars）')
        } else {
          warn('API 缺少某些字段')
        }
      }
    } else {
      error(`API 响应错误：${response.status}`)
    }
  } catch (e) {
    error(`API 请求失败：${e.message}`)
  }
}

// ============= 6. 完整工作流测试 =============

async function testCompleteWorkflow() {
  log('开始完整工作流测试')
  
  const tests = [
    { name: '参数绑定', fn: testParamBinding },
    { name: '连线 EdgeType', fn: testEdgeType },
    { name: '暴露端口', fn: testExposedPorts },
    { name: '数据结构', fn: testNodeDataStructure },
    { name: 'API 响应', fn: testAPIResponse }
  ]
  
  for (const test of tests) {
    log(`\n--- 测试: ${test.name} ---`)
    try {
      await test.fn()
    } catch (e) {
      error(`测试失败：${e.message}`)
    }
  }
  
  log('\n✨ 所有测试完成')
}

// ============= 7. 交互式检查器 =============

function inspectStore() {
  log('检查 Zustand Store 状态')
  
  // 尝试从多个位置访问 store
  if (window.__ZUSTAND_DEBUG__) {
    const store = window.__ZUSTAND_DEBUG__
    log('Store 节点：', store.getState?.().nodes || 'N/A')
    log('Store 边：', store.getState?.().edges || 'N/A')
  } else {
    log('Store 不可直接访问，请使用以下方法：')
    log('1. 打开 React DevTools')
    log('2. 选择 <Workspace /> 组件')
    log('3. 在控制台中查看 $r.props 或 $r.context')
  }
}

function inspectFirstNode() {
  log('检查第一个节点的详细信息')
  
  const nodeElement = document.querySelector('[data-id]')
  if (nodeElement) {
    const nodeId = nodeElement.getAttribute('data-id')
    log(`找到节点：${nodeId}`)
    
    // 提取节点的视觉信息
    const handles = nodeElement.querySelectorAll('.react-flow__handle')
    const title = nodeElement.querySelector('h4') || nodeElement.querySelector('div')
    
    log(`节点标题：${title?.textContent || 'N/A'}`)
    log(`Handle 数量：${handles.length}`)
    
    // 分析 Handle 颜色
    handles.forEach((h, i) => {
      const bg = h.style.background
      const position = h.classList.contains('target') ? 'LEFT' : 'RIGHT'
      log(`  Handle ${i}: 颜色=${bg}, 位置=${position}`)
    })
  } else {
    warn('未找到任何节点，请先创建节点')
  }
}

// ============= 导出测试函数 =============

window.testParamBinding = testParamBinding
window.testEdgeType = testEdgeType
window.testExposedPorts = testExposedPorts
window.testNodeDataStructure = testNodeDataStructure
window.testAPIResponse = testAPIResponse
window.testCompleteWorkflow = testCompleteWorkflow
window.inspectStore = inspectStore
window.inspectFirstNode = inspectFirstNode

// ============= 启动消息 =============

success('TraceStudio 测试工具已加载')
log('可用的测试函数：')
log('  testParamBinding() - Param 绑定模式')
log('  testEdgeType() - 连线 EdgeType')
log('  testExposedPorts() - 暴露端口')
log('  testNodeDataStructure() - 节点数据结构')
log('  testAPIResponse() - API 响应')
log('  testCompleteWorkflow() - 完整工作流测试')
log('  inspectStore() - 检查 Zustand Store')
log('  inspectFirstNode() - 检查第一个节点')
log('\n例如：testCompleteWorkflow() 运行全部测试')