Create test.component.html

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

@@ -0,0 +1,113 @@
+<div class="test-container">
+  <h2>System Tests</h2>
+
+  <div class="test-controls">
+    <button mat-raised-button color="primary" (click)="runAllTests()" [disabled]="running">
+      <mat-icon>play_arrow</mat-icon>
+      Run All Tests
+    </button>
+    <button mat-raised-button (click)="runSelectedTests()" 
+            [disabled]="running || selectedTests.length === 0">
+      <mat-icon>play_circle_outline</mat-icon>
+      Run Selected ({{ selectedTests.length }})
+    </button>
+    <button mat-raised-button color="warn" (click)="stopTests()" [disabled]="!running">
+      <mat-icon>stop</mat-icon>
+      Stop
+    </button>
+  </div>
+
+  <div class="test-categories">
+    <mat-checkbox [(ngModel)]="allSelected" (change)="toggleAll()">
+      <strong>All Tests ({{ totalTests }} tests)</strong>
+    </mat-checkbox>
+
+    <mat-accordion>
+      <mat-expansion-panel *ngFor="let category of categories" 
+                           [(expanded)]="category.expanded">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-checkbox [(ngModel)]="category.selected" 
+                          (click)="$event.stopPropagation()">
+              {{ category.displayName }}
+            </mat-checkbox>
+          </mat-panel-title>
+          <mat-panel-description>
+            <div class="category-status" *ngIf="getCategoryResults(category).total > 0">
+              <mat-chip-listbox>
+                <mat-chip-option *ngIf="getCategoryResults(category).passed > 0" 
+                                 class="success-chip">
+                  {{ getCategoryResults(category).passed }} passed
+                </mat-chip-option>
+                <mat-chip-option *ngIf="getCategoryResults(category).failed > 0" 
+                                 class="error-chip">
+                  {{ getCategoryResults(category).failed }} failed
+                </mat-chip-option>
+              </mat-chip-listbox>
+            </div>
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-list>
+          <mat-list-item *ngFor="let test of category.tests">
+            <mat-icon matListItemIcon [class]="'status-' + (getTestResult(test.name)?.status || 'pending')">
+              {{ getTestResult(test.name)?.status === 'PASS' ? 'check_circle' :
+                 getTestResult(test.name)?.status === 'FAIL' ? 'cancel' :
+                 getTestResult(test.name)?.status === 'RUNNING' ? 'hourglass_empty' :
+                 'radio_button_unchecked' }}
+            </mat-icon>
+            <div matListItemTitle>{{ test.name }}</div>
+            <div matListItemLine *ngIf="getTestResult(test.name)">
+              <span class="test-duration" *ngIf="getTestResult(test.name)?.duration_ms">
+                {{ getTestResult(test.name)?.duration_ms }}ms
+              </span>
+              <span class="test-details" *ngIf="getTestResult(test.name)?.details">
+                • {{ getTestResult(test.name)?.details }}
+              </span>
+              <span class="test-error" *ngIf="getTestResult(test.name)?.error">
+                • {{ getTestResult(test.name)?.error }}
+              </span>
+            </div>
+            <mat-icon matListItemMeta *ngIf="currentTest === test.name" class="running-icon">
+              sync
+            </mat-icon>
+          </mat-list-item>
+        </mat-list>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+
+  <div class="test-results" *ngIf="testResults.length > 0 || running">
+    <h3>Test Progress</h3>
+    
+    <mat-progress-bar [value]="progress" 
+                      [mode]="running ? 'determinate' : 'determinate'"
+                      [color]="failedTests > 0 ? 'warn' : 'primary'">
+    </mat-progress-bar>
+
+    <div class="test-summary">
+      <div class="summary-item">
+        <mat-icon class="success">check_circle</mat-icon>
+        <span>Passed: {{ passedTests }}</span>
+      </div>
+      <div class="summary-item">
+        <mat-icon class="error">cancel</mat-icon>
+        <span>Failed: {{ failedTests }}</span>
+      </div>
+      <div class="summary-item">
+        <mat-icon>timer</mat-icon>
+        <span>Total: {{ testResults.length }}/{{ selectedTests.length }}</span>
+      </div>
+    </div>
+
+    <div class="current-test" *ngIf="currentTest">
+      <mat-icon class="spin">sync</mat-icon>
+      Running: {{ currentTest }}
+    </div>
+  </div>
+
+  <div class="empty-state" *ngIf="!running && testResults.length === 0">
+    <mat-icon>assignment_turned_in</mat-icon>
+    <p>No test results yet. Select tests and click "Run Selected" to start.</p>
+  </div>
+</div>