frontend : add interface of results

ETS-TAF · Nov 12, 2023 · a23e18e · a23e18e
1 parent f943f5c
commit a23e18e
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 13 deletions.
diff --git a/frontend/src/app/selenium/test-selenium.component.css b/frontend/src/app/selenium/test-selenium.component.css
@@ -0,0 +1,7 @@
+.showModelResult{
+    width: 100%; background-color: rgba(0, 0, 0, 0.4); height: 100vh;position: absolute;left: 0;top: 0; z-index: 9999;
+}
+
+.hideIt{
+    visibility: hidden;
+}
diff --git a/frontend/src/app/selenium/test-selenium.component.html b/frontend/src/app/selenium/test-selenium.component.html
@@ -1,4 +1,53 @@
 <br><br>
+<!-- model of results -->
+<div class="showModelResult hideIt" id="modelResult">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticModalLabel">Cases Result</h5>
+            </div>
+            <div class="modal-body">
+                <div *ngIf="testResult">
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" [style.width]="percentage + '%'" aria-valuenow="percentage" aria-valuemin="0" aria-valuemax="100">{{percentage}}%</div>
+                    </div>
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th scope="col">Case ID</th>
+                                <th scope="col">Case Name</th>
+                                <th scope="col">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let result of testResult">
+                                <td>{{result.case_id}}</td>
+                                <td>{{result.caseName}}</td>
+                                <td>
+                                    <span class="badge bg-success" *ngIf="result.success==true">success</span>
+                                    <span class="badge bg-danger" *ngIf="result.success==false">failed</span>
+                                </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+
+                </div>
+                <div class="" id="spinner">
+                    <div class="text-center">
+                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
+                            <span class="sr-only">Loading...</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger"(click)="hideResultModal()">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- model of new action -->
 <div class="modal fade" tabindex="-1" id="addAction" aria-labelledby="Add new Action" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
     <div class="modal-dialog modal-dialog-centered modal-xl">
         <div class="modal-content">
@@ -32,6 +81,7 @@ <h5 class="modal-title">New Action</h5>
         </div>
     </div>
 </div>
+<!-- model of new Case -->
 <div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -51,6 +101,7 @@ <h5 class="modal-title">New Case</h5>
         </div>
     </div>
 </div>
+<!-- show the added cases and actions -->
 <div class="container">
     <div class="btn-group" role="group" aria-label="Basic outlined example">
         <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCase">
@@ -59,7 +110,7 @@ <h5 class="modal-title">New Case</h5>
         <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAction" id="addActionButton" disabled>
             Add New Action
         </button>
-        <button type="button" class="btn btn-success" (click)="runMethod(cases)">Run</button>
+        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#resultModal" (click)="runMethod(cases)">Run</button>
     </div><br><br>
     <div class="container" *ngFor="let case of cases">
 

diff --git a/frontend/src/app/selenium/test-selenium.component.ts b/frontend/src/app/selenium/test-selenium.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2, ElementRef  } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -7,8 +7,8 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./test-selenium.component.css']
 })
 export class TestSeleniumComponent {
-    constructor(private http: HttpClient) { }
-
+    constructor(private http: HttpClient,private renderer: Renderer2, private el: ElementRef) { }
+    testResult: any;
     counterAction: number=1;
     counterCase: number=0;
     cases : {
@@ -23,21 +23,48 @@ export class TestSeleniumComponent {
             target: string;
         }[] ;
     }[] = [];
+    percentage=0;
 
     runMethod(cases: any) {
-        const apiUrl = '/api/testselenium';
-        console.log(cases);
-        this.http.post(apiUrl, cases).subscribe(
+        let counterTrue=0;
+        const API_URL = 'http://localhost:8080/api/testselenium';
+        this.showResultModal();
+        this.showSpinner();
+        this.http.post(API_URL, cases).subscribe(
         (response) => {
             console.log('tested successfully:', response);
-
+            this.testResult=response;
+            // for calculate the percentage of the success cases
+            for(let result of  this.testResult){
+                if(result.success){
+                    counterTrue++;
+                }
+            }
+            this.percentage=(counterTrue / this.testResult.length) * 100;
+            this.hideSpinner();
         },
         (error) => {
             console.error('Error test:', error);
         }
         );
     }
-
+    showResultModal(): void {
+        const resultModal = this.el.nativeElement.querySelector('#modelResult');
+        this.renderer.removeClass(resultModal, 'hideIt');
+    }
+    hideResultModal(): void {
+        const resultModal = this.el.nativeElement.querySelector('#modelResult');
+        this.renderer.addClass(resultModal, 'hideIt');
+    }
+    showSpinner():void {
+        const resultModal = this.el.nativeElement.querySelector('#spinner');
+        this.renderer.removeClass(resultModal, 'hideIt');
+    }
+    hideSpinner():void {
+        const resultModal = this.el.nativeElement.querySelector('#spinner');
+        this.renderer.addClass(resultModal, 'hideIt');
+    }
+        // for enable and disable inputs needed in actions form
     actionChose(): void {
         const action = (document.getElementById('action') as HTMLSelectElement).value;
         const object = document.getElementById('object') as HTMLInputElement;
@@ -60,6 +87,7 @@ export class TestSeleniumComponent {
             object.disabled = false;
         }
     }
+    //add new case
     submitCase(){
         this.counterCase++;
         let caseName = (document.getElementById('caseName') as HTMLSelectElement).value;
@@ -83,9 +111,11 @@ export class TestSeleniumComponent {
         this.cases.push(obj);
     }
 
+    // add new action
     submitAction(){
         let action_id = parseInt((document.getElementById('action') as HTMLSelectElement).value);
-        let action = (document.getElementById('action') as HTMLSelectElement).innerText;
+        let action2 = (document.getElementById('action') as HTMLSelectElement);
+        let action = action2.options[action2.selectedIndex].text;
         let object = (document.getElementById('object') as HTMLInputElement).value;
         let input = (document.getElementById('input') as HTMLInputElement).value;
         let target = (document.getElementById('target') as HTMLInputElement).value;

diff --git a/selenium/src/main/java/ca/etsmtl/selenium/requests/payload/request/SeleniumCase.java b/selenium/src/main/java/ca/etsmtl/selenium/requests/payload/request/SeleniumCase.java
@@ -7,6 +7,6 @@
 @Data
 public class SeleniumCase {
     public int case_id;
-    public String case_name;
+    public String caseName;
     public List<SeleniumAction> actions;
 }
diff --git a/selenium/src/main/java/ca/etsmtl/selenium/requests/payload/request/SeleniumResponse.java b/selenium/src/main/java/ca/etsmtl/selenium/requests/payload/request/SeleniumResponse.java
@@ -8,7 +8,7 @@
 @Data
 public class SeleniumResponse implements Serializable {
     public int case_id;
-    public String case_name;
+    public String caseName;
     public List<SeleniumAction> seleniumActions;
     public boolean success;
     public long timestamp;

diff --git a/selenium/src/main/java/ca/etsmtl/selenium/requests/useSelenium.java b/selenium/src/main/java/ca/etsmtl/selenium/requests/useSelenium.java
@@ -26,7 +26,7 @@ public SeleniumResponse testWithSelenium(@RequestBody SeleniumCase seleniumCase)
 
         SeleniumResponse seleniumResponse = new SeleniumResponse();
         seleniumResponse.setCase_id(seleniumCase.getCase_id());
-        seleniumResponse.setCase_name(seleniumCase.getCase_name());
+        seleniumResponse.setCaseName(seleniumCase.getCaseName());
         seleniumResponse.setSeleniumActions(seleniumActions);
         long currentTimestamp = (new Timestamp(System.currentTimeMillis())).getTime();
         seleniumResponse.setTimestamp(currentTimestamp/1000);