test-graph-viewer.js

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: '/usr/bin/google-chrome',
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  const page = await browser.newPage();
  
  // Capture console logs
  const consoleLogs = [];
  page.on('console', msg => {
    consoleLogs.push({type: msg.type(), text: msg.text()});
  });
  
  // Capture errors
  const errors = [];
  page.on('pageerror', error => {
    errors.push(error.toString());
  });
  
  try {
    console.log('Navigating to http://localhost:8791/graph...');
    await page.goto('http://localhost:8791/graph', {
      waitUntil: 'networkidle2',
      timeout: 10000
    });
    
    // Wait for Sigma initialization
    await new Promise(resolve => setTimeout(resolve, 3000));
    
    // Check for sigma container
    const sigmaContainer = await page.$('#sigma-container');
    console.log('✓ Sigma container exists:', !!sigmaContainer);
    
    // Check for statistics panel
    const statsPanel = await page.$('.stats');
    console.log('✓ Statistics panel exists:', !!statsPanel);
    
    // Get statistics text
    const statsText = await page.evaluate(() => {
      const stats = document.querySelector('.stats');
      return stats ? stats.innerText : 'Not found';
    });
    console.log('\n=== STATISTICS PANEL ===');
    console.log(statsText);
    
    // Check for controls
    const controls = await page.$('.controls');
    console.log('\n✓ Controls panel exists:', !!controls);
    
    // Check for canvas inside sigma container
    const hasCanvas = await page.evaluate(() => {
      const container = document.querySelector('#sigma-container');
      return container ? !!container.querySelector('canvas') : false;
    });
    console.log('✓ Sigma canvas rendered:', hasCanvas);
    
    // Check for buttons
    const buttonChecks = await page.evaluate(() => {
      const buttons = Array.from(document.querySelectorAll('button'));
      return {
        resetView: buttons.some(b => b.textContent.includes('Reset View')),
        exportGEXF: buttons.some(b => b.textContent.includes('Export GEXF')),
        exportJSON: buttons.some(b => b.textContent.includes('Export JSON'))
      };
    });
    console.log('✓ Reset View button exists:', buttonChecks.resetView);
    console.log('✓ Export GEXF button exists:', buttonChecks.exportGEXF);
    console.log('✓ Export JSON button exists:', buttonChecks.exportJSON);
    
    // Get node and edge count from rendered graph
    const graphMetrics = await page.evaluate(() => {
      const statsDiv = document.querySelector('.stats');
      if (!statsDiv) return null;
      const text = statsDiv.innerText;
      const nodeMatch = text.match(/Nodes:\s*(\d+)/);
      const edgeMatch = text.match(/Edges:\s*(\d+)/);
      const modMatch = text.match(/Modularity:\s*([\d.]+)/);
      const entMatch = text.match(/Entropy:\s*([\d.]+)/);
      return {
        nodes: nodeMatch ? parseInt(nodeMatch[1]) : 0,
        edges: edgeMatch ? parseInt(edgeMatch[1]) : 0,
        modularity: modMatch ? parseFloat(modMatch[1]) : 0,
        entropy: entMatch ? parseFloat(entMatch[1]) : 0
      };
    });
    
    console.log('\n=== GRAPH METRICS ===');
    console.log('Nodes:', graphMetrics.nodes);
    console.log('Edges:', graphMetrics.edges);
    console.log('Modularity:', graphMetrics.modularity);
    console.log('Entropy:', graphMetrics.entropy);
    
    // Take screenshot
    await page.screenshot({
      path: '/tmp/graph-viewer-screenshot.png',
      fullPage: false
    });
    console.log('\n✓ Screenshot saved to /tmp/graph-viewer-screenshot.png');
    
    // Report console logs
    console.log('\n=== CONSOLE LOGS ===');
    const initLog = consoleLogs.find(log => log.text.includes('Sigma') || log.text.includes('initialized'));
    if (initLog) {
      console.log('✓ Sigma initialization found:', initLog.text);
    }
    consoleLogs.forEach(log => {
      if (log.type === 'error') {
        console.log(`[ERROR] ${log.text}`);
      }
    });
    
    // Report errors
    if (errors.length > 0) {
      console.log('\n=== JAVASCRIPT ERRORS ===');
      errors.forEach(err => console.log('✗', err));
    } else {
      console.log('\n✓ NO JAVASCRIPT ERRORS');
    }
    
    // Test interactive control
    console.log('\n=== TESTING INTERACTIVE CONTROLS ===');
    const resetButton = await page.evaluateHandle(() => {
      const buttons = Array.from(document.querySelectorAll('button'));
      return buttons.find(b => b.textContent.includes('Reset View'));
    });
    
    if (resetButton) {
      await resetButton.asElement().click();
      await new Promise(resolve => setTimeout(resolve, 500));
      console.log('✓ Reset View button clicked successfully');
    }
    
    // Final verdict
    console.log('\n=== TEST SUMMARY ===');
    const allPassed = sigmaContainer && statsPanel && hasCanvas && 
                      buttonChecks.resetView && buttonChecks.exportGEXF && 
                      buttonChecks.exportJSON && errors.length === 0 &&
                      graphMetrics.nodes === 10 && graphMetrics.edges === 24;
    
    if (allPassed) {
      console.log('✓✓✓ ALL TESTS PASSED ✓✓✓');
      console.log('Graph viewer is fully functional with correct data (10 nodes, 24 edges)');
    } else {
      console.log('✗ SOME TESTS FAILED');
      if (graphMetrics.nodes !== 10 || graphMetrics.edges !== 24) {
        console.log(`  Expected 10 nodes and 24 edges, got ${graphMetrics.nodes} nodes and ${graphMetrics.edges} edges`);
      }
    }
    
  } catch (error) {
    console.error('✗ Test failed:', error.message);
  } finally {
    await browser.close();
  }
})();