Update flare-ui/src/app/components/test/test.component.ts

flare-ui/src/app/components/test/test.component.ts

@@ -1,339 +1,419 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ApiService } from '../../services/api.service';
-
-interface TestResult {
-  name: string;
-  status: 'PASS' | 'FAIL' | 'RUNNING';
-  duration_ms?: number;
-  error?: string;
-}
-
-interface TestRun {
-  test_type: string;
-  start_time: string;
-  tests: TestResult[];
-  summary: {
-    total: number;
-    passed: number;
-    failed: number;
-    duration_ms: number;
-  };
-}
-
-@Component({
-  selector: 'app-test',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  template: `
-    <div class="test-container">
-      <h2>System Tests</h2>
-
-      <div class="test-controls">
-        <button class="btn btn-primary" (click)="runAllTests()" [disabled]="running">
-          Run All Tests
-        </button>
-        <button class="btn btn-secondary" (click)="runSelectedTests()" [disabled]="running || selectedTests.length === 0">
-          Run Selected
-        </button>
-        <button class="btn btn-danger" (click)="stopTests()" [disabled]="!running">
-          Stop
-        </button>
-      </div>
-
-      <div class="test-categories">
-        <div class="category">
-          <label>
-            <input type="checkbox" [(ngModel)]="allSelected" (change)="toggleAll()">
-            <strong>All Tests</strong>
-          </label>
-        </div>
-        <div class="category">
-          <label>
-            <input type="checkbox" [(ngModel)]="categories.ui" (change)="updateSelection()">
-            UI Tests (15 tests)
-          </label>
-          <div class="sub-tests" *ngIf="categories.ui">
-            <label><input type="checkbox"> Login Flow</label>
-            <label><input type="checkbox"> Project CRUD</label>
-            <label><input type="checkbox"> Version Management</label>
-          </div>
-        </div>
-        <div class="category">
-          <label>
-            <input type="checkbox" [(ngModel)]="categories.backend" (change)="updateSelection()">
-            Backend Tests (22 tests)
-          </label>
-          <div class="sub-tests" *ngIf="categories.backend">
-            <label><input type="checkbox"> Authentication</label>
-            <label><input type="checkbox"> API Endpoints</label>
-            <label><input type="checkbox"> Race Conditions</label>
-          </div>
-        </div>
-        <div class="category">
-          <label>
-            <input type="checkbox" [(ngModel)]="categories.integration" (change)="updateSelection()">
-            Integration Tests (18 tests)
-          </label>
-        </div>
-        <div class="category">
-          <label>
-            <input type="checkbox" [(ngModel)]="categories.spark" (change)="updateSelection()">
-            Spark Tests (8 tests)
-          </label>
-        </div>
-      </div>
-
-      @if (currentRun) {
-        <div class="test-results">
-          <h3>Test Results:</h3>
-          <div class="results-list">
-            @for (test of currentRun.tests; track test.name) {
-              <div class="test-result" [class.pass]="test.status === 'PASS'" [class.fail]="test.status === 'FAIL'">
-                @if (test.status === 'PASS') {
-                  <span class="status">✓</span>
-                } @else if (test.status === 'FAIL') {
-                  <span class="status">✗</span>
-                } @else {
-                  <span class="status spinner"></span>
-                }
-                <span class="name">{{ test.name }}</span>
-                @if (test.duration_ms) {
-                  <span class="duration">{{ test.duration_ms }}ms</span>
-                }
-                @if (test.error) {
-                  <div class="error">{{ test.error }}</div>
-                }
-              </div>
-            }
-          </div>
-
-          @if (!running && currentRun.summary) {
-            <div class="test-summary">
-              <div class="progress-bar">
-                <div
-                  class="progress-fill"
-                  [style.width.%]="(currentRun.summary.passed / currentRun.summary.total) * 100"
-                  [class.success]="currentRun.summary.failed === 0"
-                  [class.warning]="currentRun.summary.failed > 0"
-                ></div>
-              </div>
-              <div class="summary-text">
-                Progress: {{ currentRun.summary.passed + currentRun.summary.failed }}/{{ currentRun.summary.total }}
-                ({{ ((currentRun.summary.passed / currentRun.summary.total) * 100).toFixed(0) }}%)
-              </div>
-              <div class="summary-stats">
-                Passed: {{ currentRun.summary.passed }} |
-                Failed: {{ currentRun.summary.failed }} |
-                Total time: {{ (currentRun.summary.duration_ms / 1000).toFixed(1) }}s
-              </div>
-            </div>
-          }
-        </div>
-      }
-
-      @if (!currentRun && !running) {
-        <div class="empty-state">
-          <p>No test results yet. Click "Run All Tests" to start.</p>
-        </div>
-      }
-    </div>
-  `,
-  styles: [`
-    .test-container {
-      h2 {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    .test-controls {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .test-categories {
-      background: white;
-      border: 1px solid #dee2e6;
-      border-radius: 0.25rem;
-      padding: 1rem;
-      margin-bottom: 1.5rem;
-
-      .category {
-        margin-bottom: 0.5rem;
-
-        label {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          cursor: pointer;
-
-          input[type="checkbox"] {
-            cursor: pointer;
-          }
-        }
-      }
-
-      .sub-tests {
-        margin-left: 1.5rem;
-        margin-top: 0.5rem;
-
-        label {
-          display: block;
-          margin-bottom: 0.25rem;
-          font-weight: normal;
-          color: #6c757d;
-        }
-      }
-    }
-
-    .test-results {
-      background: white;
-      border: 1px solid #dee2e6;
-      border-radius: 0.25rem;
-      padding: 1rem;
-
-      h3 {
-        margin-top: 0;
-        margin-bottom: 1rem;
-      }
-
-      .results-list {
-        max-height: 400px;
-        overflow-y: auto;
-        margin-bottom: 1rem;
-      }
-
-      .test-result {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem;
-        border-bottom: 1px solid #f0f0f0;
-
-        &.pass .status { color: #28a745; }
-        &.fail .status { color: #dc3545; }
-
-        .status {
-          width: 20px;
-          text-align: center;
-        }
-
-        .name {
-          flex: 1;
-        }
-
-        .duration {
-          color: #6c757d;
-          font-size: 0.875rem;
-        }
-
-        .error {
-          width: 100%;
-          margin-top: 0.5rem;
-          padding: 0.5rem;
-          background-color: #f8d7da;
-          color: #721c24;
-          border-radius: 0.25rem;
-          font-size: 0.875rem;
-        }
-      }
-    }
-
-    .test-summary {
-      border-top: 1px solid #dee2e6;
-      padding-top: 1rem;
-
-      .progress-bar {
-        height: 20px;
-        background-color: #e9ecef;
-        border-radius: 0.25rem;
-        overflow: hidden;
-        margin-bottom: 0.5rem;
-
-        .progress-fill {
-          height: 100%;
-          transition: width 0.3s ease;
-
-          &.success { background-color: #28a745; }
-          &.warning { background-color: #ffc107; }
-        }
-      }
-
-      .summary-text, .summary-stats {
-        text-align: center;
-        color: #6c757d;
-        margin-bottom: 0.5rem;
-      }
-    }
-
-    .empty-state {
-      text-align: center;
-      padding: 3rem;
-      background-color: white;
-      border-radius: 0.25rem;
-
-      p {
-        color: #6c757d;
-      }
-    }
-  `]
-})
-export class TestComponent {
-  private apiService = inject(ApiService);
-
-  running = false;
-  allSelected = false;
-  categories = {
-    ui: false,
-    backend: false,
-    integration: false,
-    spark: false
-  };
-  selectedTests: string[] = [];
-  currentRun: TestRun | null = null;
-
-  toggleAll() {
-    this.categories.ui = this.allSelected;
-    this.categories.backend = this.allSelected;
-    this.categories.integration = this.allSelected;
-    this.categories.spark = this.allSelected;
-    this.updateSelection();
-  }
-
-  updateSelection() {
-    this.selectedTests = [];
-    if (this.categories.ui) this.selectedTests.push('ui');
-    if (this.categories.backend) this.selectedTests.push('backend');
-    if (this.categories.integration) this.selectedTests.push('integration');
-    if (this.categories.spark) this.selectedTests.push('spark');
-
-    this.allSelected = this.selectedTests.length === 4;
-  }
-
-  runAllTests() {
-    this.running = true;
-    this.apiService.runTests('all').subscribe({
-      next: (result) => {
-        this.currentRun = result;
-        this.running = false;
-      },
-      error: (err) => {
-        console.error('Test run failed:', err);
-        this.running = false;
-      }
-    });
-  }
-
-  runSelectedTests() {
-    // TODO: Implement selected tests
-    console.log('Running selected tests:', this.selectedTests);
-    this.runAllTests(); // For now, just run all
-  }
-
-  stopTests() {
-    this.running = false;
-    // TODO: Implement stop functionality
-  }
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatListModule } from '@angular/material/list';
+import { MatChipsModule } from '@angular/material/chips';
+import { ApiService } from '../../services/api.service';
+import { HttpClient } from '@angular/common/http';
+
+interface TestResult {
+  name: string;
+  status: 'PASS' | 'FAIL' | 'RUNNING' | 'SKIPPED';
+  duration_ms?: number;
+  error?: string;
+  details?: string;
+}
+
+interface TestCategory {
+  name: string;
+  displayName: string;
+  tests: TestCase[];
+  selected: boolean;
+  expanded: boolean;
+}
+
+interface TestCase {
+  name: string;
+  category: string;
+  selected: boolean;
+  testFn: () => Promise<TestResult>;
+}
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatProgressBarModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatExpansionModule,
+    MatListModule,
+    MatChipsModule
+  ],
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.scss']
+})
+export class TestComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private http = inject(HttpClient);
+
+  running = false;
+  currentTest: string = '';
+  testResults: TestResult[] = [];
+  
+  categories: TestCategory[] = [
+    {
+      name: 'auth',
+      displayName: 'Authentication Tests',
+      tests: [],
+      selected: false,
+      expanded: false
+    },
+    {
+      name: 'api',
+      displayName: 'API Endpoint Tests',
+      tests: [],
+      selected: false,
+      expanded: false
+    },
+    {
+      name: 'validation',
+      displayName: 'Validation Tests',
+      tests: [],
+      selected: false,
+      expanded: false
+    },
+    {
+      name: 'integration',
+      displayName: 'Integration Tests',
+      tests: [],
+      selected: false,
+      expanded: false
+    }
+  ];
+
+  get allSelected(): boolean {
+    return this.categories.every(c => c.selected);
+  }
+
+  get selectedTests(): TestCase[] {
+    return this.categories
+      .filter(c => c.selected)
+      .flatMap(c => c.tests);
+  }
+
+  get totalTests(): number {
+    return this.categories.reduce((sum, c) => sum + c.tests.length, 0);
+  }
+
+  get passedTests(): number {
+    return this.testResults.filter(r => r.status === 'PASS').length;
+  }
+
+  get failedTests(): number {
+    return this.testResults.filter(r => r.status === 'FAIL').length;
+  }
+
+  get progress(): number {
+    if (this.testResults.length === 0) return 0;
+    return (this.testResults.length / this.selectedTests.length) * 100;
+  }
+
+  ngOnInit() {
+    this.initializeTests();
+  }
+
+  initializeTests() {
+    // Authentication Tests
+    this.addTest('auth', 'Login with valid credentials', async () => {
+      try {
+        const response = await this.http.post('/api/login', {
+          username: 'admin',
+          password: 'admin'
+        }).toPromise() as any;
+        
+        return {
+          name: 'Login with valid credentials',
+          status: response.token ? 'PASS' : 'FAIL',
+          duration_ms: 120
+        };
+      } catch (error) {
+        return {
+          name: 'Login with valid credentials',
+          status: 'FAIL',
+          error: 'Login failed',
+          duration_ms: 120
+        };
+      }
+    });
+
+    this.addTest('auth', 'Login with invalid credentials', async () => {
+      try {
+        await this.http.post('/api/login', {
+          username: 'admin',
+          password: 'wrong'
+        }).toPromise();
+        
+        return {
+          name: 'Login with invalid credentials',
+          status: 'FAIL',
+          error: 'Expected 401 but got success',
+          duration_ms: 80
+        };
+      } catch (error: any) {
+        return {
+          name: 'Login with invalid credentials',
+          status: error.status === 401 ? 'PASS' : 'FAIL',
+          duration_ms: 80,
+          details: 'Correctly rejected invalid credentials'
+        };
+      }
+    });
+
+    // API Endpoint Tests
+    this.addTest('api', 'GET /api/environment', async () => {
+      const start = Date.now();
+      try {
+        const response = await this.apiService.getEnvironment().toPromise();
+        return {
+          name: 'GET /api/environment',
+          status: response.work_mode ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start
+        };
+      } catch (error) {
+        return {
+          name: 'GET /api/environment',
+          status: 'FAIL',
+          error: 'Failed to get environment',
+          duration_ms: Date.now() - start
+        };
+      }
+    });
+
+    this.addTest('api', 'GET /api/projects', async () => {
+      const start = Date.now();
+      try {
+        const response = await this.apiService.getProjects().toPromise();
+        return {
+          name: 'GET /api/projects',
+          status: Array.isArray(response) ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start,
+          details: `Retrieved ${response.length} projects`
+        };
+      } catch (error) {
+        return {
+          name: 'GET /api/projects',
+          status: 'FAIL',
+          error: 'Failed to get projects',
+          duration_ms: Date.now() - start
+        };
+      }
+    });
+
+    this.addTest('api', 'GET /api/apis', async () => {
+      const start = Date.now();
+      try {
+        const response = await this.apiService.getAPIs().toPromise();
+        return {
+          name: 'GET /api/apis',
+          status: Array.isArray(response) ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start,
+          details: `Retrieved ${response.length} APIs`
+        };
+      } catch (error) {
+        return {
+          name: 'GET /api/apis',
+          status: 'FAIL',
+          error: 'Failed to get APIs',
+          duration_ms: Date.now() - start
+        };
+      }
+    });
+
+    // Validation Tests
+    this.addTest('validation', 'Regex validation - valid pattern', async () => {
+      const start = Date.now();
+      try {
+        const response = await this.apiService.validateRegex('^[A-Z]{3}$', 'ABC').toPromise();
+        return {
+          name: 'Regex validation - valid pattern',
+          status: response.valid && response.matches ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start
+        };
+      } catch (error) {
+        return {
+          name: 'Regex validation - valid pattern',
+          status: 'FAIL',
+          error: 'Validation failed',
+          duration_ms: Date.now() - start
+        };
+      }
+    });
+
+    this.addTest('validation', 'Regex validation - invalid pattern', async () => {
+      const start = Date.now();
+      try {
+        const response = await this.apiService.validateRegex('[invalid', 'test').toPromise();
+        return {
+          name: 'Regex validation - invalid pattern',
+          status: !response.valid ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start,
+          details: 'Correctly identified invalid regex'
+        };
+      } catch (error) {
+        return {
+          name: 'Regex validation - invalid pattern',
+          status: 'PASS',
+          duration_ms: Date.now() - start,
+          details: 'Correctly rejected invalid regex'
+        };
+      }
+    });
+
+    // Integration Tests
+    this.addTest('integration', 'Create and delete project', async () => {
+      const start = Date.now();
+      let projectId: number | null = null;
+
+      try {
+        // Create project
+        const createResponse = await this.apiService.createProject({
+          name: `test_project_${Date.now()}`,
+          caption: 'Test Project'
+        }).toPromise() as any;
+
+        if (!createResponse.id) {
+          throw new Error('Project creation failed');
+        }
+
+        projectId = createResponse.id;
+
+        // Delete project
+        await this.apiService.deleteProject(projectId).toPromise();
+
+        return {
+          name: 'Create and delete project',
+          status: 'PASS',
+          duration_ms: Date.now() - start,
+          details: 'Project lifecycle test passed'
+        };
+      } catch (error: any) {
+        // Try to clean up if project was created
+        if (projectId) {
+          try {
+            await this.apiService.deleteProject(projectId).toPromise();
+          } catch {}
+        }
+
+        return {
+          name: 'Create and delete project',
+          status: 'FAIL',
+          error: error.message || 'Test failed',
+          duration_ms: Date.now() - start
+        };
+      }
+    });
+
+    this.addTest('integration', 'API used in intent cannot be deleted', async () => {
+      const start = Date.now();
+      try {
+        // Try to delete an API that's used in intents
+        await this.apiService.deleteAPI('book_flight_api').toPromise();
+        
+        return {
+          name: 'API used in intent cannot be deleted',
+          status: 'FAIL',
+          error: 'Expected error but API was deleted',
+          duration_ms: Date.now() - start
+        };
+      } catch (error: any) {
+        return {
+          name: 'API used in intent cannot be deleted',
+          status: error.status === 400 ? 'PASS' : 'FAIL',
+          duration_ms: Date.now() - start,
+          details: 'Correctly prevented deletion of API in use'
+        };
+      }
+    });
+
+    // Update test counts
+    this.categories.forEach(cat => {
+      cat.displayName = `${cat.displayName} (${cat.tests.length} tests)`;
+    });
+  }
+
+  private addTest(category: string, name: string, testFn: () => Promise<TestResult>) {
+    const cat = this.categories.find(c => c.name === category);
+    if (cat) {
+      cat.tests.push({
+        name,
+        category,
+        selected: true,
+        testFn
+      });
+    }
+  }
+
+  toggleAll() {
+    this.categories.forEach(c => c.selected = this.allSelected);
+  }
+
+  async runAllTests() {
+    this.categories.forEach(c => c.selected = true);
+    await this.runTests();
+  }
+
+  async runSelectedTests() {
+    await this.runTests();
+  }
+
+  async runTests() {
+    if (this.running) return;
+
+    this.running = true;
+    this.testResults = [];
+    this.currentTest = '';
+
+    const testsToRun = this.selectedTests;
+
+    for (const test of testsToRun) {
+      this.currentTest = test.name;
+      
+      try {
+        const result = await test.testFn();
+        this.testResults.push(result);
+      } catch (error: any) {
+        this.testResults.push({
+          name: test.name,
+          status: 'FAIL',
+          error: error.message || 'Unexpected error'
+        });
+      }
+
+      // Small delay between tests
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    this.running = false;
+    this.currentTest = '';
+  }
+
+  stopTests() {
+    this.running = false;
+    this.currentTest = '';
+  }
+
+  getTestResult(testName: string): TestResult | undefined {
+    return this.testResults.find(r => r.name === testName);
+  }
+
+  getCategoryResults(category: TestCategory): { passed: number; failed: number; total: number } {
+    const categoryResults = this.testResults.filter(r => 
+      category.tests.some(t => t.name === r.name)
+    );
+
+    return {
+      passed: categoryResults.filter(r => r.status === 'PASS').length,
+      failed: categoryResults.filter(r => r.status === 'FAIL').length,
+      total: category.tests.length
+    };
+  }
 }