bmad-elsabro 1.0.0

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

@@ -0,0 +1,460 @@
+/**
+ * VisualTestBuilder Component
+ *
+ * Main interface for building tests visually without writing code.
+ * Designed for non-programmers to create comprehensive tests through
+ * a guided, step-by-step process.
+ *
+ * Features:
+ * - Wizard-based test creation flow
+ * - Code generation from visual inputs
+ * - Live preview of generated test code
+ * - Test file saving
+ * - Integration with AI Test Generator
+ * - Dark/light theme support
+ * - "Explain like I'm 5" guidance
+ *
+ * @module renderer/components/test-center/VisualTestBuilder
+ */
+
+import React, { useState, useCallback } from 'react';
+import TestStepWizard, { TestConfiguration } from './TestStepWizard';
+
+/**
+ * Test generation result
+ */
+export interface TestGenerationResult {
+  /**
+   * Generated test code
+   */
+  code: string;
+
+  /**
+   * Generated file path
+   */
+  filePath: string;
+
+  /**
+   * Generation timestamp
+   */
+  timestamp: Date;
+
+  /**
+   * Test configuration used
+   */
+  config: TestConfiguration;
+}
+
+/**
+ * Props for VisualTestBuilder component
+ */
+export interface VisualTestBuilderProps {
+  /**
+   * Callback when test is successfully created
+   */
+  onTestCreated?: (result: TestGenerationResult) => void;
+
+  /**
+   * Callback when builder is closed
+   */
+  onClose?: () => void;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Generate test code from configuration
+ * This is a template-based generator that creates valid test files
+ * without requiring AI (AI Test Generator can enhance this later)
+ */
+const generateTestCode = (config: TestConfiguration): string => {
+  const { testType, framework, targetName, targetPath, scenarios, assertions } = config;
+
+  // Generate imports
+  let imports = '';
+  if (framework === 'jest') {
+    imports = `import { describe, test, expect } from '@jest/globals';\n`;
+  } else if (framework === 'mocha') {
+    imports = `import { describe, it } from 'mocha';\nimport { expect } from 'chai';\n`;
+  } else if (framework === 'vitest') {
+    imports = `import { describe, test, expect } from 'vitest';\n`;
+  }
+
+  // Add import for target
+  const importPath = targetPath.replace(/\.(ts|js)x?$/, '');
+  if (testType === 'function') {
+    imports += `import { ${targetName} } from '../${importPath}';\n`;
+  } else if (testType === 'class') {
+    imports += `import { ${targetName} } from '../${importPath}';\n`;
+  } else if (testType === 'component') {
+    imports += `import React from 'react';\n`;
+    imports += `import { render, screen } from '@testing-library/react';\n`;
+    imports += `import { ${targetName} } from '../${importPath}';\n`;
+  } else if (testType === 'workflow') {
+    imports += `import { ${targetName} } from '../${importPath}';\n`;
+  }
+
+  // Generate test suite
+  let testSuite = `\ndescribe('${targetName}', () => {\n`;
+
+  // Generate tests from scenarios
+  scenarios.forEach((scenario, index) => {
+    const testName = scenario.description || `${scenario.type} test ${index + 1}`;
+    const testFunction = framework === 'mocha' ? 'it' : 'test';
+
+    testSuite += `  ${testFunction}('${testName}', () => {\n`;
+
+    // Generate test body based on test type
+    if (testType === 'function') {
+      // Function test
+      testSuite += `    // TODO: Set up test inputs\n`;
+      testSuite += `    const input = /* your input value */;\n`;
+      testSuite += `\n`;
+      testSuite += `    // Execute function\n`;
+      testSuite += `    const result = ${targetName}(input);\n`;
+      testSuite += `\n`;
+      testSuite += `    // Assertions\n`;
+      assertions.forEach((assertion) => {
+        testSuite += generateAssertion(assertion, 'result');
+      });
+    } else if (testType === 'class') {
+      // Class test
+      testSuite += `    // Create instance\n`;
+      testSuite += `    const instance = new ${targetName}();\n`;
+      testSuite += `\n`;
+      testSuite += `    // TODO: Call methods and verify behavior\n`;
+      testSuite += `    // instance.someMethod();\n`;
+      testSuite += `\n`;
+      testSuite += `    // Assertions\n`;
+      assertions.forEach((assertion) => {
+        testSuite += generateAssertion(assertion, 'instance');
+      });
+    } else if (testType === 'component') {
+      // Component test
+      testSuite += `    // Render component\n`;
+      testSuite += `    render(<${targetName} />);\n`;
+      testSuite += `\n`;
+      testSuite += `    // Assertions\n`;
+      assertions.forEach((assertion) => {
+        if (assertion.type === 'contains') {
+          testSuite += `    expect(screen.getByText('${assertion.value}')).toBeInTheDocument();\n`;
+        } else if (assertion.type === 'truthy') {
+          testSuite += `    expect(screen.getByRole('button')).toBeTruthy();\n`;
+        } else {
+          testSuite += `    // TODO: Add assertion for ${assertion.type}\n`;
+        }
+      });
+    } else if (testType === 'workflow') {
+      // Workflow step test
+      testSuite += `    // Set up workflow context\n`;
+      testSuite += `    const context = { /* workflow context */ };\n`;
+      testSuite += `\n`;
+      testSuite += `    // Execute workflow step\n`;
+      testSuite += `    const result = await ${targetName}(context);\n`;
+      testSuite += `\n`;
+      testSuite += `    // Assertions\n`;
+      assertions.forEach((assertion) => {
+        testSuite += generateAssertion(assertion, 'result');
+      });
+    }
+
+    testSuite += `  });\n\n`;
+  });
+
+  testSuite += `});\n`;
+
+  // Add helpful comments at the top
+  const header = `/**
+ * Test Suite: ${targetName}
+ *
+ * This test file was generated by BMAD Studio's Visual Test Builder.
+ * It includes ${scenarios.length} test scenario(s) with ${assertions.length} assertion(s).
+ *
+ * ⚠️ IMPORTANT: This is a template. You may need to:
+ * - Fill in actual input values
+ * - Adjust assertions to match your code's behavior
+ * - Add setup/teardown code if needed
+ *
+ * Generated: ${new Date().toISOString()}
+ */
+
+`;
+
+  return header + imports + testSuite;
+};
+
+/**
+ * Generate assertion code based on assertion type
+ */
+const generateAssertion = (
+  assertion: TestConfiguration['assertions'][0],
+  variableName: string
+): string => {
+  const { type, value, description } = assertion;
+  const comment = description ? `// ${description}\n    ` : '';
+
+  switch (type) {
+    case 'equals':
+      return `${comment}expect(${variableName}).toBe(${JSON.stringify(value)});\n`;
+    case 'contains':
+      return `${comment}expect(${variableName}).toContain(${JSON.stringify(value)});\n`;
+    case 'throws':
+      return `${comment}expect(() => ${variableName}).toThrow();\n`;
+    case 'truthy':
+      return `${comment}expect(${variableName}).toBeTruthy();\n`;
+    case 'falsy':
+      return `${comment}expect(${variableName}).toBeFalsy();\n`;
+    case 'greater-than':
+      return `${comment}expect(${variableName}).toBeGreaterThan(${value});\n`;
+    case 'less-than':
+      return `${comment}expect(${variableName}).toBeLessThan(${value});\n`;
+    default:
+      return `${comment}// TODO: Add assertion for ${type}\n`;
+  }
+};
+
+/**
+ * VisualTestBuilder Component
+ *
+ * Provides a no-code interface for creating tests through a guided wizard.
+ * Generates production-quality test files that can be run with Jest/Mocha/Vitest.
+ *
+ * @example
+ * ```tsx
+ * <VisualTestBuilder
+ *   onTestCreated={(result) => console.log('Test created:', result)}
+ *   onClose={() => console.log('Builder closed')}
+ * />
+ * ```
+ */
+export const VisualTestBuilder: React.FC<VisualTestBuilderProps> = ({
+  onTestCreated,
+  onClose,
+  className = '',
+}) => {
+  const [view, setView] = useState<'wizard' | 'preview'>('wizard');
+  const [generatedResult, setGeneratedResult] = useState<TestGenerationResult | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  /**
+   * Handle wizard completion - generate test code
+   */
+  const handleWizardComplete = useCallback((config: TestConfiguration) => {
+    try {
+      // Generate test code from configuration
+      const code = generateTestCode(config);
+
+      // Create result
+      const result: TestGenerationResult = {
+        code,
+        filePath: config.outputPath,
+        timestamp: new Date(),
+        config,
+      };
+
+      setGeneratedResult(result);
+      setView('preview');
+    } catch (error) {
+      console.error('Failed to generate test code:', error);
+      alert('Failed to generate test code. Please check your configuration.');
+    }
+  }, []);
+
+  /**
+   * Save generated test file
+   */
+  const handleSaveTest = useCallback(async () => {
+    if (!generatedResult) return;
+
+    setIsSaving(true);
+    try {
+      // TODO: Integrate with Electron IPC to save file
+      // For now, simulate save with delay
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // In production, use:
+      // await window.electron.file.write({
+      //   path: generatedResult.filePath,
+      //   content: generatedResult.code,
+      // });
+
+      console.log('Test file saved:', generatedResult.filePath);
+      onTestCreated?.(generatedResult);
+      onClose?.();
+    } catch (error) {
+      console.error('Failed to save test file:', error);
+      alert('Failed to save test file. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [generatedResult, onTestCreated, onClose]);
+
+  /**
+   * Go back to wizard
+   */
+  const handleBackToWizard = useCallback(() => {
+    setView('wizard');
+  }, []);
+
+  /**
+   * Cancel and close
+   */
+  const handleCancel = useCallback(() => {
+    if (confirm('Are you sure you want to cancel? Your progress will be lost.')) {
+      onClose?.();
+    }
+  }, [onClose]);
+
+  return (
+    <div className={`flex flex-col h-full bg-white dark:bg-gray-900 ${className}`}>
+      {view === 'wizard' ? (
+        <TestStepWizard
+          onComplete={handleWizardComplete}
+          onCancel={handleCancel}
+        />
+      ) : (
+        <>
+          {/* Preview Header */}
+          <div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-6 py-4">
+            <div className="max-w-5xl mx-auto">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
+                    Preview Generated Test
+                  </h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Review your test code before saving
+                  </p>
+                </div>
+                <button
+                  onClick={handleBackToWizard}
+                  className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  aria-label="Back to wizard"
+                >
+                  ← Back to Wizard
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Preview Content */}
+          <div className="flex-1 overflow-y-auto px-6 py-6">
+            <div className="max-w-5xl mx-auto space-y-6">
+              {/* Success message */}
+              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <div className="text-2xl">✓</div>
+                  <div className="flex-1">
+                    <h3 className="text-sm font-semibold text-green-900 dark:text-green-100 mb-1">
+                      Test Successfully Generated!
+                    </h3>
+                    <p className="text-xs text-green-800 dark:text-green-200 mb-2">
+                      Your test file is ready. Review the code below and click "Save Test File" to create it.
+                    </p>
+                    <div className="text-xs text-green-800 dark:text-green-200">
+                      <strong>File:</strong>{' '}
+                      <code className="bg-green-100 dark:bg-green-900/40 px-2 py-1 rounded font-mono">
+                        {generatedResult?.filePath}
+                      </code>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Test info */}
+              {generatedResult && (
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">Test Type</div>
+                    <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                      {generatedResult.config.testType}
+                    </div>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">Framework</div>
+                    <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                      {generatedResult.config.framework}
+                    </div>
+                  </div>
+                  <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">Scenarios</div>
+                    <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                      {generatedResult.config.scenarios.length}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Code preview */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+                    Generated Code
+                  </h3>
+                  <button
+                    onClick={() => {
+                      if (generatedResult) {
+                        navigator.clipboard.writeText(generatedResult.code);
+                        alert('Code copied to clipboard!');
+                      }
+                    }}
+                    className="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                  >
+                    📋 Copy to Clipboard
+                  </button>
+                </div>
+                <div className="bg-gray-900 rounded-lg overflow-hidden">
+                  <pre className="p-4 overflow-x-auto text-xs text-gray-100 font-mono">
+                    <code>{generatedResult?.code}</code>
+                  </pre>
+                </div>
+              </div>
+
+              {/* Important notes */}
+              <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                <h4 className="text-sm font-semibold text-yellow-900 dark:text-yellow-100 mb-2">
+                  ⚠️ Before You Save
+                </h4>
+                <ul className="text-xs text-yellow-800 dark:text-yellow-200 space-y-1 list-disc list-inside">
+                  <li>This is a template - you may need to add actual test values</li>
+                  <li>Review the generated assertions to ensure they match your expectations</li>
+                  <li>Add any necessary setup/teardown code (beforeEach, afterEach)</li>
+                  <li>Test the file after saving to ensure it works correctly</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Preview Footer */}
+          <div className="flex-none border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-6 py-4">
+            <div className="max-w-5xl mx-auto flex items-center justify-between">
+              <button
+                onClick={handleCancel}
+                className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                disabled={isSaving}
+              >
+                ✗ Cancel
+              </button>
+
+              <button
+                onClick={handleSaveTest}
+                disabled={isSaving}
+                className="px-6 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+                aria-label="Save test file"
+              >
+                {isSaving ? '💾 Saving...' : '💾 Save Test File'}
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+VisualTestBuilder.displayName = 'VisualTestBuilder';
+
+export default VisualTestBuilder;

package/renderer/components/workflow/DependencyEdge.tsx

@@ -0,0 +1,200 @@
+/**
+ * DependencyEdge Component
+ *
+ * Custom edge component for React Flow representing dependencies between workflow steps.
+ * Displays animated connection lines with visual indicators.
+ *
+ * Features:
+ * - Animated dependency visualization
+ * - Directional arrows
+ * - Interactive hover states
+ * - Delete functionality
+ * - Dark/light theme support
+ * - Accessibility support
+ *
+ * @module renderer/components/workflow/DependencyEdge
+ */
+
+import React, { memo } from 'react';
+import {
+  EdgeProps,
+  getBezierPath,
+  EdgeLabelRenderer,
+  BaseEdge,
+  useReactFlow,
+} from 'reactflow';
+
+/**
+ * Custom data for dependency edges
+ */
+export interface DependencyEdgeData {
+  /**
+   * Optional label for the dependency
+   */
+  label?: string;
+
+  /**
+   * Whether this dependency is conditional
+   */
+  conditional?: boolean;
+
+  /**
+   * Custom color for the edge
+   */
+  color?: string;
+}
+
+/**
+ * DependencyEdge Component
+ *
+ * Custom React Flow edge for workflow step dependencies.
+ * Renders a smooth bezier curve with directional indicators.
+ *
+ * @example
+ * ```tsx
+ * // Used internally by React Flow - don't instantiate directly
+ * const edgeTypes = {
+ *   dependency: DependencyEdge
+ * };
+ * ```
+ */
+const DependencyEdge: React.FC<EdgeProps<DependencyEdgeData>> = memo(
+  ({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    markerEnd,
+    data,
+    selected,
+  }) => {
+    const { setEdges } = useReactFlow();
+
+    // Calculate the path
+    const [edgePath, labelX, labelY] = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    /**
+     * Handle edge deletion
+     */
+    const onEdgeClick = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setEdges((edges) => edges.filter((edge) => edge.id !== id));
+    };
+
+    // Determine edge color based on type and state
+    const edgeColor = data?.color || (data?.conditional ? '#f97316' : '#6b7280');
+    const strokeWidth = selected ? 3 : 2;
+    const opacity = selected ? 1 : 0.7;
+
+    return (
+      <>
+        {/* Main Edge Path */}
+        <BaseEdge
+          id={id}
+          path={edgePath}
+          markerEnd={markerEnd}
+          style={{
+            ...style,
+            stroke: edgeColor,
+            strokeWidth,
+            opacity,
+          }}
+        />
+
+        {/* Edge Label with Delete Button */}
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'all',
+            }}
+            className="nodrag nopan"
+          >
+            <div
+              className={`
+                group flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium
+                bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
+                shadow-sm transition-all
+                ${selected ? 'ring-2 ring-blue-500' : ''}
+                hover:shadow-md
+              `}
+              role="group"
+              aria-label={`Dependency edge${data?.label ? `: ${data.label}` : ''}`}
+            >
+              {/* Edge Label */}
+              {data?.label && (
+                <span className="text-gray-700 dark:text-gray-300">
+                  {data.label}
+                </span>
+              )}
+
+              {/* Conditional Indicator */}
+              {data?.conditional && (
+                <span
+                  className="text-orange-500"
+                  title="Conditional dependency"
+                  aria-label="Conditional dependency"
+                >
+                  ?
+                </span>
+              )}
+
+              {/* Delete Button (visible on hover) */}
+              <button
+                onClick={onEdgeClick}
+                className="
+                  opacity-0 group-hover:opacity-100
+                  w-4 h-4 flex items-center justify-center
+                  rounded-full bg-red-100 dark:bg-red-900/30
+                  hover:bg-red-200 dark:hover:bg-red-900/50
+                  text-red-600 dark:text-red-400
+                  transition-all
+                "
+                aria-label="Delete connection"
+                title="Delete connection"
+              >
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </EdgeLabelRenderer>
+
+        {/* Animated Flow Indicator */}
+        {selected && (
+          <circle r="4" fill={edgeColor}>
+            <animateMotion dur="2s" repeatCount="indefinite" path={edgePath} />
+          </circle>
+        )}
+      </>
+    );
+  }
+);
+
+DependencyEdge.displayName = 'DependencyEdge';
+
+export default DependencyEdge;