test-phase3-projectcore-api.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phase 3 - ProjectCore.createPlugin() APIテスト</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #1a1a2e;
            color: #eee;
        }
        .test-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
        }
        .test-controls {
            background: #16213e;
            border: 1px solid #3a4764;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .test-controls h3 {
            margin: 0 0 15px 0;
            color: #667eea;
        }
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        button:hover {
            background: #764ba2;
            transform: translateY(-2px);
        }
        button.success {
            background: #4caf50;
        }
        button.danger {
            background: #f44336;
        }
        .status {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 15px;
            font-family: monospace;
            font-size: 13px;
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        .status-line {
            padding: 3px 0;
        }
        .status-line.success {
            color: #3fb950;
        }
        .status-line.error {
            color: #f85149;
        }
        .status-line.info {
            color: #58a6ff;
        }
        .status-line.warning {
            color: #d29922;
        }
        .test-result {
            background: #16213e;
            border: 1px solid #3a4764;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        .test-result h3 {
            margin: 0 0 15px 0;
            color: #00ff88;
        }
        .test-case {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
        }
        .test-case.pass {
            background: rgba(76, 175, 80, 0.1);
            border: 1px solid #4caf50;
        }
        .test-case.fail {
            background: rgba(244, 67, 54, 0.1);
            border: 1px solid #f44336;
        }
        iframe {
            width: 100%;
            height: 500px;
            border: 2px solid #3a4764;
            border-radius: 10px;
            background: white;
        }
    </style>
</head>
<body>
    <div class="test-header">
        <h1>🚀 Phase 3 - ProjectCore.createPlugin() APIテスト</h1>
        <p>PlacementDragManager → ProjectCore移行の動作確認</p>
    </div>
    
    <div class="test-controls">
        <h3>🎮 テスト制御</h3>
        <button onclick="testDirectAPI()">📦 ProjectCore API直接テスト</button>
        <button onclick="testPlacementDragManager()">🎨 PlacementDragManager経由テスト</button>
        <button onclick="testFallback()">⚠️ フォールバックテスト</button>
        <button onclick="runAllTests()" class="success">🚀 全テスト実行</button>
        <button onclick="clearStatus()" class="danger">🧹 ログクリア</button>
    </div>
    
    <div class="status" id="status">
        <div class="status-line info">テスト環境初期化中...</div>
    </div>
    
    <div class="test-result" id="test-result">
        <h3>📊 テスト結果</h3>
        <div id="result-content">
            テスト未実行
        </div>
    </div>
    
    <!-- CharmFlow v3埋め込み -->
    <iframe id="charmflow-frame" src="http://192.168.0.150:10000/charmflow_v3/?test=phase3"></iframe>
    
    <script>
        let charmFlowWindow = null;
        let testResults = [];
        
        // 初期化待機
        window.addEventListener('DOMContentLoaded', () => {
            const iframe = document.getElementById('charmflow-frame');
            
            // iframeの読み込み完了を待つ
            const checkIframeReady = setInterval(() => {
                try {
                    if (iframe.contentWindow && iframe.contentWindow.nyaCoreUI) {
                        clearInterval(checkIframeReady);
                        charmFlowWindow = iframe.contentWindow;
                        addStatus('✅ CharmFlow v3接続成功', 'success');
                        initializeTests();
                    }
                } catch (e) {
                    // Cross-origin制限の場合は無視
                }
            }, 1000);
            
            // タイムアウト設定
            setTimeout(() => {
                if (!charmFlowWindow) {
                    clearInterval(checkIframeReady);
                    addStatus('❌ CharmFlow v3接続タイムアウト', 'error');
                    addStatus('⚠️ 手動でページをリロードしてください', 'warning');
                }
            }, 10000);
        });
        
        function addStatus(message, type = 'info') {
            const status = document.getElementById('status');
            const line = document.createElement('div');
            line.className = `status-line ${type}`;
            const timestamp = new Date().toLocaleTimeString();
            line.textContent = `[${timestamp}] ${message}`;
            status.appendChild(line);
            status.scrollTop = status.scrollHeight;
        }
        
        function clearStatus() {
            document.getElementById('status').innerHTML = '';
            addStatus('ログクリア完了', 'info');
        }
        
        function initializeTests() {
            addStatus('🔄 CharmFlow v3環境確認中...', 'info');
            
            if (!charmFlowWindow) {
                addStatus('❌ CharmFlow v3にアクセスできません', 'error');
                return;
            }
            
            // 必要なコンポーネント確認
            const checks = [
                { name: 'nyaCoreUI', obj: charmFlowWindow.nyaCoreUI },
                { name: 'ProjectCore', obj: charmFlowWindow.nyaCoreUI?.projectCore },
                { name: 'PlacementDragManager', obj: charmFlowWindow.PlacementDragManager },
                { name: 'createPlugin API', obj: charmFlowWindow.nyaCoreUI?.projectCore?.createPlugin }
            ];
            
            // デバッグ情報表示
            if (charmFlowWindow.nyaCoreUI && charmFlowWindow.nyaCoreUI.projectCore) {
                const projectCore = charmFlowWindow.nyaCoreUI.projectCore;
                console.log('ProjectCore object:', projectCore);
                console.log('createPlugin exists?', typeof projectCore.createPlugin);
                console.log('ProjectCore constructor:', projectCore.constructor.name);
                
                // メソッド一覧表示
                const methods = [];
                let obj = projectCore;
                while (obj) {
                    methods.push(...Object.getOwnPropertyNames(obj).filter(name => typeof obj[name] === 'function'));
                    obj = Object.getPrototypeOf(obj);
                    if (obj === Object.prototype) break;
                }
                console.log('All methods:', methods);
            }
            
            let allPassed = true;
            checks.forEach(check => {
                if (check.obj) {
                    addStatus(`✅ ${check.name} 確認完了`, 'success');
                } else {
                    addStatus(`❌ ${check.name} が見つかりません`, 'error');
                    allPassed = false;
                }
            });
            
            if (allPassed) {
                addStatus('🎉 テスト環境準備完了！', 'success');
            } else {
                addStatus('⚠️ 一部のコンポーネントが不足しています', 'warning');
            }
        }
        
        // Test 1: ProjectCore API直接テスト
        async function testDirectAPI() {
            addStatus('🧪 Test 1: ProjectCore.createPlugin() 直接呼び出し', 'info');
            
            try {
                if (!charmFlowWindow) {
                    throw new Error('CharmFlow v3未接続 - 初期化を待ってください');
                }
                
                const projectCore = charmFlowWindow.nyaCoreUI?.projectCore;
                if (!projectCore || !projectCore.createPlugin) {
                    throw new Error('ProjectCore.createPlugin not available');
                }
                
                const position = { x: 100, y: 100 };
                const nodeType = 'text-note';
                
                addStatus(`📦 Creating plugin: ${nodeType} at (${position.x}, ${position.y})`, 'info');
                
                const pluginId = await projectCore.createPlugin(nodeType, position, {
                    source: 'phase3-test',
                    testData: 'direct-api'
                });
                
                if (pluginId) {
                    addStatus(`✅ Plugin created successfully: ${pluginId}`, 'success');
                    addTestResult('ProjectCore直接API', true, `Plugin ID: ${pluginId}`);
                } else {
                    throw new Error('createPlugin returned null');
                }
                
            } catch (error) {
                addStatus(`❌ Direct API test failed: ${error.message}`, 'error');
                addTestResult('ProjectCore直接API', false, error.message);
            }
        }
        
        // Test 2: PlacementDragManager経由テスト
        async function testPlacementDragManager() {
            addStatus('🧪 Test 2: PlacementDragManager経由のプラグイン作成', 'info');
            
            try {
                // MockドロップイベントをシミュレートするTodoとして記録
                addStatus('📋 PlacementDragManager経由テストは手動で実行してください:', 'warning');
                addStatus('1. プラグインパレットを開く', 'info');
                addStatus('2. プラグインをキャンバスにドラッグ&ドロップ', 'info');
                addStatus('3. コンソールで "Using ProjectCore.createPlugin()" を確認', 'info');
                
                addTestResult('PlacementDragManager経由', null, '手動テスト必要');
                
            } catch (error) {
                addStatus(`❌ PlacementDragManager test failed: ${error.message}`, 'error');
                addTestResult('PlacementDragManager経由', false, error.message);
            }
        }
        
        // Test 3: フォールバックテスト
        async function testFallback() {
            addStatus('🧪 Test 3: フォールバック動作確認', 'info');
            
            try {
                if (!charmFlowWindow) {
                    throw new Error('CharmFlow v3未接続 - 初期化を待ってください');
                }
                
                // ProjectCore.createPluginを一時的に無効化
                const projectCore = charmFlowWindow.nyaCoreUI?.projectCore;
                const originalCreatePlugin = projectCore?.createPlugin;
                
                if (projectCore) {
                    projectCore.createPlugin = null;
                    addStatus('⚠️ ProjectCore.createPlugin を一時的に無効化', 'warning');
                }
                
                // nyaCoreUI.createUIPlugin経由でプラグイン作成
                const position = { x: 200, y: 200 };
                const nodeType = 'button-send';
                
                const pluginId = await charmFlowWindow.nyaCoreUI.createUIPlugin(nodeType, position);
                
                if (pluginId) {
                    addStatus(`✅ Fallback successful: ${pluginId}`, 'success');
                    addTestResult('フォールバック動作', true, `Fallback Plugin ID: ${pluginId}`);
                } else {
                    throw new Error('Fallback createUIPlugin returned null');
                }
                
                // 元に戻す
                if (projectCore && originalCreatePlugin) {
                    projectCore.createPlugin = originalCreatePlugin;
                    addStatus('✅ ProjectCore.createPlugin を復元', 'success');
                }
                
            } catch (error) {
                addStatus(`❌ Fallback test failed: ${error.message}`, 'error');
                addTestResult('フォールバック動作', false, error.message);
            }
        }
        
        // 全テスト実行
        async function runAllTests() {
            clearStatus();
            testResults = [];
            addStatus('🚀 全テスト実行開始', 'info');
            
            if (!charmFlowWindow) {
                addStatus('❌ CharmFlow v3が初期化されていません', 'error');
                addStatus('⏳ 初期化完了を待ってから再度実行してください', 'warning');
                return;
            }
            
            await testDirectAPI();
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            await testPlacementDragManager();
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            await testFallback();
            
            showTestSummary();
        }
        
        // テスト結果追加
        function addTestResult(testName, passed, details) {
            testResults.push({ name: testName, passed, details });
            updateResultDisplay();
        }
        
        // 結果表示更新
        function updateResultDisplay() {
            const resultContent = document.getElementById('result-content');
            resultContent.innerHTML = testResults.map(result => {
                const statusClass = result.passed === null ? 'pending' : (result.passed ? 'pass' : 'fail');
                const statusText = result.passed === null ? '⏳ 保留' : (result.passed ? '✅ 成功' : '❌ 失敗');
                return `
                    <div class="test-case ${statusClass}">
                        <strong>${result.name}</strong>: ${statusText}
                        <br><small>${result.details}</small>
                    </div>
                `;
            }).join('');
        }
        
        // サマリー表示
        function showTestSummary() {
            const total = testResults.length;
            const passed = testResults.filter(r => r.passed === true).length;
            const failed = testResults.filter(r => r.passed === false).length;
            const pending = testResults.filter(r => r.passed === null).length;
            
            addStatus('=' .repeat(60), 'info');
            addStatus(`📊 テストサマリー: 総数=${total}, 成功=${passed}, 失敗=${failed}, 保留=${pending}`, 'info');
            addStatus('=' .repeat(60), 'info');
        }
    </script>
</body>
</html>