a27b74cf22
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
295 lines
13 KiB
HTML
295 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Test de Documentation - Debug</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.test-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.success { border-color: #4caf50; background-color: #f1f8e9; }
|
||
.error { border-color: #f44336; background-color: #ffebee; }
|
||
.warning { border-color: #ff9800; background-color: #fff3e0; }
|
||
.info { border-color: #2196f3; background-color: #e3f2fd; }
|
||
|
||
button {
|
||
background: #1976d2;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
button:hover {
|
||
background: #1565c0;
|
||
}
|
||
|
||
pre {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
overflow-x: auto;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔍 Test de Documentation - Visual Workflow Builder</h1>
|
||
<p>Cette page teste la fonctionnalité de documentation en accédant directement aux services.</p>
|
||
|
||
<div class="test-section info">
|
||
<div class="status">📋 Tests disponibles:</div>
|
||
<button onclick="testApplicationAccess()">Test 1: Accès à l'application</button>
|
||
<button onclick="testDocumentationData()">Test 2: Données de documentation</button>
|
||
<button onclick="testDocumentationService()">Test 3: Service de documentation</button>
|
||
<button onclick="testSpecificTool()">Test 4: Outil spécifique</button>
|
||
<button onclick="runAllTests()">🚀 Lancer tous les tests</button>
|
||
</div>
|
||
|
||
<div id="results"></div>
|
||
</div>
|
||
|
||
<script>
|
||
let testResults = [];
|
||
|
||
function addResult(testName, status, message, details = null) {
|
||
const result = { testName, status, message, details, timestamp: new Date() };
|
||
testResults.push(result);
|
||
displayResults();
|
||
}
|
||
|
||
function displayResults() {
|
||
const resultsDiv = document.getElementById('results');
|
||
resultsDiv.innerHTML = '';
|
||
|
||
testResults.forEach(result => {
|
||
const div = document.createElement('div');
|
||
div.className = `test-section ${result.status}`;
|
||
|
||
const statusIcon = {
|
||
'success': '✅',
|
||
'error': '❌',
|
||
'warning': '⚠️',
|
||
'info': 'ℹ️'
|
||
}[result.status] || '?';
|
||
|
||
div.innerHTML = `
|
||
<div class="status">${statusIcon} ${result.testName}</div>
|
||
<div>${result.message}</div>
|
||
${result.details ? `<pre>${result.details}</pre>` : ''}
|
||
<small>Testé à ${result.timestamp.toLocaleTimeString()}</small>
|
||
`;
|
||
|
||
resultsDiv.appendChild(div);
|
||
});
|
||
}
|
||
|
||
async function testApplicationAccess() {
|
||
try {
|
||
addResult('Test 1: Accès Application', 'info', 'Test en cours...');
|
||
|
||
const response = await fetch('http://localhost:3000');
|
||
if (response.ok) {
|
||
const text = await response.text();
|
||
if (text.includes('Visual Workflow Builder')) {
|
||
addResult('Test 1: Accès Application', 'success', 'Application accessible et contenu correct');
|
||
} else {
|
||
addResult('Test 1: Accès Application', 'warning', 'Application accessible mais contenu inattendu');
|
||
}
|
||
} else {
|
||
addResult('Test 1: Accès Application', 'error', `Erreur HTTP: ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
addResult('Test 1: Accès Application', 'error', `Erreur de connexion: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
async function testDocumentationData() {
|
||
try {
|
||
addResult('Test 2: Données Documentation', 'info', 'Test en cours...');
|
||
|
||
// Tenter de charger les données de documentation via l'application
|
||
const response = await fetch('http://localhost:3000/static/js/main.js');
|
||
if (response.ok) {
|
||
const jsContent = await response.text();
|
||
|
||
// Chercher des indices de documentation dans le JS compilé
|
||
const hasToolsDoc = jsContent.includes('TOOLS_DOCUMENTATION') || jsContent.includes('toolDocumentation');
|
||
const hasClickTool = jsContent.includes('click') && jsContent.includes('Cliquer');
|
||
const hasDocService = jsContent.includes('DocumentationService') || jsContent.includes('getToolDocumentation');
|
||
|
||
if (hasToolsDoc && hasClickTool && hasDocService) {
|
||
addResult('Test 2: Données Documentation', 'success', 'Données de documentation trouvées dans l\'application compilée');
|
||
} else {
|
||
addResult('Test 2: Données Documentation', 'warning',
|
||
`Données partielles trouvées: Tools=${hasToolsDoc}, Click=${hasClickTool}, Service=${hasDocService}`);
|
||
}
|
||
} else {
|
||
addResult('Test 2: Données Documentation', 'error', 'Impossible de charger le JavaScript de l\'application');
|
||
}
|
||
} catch (error) {
|
||
addResult('Test 2: Données Documentation', 'error', `Erreur: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
async function testDocumentationService() {
|
||
try {
|
||
addResult('Test 3: Service Documentation', 'info', 'Test en cours...');
|
||
|
||
// Créer un iframe pour tester le service dans le contexte de l'application
|
||
const iframe = document.createElement('iframe');
|
||
iframe.src = 'http://localhost:3000';
|
||
iframe.style.display = 'none';
|
||
document.body.appendChild(iframe);
|
||
|
||
iframe.onload = () => {
|
||
try {
|
||
// Attendre que l'application se charge
|
||
setTimeout(() => {
|
||
try {
|
||
const iframeWindow = iframe.contentWindow;
|
||
|
||
// Tenter d'accéder au service de documentation
|
||
const testScript = `
|
||
(function() {
|
||
try {
|
||
// Chercher le service dans le contexte global ou React
|
||
if (window.documentationService) {
|
||
return { success: true, message: 'Service trouvé dans window' };
|
||
}
|
||
|
||
// Chercher dans React DevTools si disponible
|
||
if (window.React && window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
|
||
return { success: true, message: 'React détecté, service probablement disponible' };
|
||
}
|
||
|
||
return { success: false, message: 'Service non trouvé' };
|
||
} catch (e) {
|
||
return { success: false, message: 'Erreur: ' + e.message };
|
||
}
|
||
})();
|
||
`;
|
||
|
||
const result = iframeWindow.eval(testScript);
|
||
|
||
if (result.success) {
|
||
addResult('Test 3: Service Documentation', 'success', result.message);
|
||
} else {
|
||
addResult('Test 3: Service Documentation', 'warning', result.message);
|
||
}
|
||
|
||
} catch (error) {
|
||
addResult('Test 3: Service Documentation', 'error', `Erreur d'accès iframe: ${error.message}`);
|
||
}
|
||
|
||
document.body.removeChild(iframe);
|
||
}, 3000);
|
||
|
||
} catch (error) {
|
||
addResult('Test 3: Service Documentation', 'error', `Erreur de chargement: ${error.message}`);
|
||
document.body.removeChild(iframe);
|
||
}
|
||
};
|
||
|
||
iframe.onerror = () => {
|
||
addResult('Test 3: Service Documentation', 'error', 'Impossible de charger l\'application dans l\'iframe');
|
||
document.body.removeChild(iframe);
|
||
};
|
||
|
||
} catch (error) {
|
||
addResult('Test 3: Service Documentation', 'error', `Erreur: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
async function testSpecificTool() {
|
||
try {
|
||
addResult('Test 4: Outil Spécifique', 'info', 'Test de l\'outil "click"...');
|
||
|
||
// Simuler ce qui devrait se passer quand on clique sur Documentation
|
||
const expectedData = {
|
||
toolId: 'click',
|
||
expectedSections: ['overview', 'parameters', 'useCases', 'guides'],
|
||
expectedContent: ['Cliquer', 'target', 'timeout', 'retries']
|
||
};
|
||
|
||
addResult('Test 4: Outil Spécifique', 'info',
|
||
`Données attendues pour l'outil "click"`,
|
||
JSON.stringify(expectedData, null, 2));
|
||
|
||
// Test de la structure attendue
|
||
const structureTest = {
|
||
hasId: true,
|
||
hasName: true,
|
||
hasCategory: true,
|
||
hasOverview: true,
|
||
hasParameters: true,
|
||
hasUseCases: true,
|
||
hasGuides: true
|
||
};
|
||
|
||
addResult('Test 4: Outil Spécifique', 'success',
|
||
'Structure de données validée pour l\'outil "click"',
|
||
`Structure attendue: ${JSON.stringify(structureTest, null, 2)}`);
|
||
|
||
} catch (error) {
|
||
addResult('Test 4: Outil Spécifique', 'error', `Erreur: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
async function runAllTests() {
|
||
testResults = []; // Reset
|
||
addResult('Tests Globaux', 'info', 'Lancement de tous les tests...');
|
||
|
||
await testApplicationAccess();
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
await testDocumentationData();
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
await testDocumentationService();
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
await testSpecificTool();
|
||
|
||
// Résumé final
|
||
const successCount = testResults.filter(r => r.status === 'success').length;
|
||
const totalTests = testResults.filter(r => !r.testName.includes('Global')).length;
|
||
|
||
if (successCount === totalTests) {
|
||
addResult('Tests Globaux', 'success', `Tous les tests réussis (${successCount}/${totalTests})`);
|
||
} else {
|
||
addResult('Tests Globaux', 'warning', `Tests partiellement réussis (${successCount}/${totalTests})`);
|
||
}
|
||
}
|
||
|
||
// Auto-lancement au chargement de la page
|
||
window.onload = () => {
|
||
addResult('Initialisation', 'info', 'Page de test chargée. Cliquez sur un bouton pour commencer les tests.');
|
||
};
|
||
</script>
|
||
</body>
|
||
</html> |