bmad-elsabro 1.0.0

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

@@ -0,0 +1,1000 @@
+/**
+ * TestStepWizard Component
+ *
+ * Multi-step wizard for creating tests without code.
+ * Inspired by the interactive wizard pattern from tools/cli/lib/prompts.js,
+ * translated into a visual React component for non-programmers.
+ *
+ * Features:
+ * - Step-by-step test creation flow
+ * - Visual progress indicator
+ * - Validation before proceeding to next step
+ * - Conditional logic based on selections
+ * - Dark/light theme support
+ * - Keyboard navigation (Next: Enter, Back: Escape)
+ *
+ * Steps:
+ * 1. Select test type (function, class, component, workflow)
+ * 2. Choose test framework (Jest, Mocha, Vitest)
+ * 3. Define test scenarios (happy path, edge cases, errors)
+ * 4. Configure assertions
+ * 5. Review and generate test
+ *
+ * @module renderer/components/test-center/TestStepWizard
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Wizard step configuration
+ */
+export interface WizardStep {
+  /**
+   * Step ID
+   */
+  id: string;
+
+  /**
+   * Step title
+   */
+  title: string;
+
+  /**
+   * Step description
+   */
+  description: string;
+
+  /**
+   * Whether this step is completed
+   */
+  completed: boolean;
+
+  /**
+   * Whether this step can be skipped
+   */
+  optional?: boolean;
+}
+
+/**
+ * Test type option
+ */
+export type TestType = 'function' | 'class' | 'component' | 'workflow';
+
+/**
+ * Test framework option
+ */
+export type TestFramework = 'jest' | 'mocha' | 'vitest';
+
+/**
+ * Test scenario configuration
+ */
+export interface TestScenario {
+  /**
+   * Scenario ID
+   */
+  id: string;
+
+  /**
+   * Scenario type
+   */
+  type: 'happy-path' | 'edge-case' | 'error-handling';
+
+  /**
+   * Scenario description
+   */
+  description: string;
+
+  /**
+   * Input values for the scenario
+   */
+  inputs: Record<string, string>;
+
+  /**
+   * Expected output
+   */
+  expectedOutput: string;
+
+  /**
+   * Whether this scenario is enabled
+   */
+  enabled: boolean;
+}
+
+/**
+ * Assertion configuration
+ */
+export interface Assertion {
+  /**
+   * Assertion ID
+   */
+  id: string;
+
+  /**
+   * Assertion type (equals, contains, throws, etc.)
+   */
+  type: 'equals' | 'contains' | 'throws' | 'truthy' | 'falsy' | 'greater-than' | 'less-than';
+
+  /**
+   * Value to compare against
+   */
+  value: string;
+
+  /**
+   * Assertion description
+   */
+  description: string;
+}
+
+/**
+ * Test configuration data
+ */
+export interface TestConfiguration {
+  /**
+   * Test type
+   */
+  testType: TestType | null;
+
+  /**
+   * Test framework
+   */
+  framework: TestFramework | null;
+
+  /**
+   * Target code element name
+   */
+  targetName: string;
+
+  /**
+   * Target file path
+   */
+  targetPath: string;
+
+  /**
+   * Test scenarios
+   */
+  scenarios: TestScenario[];
+
+  /**
+   * Assertions
+   */
+  assertions: Assertion[];
+
+  /**
+   * Generated test file path
+   */
+  outputPath: string;
+}
+
+/**
+ * Props for TestStepWizard component
+ */
+export interface TestStepWizardProps {
+  /**
+   * Callback when wizard is completed
+   */
+  onComplete?: (config: TestConfiguration) => void;
+
+  /**
+   * Callback when wizard is cancelled
+   */
+  onCancel?: () => void;
+
+  /**
+   * Initial configuration (for editing existing test)
+   */
+  initialConfig?: Partial<TestConfiguration>;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * TestStepWizard Component
+ *
+ * Multi-step wizard for visually creating tests without writing code.
+ * Guides non-programmers through test creation with clear explanations.
+ *
+ * @example
+ * ```tsx
+ * <TestStepWizard
+ *   onComplete={(config) => console.log('Test created:', config)}
+ *   onCancel={() => console.log('Cancelled')}
+ * />
+ * ```
+ */
+export const TestStepWizard: React.FC<TestStepWizardProps> = ({
+  onComplete,
+  onCancel,
+  initialConfig,
+  className = '',
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [config, setConfig] = useState<TestConfiguration>({
+    testType: initialConfig?.testType || null,
+    framework: initialConfig?.framework || null,
+    targetName: initialConfig?.targetName || '',
+    targetPath: initialConfig?.targetPath || '',
+    scenarios: initialConfig?.scenarios || [],
+    assertions: initialConfig?.assertions || [],
+    outputPath: initialConfig?.outputPath || '',
+  });
+
+  /**
+   * Wizard steps
+   */
+  const steps: WizardStep[] = [
+    {
+      id: 'test-type',
+      title: 'What do you want to test?',
+      description: 'Choose the type of code you want to test',
+      completed: config.testType !== null,
+    },
+    {
+      id: 'framework',
+      title: 'Choose test framework',
+      description: 'Select the testing framework you prefer',
+      completed: config.framework !== null,
+    },
+    {
+      id: 'target',
+      title: 'Identify your code',
+      description: 'Tell us what code to test',
+      completed: config.targetName.length > 0 && config.targetPath.length > 0,
+    },
+    {
+      id: 'scenarios',
+      title: 'Define test scenarios',
+      description: 'Describe what situations to test',
+      completed: config.scenarios.length > 0,
+    },
+    {
+      id: 'assertions',
+      title: 'Set expectations',
+      description: 'Define what should happen in each test',
+      completed: config.assertions.length > 0,
+    },
+    {
+      id: 'review',
+      title: 'Review & Generate',
+      description: 'Review your test configuration and generate the test file',
+      completed: false,
+    },
+  ];
+
+  /**
+   * Check if current step is valid
+   */
+  const isCurrentStepValid = useCallback(() => {
+    return steps[currentStep]?.completed || false;
+  }, [currentStep, steps]);
+
+  /**
+   * Go to next step
+   */
+  const handleNext = useCallback(() => {
+    if (currentStep < steps.length - 1 && isCurrentStepValid()) {
+      setCurrentStep(currentStep + 1);
+    }
+  }, [currentStep, steps.length, isCurrentStepValid]);
+
+  /**
+   * Go to previous step
+   */
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  }, [currentStep]);
+
+  /**
+   * Complete wizard
+   */
+  const handleComplete = useCallback(() => {
+    onComplete?.(config);
+  }, [config, onComplete]);
+
+  /**
+   * Cancel wizard
+   */
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+
+  /**
+   * Keyboard shortcuts
+   */
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && isCurrentStepValid()) {
+        e.preventDefault();
+        if (currentStep === steps.length - 1) {
+          handleComplete();
+        } else {
+          handleNext();
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        if (currentStep === 0) {
+          handleCancel();
+        } else {
+          handleBack();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentStep, steps.length, isCurrentStepValid, handleNext, handleBack, handleCancel, handleComplete]);
+
+  /**
+   * Render step content based on current step
+   */
+  const renderStepContent = () => {
+    switch (steps[currentStep].id) {
+      case 'test-type':
+        return <StepTestType config={config} setConfig={setConfig} />;
+      case 'framework':
+        return <StepFramework config={config} setConfig={setConfig} />;
+      case 'target':
+        return <StepTarget config={config} setConfig={setConfig} />;
+      case 'scenarios':
+        return <StepScenarios config={config} setConfig={setConfig} />;
+      case 'assertions':
+        return <StepAssertions config={config} setConfig={setConfig} />;
+      case 'review':
+        return <StepReview config={config} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-white dark:bg-gray-900 ${className}`}>
+      {/* Header with progress */}
+      <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-3xl mx-auto">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+            Visual Test Builder
+          </h2>
+
+          {/* Progress bar */}
+          <div className="flex items-center gap-2 mb-2">
+            {steps.map((step, index) => (
+              <React.Fragment key={step.id}>
+                <div
+                  className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors ${
+                    index === currentStep
+                      ? 'bg-blue-600 text-white'
+                      : step.completed
+                      ? 'bg-green-600 text-white'
+                      : 'bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-400'
+                  }`}
+                  title={step.title}
+                >
+                  {step.completed ? '✓' : index + 1}
+                </div>
+                {index < steps.length - 1 && (
+                  <div
+                    className={`flex-1 h-1 rounded transition-colors ${
+                      step.completed
+                        ? 'bg-green-600'
+                        : 'bg-gray-300 dark:bg-gray-600'
+                    }`}
+                  />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+
+          {/* Current step info */}
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            Step {currentStep + 1} of {steps.length}
+          </div>
+        </div>
+      </div>
+
+      {/* Step content */}
+      <div className="flex-1 overflow-y-auto px-6 py-6">
+        <div className="max-w-3xl mx-auto">
+          <div className="mb-6">
+            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              {steps[currentStep].title}
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {steps[currentStep].description}
+            </p>
+          </div>
+
+          {renderStepContent()}
+        </div>
+      </div>
+
+      {/* Footer with navigation */}
+      <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-3xl mx-auto flex items-center justify-between">
+          <button
+            onClick={currentStep === 0 ? handleCancel : handleBack}
+            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={currentStep === 0 ? 'Cancel' : 'Previous step'}
+          >
+            {currentStep === 0 ? '✗ Cancel' : '← Back'}
+          </button>
+
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Press <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">Enter</kbd> to continue
+            {currentStep > 0 && (
+              <>, <kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">Esc</kbd> to go back</>
+            )}
+          </div>
+
+          <button
+            onClick={currentStep === steps.length - 1 ? handleComplete : handleNext}
+            disabled={!isCurrentStepValid()}
+            className="px-6 py-2 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={currentStep === steps.length - 1 ? 'Generate test' : 'Next step'}
+          >
+            {currentStep === steps.length - 1 ? '✓ Generate Test' : 'Next →'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Step 1: Test Type Selection
+ */
+interface StepProps {
+  config: TestConfiguration;
+  setConfig: React.Dispatch<React.SetStateAction<TestConfiguration>>;
+}
+
+const StepTestType: React.FC<StepProps> = ({ config, setConfig }) => {
+  const testTypes: { value: TestType; label: string; description: string; icon: string }[] = [
+    {
+      value: 'function',
+      label: 'Function',
+      description: 'Test a standalone function (like add, calculate, format)',
+      icon: 'ƒ',
+    },
+    {
+      value: 'class',
+      label: 'Class',
+      description: 'Test a class with methods and properties',
+      icon: '⊡',
+    },
+    {
+      value: 'component',
+      label: 'Component',
+      description: 'Test a React/UI component',
+      icon: '⚛',
+    },
+    {
+      value: 'workflow',
+      label: 'Workflow Step',
+      description: 'Test a BMAD workflow step',
+      icon: '⚙',
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {testTypes.map((type) => (
+        <button
+          key={type.value}
+          onClick={() => setConfig({ ...config, testType: type.value })}
+          className={`w-full text-left p-6 rounded-lg border-2 transition-all ${
+            config.testType === type.value
+              ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+          }`}
+        >
+          <div className="flex items-start gap-4">
+            <div className="text-4xl">{type.icon}</div>
+            <div className="flex-1">
+              <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                {type.label}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {type.description}
+              </p>
+            </div>
+            {config.testType === type.value && (
+              <div className="text-blue-600 dark:text-blue-400">✓</div>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Step 2: Framework Selection
+ */
+const StepFramework: React.FC<StepProps> = ({ config, setConfig }) => {
+  const frameworks: { value: TestFramework; label: string; description: string }[] = [
+    {
+      value: 'jest',
+      label: 'Jest',
+      description: 'Most popular, great for React. Recommended for beginners.',
+    },
+    {
+      value: 'mocha',
+      label: 'Mocha',
+      description: 'Flexible and widely used in Node.js projects.',
+    },
+    {
+      value: 'vitest',
+      label: 'Vitest',
+      description: 'Modern and fast, great for Vite projects.',
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {frameworks.map((framework) => (
+        <button
+          key={framework.value}
+          onClick={() => setConfig({ ...config, framework: framework.value })}
+          className={`w-full text-left p-5 rounded-lg border-2 transition-all ${
+            config.framework === framework.value
+              ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+          }`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex-1">
+              <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                {framework.label}
+                {framework.value === 'jest' && (
+                  <span className="ml-2 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-2 py-1 rounded">
+                    Recommended
+                  </span>
+                )}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {framework.description}
+              </p>
+            </div>
+            {config.framework === framework.value && (
+              <div className="text-blue-600 dark:text-blue-400">✓</div>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Step 3: Target Selection
+ */
+const StepTarget: React.FC<StepProps> = ({ config, setConfig }) => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+          What is the name of your {config.testType}?
+        </label>
+        <input
+          type="text"
+          value={config.targetName}
+          onChange={(e) => setConfig({ ...config, targetName: e.target.value })}
+          placeholder={`e.g., ${config.testType === 'function' ? 'calculateTotal' : config.testType === 'class' ? 'UserManager' : config.testType === 'component' ? 'LoginForm' : 'ValidateInput'}`}
+          className="w-full px-4 py-3 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+          Where is this code located?
+        </label>
+        <input
+          type="text"
+          value={config.targetPath}
+          onChange={(e) => setConfig({ ...config, targetPath: e.target.value })}
+          placeholder="e.g., src/utils/math.ts"
+          className="w-full px-4 py-3 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+          Enter the file path relative to your project root
+        </p>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+          Where should the test file be saved?
+        </label>
+        <input
+          type="text"
+          value={config.outputPath}
+          onChange={(e) => setConfig({ ...config, outputPath: e.target.value })}
+          placeholder={`e.g., test/${config.targetPath.replace(/\.(ts|js|tsx|jsx)$/, '.test.$1')}`}
+          className="w-full px-4 py-3 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Step 4: Scenarios
+ */
+const StepScenarios: React.FC<StepProps> = ({ config, setConfig }) => {
+  const addScenario = (type: TestScenario['type']) => {
+    const newScenario: TestScenario = {
+      id: `scenario-${Date.now()}`,
+      type,
+      description: '',
+      inputs: {},
+      expectedOutput: '',
+      enabled: true,
+    };
+    setConfig({ ...config, scenarios: [...config.scenarios, newScenario] });
+  };
+
+  const updateScenario = (id: string, updates: Partial<TestScenario>) => {
+    setConfig({
+      ...config,
+      scenarios: config.scenarios.map((s) =>
+        s.id === id ? { ...s, ...updates } : s
+      ),
+    });
+  };
+
+  const removeScenario = (id: string) => {
+    setConfig({
+      ...config,
+      scenarios: config.scenarios.filter((s) => s.id !== id),
+    });
+  };
+
+  const scenarioTypes = [
+    { type: 'happy-path' as const, label: 'Happy Path', icon: '😊', color: 'green' },
+    { type: 'edge-case' as const, label: 'Edge Case', icon: '⚠️', color: 'yellow' },
+    { type: 'error-handling' as const, label: 'Error', icon: '❌', color: 'red' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">
+          💡 What are test scenarios?
+        </h4>
+        <ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
+          <li><strong>Happy Path:</strong> Test when everything works perfectly</li>
+          <li><strong>Edge Case:</strong> Test unusual but valid situations</li>
+          <li><strong>Error:</strong> Test how code handles problems</li>
+        </ul>
+      </div>
+
+      {/* Add scenario buttons */}
+      <div className="flex flex-wrap gap-2">
+        {scenarioTypes.map((st) => (
+          <button
+            key={st.type}
+            onClick={() => addScenario(st.type)}
+            className={`px-4 py-2 text-sm rounded-lg border-2 hover:border-${st.color}-500 transition-colors ${
+              st.color === 'green'
+                ? 'border-green-300 dark:border-green-700 text-green-700 dark:text-green-300'
+                : st.color === 'yellow'
+                ? 'border-yellow-300 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300'
+                : 'border-red-300 dark:border-red-700 text-red-700 dark:text-red-300'
+            }`}
+          >
+            {st.icon} Add {st.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Scenario list */}
+      {config.scenarios.length === 0 ? (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+          Click a button above to add your first test scenario
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {config.scenarios.map((scenario) => {
+            const st = scenarioTypes.find((t) => t.type === scenario.type)!;
+            return (
+              <div
+                key={scenario.id}
+                className="p-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-2xl">{st.icon}</span>
+                    <span className="text-sm font-semibold text-gray-900 dark:text-white">
+                      {st.label}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => removeScenario(scenario.id)}
+                    className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                    aria-label="Remove scenario"
+                  >
+                    ✗
+                  </button>
+                </div>
+
+                <div className="space-y-3">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Description
+                    </label>
+                    <input
+                      type="text"
+                      value={scenario.description}
+                      onChange={(e) =>
+                        updateScenario(scenario.id, { description: e.target.value })
+                      }
+                      placeholder="Describe what this test checks"
+                      className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Expected Result
+                    </label>
+                    <input
+                      type="text"
+                      value={scenario.expectedOutput}
+                      onChange={(e) =>
+                        updateScenario(scenario.id, { expectedOutput: e.target.value })
+                      }
+                      placeholder="What should happen?"
+                      className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Step 5: Assertions
+ */
+const StepAssertions: React.FC<StepProps> = ({ config, setConfig }) => {
+  const assertionTypes: { value: Assertion['type']; label: string; description: string }[] = [
+    { value: 'equals', label: 'Equals', description: 'Result matches exactly' },
+    { value: 'contains', label: 'Contains', description: 'Result includes something' },
+    { value: 'throws', label: 'Throws Error', description: 'Code throws an error' },
+    { value: 'truthy', label: 'Is Truthy', description: 'Result is true-like' },
+    { value: 'falsy', label: 'Is Falsy', description: 'Result is false-like' },
+    { value: 'greater-than', label: 'Greater Than', description: 'Result is larger' },
+    { value: 'less-than', label: 'Less Than', description: 'Result is smaller' },
+  ];
+
+  const addAssertion = () => {
+    const newAssertion: Assertion = {
+      id: `assertion-${Date.now()}`,
+      type: 'equals',
+      value: '',
+      description: '',
+    };
+    setConfig({ ...config, assertions: [...config.assertions, newAssertion] });
+  };
+
+  const updateAssertion = (id: string, updates: Partial<Assertion>) => {
+    setConfig({
+      ...config,
+      assertions: config.assertions.map((a) =>
+        a.id === id ? { ...a, ...updates } : a
+      ),
+    });
+  };
+
+  const removeAssertion = (id: string) => {
+    setConfig({
+      ...config,
+      assertions: config.assertions.filter((a) => a.id !== id),
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">
+          💡 What are assertions?
+        </h4>
+        <p className="text-xs text-blue-800 dark:text-blue-200">
+          Assertions are checks that verify your code behaves correctly. They compare the actual result with what you expect.
+        </p>
+      </div>
+
+      <button
+        onClick={addAssertion}
+        className="w-full px-4 py-3 text-sm border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 transition-colors"
+      >
+        + Add Assertion
+      </button>
+
+      {config.assertions.length === 0 ? (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+          Click above to add your first assertion
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {config.assertions.map((assertion) => (
+            <div
+              key={assertion.id}
+              className="p-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-sm font-semibold text-gray-900 dark:text-white">
+                  Assertion
+                </span>
+                <button
+                  onClick={() => removeAssertion(assertion.id)}
+                  className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                  aria-label="Remove assertion"
+                >
+                  ✗
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Assertion Type
+                  </label>
+                  <select
+                    value={assertion.type}
+                    onChange={(e) =>
+                      updateAssertion(assertion.id, { type: e.target.value as Assertion['type'] })
+                    }
+                    className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    {assertionTypes.map((at) => (
+                      <option key={at.value} value={at.value}>
+                        {at.label} - {at.description}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {assertion.type !== 'truthy' && assertion.type !== 'falsy' && (
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Expected Value
+                    </label>
+                    <input
+                      type="text"
+                      value={assertion.value}
+                      onChange={(e) =>
+                        updateAssertion(assertion.id, { value: e.target.value })
+                      }
+                      placeholder="Enter expected value"
+                      className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Description (optional)
+                  </label>
+                  <input
+                    type="text"
+                    value={assertion.description}
+                    onChange={(e) =>
+                      updateAssertion(assertion.id, { description: e.target.value })
+                    }
+                    placeholder="Explain this check"
+                    className="w-full px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Step 6: Review
+ */
+const StepReview: React.FC<{ config: TestConfiguration }> = ({ config }) => {
+  return (
+    <div className="space-y-6">
+      <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-green-900 dark:text-green-100 mb-2">
+          ✓ Ready to Generate Test
+        </h4>
+        <p className="text-xs text-green-800 dark:text-green-200">
+          Review your configuration below. Click "Generate Test" to create your test file.
+        </p>
+      </div>
+
+      {/* Configuration summary */}
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+            Test Configuration
+          </h4>
+          <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-600 dark:text-gray-400">Type:</span>
+              <span className="font-medium text-gray-900 dark:text-white">{config.testType}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600 dark:text-gray-400">Framework:</span>
+              <span className="font-medium text-gray-900 dark:text-white">{config.framework}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600 dark:text-gray-400">Target:</span>
+              <span className="font-medium text-gray-900 dark:text-white">{config.targetName}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600 dark:text-gray-400">Source File:</span>
+              <span className="font-mono text-xs text-gray-900 dark:text-white">{config.targetPath}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600 dark:text-gray-400">Output File:</span>
+              <span className="font-mono text-xs text-gray-900 dark:text-white">{config.outputPath}</span>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+            Test Scenarios ({config.scenarios.length})
+          </h4>
+          <div className="space-y-2">
+            {config.scenarios.map((scenario, index) => (
+              <div
+                key={scenario.id}
+                className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 text-sm"
+              >
+                <div className="font-medium text-gray-900 dark:text-white mb-1">
+                  {index + 1}. {scenario.type.replace('-', ' ')}
+                </div>
+                <div className="text-xs text-gray-600 dark:text-gray-400">
+                  {scenario.description || 'No description'}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+            Assertions ({config.assertions.length})
+          </h4>
+          <div className="space-y-2">
+            {config.assertions.map((assertion, index) => (
+              <div
+                key={assertion.id}
+                className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 text-sm"
+              >
+                <div className="font-medium text-gray-900 dark:text-white mb-1">
+                  {index + 1}. {assertion.type}
+                </div>
+                {assertion.value && (
+                  <div className="text-xs text-gray-600 dark:text-gray-400">
+                    Expected: {assertion.value}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TestStepWizard.displayName = 'TestStepWizard';
+
+export default TestStepWizard;