New Features:

1. System Tests get chart, passed tests, execute test New Pages: Bugs Corrected: To Be Corrected: 0. On product delete, delete trace results 1. On product delete, delete flamegraph result 2. Add AI to System Tests
juanfranciscocis · Sep 3, 2024 · cd09969 · cd09969
1 parent ce60e85
commit cd09969
Show file tree

Hide file tree

Showing 15 changed files with 448 additions and 24 deletions.
diff --git a/src/app/pages/execute-system-test/execute-system-test.page.html b/src/app/pages/execute-system-test/execute-system-test.page.html
@@ -1,11 +1,41 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>execute_system_test</ion-title>
-  </ion-toolbar>
-</ion-header>
+<app-header-return [title]="'Execute System Test'"></app-header-return>
 
 <ion-content [fullscreen]="true">
-  <ion-row>
+  <ion-grid>
     <app-title [title]="'Execute System Test'"></app-title>
-  </ion-row>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="12" size-lg="12" class="">
+        <ion-card class="min-h-full flex flex-col p-8">
+          <ion-card-title class=" p-2">
+            <ion-label  class="text-4xl text-white font-bold">{{systemTest.title}}</ion-label>
+          </ion-card-title>
+          <br>
+          <ion-card-title class=" p-2">
+            <ion-label class="text-xl">{{systemTest.description}}</ion-label>
+          </ion-card-title>
+          <br>
+            <ion-list>
+              @for (step of systemTest["steps"] ; track systemTest.title){
+                <ion-item>
+                  <ion-label>
+                    <h1>{{step.stepTitle}}</h1>
+                    <p>{{step.expectedResults}}</p>
+                  </ion-label>
+                  @if (step.isComplete){
+                  <ion-icon aria-hidden="true" name="checkmark-circle" slot="end" color="success" (click)="okClick(step.stepTitle)"></ion-icon>
+                  <ion-icon aria-hidden="true" name="close-circle" slot="end" (click)="badClick(step.stepTitle)"></ion-icon>
+                  }
+                  @if (!step.isComplete){
+                  <ion-icon aria-hidden="true" name="checkmark-circle" slot="end" (click)="okClick(step.stepTitle)"></ion-icon>
+                  <ion-icon aria-hidden="true" name="close-circle" slot="end" color="danger" (click)="badClick(step.stepTitle)"></ion-icon>
+                  }
+                </ion-item>
+              }
+            </ion-list>
+          <br>
+          <ion-button color="primary" expand="block" fill="outline" (click)="save()">Save</ion-button>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>
diff --git a/src/app/pages/execute-system-test/execute-system-test.page.ts b/src/app/pages/execute-system-test/execute-system-test.page.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {SystemTest} from "../../interfaces/system-test";
+import {User} from "../../interfaces/user";
+import {SystemTestService} from "../../services/system-test.service";
+import {LoadingController} from "@ionic/angular";
 
 @Component({
   selector: 'app-execute-system-test',
@@ -7,9 +12,109 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExecuteSystemTestPage implements OnInit {
 
-  constructor() { }
+  productObjective: string = '';
+  productStep: string = '';
+  testTitle: string = '';
+
+  systemTest:SystemTest = {
+    title: '',
+    description: '',
+    steps: [],
+    type: 'system-test',
+    state: false
+  }
+
+  orgName: string = '';
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private systemTestService: SystemTestService,
+    private loadingCtrl: LoadingController
+  ) { }
 
   ngOnInit() {
+    this.getProductFromParams();
+    this.getSystemTest();
+  }
+
+  ionViewWillEnter() {
+    this.getProductFromParams();
+    this.getSystemTest();
+  }
+
+  /**
+   * This method gets the product and step from URL parameters.
+   */
+  getProductFromParams() {
+    // Get product from URL params
+    this.activatedRoute.params.subscribe(params => {
+      this.productObjective = params['productObjective'];
+      this.productStep = params['step'];
+      this.testTitle = params['testTitle'];
+    });
+    console.log(this.productObjective);
+    console.log(this.productStep);
+    console.log(this.testTitle);
+  }
+
+  async getSystemTest() {
+    // Get User from local storage
+    const userString = localStorage.getItem('user');
+    if (!userString) return
+
+    const user: User = JSON.parse(userString);
+    this.orgName = user.orgName!;
+
+    // Get system test from database
+    await this.systemTestService.getSystemTest(this.orgName, this.productObjective, this.productStep).then(r => {
+      this.systemTest = r.find((systemTest: { title: string; }) => systemTest.title === this.testTitle)!;
+    });
+  }
+
+  okClick(stepTitle: string) {
+    //Change the step state to true
+    this.systemTest.steps.find((step: { stepTitle: string; }) => step.stepTitle === stepTitle)!.isComplete = true;
+    console.log(this.systemTest);
+  }
+
+  badClick(stepTitle: string) {
+    //Change the step state to false
+    this.systemTest.steps.find((step: { stepTitle: string; }) => step.stepTitle === stepTitle)!.isComplete = false;
+    console.log(this.systemTest);
+  }
+
+  async save() {
+    await this.showLoading()
+    //check if all steps are complete
+    let isComplete = true;
+    this.systemTest.steps.forEach(step => {
+      if (!step.isComplete) {
+        isComplete = false;
+      }
+    });
+    this.systemTest.state = isComplete
+
+    // Save the system test
+    await this.systemTestService.saveSystemTest(this.orgName, this.productObjective, this.productStep, this.systemTest);
+
+    await this.hideLoading()
+
+  }
+
+  /**
+   * Show a loading spinner.
+   */
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+    });
+    await loading.present();
+  }
+
+  /**
+   * Hide the loading spinner.
+   */
+  async hideLoading() {
+    await this.loadingCtrl.dismiss();
   }
 
 }
diff --git a/src/app/pages/software-testing-chooser/software-testing-chooser.module.ts b/src/app/pages/software-testing-chooser/software-testing-chooser.module.ts
@@ -8,14 +8,17 @@ import { SoftwareTestingChooserPageRoutingModule } from './software-testing-choo
 
 import { SoftwareTestingChooserPage } from './software-testing-chooser.page';
 import {ComponentsModule} from "../../components/components.module";
+import {NgxEchartsDirective} from "ngx-echarts";
+import {GraphPageRoutingModule} from "../graph-latency/graph-latency-routing.module";
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
         IonicModule,
         SoftwareTestingChooserPageRoutingModule,
-        ComponentsModule
+        ComponentsModule,
+        NgxEchartsDirective,
     ],
   declarations: [SoftwareTestingChooserPage]
 })

diff --git a/src/app/pages/software-testing-chooser/software-testing-chooser.page.html b/src/app/pages/software-testing-chooser/software-testing-chooser.page.html
@@ -47,23 +47,74 @@ <H2>Choose a type of test.</H2>
         </ion-card>
       </ion-col>
     </ion-row>
-    <app-title [title]="'Created Tests'"></app-title>
+  </ion-grid>
+    <ion-grid>
+      <app-title [title]="'Unit Tests'"></app-title>
+      <ion-row class="lg:m-10 md:m-10">
+        <ion-col size="12" size-md="4" size-lg="4" class="">
+          <p>Created tests for product step: {{productStep}}</p>
+        </ion-col>
+      </ion-row>
+      <app-title [title]="'Integration Tests'"></app-title>
+      <ion-row class="lg:m-10 md:m-10">
+        <ion-col size="12" size-md="4" size-lg="4" class="">
+          <p>Created tests for product step: {{productStep}}</p>
+        </ion-col>
+      </ion-row>
+      <app-title [title]="'System Tests'"></app-title>
     <ion-row class="lg:m-10 md:m-10">
       <ion-col size="12" size-md="4" size-lg="4" class="">
-        <p>Created tests for product step: {{productStep}}</p>
+        <p>System tests results for product step: {{productStep}}</p>
       </ion-col>
     </ion-row>
+      <ion-row class="lg:m-10 md:m-10">
+        <ion-col size="6" size-md="6" size-lg="6" class="">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title class="flex flex-col justify-center items-center text-green-600">Passed Tests</ion-card-title>
+            </ion-card-header>
+            <ion-card-content class="flex flex-col justify-center items-center">
+              <h1>{{passed}}</h1>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+        <ion-col size="6" size-md="6" size-lg="6" class="">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title class="flex flex-col justify-center items-center text-red-800">Failed Tests</ion-card-title>
+            </ion-card-header>
+            <ion-card-content class="flex flex-col justify-center items-center">
+              <h1>{{ failed }}</h1>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="12" size-lg="12" class="">
+        <ion-card>
+          <ion-card-content class="h-[25em]">
+            <div echarts [options]="systemTestsChart" class="demo-chart h-full w-full p-4"></div>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <ion-grid>
     <ion-row class="lg:m-10 md:m-10">
       <ion-col size="12" size-md="3" size-lg="3" class="" *ngFor="let test of systemTests">
         <ion-card>
           <ion-card-header>
             <ion-card-title>{{ test.title }}</ion-card-title>
           </ion-card-header>
           <ion-card-content>
-            <ion-button color="primary" expand="block" [routerLink]="['/execute-system-test']">Execute Test</ion-button>
+            <ion-button color="primary" expand="block" (click)="navigateToExecuteTest(test.title)">View Test Results</ion-button>
+            <ion-button color="primary" expand="block" (click)="navigateToExecuteTest(test.title)">Execute Test</ion-button>
+            <ion-button color="danger" expand="block" (click)="deleteTest(test.title)">Delete Test</ion-button>
           </ion-card-content>
         </ion-card>
       </ion-col>
     </ion-row>
   </ion-grid>
 </ion-content>
+
+