diff --git a/modules/ui/src/app/mocks/testrun.mock.ts b/modules/ui/src/app/mocks/testrun.mock.ts index 0a26600d5..6ca628ecf 100644 --- a/modules/ui/src/app/mocks/testrun.mock.ts +++ b/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); diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html index 49f6755b1..377ecdb70 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html +++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html @@ -28,7 +28,7 @@
-

Status

+

{{ getTestStatusText(data) }}

{{ getTestStatus(data) }}

@@ -50,62 +50,29 @@ *ngSwitchCase="StatusOfTestrun.Monitoring" [ngTemplateOutlet]="Monitoring"> - - - -
- - - - - - + + - - - - -

@@ -155,21 +122,13 @@

- -
-

Test result

-

- {{ getTestResult(data) }} -

-
-
-

Preliminary Pilot Recommendation

-

- {{ data.status }} -

+ +
+ +
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss index f54554db8..69b4d5ac1 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss +++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss @@ -65,6 +65,26 @@ .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 { @@ -72,15 +92,15 @@ } &.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 { diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts index 81467b207..1c3c125c7 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts +++ b/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'); }); }); diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts index cafeb6e16..77ea36823 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts +++ b/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; diff --git a/modules/ui/src/app/pages/testrun/testrun.component.html b/modules/ui/src/app/pages/testrun/testrun.component.html index 196d308ff..f38eebbb1 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.html +++ b/modules/ui/src/app/pages/testrun/testrun.component.html @@ -47,10 +47,6 @@
-
@@ -76,6 +72,28 @@ Stop + diff --git a/modules/ui/src/app/pages/testrun/testrun.component.scss b/modules/ui/src/app/pages/testrun/testrun.component.scss index 4a5f0e1f4..800e24dd9 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.scss +++ b/modules/ui/src/app/pages/testrun/testrun.component.scss @@ -139,23 +139,41 @@ } } -.stop-button { +.stop-button, +.download-button { position: fixed; right: 40px; bottom: 32px; - background-color: colors.$error; padding: 26px; border-radius: variables.$corner-large; font-weight: 400; font-size: 22px; line-height: 28px; height: 80px; + + mat-icon { + font-size: 28px; + width: 28px; + height: 28px; + } } -.stop-button mat-icon { - font-size: 28px; - width: 28px; - height: 28px; +.stop-button { + background-color: colors.$error; +} + +.download-button.download-button-opened { + min-width: 56px; + height: 56px; + border-radius: 50%; + padding: 16px; + + mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + margin: 0; + } } ::ng-deep .stop-testrun app-simple-dialog { diff --git a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts index f0e39d3af..29b523323 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts +++ b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts @@ -498,10 +498,10 @@ describe('TestrunComponent', () => { expect(startBtn).toBeNull(); }); - it('should have "Download" options', () => { - const downloadComp = compiled.querySelector('app-download-options'); + it('should have "Download" button', () => { + const downloadButton = compiled.querySelector('.download-button'); - expect(downloadComp).not.toBeNull(); + expect(downloadButton).not.toBeNull(); }); }); diff --git a/modules/ui/src/app/pages/testrun/testrun.component.ts b/modules/ui/src/app/pages/testrun/testrun.component.ts index c505c2e1f..3c1ffd1d8 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.ts +++ b/modules/ui/src/app/pages/testrun/testrun.component.ts @@ -46,7 +46,6 @@ import { MatInputModule } from '@angular/material/input'; import { MatExpansionModule } from '@angular/material/expansion'; import { ReactiveFormsModule } from '@angular/forms'; import { SpinnerComponent } from '../../components/spinner/spinner.component'; -import { DownloadOptionsComponent } from './components/download-options/download-options.component'; import { MatTooltipModule } from '@angular/material/tooltip'; import { TestrunTableComponent } from './components/testrun-table/testrun-table.component'; import { TestrunStatusCardComponent } from './components/testrun-status-card/testrun-status-card.component'; @@ -67,7 +66,6 @@ import { TestrunStatusCardComponent } from './components/testrun-status-card/tes MatExpansionModule, ReactiveFormsModule, SpinnerComponent, - DownloadOptionsComponent, MatTooltipModule, TestrunTableComponent, TestrunStatusCardComponent, @@ -79,6 +77,7 @@ import { TestrunStatusCardComponent } from './components/testrun-status-card/tes ], }) export class TestrunComponent implements OnInit, OnDestroy { + isOpenDownloadOptions: boolean = false; private readonly testRunService = inject(TestRunService); private readonly notificationService = inject(NotificationService); dialog = inject(MatDialog); @@ -197,4 +196,8 @@ export class TestrunComponent implements OnInit, OnDestroy { resultIsEmpty(tests: TestsResponse | undefined) { return this.testrunStore.resultIsEmpty(tests); } + + openDownloadOptions(): void { + this.isOpenDownloadOptions = !this.isOpenDownloadOptions; + } }