agentsqripts/lib/ui-problems/analyzeUIProblems.test.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

// Test file for UI problem analysis utilities
// 🔗 Tests: analyzeFileUIProblems → analyzeProjectUIProblems → detectAmbiguousLabels → detectIconInconsistencies

const { analyzeFileUIProblems, analyzeProjectUIProblems, detectAmbiguousLabels, detectIconInconsistencies } = require('./analyzeUIProblems');
const fs = require('fs');
const path = require('path');

/**
 * Test runner for UI problem analysis
 */
async function runTests() {
  console.log('=== Testing UI Problem Analysis Utilities ===');
  
  const results = {
    total: 0,
    passed: 0
  };
  
  // Test ambiguous label detection
  results.total++;
  try {
    const testContent = `
      <button>Click here</button>
      <button>Submit</button>
      <a href="/link">More</a>
      <button aria-label="ok">Action</button>
      <button>Save Changes</button>
    `;
    
    const issues = detectAmbiguousLabels(testContent, 'test.js');
    
    if (Array.isArray(issues) && issues.length >= 3) {
      const clickHereIssue = issues.find(i => i.labelText.includes('click here'));
      const submitIssue = issues.find(i => i.labelText.includes('submit'));
      
      if (clickHereIssue && submitIssue && 
          clickHereIssue.type === 'ambiguous_labels' && 
          clickHereIssue.severity === 'HIGH' &&
          clickHereIssue.category === 'Content') {
        console.log('✓ detectAmbiguousLabels correctly identifies problematic text');
        results.passed++;
      } else {
        console.log('✗ detectAmbiguousLabels failed - wrong issue properties');
      }
    } else {
      console.log('✗ detectAmbiguousLabels failed - expected at least 3 issues');
    }
  } catch (error) {
    console.log(`✗ detectAmbiguousLabels failed: ${error.message}`);
  }
  
  // Test icon inconsistency detection
  results.total++;
  try {
    const testContent = `
      import { FontAwesome } from 'react-fontawesome';
      import { MaterialIcons } from '@material-ui/icons';
      <i className="fa fa-home"></i>
      <MaterialIcons>home</MaterialIcons>
    `;
    
    const issues = detectIconInconsistencies(testContent, 'test.js');
    
    if (Array.isArray(issues) && issues.length === 1) {
      const iconIssue = issues[0];
      
      if (iconIssue.type === 'inconsistent_icons' && 
          iconIssue.severity === 'MEDIUM' &&
          iconIssue.category === 'Visual Design' &&
          iconIssue.libraries && iconIssue.libraries.length >= 2) {
        console.log('✓ detectIconInconsistencies correctly identifies mixed icon libraries');
        results.passed++;
      } else {
        console.log('✗ detectIconInconsistencies failed - wrong issue structure');
      }
    } else {
      console.log('✗ detectIconInconsistencies failed - expected 1 issue');
    }
  } catch (error) {
    console.log(`✗ detectIconInconsistencies failed: ${error.message}`);
  }
  
  // Test file UI problem analysis
  results.total++;
  try {
    // Create a test file with UI problems
    const testFilePath = path.join(__dirname, 'test-ui-temp.jsx');
    const testFileContent = `
      import React from 'react';
      
      function TestComponent() {
        const handleSubmit = async () => {
          const response = await fetch('/api/data');
          const data = await response.json();
        };
        
        return (
          <div style={{padding: '10px'}} style={{margin: '5px'}} style={{color: 'red'}}>
            <button onClick={handleSubmit}>Submit</button>
            <button>Click here</button>
            <div style={{width: '500px'}}>
              <input type="text" />
              <input type="email" />
              <textarea />
            </div>
          </div>
        );
      }
    `;
    
    fs.writeFileSync(testFilePath, testFileContent);
    
    const analysis = await analyzeFileUIProblems(testFilePath);
    
    // Clean up test file
    fs.unlinkSync(testFilePath);
    
    if (analysis && 
        typeof analysis.uiScore === 'number' &&
        Array.isArray(analysis.issues) &&
        analysis.issues.length > 0 &&
        analysis.metrics &&
        typeof analysis.metrics.totalIssues === 'number' &&
        Array.isArray(analysis.recommendations)) {
      console.log('✓ analyzeFileUIProblems returns valid analysis structure');
      results.passed++;
    } else {
      console.log('✗ analyzeFileUIProblems failed - invalid structure');
    }
  } catch (error) {
    console.log(`✗ analyzeFileUIProblems failed: ${error.message}`);
  }
  
  // Test project UI problem analysis
  results.total++;
  try {
    // Test with current directory (should have JS files)
    const analysis = await analyzeProjectUIProblems('.', {
      extensions: ['.js', '.jsx'],
      excludePatterns: ['node_modules', '.git', 'test', 'coverage']
    });
    
    if (analysis &&
        analysis.summary &&
        typeof analysis.summary.totalFiles === 'number' &&
        typeof analysis.summary.uiScore === 'number' &&
        typeof analysis.summary.totalEffort === 'number' &&
        Array.isArray(analysis.files) &&
        Array.isArray(analysis.recommendations)) {
      console.log('✓ analyzeProjectUIProblems returns valid project analysis');
      results.passed++;
    } else {
      console.log('✗ analyzeProjectUIProblems failed - invalid structure');
    }
  } catch (error) {
    console.log(`✗ analyzeProjectUIProblems failed: ${error.message}`);
  }
  
  console.log(`=== UI Problem Analysis Test Results ===`);
  console.log(`Tests passed: ${results.passed}/${results.total}`);
  console.log(`Success rate: ${((results.passed / results.total) * 100).toFixed(1)}%`);
  
  return results;
}

module.exports = { runTests };