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>
147 lines
5.9 KiB
HTML
147 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Documentation Debug</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.result { padding: 10px; margin: 10px 0; border-radius: 5px; }
|
|
.success { background: #d4edda; color: #155724; }
|
|
.error { background: #f8d7da; color: #721c24; }
|
|
.info { background: #d1ecf1; color: #0c5460; }
|
|
textarea { width: 100%; height: 200px; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Test Documentation - Debug</h1>
|
|
|
|
<div class="info result">
|
|
<strong>PROBLÈME:</strong> L'onglet Documentation ne montre pas de contenu quand on clique dessus.
|
|
</div>
|
|
|
|
<h2>Instructions de test manuel:</h2>
|
|
<ol>
|
|
<li>Ouvrez <a href="http://localhost:3000" target="_blank">http://localhost:3000</a></li>
|
|
<li>Créez un élément de workflow (glissez depuis la palette)</li>
|
|
<li>Ouvrez les outils de développement (F12)</li>
|
|
<li>Allez dans l'onglet Console</li>
|
|
<li>Copiez et collez ce script:</li>
|
|
</ol>
|
|
|
|
<textarea readonly>
|
|
// Test de la documentation côté client
|
|
console.log('=== TEST DOCUMENTATION ===');
|
|
|
|
// 1. Vérifier que React est chargé
|
|
if (typeof React !== 'undefined') {
|
|
console.log('✅ React chargé');
|
|
} else {
|
|
console.log('❌ React non chargé');
|
|
}
|
|
|
|
// 2. Vérifier les onglets
|
|
const tabs = document.querySelectorAll('[role="tab"]');
|
|
console.log('📑 Onglets trouvés:', tabs.length);
|
|
|
|
tabs.forEach((tab, index) => {
|
|
const text = tab.textContent || tab.getAttribute('aria-label') || '';
|
|
console.log(` Onglet ${index}: "${text}"`);
|
|
|
|
if (text.toLowerCase().includes('documentation') ||
|
|
text.toLowerCase().includes('help') ||
|
|
text.toLowerCase().includes('aide')) {
|
|
console.log('✅ Onglet Documentation trouvé!');
|
|
|
|
// Vérifier l'état avant clic
|
|
const isActive = tab.getAttribute('aria-selected') === 'true';
|
|
console.log(' État avant clic:', isActive ? 'actif' : 'inactif');
|
|
|
|
// Cliquer sur l'onglet
|
|
console.log('🖱️ Clic sur l\'onglet Documentation...');
|
|
tab.click();
|
|
|
|
setTimeout(() => {
|
|
// Vérifier l'état après clic
|
|
const isActiveAfter = tab.getAttribute('aria-selected') === 'true';
|
|
console.log(' État après clic:', isActiveAfter ? 'actif' : 'inactif');
|
|
|
|
// Chercher le contenu
|
|
const tabpanels = document.querySelectorAll('[role="tabpanel"]');
|
|
console.log('📋 Tabpanels trouvés:', tabpanels.length);
|
|
|
|
let contentFound = false;
|
|
tabpanels.forEach((panel, i) => {
|
|
const isVisible = panel.offsetParent !== null &&
|
|
getComputedStyle(panel).display !== 'none';
|
|
const hasContent = panel.textContent.trim().length > 0;
|
|
console.log(` Panel ${i}: visible=${isVisible}, contenu=${hasContent}`);
|
|
|
|
if (isVisible && hasContent) {
|
|
console.log('✅ SUCCÈS: Contenu trouvé!');
|
|
console.log(' Aperçu:', panel.textContent.substring(0, 100) + '...');
|
|
contentFound = true;
|
|
}
|
|
});
|
|
|
|
if (!contentFound) {
|
|
console.log('❌ PROBLÈME: Aucun contenu visible');
|
|
|
|
// Debug supplémentaire
|
|
console.log('🔍 Debug supplémentaire:');
|
|
|
|
// Vérifier les éléments cachés
|
|
const hiddenElements = document.querySelectorAll('[style*="display: none"], [hidden]');
|
|
console.log(' Éléments cachés:', hiddenElements.length);
|
|
|
|
// Vérifier les erreurs
|
|
const errors = document.querySelectorAll('[class*="error"]');
|
|
console.log(' Erreurs possibles:', errors.length);
|
|
|
|
// Vérifier l'état des composants React
|
|
const reactElements = document.querySelectorAll('[data-reactroot], [data-react-helmet]');
|
|
console.log(' Éléments React:', reactElements.length);
|
|
}
|
|
|
|
}, 1000);
|
|
}
|
|
});
|
|
|
|
console.log('=== FIN TEST ===');
|
|
</textarea>
|
|
|
|
<h2>Que chercher dans la console:</h2>
|
|
<ul>
|
|
<li><strong>✅ "Onglet Documentation trouvé!"</strong> - L'onglet existe</li>
|
|
<li><strong>État avant/après clic</strong> - Vérifier si l'onglet s'active</li>
|
|
<li><strong>✅ "SUCCÈS: Contenu trouvé!"</strong> - Le contenu s'affiche</li>
|
|
<li><strong>❌ "PROBLÈME: Aucun contenu visible"</strong> - Le problème est confirmé</li>
|
|
</ul>
|
|
|
|
<h2>Problèmes possibles et solutions:</h2>
|
|
<div class="info result">
|
|
<h3>1. Onglet ne s'active pas</h3>
|
|
<p><strong>Cause:</strong> Problème de gestion d'état React</p>
|
|
<p><strong>Solution:</strong> Vérifier le handleTabChange dans PropertiesPanel</p>
|
|
</div>
|
|
|
|
<div class="info result">
|
|
<h3>2. Onglet s'active mais pas de contenu</h3>
|
|
<p><strong>Cause:</strong> Problème de rendu conditionnel</p>
|
|
<p><strong>Solution:</strong> Vérifier la condition activeTab === 1</p>
|
|
</div>
|
|
|
|
<div class="info result">
|
|
<h3>3. Contenu existe mais invisible</h3>
|
|
<p><strong>Cause:</strong> Problème CSS ou de layout</p>
|
|
<p><strong>Solution:</strong> Vérifier les styles et la visibilité</p>
|
|
</div>
|
|
|
|
<div class="info result">
|
|
<h3>4. Erreurs JavaScript</h3>
|
|
<p><strong>Cause:</strong> Erreur dans DocumentationTab ou DocumentationService</p>
|
|
<p><strong>Solution:</strong> Vérifier les imports et la logique</p>
|
|
</div>
|
|
|
|
<h2>Test rapide:</h2>
|
|
<p>Si vous voyez "❌ PROBLÈME: Aucun contenu visible", le problème est confirmé et nous devons examiner le code React plus en détail.</p>
|
|
</body>
|
|
</html> |