bmad-elsabro 1.0.0

package/renderer/components/test-center/TestRunner.tsx

@@ -0,0 +1,431 @@
+/**
+ * TestRunner Component
+ *
+ * Executes tests and displays real-time results.
+ * Shows test output, errors, and provides controls for test execution.
+ *
+ * Features:
+ * - Real-time test execution output
+ * - Run individual tests or test suites
+ * - Stop running tests
+ * - Console output display
+ * - Error stack traces
+ * - Dark/light theme support
+ *
+ * @module renderer/components/test-center/TestRunner
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+/**
+ * Test run status
+ */
+export type TestRunStatus = 'idle' | 'running' | 'completed' | 'failed' | 'stopped';
+
+/**
+ * Test result interface
+ */
+export interface TestResult {
+  /**
+   * Test ID
+   */
+  testId: string;
+
+  /**
+   * Test name
+   */
+  testName: string;
+
+  /**
+   * Whether test passed
+   */
+  passed: boolean;
+
+  /**
+   * Test duration in milliseconds
+   */
+  duration: number;
+
+  /**
+   * Console output
+   */
+  output: string[];
+
+  /**
+   * Error message (if failed)
+   */
+  error?: string;
+
+  /**
+   * Error stack trace (if failed)
+   */
+  stackTrace?: string;
+
+  /**
+   * Timestamp when test ran
+   */
+  timestamp: Date;
+}
+
+/**
+ * Props for TestRunner component
+ */
+export interface TestRunnerProps {
+  /**
+   * Test ID to run
+   */
+  testId?: string;
+
+  /**
+   * Test file path
+   */
+  testPath?: string;
+
+  /**
+   * Test name
+   */
+  testName?: string;
+
+  /**
+   * Callback when test completes
+   */
+  onTestComplete?: (result: TestResult) => void;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * TestRunner Component
+ *
+ * Manages test execution and displays real-time results.
+ *
+ * @example
+ * ```tsx
+ * <TestRunner
+ *   testId="test-1"
+ *   testPath="test/example.test.js"
+ *   testName="Example test"
+ *   onTestComplete={(result) => console.log('Test completed:', result)}
+ * />
+ * ```
+ */
+export const TestRunner: React.FC<TestRunnerProps> = ({
+  testId,
+  testPath,
+  testName,
+  onTestComplete,
+  className = '',
+}) => {
+  const [status, setStatus] = useState<TestRunStatus>('idle');
+  const [output, setOutput] = useState<string[]>([]);
+  const [result, setResult] = useState<TestResult | null>(null);
+  const [startTime, setStartTime] = useState<number | null>(null);
+  const outputRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  /**
+   * Auto-scroll to bottom when output changes
+   */
+  useEffect(() => {
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  /**
+   * Add output line
+   */
+  const addOutput = useCallback((line: string) => {
+    setOutput((prev) => [...prev, line]);
+  }, []);
+
+  /**
+   * Run test
+   */
+  const handleRunTest = useCallback(async () => {
+    if (!testId || !testPath || !testName) {
+      addOutput('❌ Error: Missing test information');
+      return;
+    }
+
+    // Reset state
+    setStatus('running');
+    setOutput([]);
+    setResult(null);
+    setStartTime(Date.now());
+    abortControllerRef.current = new AbortController();
+
+    addOutput(`🚀 Running test: ${testName}`);
+    addOutput(`📁 File: ${testPath}`);
+    addOutput('─'.repeat(50));
+
+    try {
+      // TODO: Replace with actual Electron IPC call to run tests
+      // For now, simulate test execution
+      await simulateTestRun(testId, testName, addOutput, abortControllerRef.current.signal);
+
+      const duration = Date.now() - (startTime || Date.now());
+      const testResult: TestResult = {
+        testId,
+        testName,
+        passed: true,
+        duration,
+        output: [...output],
+        timestamp: new Date(),
+      };
+
+      setResult(testResult);
+      setStatus('completed');
+      addOutput('─'.repeat(50));
+      addOutput(`✅ Test passed in ${duration}ms`);
+      onTestComplete?.(testResult);
+    } catch (error: any) {
+      const duration = Date.now() - (startTime || Date.now());
+      const errorMessage = error.message || 'Unknown error';
+      const testResult: TestResult = {
+        testId,
+        testName,
+        passed: false,
+        duration,
+        output: [...output],
+        error: errorMessage,
+        stackTrace: error.stack,
+        timestamp: new Date(),
+      };
+
+      setResult(testResult);
+      setStatus('failed');
+      addOutput('─'.repeat(50));
+      addOutput(`❌ Test failed: ${errorMessage}`);
+      if (error.stack) {
+        addOutput('Stack trace:');
+        addOutput(error.stack);
+      }
+      onTestComplete?.(testResult);
+    }
+  }, [testId, testPath, testName, addOutput, onTestComplete, output, startTime]);
+
+  /**
+   * Stop running test
+   */
+  const handleStopTest = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setStatus('stopped');
+      addOutput('─'.repeat(50));
+      addOutput('⏹️ Test stopped by user');
+    }
+  }, [addOutput]);
+
+  /**
+   * Clear output
+   */
+  const handleClearOutput = useCallback(() => {
+    setOutput([]);
+    setResult(null);
+    setStatus('idle');
+  }, []);
+
+  /**
+   * Get status display
+   */
+  const getStatusDisplay = () => {
+    switch (status) {
+      case 'idle':
+        return { icon: '○', text: 'Ready', color: 'text-gray-600 dark:text-gray-400' };
+      case 'running':
+        return { icon: '▶', text: 'Running...', color: 'text-blue-600 dark:text-blue-400' };
+      case 'completed':
+        return { icon: '✓', text: 'Completed', color: 'text-green-600 dark:text-green-400' };
+      case 'failed':
+        return { icon: '✗', text: 'Failed', color: 'text-red-600 dark:text-red-400' };
+      case 'stopped':
+        return { icon: '⏹', text: 'Stopped', color: 'text-yellow-600 dark:text-yellow-400' };
+      default:
+        return { icon: '?', text: 'Unknown', color: 'text-gray-600 dark:text-gray-400' };
+    }
+  };
+
+  const statusDisplay = getStatusDisplay();
+
+  return (
+    <div className={`flex flex-col h-full bg-white dark:bg-gray-900 ${className}`}>
+      {/* Header */}
+      <div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+              Test Runner
+            </h3>
+            {testName && (
+              <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+                {testName}
+              </p>
+            )}
+          </div>
+
+          {/* Status indicator */}
+          <div className="flex items-center gap-2">
+            <span className={`text-sm font-medium ${statusDisplay.color}`}>
+              {statusDisplay.icon} {statusDisplay.text}
+            </span>
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 mt-3">
+          <button
+            onClick={handleRunTest}
+            disabled={!testId || status === 'running'}
+            className="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+            aria-label="Run test"
+            title="Run test"
+          >
+            ▶ Run Test
+          </button>
+          <button
+            onClick={handleStopTest}
+            disabled={status !== 'running'}
+            className="px-3 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Stop test"
+            title="Stop test"
+          >
+            ⏹ Stop
+          </button>
+          <button
+            onClick={handleClearOutput}
+            disabled={output.length === 0}
+            className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Clear output"
+            title="Clear output"
+          >
+            🗑️ Clear
+          </button>
+        </div>
+      </div>
+
+      {/* Output display */}
+      <div
+        ref={outputRef}
+        className="flex-1 overflow-y-auto bg-gray-900 dark:bg-black p-4 font-mono text-sm"
+      >
+        {output.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <div className="text-4xl mb-2">📋</div>
+              <p className="text-sm text-gray-500">
+                {testName ? 'Click "Run Test" to start' : 'Select a test to run'}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {output.map((line, index) => {
+              // Detect special line types and apply colors
+              let className = 'text-gray-300';
+              if (line.startsWith('✅') || line.includes('passed')) {
+                className = 'text-green-400';
+              } else if (line.startsWith('❌') || line.includes('failed') || line.includes('Error')) {
+                className = 'text-red-400';
+              } else if (line.startsWith('🚀') || line.startsWith('📁')) {
+                className = 'text-blue-400';
+              } else if (line.startsWith('⏹️')) {
+                className = 'text-yellow-400';
+              } else if (line.startsWith('─')) {
+                className = 'text-gray-600';
+              }
+
+              return (
+                <div key={index} className={className}>
+                  {line}
+                </div>
+              );
+            })}
+
+            {/* Loading indicator for running tests */}
+            {status === 'running' && (
+              <div className="text-blue-400 animate-pulse">
+                ⏳ Test in progress...
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Result summary */}
+      {result && (
+        <div className={`flex-none border-t ${
+          result.passed
+            ? 'border-green-600 dark:border-green-400 bg-green-50 dark:bg-green-900/20'
+            : 'border-red-600 dark:border-red-400 bg-red-50 dark:bg-red-900/20'
+        } px-4 py-3`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm font-medium ${
+                result.passed
+                  ? 'text-green-700 dark:text-green-300'
+                  : 'text-red-700 dark:text-red-300'
+              }`}>
+                {result.passed ? '✓ Test Passed' : '✗ Test Failed'}
+              </p>
+              <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                Duration: {result.duration}ms • {result.timestamp.toLocaleTimeString()}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Simulate test execution (for demo purposes)
+ * TODO: Replace with actual Electron IPC call
+ */
+async function simulateTestRun(
+  testId: string,
+  testName: string,
+  addOutput: (line: string) => void,
+  signal: AbortSignal
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    let step = 0;
+    const steps = [
+      { delay: 300, message: '🔍 Discovering test files...' },
+      { delay: 200, message: '📦 Loading dependencies...' },
+      { delay: 400, message: '⚙️ Setting up test environment...' },
+      { delay: 300, message: `▶️ Running: ${testName}` },
+      { delay: 500, message: '  ✓ Test setup completed' },
+      { delay: 300, message: '  ✓ Assertions passed (5/5)' },
+      { delay: 200, message: '  ✓ Cleanup completed' },
+    ];
+
+    const runNextStep = () => {
+      if (signal.aborted) {
+        reject(new Error('Test execution aborted'));
+        return;
+      }
+
+      if (step >= steps.length) {
+        resolve();
+        return;
+      }
+
+      const currentStep = steps[step];
+      addOutput(currentStep.message);
+      step++;
+
+      setTimeout(runNextStep, currentStep.delay);
+    };
+
+    runNextStep();
+  });
+}
+
+TestRunner.displayName = 'TestRunner';
+
+export default TestRunner;