happy-life-star/test-chat-history-complete.js

// 完整的聊天记录功能测试脚本
// 在聊天页面的浏览器控制台中运行

(function() {
    console.log('=== 聊天记录功能完整测试 ===');
    
    // 1. 检查基础环境
    function checkBasicEnvironment() {
        console.log('\n1. 检查基础环境:');
        
        const token = localStorage.getItem('token');
        console.log('- Token存在:', !!token);
        
        if (!token) {
            console.error('❌ 没有找到token，请先登录');
            return false;
        }
        
        console.log('- 当前页面:', window.location.pathname);
        console.log('- Token长度:', token.length);
        
        return true;
    }
    
    // 2. 测试API调用
    async function testAPIEndpoints() {
        console.log('\n2. 测试API端点:');
        
        const token = localStorage.getItem('token');
        const baseURL = window.location.origin; // 使用当前域名
        
        const headers = {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        };
        
        // 测试分页API
        try {
            console.log('- 测试分页API...');
            const pageResponse = await fetch(`${baseURL}/message/user/page?current=1&size=5`, {
                method: 'GET',
                headers
            });
            
            console.log('  状态码:', pageResponse.status);
            const pageData = await pageResponse.json();
            console.log('  响应数据:', pageData);
            
            if (pageResponse.ok && pageData.code === 200) {
                console.log('  ✅ 分页API成功');
            } else {
                console.log('  ❌ 分页API失败:', pageData.message);
            }
        } catch (error) {
            console.log('  ❌ 分页API错误:', error.message);
        }
        
        // 测试搜索API
        try {
            console.log('- 测试搜索API...');
            const searchResponse = await fetch(`${baseURL}/message/user/search`, {
                method: 'POST',
                headers,
                body: JSON.stringify({ keyword: '测试', limit: 5 })
            });
            
            console.log('  状态码:', searchResponse.status);
            const searchData = await searchResponse.json();
            console.log('  响应数据:', searchData);
            
            if (searchResponse.ok && searchData.code === 200) {
                console.log('  ✅ 搜索API成功');
            } else {
                console.log('  ❌ 搜索API失败:', searchData.message);
            }
        } catch (error) {
            console.log('  ❌ 搜索API错误:', error.message);
        }
        
        // 测试最近消息API
        try {
            console.log('- 测试最近消息API...');
            const recentResponse = await fetch(`${baseURL}/message/user/recent`, {
                method: 'POST',
                headers,
                body: JSON.stringify({ limit: 5 })
            });
            
            console.log('  状态码:', recentResponse.status);
            const recentData = await recentResponse.json();
            console.log('  响应数据:', recentData);
            
            if (recentResponse.ok && recentData.code === 200) {
                console.log('  ✅ 最近消息API成功');
            } else {
                console.log('  ❌ 最近消息API失败:', recentData.message);
            }
        } catch (error) {
            console.log('  ❌ 最近消息API错误:', error.message);
        }
    }
    
    // 3. 检查前端组件
    function checkFrontendComponents() {
        console.log('\n3. 检查前端组件:');
        
        // 检查聊天记录按钮
        const historyButton = document.querySelector('.header-right .action-btn');
        console.log('- 聊天记录按钮:', !!historyButton);
        
        if (!historyButton) {
            console.log('  ❌ 未找到聊天记录按钮');
            return false;
        }
        
        // 检查Vue实例
        const app = document.querySelector('#app');
        const vueInstance = app?.__vue__ || app?._vnode?.component?.ctx;
        console.log('- Vue实例:', !!vueInstance);
        
        if (vueInstance) {
            // 检查响应式数据
            const setupState = vueInstance.setupState || vueInstance.$data;
            console.log('- showHistory:', setupState?.showHistory?.value);
            console.log('- historyLoading:', setupState?.historyLoading?.value);
            console.log('- historyMessages长度:', setupState?.historyMessages?.value?.length || 0);
        }
        
        return true;
    }
    
    // 4. 模拟点击测试
    function simulateClickTest() {
        console.log('\n4. 模拟点击测试:');
        
        const historyButton = document.querySelector('.header-right .action-btn');
        if (!historyButton) {
            console.log('❌ 无法进行点击测试，按钮不存在');
            return;
        }
        
        console.log('- 模拟点击聊天记录按钮...');
        
        // 添加事件监听器来监控点击
        let clickDetected = false;
        const clickHandler = () => {
            clickDetected = true;
            console.log('  ✅ 检测到点击事件');
        };
        
        historyButton.addEventListener('click', clickHandler, { once: true });
        
        // 模拟点击
        historyButton.click();
        
        // 检查抽屉是否打开
        setTimeout(() => {
            const drawer = document.querySelector('.ant-drawer');
            const drawerVisible = drawer && !drawer.classList.contains('ant-drawer-hidden');
            
            console.log('- 抽屉是否可见:', drawerVisible);
            
            if (clickDetected && drawerVisible) {
                console.log('  ✅ 聊天记录功能正常');
            } else {
                console.log('  ❌ 聊天记录功能异常');
                if (!clickDetected) console.log('    - 点击事件未触发');
                if (!drawerVisible) console.log('    - 抽屉未显示');
            }
            
            // 清理事件监听器
            historyButton.removeEventListener('click', clickHandler);
        }, 1000);
    }
    
    // 5. 检查网络请求
    function monitorNetworkRequests() {
        console.log('\n5. 监控网络请求:');
        
        // 重写fetch来监控请求
        const originalFetch = window.fetch;
        const requests = [];
        
        window.fetch = function(...args) {
            const url = args[0];
            if (typeof url === 'string' && url.includes('/message/user/')) {
                console.log('- 检测到消息API请求:', url);
                requests.push({ url, timestamp: Date.now() });
            }
            return originalFetch.apply(this, args);
        };
        
        // 5秒后恢复原始fetch并报告结果
        setTimeout(() => {
            window.fetch = originalFetch;
            console.log('- 监控期间的API请求数量:', requests.length);
            requests.forEach(req => {
                console.log(`  ${new Date(req.timestamp).toLocaleTimeString()}: ${req.url}`);
            });
        }, 5000);
    }
    
    // 主测试函数
    async function runCompleteTest() {
        try {
            // 检查基础环境
            if (!checkBasicEnvironment()) {
                return;
            }
            
            // 开始监控网络请求
            monitorNetworkRequests();
            
            // 测试API端点
            await testAPIEndpoints();
            
            // 检查前端组件
            checkFrontendComponents();
            
            // 模拟点击测试
            simulateClickTest();
            
            console.log('\n=== 测试完成 ===');
            console.log('请查看上述结果，如果API测试成功但前端功能异常，请检查:');
            console.log('1. Vue组件是否正确挂载');
            console.log('2. 事件绑定是否正确');
            console.log('3. 响应式数据是否正确更新');
            console.log('4. 是否有JavaScript错误');
            
        } catch (error) {
            console.error('测试过程中发生错误:', error);
        }
    }
    
    // 运行测试
    runCompleteTest();
    
})();