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

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

@@ -54,10 +54,11 @@ interface TestCase {
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.scss']
 })
-export class TestComponent implements OnInit {
+export class TestComponent implements OnInit, OnDestroy {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private http = inject(HttpClient);
+  private destroyed$ = new Subject<void>();
 
   running = false;
   currentTest: string = '';
@@ -124,6 +125,11 @@ export class TestComponent implements OnInit {
     this.updateAllSelected();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   updateAllSelected() {
     this.allSelected = this.categories.length > 0 && this.categories.every(c => c.selected);
   }
@@ -133,42 +139,53 @@ export class TestComponent implements OnInit {
   }
 
   // Helper method to ensure authentication
-  private async ensureAuth(): Promise<boolean> {
-    try {
-      // Check if we already have a valid token
-      const token = this.authService.getToken();
-      if (token) {
-        // Try to make a simple authenticated request to verify token is still valid
-        try {
-          await this.apiService.getEnvironment().toPromise();
-          return true;
-        } catch (error: any) {
-          if (error.status === 401) {
-            // Token expired, need to re-login
-            this.authService.logout();
-          } else {
-            // Other error, assume auth is ok
-            return true;
-          }
+  private ensureAuth(): Promise<boolean> {
+    return new Promise((resolve) => {
+      try {
+        // Check if we already have a valid token
+        const token = this.authService.getToken();
+        if (token) {
+          // Try to make a simple authenticated request to verify token is still valid
+          this.apiService.getEnvironment()
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe({
+              next: () => resolve(true),
+              error: (error: any) => {
+                if (error.status === 401) {
+                  // Token expired, need to re-login
+                  this.authService.logout();
+                  resolve(false);
+                } else {
+                  // Other error, assume auth is ok
+                  resolve(true);
+                }
+              }
+            });
+        } else {
+          // Login with test credentials
+          this.http.post('/api/login', {
+            username: 'admin',
+            password: 'admin'
+          }).pipe(takeUntil(this.destroyed$))
+            .subscribe({
+              next: (response: any) => {
+                if (response?.token) {
+                  this.authService.setToken(response.token);
+                  this.authService.setUsername(response.username);
+                  resolve(true);
+                } else {
+                  resolve(false);
+                }
+              },
+              error: () => resolve(false)
+            });
         }
+      } catch {
+        resolve(false);
       }
-  
-      // Login with test credentials
-      const response = await this.http.post('/api/login', {
-        username: 'admin',
-        password: 'admin'
-      }).toPromise() as any;
-  
-      if (response?.token) {
-        this.authService.setToken(response.token);
-        this.authService.setUsername(response.username);
-        return true;
-      }
-      return false;
-    } catch {
-      return false;
-    }
+    });
   }
+  
   initializeTests() {
     // Authentication Tests
     this.addTest('auth', 'Login with valid credentials', async () => {
@@ -616,41 +633,64 @@ export class TestComponent implements OnInit {
   }
 
   async runTests() {
-    if (this.running) return;
+    if (this.running || this.selectedTests.length === 0) 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) {
+    
+    try {
+      // Ensure we're authenticated before running tests
+      const authOk = await this.ensureAuth();
+      if (!authOk) {
         this.testResults.push({
-          name: test.name,
+          name: 'Authentication',
           status: 'FAIL',
-          error: error.message || 'Unexpected error'
+          error: 'Failed to authenticate for tests',
+          duration_ms: 0
         });
+        this.running = false;
+        return;
       }
 
-      // Small delay between tests
-      await new Promise(resolve => setTimeout(resolve, 100));
+      // Run selected tests
+      for (const test of this.selectedTests) {
+        if (!this.running) break; // Allow cancellation
+        
+        this.currentTest = test.name;
+        
+        try {
+          const result = await test.testFn();
+          this.testResults.push(result);
+        } catch (error: any) {
+          // Catch any uncaught errors from test
+          this.testResults.push({
+            name: test.name,
+            status: 'FAIL',
+            error: error.message || 'Test threw an exception',
+            duration_ms: 0
+          });
+        }
+      }
+    } catch (error: any) {
+      console.error('Test runner error:', error);
+      this.testResults.push({
+        name: 'Test Runner',
+        status: 'FAIL',
+        error: 'Test runner encountered an error',
+        duration_ms: 0
+      });
+    } finally {
+      this.running = false;
+      this.currentTest = '';
     }
-
-    this.running = false;
-    this.currentTest = '';
   }
 
   stopTests() {
     this.running = false;
     this.currentTest = '';
   }
-
+  
   getTestResult(testName: string): TestResult | undefined {
     return this.testResults.find(r => r.name === testName);
   }