go-svc-code/test/web/frontend_test.js

// 前端功能验证测试
const fs = require('fs');
const path = require('path');

console.log('🔍 开始前端应用测试...\n');

// 读取app.js文件内容
const appJsPath = path.join(__dirname, '../../web/app.js');
if (!fs.existsSync(appJsPath)) {
    console.error('❌ app.js文件不存在');
    process.exit(1);
}

const appJsContent = fs.readFileSync(appJsPath, 'utf8');
console.log(`📄 app.js文件大小: ${appJsContent.length} 字符`);

// 测试项目
const tests = [
    {
        name: 'OpenCodeApp类定义',
        condition: appJsContent.includes('class OpenCodeApp'),
        message: '✓ OpenCodeApp类定义存在'
    },
    {
        name: '构造函数',
        condition: appJsContent.includes('constructor()'),
        message: '✓ 构造函数存在'
    },
    {
        name: '用户ID生成',
        condition: appJsContent.includes('generateUserId()'),
        message: '✓ 用户ID生成功能存在'
    },
    {
        name: 'DOM元素初始化',
        condition: appJsContent.includes('initElements()'),
        message: '✓ DOM元素初始化存在'
    },
    {
        name: '事件绑定',
        condition: appJsContent.includes('bindEvents()'),
        message: '✓ 事件绑定功能存在'
    },
    {
        name: '健康检查',
        condition: appJsContent.includes('checkHealth()'),
        message: '✓ 健康检查功能存在'
    },
    {
        name: '会话创建',
        condition: appJsContent.includes('createSession()'),
        message: '✓ 会话创建功能存在'
    },
    {
        name: '会话列表加载',
        condition: appJsContent.includes('loadSessions()'),
        message: '✓ 会话列表加载功能存在'
    },
    {
        name: '消息发送',
        condition: appJsContent.includes('sendMessage()'),
        message: '✓ 消息发送功能存在'
    },
    {
        name: '同步消息发送',
        condition: appJsContent.includes('sendMessageSync()'),
        message: '✓ 同步消息发送功能存在'
    },
    {
        name: '流式消息发送',
        condition: appJsContent.includes('sendMessageStream()'),
        message: '✓ 流式消息发送功能存在'
    },
    {
        name: '日志流启动',
        condition: appJsContent.includes('startLogStream()'),
        message: '✓ 日志流启动功能存在'
    },
    {
        name: '日志条目添加',
        condition: appJsContent.includes('addLogEntry('),
        message: '✓ 日志条目添加功能存在'
    }
];

// API端点检查
const apiEndpoints = [
    '/api/health',
    '/api/session/create', 
    '/api/session/list',
    '/api/prompt/sync',
    '/api/prompt/stream',
    '/api/logs/stream'
];

// 运行测试
let passed = 0;
let failed = 0;

console.log('🧪 运行功能测试:');
tests.forEach(test => {
    if (test.condition) {
        console.log(`  ${test.message}`);
        passed++;
    } else {
        console.log(`  ❌ ${test.name} 失败`);
        failed++;
    }
});

console.log('\n🌐 API端点检查:');
apiEndpoints.forEach(endpoint => {
    if (appJsContent.includes(endpoint)) {
        console.log(`  ✓ 引用端点: ${endpoint}`);
        passed++;
    } else {
        console.log(`  ❌ 缺少端点: ${endpoint}`);
        failed++;
    }
});

// 检查关键事件处理
console.log('\n🎯 事件处理检查:');
const events = [
    'addEventListener',
    'onclick',
    'onkeydown',
    'onmessage',
    'onerror'
];

events.forEach(event => {
    if (appJsContent.includes(event)) {
        console.log(`  ✓ 事件处理: ${event}`);
        passed++;
    } else {
        console.log(`  ⚠️  未找到: ${event}`);
    }
});

// 检查流式处理技术
console.log('\n🚀 流式处理技术检查:');
const streamingTech = [
    'EventSource',
    'getReader',
    'TextDecoder',
    'fetch',
    'JSON.parse'
];

streamingTech.forEach(tech => {
    if (appJsContent.includes(tech)) {
        console.log(`  ✓ 使用技术: ${tech}`);
        passed++;
    } else {
        console.log(`  ⚠️  未找到: ${tech}`);
    }
});

// 检查错误处理
console.log('\n🛡️  错误处理检查:');
const errorHandling = [
    'try {',
    'catch (error)',
    'console.error',
    'console.log'
];

errorHandling.forEach(item => {
    if (appJsContent.includes(item)) {
        console.log(`  ✓ 错误处理: ${item}`);
        passed++;
    } else {
        console.log(`  ⚠️  未找到: ${item}`);
    }
});

// 检查DOM操作
console.log('\n💻 DOM操作检查:');
const domOperations = [
    'getElementById',
    'querySelector',
    'innerHTML',
    'textContent',
    'classList',
    'appendChild'
];

domOperations.forEach(op => {
    if (appJsContent.includes(op)) {
        console.log(`  ✓ DOM操作: ${op}`);
        passed++;
    } else {
        console.log(`  ⚠️  未找到: ${op}`);
    }
});

// 输出总结
console.log('\n📊 测试总结:');
console.log(`  通过: ${passed}`);
console.log(`  失败: ${failed}`);
console.log(`  总数: ${passed + failed}`);

if (failed > 0) {
    console.log('\n❌ 前端测试失败');
    process.exit(1);
} else {
    console.log('\n✅ 所有前端测试通过！');
    
    // 额外检查：验证HTML文件
    const htmlPath = path.join(__dirname, '../../web/index.html');
    if (fs.existsSync(htmlPath)) {
        const htmlContent = fs.readFileSync(htmlPath, 'utf8');
        console.log('\n📄 HTML文件检查:');
        
        const htmlChecks = [
            {
                name: '包含app.js引用',
                condition: htmlContent.includes('<script src="app.js"></script>'),
                message: '✓ 正确引用app.js'
            },
            {
                name: '包含必要元素ID',
                condition: htmlContent.includes('id="') && 
                          htmlContent.includes('id="createSessionBtn"') &&
                          htmlContent.includes('id="messageInput"'),
                message: '✓ 包含必要的元素ID'
            },
            {
                name: '包含CSS样式',
                condition: htmlContent.includes('<style>') && htmlContent.includes('</style>'),
                message: '✓ 包含内联CSS样式'
            }
        ];
        
        htmlChecks.forEach(check => {
            if (check.condition) {
                console.log(`  ${check.message}`);
            } else {
                console.log(`  ❌ ${check.name} 失败`);
            }
        });
        
        console.log(`\n🎨 HTML文件大小: ${htmlContent.length} 字符`);
    }
    
    console.log('\n✨ 前端应用验证完成！');
}