396676848: (feat) [GM3] add testing done

modules/ui/src/app/mocks/testrun.mock.ts

@@ -143,6 +143,14 @@ export const MOCK_PROGRESS_DATA_NON_COMPLIANT: TestrunStatus =
     ResultOfTestrun.NonCompliant
   );
 
+export const MOCK_PROGRESS_DATA_PROCEED: TestrunStatus = PROGRESS_DATA_RESPONSE(
+  StatusOfTestrun.Proceed,
+  '2023-06-22T09:20:00.123Z',
+  TEST_DATA_RESULT,
+  'https://api.testrun.io/report.pdf',
+  ResultOfTestrun.Compliant
+);
+
 export const MOCK_PROGRESS_DATA_CANCELLED: TestrunStatus =
   PROGRESS_DATA_RESPONSE(StatusOfTestrun.Cancelled, null, TEST_DATA);
 

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html

@@ -28,7 +28,7 @@
     </div>
 
     <div class="progress-card-info progress-card-info-status">
-      <p class="progress-card-info-title">Status</p>
+      <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
       <p class="progress-card-info-text">
         <span>{{ getTestStatus(data) }}</span>
       </p>
@@ -50,62 +50,29 @@
         *ngSwitchCase="StatusOfTestrun.Monitoring"
         [ngTemplateOutlet]="Monitoring">
       </ng-container>
-      <ng-container *ngSwitchCase="StatusOfTestrun.InProgress">
-        <ng-container
-          *ngTemplateOutlet="
-            InProgress;
-            context: {
-              data: data,
-            }
-          "></ng-container
-      ></ng-container>
       <ng-container
         *ngSwitchCase="StatusOfTestrun.Cancelling"
         [ngTemplateOutlet]="Cancelling">
       </ng-container>
-      <ng-container *ngSwitchCase="StatusOfTestrun.Cancelled">
-        <ng-container
-          *ngTemplateOutlet="
-            Finished;
-            context: {
-              data: data,
-            }
-          "></ng-container
-      ></ng-container>
     </div>
 
-    <ng-container *ngIf="data.finished">
-      <ng-container *ngIf="data.status !== StatusOfTestrun.InProgress">
-        <ng-container
-          *ngTemplateOutlet="
-            Finished;
-            context: {
-              data: data,
-            }
-          "></ng-container>
-      </ng-container>
-      <ng-container *ngIf="data.status === StatusOfTestrun.InProgress">
-        <ng-container
-          *ngTemplateOutlet="
-            InProgress;
-            context: {
-              data: data,
-            }
-          "></ng-container
-      ></ng-container>
+    <ng-container
+      *ngIf="
+        data.finished ||
+        data.status === StatusOfTestrun.InProgress ||
+        data.status === StatusOfTestrun.Cancelled
+      ">
+      <ng-container
+        *ngTemplateOutlet="
+          WithProgressBar;
+          context: {
+            data: data,
+          }
+        "></ng-container>
     </ng-container>
   </div>
 </ng-container>
 
-<ng-template #InProgress let-data="data">
-  <mat-progress-bar
-    class="progress-bar"
-    mode="determinate"
-    [value]="getProgressValue(data)"
-    [attr.aria-label]="data.status + ' ' + getProgressValue(data) + '%'">
-  </mat-progress-bar>
-</ng-template>
-
 <ng-template #Cancelling>
   <div>
     <p class="progress-card-result-title">
@@ -155,21 +122,13 @@
   </div>
 </ng-template>
 
-<ng-template #Finished let-data="data">
-  <div>
-    <p class="progress-card-result-title">Test result</p>
-    <p class="progress-card-result-text">
-      <span>{{ getTestResult(data) }}</span>
-    </p>
-  </div>
-  <div
-    *ngIf="
-      data.status === StatusOfTestrun.Proceed ||
-      data.status === StatusOfTestrun.DoNotProceed
-    ">
-    <p class="progress-card-result-title">Preliminary Pilot Recommendation</p>
-    <p class="progress-card-result-text">
-      <span>{{ data.status }}</span>
-    </p>
+<ng-template #WithProgressBar let-data="data">
+  <div class="progress-card-status">
+    <mat-progress-bar
+      class="progress-bar"
+      mode="determinate"
+      [value]="getProgressValue(data)"
+      [attr.aria-label]="data.status + ' ' + getProgressValue(data) + '%'">
+    </mat-progress-bar>
   </div>
 </ng-template>

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss

@@ -65,22 +65,42 @@
 
   .progress-bar {
     padding-bottom: 28px;
+    width: 460px;
+    border-radius: 45%;
+  }
+
+  @include mat.progress-bar-overrides(
+    (
+      active-indicator-color: colors.$primary,
+      track-color: colors.$secondary-container,
+      active-indicator-height: 12px,
+      track-height: 12px,
+    )
+  );
+
+  &.canceled {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: colors.$on-surface,
+        track-color: colors.$surface-variant,
+      )
+    );
   }
 
   &.progress .progress-card-info-status {
     background-color: colors.$primary;
   }
 
   &.completed-success .progress-card-info-status {
-    background-color: #188038; /* TODO update with variable*/
+    background-color: colors.$on-tertiary-container;
   }
 
   &.completed-failed .progress-card-info-status {
-    background-color: colors.$red-800;
+    background-color: colors.$on-error-container;
   }
 
   &.canceled .progress-card-info-status {
-    background-color: colors.$secondary;
+    background-color: colors.$on-surface;
   }
 }
 
@@ -103,7 +123,6 @@
     colors.$on-primary
   );
   justify-self: start;
-  width: 343px;
 
   &-pilot {
     gap: 6px;
@@ -115,6 +134,7 @@
   grid-area: 2/1/2/3;
   max-width: max-content;
   white-space: normal;
+  justify-self: center;
 }
 
 .progress-card-result-loading {

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts

@@ -26,6 +26,7 @@ import {
   MOCK_PROGRESS_DATA_COMPLIANT,
   MOCK_PROGRESS_DATA_IN_PROGRESS,
   MOCK_PROGRESS_DATA_MONITORING,
+  MOCK_PROGRESS_DATA_PROCEED,
   MOCK_PROGRESS_DATA_WAITING_FOR_DEVICE,
   MOCK_PROGRESS_DATA_WITH_ERROR,
 } from '../../../../mocks/testrun.mock';
@@ -170,29 +171,55 @@ describe('ProgressStatusCardComponent', () => {
       });
     });
 
+    describe('#getTestStatusText should return status text as', () => {
+      it('"Status" if not finished', () => {
+        const expectedText = 'Status';
+
+        const result = component.getTestStatusText(
+          MOCK_PROGRESS_DATA_MONITORING
+        );
+
+        expect(result).toEqual(expectedText);
+      });
+
+      it('"Result" if finished and not Pilot statuses', () => {
+        const expectedText = 'Result';
+
+        const result = component.getTestStatusText(
+          MOCK_PROGRESS_DATA_COMPLIANT
+        );
+
+        expect(result).toEqual(expectedText);
+      });
+
+      it('"Preliminary Pilot Recommendation" if finished and Pilot statuses', () => {
+        const expectedText = 'Preliminary Pilot Recommendation';
+
+        const result = component.getTestStatusText(MOCK_PROGRESS_DATA_PROCEED);
+
+        expect(result).toEqual(expectedText);
+      });
+    });
+
     describe('#getTestStatus', () => {
-      it('should return test status "Complete" if testrun is finished', () => {
-        const expectedResult = 'Complete';
+      it('should return test result if testrun has status "Complete"', () => {
+        const expectedResult = MOCK_PROGRESS_DATA_COMPLIANT.result as string;
 
         const result = component.getTestStatus(MOCK_PROGRESS_DATA_COMPLIANT);
 
         expect(result).toEqual(expectedResult);
       });
 
-      it('should return test status "Incomplete" if status "Cancelled"', () => {
-        const expectedResult = 'Incomplete';
-
+      it('should return test status "Cancelled" if status "Cancelled"', () => {
         const result = component.getTestStatus(MOCK_PROGRESS_DATA_CANCELLED);
 
-        expect(result).toEqual(expectedResult);
+        expect(result).toEqual(StatusOfTestrun.Cancelled);
       });
 
       it('should return test status "In Progress" if status "In Progress"', () => {
-        const expectedResult = 'In Progress';
-
         const result = component.getTestStatus(MOCK_PROGRESS_DATA_IN_PROGRESS);
 
-        expect(result).toEqual(expectedResult);
+        expect(result).toEqual(StatusOfTestrun.InProgress);
       });
 
       it('should return test status "Monitoring" if finished with status "Monitoring"', () => {
@@ -272,28 +299,19 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardEl?.classList).toContain('canceled');
       });
 
-      it('should not have progress bar element', () => {
+      it('should have progress bar element', () => {
         const progressBarEl = compiled.querySelector('.progress-bar');
 
-        expect(progressBarEl).toBeNull();
-      });
-
-      it('should have progress card result', () => {
-        const progressCardResultEl = compiled.querySelector(
-          '.progress-card-result-text span'
-        );
-
-        expect(progressCardResultEl).not.toBeNull();
-        expect(progressCardResultEl?.textContent).toEqual('Cancelled');
+        expect(progressBarEl).not.toBeNull();
       });
 
-      it('should have progress card status text as "Incomplete"', () => {
+      it('should have progress card status text as "Cancelled"', () => {
         const progressCardStatusText = compiled.querySelector(
           '.progress-card-info-status .progress-card-info-text > span'
         );
 
         expect(progressCardStatusText).not.toBeNull();
-        expect(progressCardStatusText?.textContent).toEqual('Incomplete');
+        expect(progressCardStatusText?.textContent).toEqual('Cancelled');
       });
     });
 

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts

@@ -110,22 +110,22 @@ export class TestrunStatusCardComponent {
     return '-/-';
   }
 
-  public getTestStatus(data: TestrunStatus): string {
-    if (data.status === StatusOfTestrun.Cancelled) {
-      return 'Incomplete';
-    } else if (data.finished && !this.isProgressStatus(data.status)) {
-      return 'Complete';
+  public getTestStatusText(data: TestrunStatus): string {
+    if (!data.finished) {
+      return 'Status';
+    } else if (
+      data.finished &&
+      (data.status === StatusOfTestrun.Proceed ||
+        data.status === StatusOfTestrun.DoNotProceed)
+    ) {
+      return 'Preliminary Pilot Recommendation';
     } else {
-      return data.status;
+      return 'Result';
     }
   }
 
-  public getTestResult(data: TestrunStatus): string {
-    if (
-      data.status === StatusOfTestrun.Complete ||
-      data.status === StatusOfTestrun.Proceed ||
-      data.status === StatusOfTestrun.DoNotProceed
-    ) {
+  public getTestStatus(data: TestrunStatus): string {
+    if (data.status === StatusOfTestrun.Complete) {
       return data.result!;
     }
     return data.status;

modules/ui/src/app/pages/testrun/testrun.component.html

@@ -47,10 +47,6 @@
             </span>
           </div>
           <div class="toolbar-row bottom">
-            <app-download-options
-              *ngIf="data.report"
-              [data]="data"
-              [profiles]="vm.profiles"></app-download-options>
             <app-testrun-status-card [systemStatus]="vm.systemStatus">
             </app-testrun-status-card>
           </div>
@@ -76,6 +72,28 @@
         </mat-icon>
         Stop
       </button>
+      <button
+        *ngIf="data.report"
+        (click)="openDownloadOptions()"
+        class="download-button"
+        [class.download-button-opened]="isOpenDownloadOptions"
+        color="primary"
+        aria-label="Stop testrun"
+        mat-flat-button>
+        <mat-icon
+          *ngIf="!isOpenDownloadOptions"
+          fontSet="material-symbols-outlined"
+          class="filled">
+          download
+        </mat-icon>
+        <mat-icon
+          *ngIf="isOpenDownloadOptions"
+          fontSet="material-symbols-outlined"
+          class="filled">
+          close
+        </mat-icon>
+        {{ isOpenDownloadOptions ? '' : 'Download' }}
+      </button>
     </ng-container>
     <ng-container *ngIf="!data.started">
       <ng-container *ngTemplateOutlet="empty"></ng-container>