bmad-elsabro 1.0.0

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

@@ -0,0 +1,381 @@
+/**
+ * TestList Component
+ *
+ * Displays a list of available tests with filtering and selection.
+ * Shows test status, duration, and allows running individual tests.
+ *
+ * Features:
+ * - Search/filter tests
+ * - Test status indicators (passing, failing, pending)
+ * - Test duration display
+ * - Individual test selection
+ * - Dark/light theme support
+ *
+ * @module renderer/components/test-center/TestList
+ */
+
+import React, { useState, useMemo } from 'react';
+
+/**
+ * Test status enum
+ */
+export type TestStatus = 'passing' | 'failing' | 'pending' | 'skipped';
+
+/**
+ * Test item interface
+ */
+export interface TestItem {
+  /**
+   * Unique test ID
+   */
+  id: string;
+
+  /**
+   * Test name/title
+   */
+  name: string;
+
+  /**
+   * Test file path
+   */
+  filePath: string;
+
+  /**
+   * Test status
+   */
+  status: TestStatus;
+
+  /**
+   * Test duration in milliseconds
+   */
+  duration?: number;
+
+  /**
+   * Test suite name
+   */
+  suite: string;
+
+  /**
+   * Last run timestamp
+   */
+  lastRun?: Date;
+
+  /**
+   * Error message (if failing)
+   */
+  error?: string;
+}
+
+/**
+ * Props for TestList component
+ */
+export interface TestListProps {
+  /**
+   * Array of tests to display
+   */
+  tests: TestItem[];
+
+  /**
+   * Currently selected test ID
+   */
+  selectedTestId?: string;
+
+  /**
+   * Callback when test is selected
+   */
+  onSelectTest?: (testId: string) => void;
+
+  /**
+   * Callback when test is run
+   */
+  onRunTest?: (testId: string) => void;
+
+  /**
+   * Whether tests are currently loading
+   */
+  isLoading?: boolean;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Get status icon and color for test status
+ */
+const getStatusDisplay = (status: TestStatus): { icon: string; color: string } => {
+  switch (status) {
+    case 'passing':
+      return { icon: '✓', color: 'text-green-600 dark:text-green-400' };
+    case 'failing':
+      return { icon: '✗', color: 'text-red-600 dark:text-red-400' };
+    case 'pending':
+      return { icon: '○', color: 'text-yellow-600 dark:text-yellow-400' };
+    case 'skipped':
+      return { icon: '⊘', color: 'text-gray-600 dark:text-gray-400' };
+    default:
+      return { icon: '?', color: 'text-gray-600 dark:text-gray-400' };
+  }
+};
+
+/**
+ * Format duration in milliseconds to readable string
+ */
+const formatDuration = (ms: number | undefined): string => {
+  if (!ms) return '-';
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+/**
+ * TestList Component
+ *
+ * Displays and manages a list of tests with filtering and selection capabilities.
+ *
+ * @example
+ * ```tsx
+ * <TestList
+ *   tests={testItems}
+ *   selectedTestId="test-1"
+ *   onSelectTest={(id) => console.log('Selected:', id)}
+ *   onRunTest={(id) => console.log('Run:', id)}
+ * />
+ * ```
+ */
+export const TestList: React.FC<TestListProps> = ({
+  tests,
+  selectedTestId,
+  onSelectTest,
+  onRunTest,
+  isLoading = false,
+  className = '',
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterStatus, setFilterStatus] = useState<TestStatus | 'all'>('all');
+
+  /**
+   * Filter tests based on search query and status filter
+   */
+  const filteredTests = useMemo(() => {
+    return tests.filter((test) => {
+      const matchesSearch =
+        searchQuery === '' ||
+        test.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        test.suite.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        test.filePath.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesStatus =
+        filterStatus === 'all' || test.status === filterStatus;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [tests, searchQuery, filterStatus]);
+
+  /**
+   * Get test count by status
+   */
+  const statusCounts = useMemo(() => {
+    return tests.reduce(
+      (acc, test) => {
+        acc[test.status] = (acc[test.status] || 0) + 1;
+        acc.total += 1;
+        return acc;
+      },
+      { passing: 0, failing: 0, pending: 0, skipped: 0, total: 0 }
+    );
+  }, [tests]);
+
+  /**
+   * Handle test selection
+   */
+  const handleSelectTest = (testId: string) => {
+    onSelectTest?.(testId);
+  };
+
+  /**
+   * Handle run test
+   */
+  const handleRunTest = (e: React.MouseEvent, testId: string) => {
+    e.stopPropagation(); // Prevent test selection
+    onRunTest?.(testId);
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-white dark:bg-gray-900 ${className}`}>
+      {/* Header with stats */}
+      <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 mb-3">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Tests
+          </h3>
+          <span className="text-sm text-gray-600 dark:text-gray-400">
+            {statusCounts.total} total
+          </span>
+        </div>
+
+        {/* Status badges */}
+        <div className="flex items-center gap-2 mb-3">
+          <button
+            onClick={() => setFilterStatus('all')}
+            className={`px-2 py-1 text-xs rounded ${
+              filterStatus === 'all'
+                ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+            aria-label="Show all tests"
+          >
+            All ({statusCounts.total})
+          </button>
+          <button
+            onClick={() => setFilterStatus('passing')}
+            className={`px-2 py-1 text-xs rounded ${
+              filterStatus === 'passing'
+                ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
+                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+            aria-label="Show passing tests"
+          >
+            ✓ {statusCounts.passing}
+          </button>
+          <button
+            onClick={() => setFilterStatus('failing')}
+            className={`px-2 py-1 text-xs rounded ${
+              filterStatus === 'failing'
+                ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
+                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+            aria-label="Show failing tests"
+          >
+            ✗ {statusCounts.failing}
+          </button>
+          <button
+            onClick={() => setFilterStatus('pending')}
+            className={`px-2 py-1 text-xs rounded ${
+              filterStatus === 'pending'
+                ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300'
+                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+            aria-label="Show pending tests"
+          >
+            ○ {statusCounts.pending}
+          </button>
+        </div>
+
+        {/* Search input */}
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search tests..."
+          className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-label="Search tests"
+        />
+      </div>
+
+      {/* Test list */}
+      <div className="flex-1 overflow-y-auto">
+        {isLoading ? (
+          <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-600 dark:text-gray-400">
+                Loading tests...
+              </p>
+            </div>
+          </div>
+        ) : filteredTests.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center p-6">
+              <div className="text-4xl mb-2">🔍</div>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {searchQuery || filterStatus !== 'all'
+                  ? 'No tests match your filters'
+                  : 'No tests found'}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-200 dark:divide-gray-700">
+            {filteredTests.map((test) => {
+              const { icon, color } = getStatusDisplay(test.status);
+              const isSelected = test.id === selectedTestId;
+
+              return (
+                <div
+                  key={test.id}
+                  onClick={() => handleSelectTest(test.id)}
+                  className={`p-4 cursor-pointer transition-colors ${
+                    isSelected
+                      ? 'bg-blue-50 dark:bg-blue-900/20'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
+                  }`}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`Test: ${test.name}`}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      handleSelectTest(test.id);
+                    }
+                  }}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      {/* Test name */}
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className={`text-lg font-bold ${color}`}>
+                          {icon}
+                        </span>
+                        <h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                          {test.name}
+                        </h4>
+                      </div>
+
+                      {/* Test suite */}
+                      <p className="text-xs text-gray-600 dark:text-gray-400 mb-1">
+                        {test.suite}
+                      </p>
+
+                      {/* Test metadata */}
+                      <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-500">
+                        <span>
+                          {formatDuration(test.duration)}
+                        </span>
+                        {test.lastRun && (
+                          <span>
+                            {new Date(test.lastRun).toLocaleTimeString()}
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Error message for failing tests */}
+                      {test.status === 'failing' && test.error && (
+                        <p className="text-xs text-red-600 dark:text-red-400 mt-2 truncate">
+                          {test.error}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Run test button */}
+                    <button
+                      onClick={(e) => handleRunTest(e, test.id)}
+                      className="flex-none px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
+                      aria-label={`Run test: ${test.name}`}
+                      title="Run test"
+                    >
+                      ▶
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+TestList.displayName = 'TestList';
+
+export default TestList;