System status is not updated when test run is started

modules/ui/src/app/pages/devices/devices.component.spec.ts

@@ -41,6 +41,7 @@ import { Routes } from '../../model/routes';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Component } from '@angular/core';
+import { MOCK_PROGRESS_DATA_IN_PROGRESS } from '../../mocks/testrun.mock';
 
 describe('DevicesComponent', () => {
   let component: DevicesComponent;
@@ -59,6 +60,7 @@ describe('DevicesComponent', () => {
       'setIsOpenAddDevice',
       'selectDevice',
       'deleteDevice',
+      'setStatus',
     ]);
 
     mockDevicesStore.testModules = MOCK_TEST_MODULES;
@@ -299,7 +301,7 @@ describe('DevicesComponent', () => {
   describe('#openStartTestrun', () => {
     it('should open initiate test run modal', fakeAsync(() => {
       const openSpy = spyOn(component.dialog, 'open').and.returnValue({
-        afterClosed: () => of(true),
+        afterClosed: () => of(MOCK_PROGRESS_DATA_IN_PROGRESS),
       } as MatDialogRef<typeof TestrunInitiateFormComponent>);
 
       fixture.ngZone?.run(() => {
@@ -319,6 +321,9 @@ describe('DevicesComponent', () => {
 
         tick();
         expect(router.url).toBe(Routes.Testing);
+        expect(mockDevicesStore.setStatus).toHaveBeenCalledWith(
+          MOCK_PROGRESS_DATA_IN_PROGRESS
+        );
 
         openSpy.calls.reset();
       });

modules/ui/src/app/pages/devices/devices.component.ts

@@ -91,8 +91,9 @@ export class DevicesComponent implements OnInit, OnDestroy {
     dialogRef
       ?.afterClosed()
       .pipe(takeUntil(this.destroy$))
-      .subscribe(testrunStarted => {
-        if (testrunStarted) {
+      .subscribe(status => {
+        if (status) {
+          this.devicesStore.setStatus(status);
           // @ts-expect-error data layer is not null
           window.dataLayer.push({
             event: 'successful_testrun_initiation',

modules/ui/src/app/pages/devices/devices.store.spec.ts

@@ -24,9 +24,14 @@ import {
 import { TestRunService } from '../../services/test-run.service';
 import SpyObj = jasmine.SpyObj;
 import { device, updated_device } from '../../mocks/device.mock';
-import { setDevices, setIsOpenAddDevice } from '../../store/actions';
+import {
+  fetchSystemStatusSuccess,
+  setDevices,
+  setIsOpenAddDevice,
+} from '../../store/actions';
 import { selectDevices, selectIsOpenAddDevice } from '../../store/selectors';
 import { DevicesStore } from './devices.store';
+import { MOCK_PROGRESS_DATA_IN_PROGRESS } from '../../mocks/testrun.mock';
 
 describe('DevicesStore', () => {
   let devicesStore: DevicesStore;
@@ -183,5 +188,17 @@ describe('DevicesStore', () => {
         );
       });
     });
+
+    describe('setStatus', () => {
+      it('should dispatch action fetchSystemStatusSuccess', () => {
+        devicesStore.setStatus(MOCK_PROGRESS_DATA_IN_PROGRESS);
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+          fetchSystemStatusSuccess({
+            systemStatus: MOCK_PROGRESS_DATA_IN_PROGRESS,
+          })
+        );
+      });
+    });
   });
 });

modules/ui/src/app/pages/devices/devices.store.ts

@@ -27,7 +27,12 @@ import {
   selectDevices,
   selectIsOpenAddDevice,
 } from '../../store/selectors';
-import { setDevices, setIsOpenAddDevice } from '../../store/actions';
+import {
+  fetchSystemStatusSuccess,
+  setDevices,
+  setIsOpenAddDevice,
+} from '../../store/actions';
+import { TestrunStatus } from '../../model/testrun-status';
 
 export interface DevicesComponentState {
   devices: Device[];
@@ -111,6 +116,19 @@ export class DevicesStore extends ComponentStore<DevicesComponentState> {
       )
     );
   });
+
+  setStatus = this.effect<TestrunStatus>(status$ => {
+    return status$.pipe(
+      tap(status => {
+        this.store.dispatch(
+          fetchSystemStatusSuccess({
+            systemStatus: status,
+          })
+        );
+      })
+    );
+  });
+
   private addDevice(device: Device, devices: Device[]): void {
     this.updateDevices(devices.concat([device]));
   }

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html

@@ -78,7 +78,7 @@
       type="button">
       Change Device
     </button>
-    <button (click)="cancel(false)" color="primary" mat-button type="button">
+    <button (click)="cancel(null)" color="primary" mat-button type="button">
       Cancel
     </button>
     <button

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts

@@ -116,8 +116,9 @@ describe('ProgressInitiateFormComponent', () => {
 
     it('should close dialog', () => {
       spyOn(component.dialogRef, 'close');
-      component.cancel(false);
-      expect(component.dialogRef.close).toHaveBeenCalledWith(false);
+      component.cancel(null);
+
+      expect(component.dialogRef.close).toHaveBeenCalledWith(null);
     });
 
     it('should set devices$ value', () => {

modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts

@@ -38,6 +38,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '../../../../store/state';
 import { selectDevices } from '../../../../store/selectors';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { TestrunStatus } from '../../../../model/testrun-status';
 
 interface DialogData {
   device?: Device;
@@ -84,8 +85,8 @@ export class TestrunInitiateFormComponent
     return this.initiateForm.controls['test_modules'] as FormArray;
   }
 
-  cancel(startTestrun: boolean): void {
-    this.dialogRef.close(startTestrun);
+  cancel(status: TestrunStatus | null): void {
+    this.dialogRef.close(status);
   }
 
   ngOnInit() {
@@ -164,8 +165,8 @@ export class TestrunInitiateFormComponent
           test_modules: testModules,
         })
         .pipe(take(1))
-        .subscribe(() => {
-          this.cancel(true);
+        .subscribe(status => {
+          this.cancel(status);
         });
     }
   }

modules/ui/src/app/pages/testrun/testrun.component.spec.ts

@@ -53,7 +53,10 @@ import {
   selectSystemStatus,
 } from '../../store/selectors';
 import { TestrunStore } from './testrun.store';
-import { setTestrunStatus } from '../../store/actions';
+import {
+  fetchSystemStatusSuccess,
+  setTestrunStatus,
+} from '../../store/actions';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NotificationService } from '../../services/notification.service';
 
@@ -256,6 +259,7 @@ describe('TestrunComponent', () => {
       testRunServiceMock.fetchSystemStatus.and.returnValue(
         of(MOCK_PROGRESS_DATA_IN_PROGRESS)
       );
+      spyOn(store, 'dispatch').and.callFake(() => {});
       component = fixture.componentInstance;
     });
 
@@ -302,21 +306,25 @@ describe('TestrunComponent', () => {
 
       it('should open initiate test run modal when start button clicked', fakeAsync(() => {
         const openSpy = spyOn(component.dialog, 'open').and.returnValue({
-          afterClosed: () => of(true),
+          afterClosed: () => of(MOCK_PROGRESS_DATA_IN_PROGRESS),
         } as MatDialogRef<typeof TestrunInitiateFormComponent>);
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
         startBtn.click();
 
-        expect(openSpy).toHaveBeenCalled();
         expect(openSpy).toHaveBeenCalledWith(TestrunInitiateFormComponent, {
           ariaLabel: 'Initiate testrun',
           autoFocus: true,
           hasBackdrop: true,
           disableClose: true,
           panelClass: 'initiate-test-run-dialog',
         });
+        expect(store.dispatch).toHaveBeenCalledWith(
+          fetchSystemStatusSuccess({
+            systemStatus: MOCK_PROGRESS_DATA_IN_PROGRESS,
+          })
+        );
         tick(10);
         expect(
           stateServiceMock.focusFirstElementInContainer

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

@@ -138,13 +138,13 @@ export class TestrunComponent implements OnInit, OnDestroy {
     dialogRef
       ?.afterClosed()
       .pipe(takeUntil(this.destroy$))
-      .subscribe((startTestrun: boolean) => {
-        if (startTestrun) {
+      .subscribe((status: TestrunStatus) => {
+        if (status) {
           // @ts-expect-error data layer is not null
           window.dataLayer.push({
             event: 'successful_testrun_initiation',
           });
-          this.testrunStore.getSystemStatus();
+          this.testrunStore.setStatus(status);
         }
         this.testrunStore.setIsOpenStartTestrun(false);
         timer(10)

modules/ui/src/app/pages/testrun/testrun.store.spec.ts

@@ -25,6 +25,7 @@ import {
 } from '../../store/selectors';
 import {
   fetchSystemStatus,
+  fetchSystemStatusSuccess,
   setIsOpenStartTestrun,
   setIsStopTestrun,
   setTestrunStatus,
@@ -257,5 +258,17 @@ describe('TestrunStore', () => {
         );
       });
     });
+
+    describe('setStatus', () => {
+      it('should dispatch action fetchSystemStatusSuccess', () => {
+        testrunStore.setStatus(MOCK_PROGRESS_DATA_IN_PROGRESS);
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+          fetchSystemStatusSuccess({
+            systemStatus: MOCK_PROGRESS_DATA_IN_PROGRESS,
+          })
+        );
+      });
+    });
   });
 });

modules/ui/src/app/pages/testrun/testrun.store.ts

@@ -26,6 +26,7 @@ import {
 } from '../../store/selectors';
 import {
   fetchSystemStatus,
+  fetchSystemStatusSuccess,
   setIsOpenStartTestrun,
   setIsStopTestrun,
   setTestrunStatus,
@@ -174,6 +175,17 @@ export class TestrunStore extends ComponentStore<TestrunComponentState> {
     this.loaderService.setLoading(true);
   }
 
+  setStatus = this.effect<TestrunStatus>(status$ => {
+    return status$.pipe(
+      tap(status => {
+        this.store.dispatch(
+          fetchSystemStatusSuccess({
+            systemStatus: status,
+          })
+        );
+      })
+    );
+  });
   private getCancellingStatus(systemStatus: TestrunStatus): TestrunStatus {
     const status = Object.assign({}, systemStatus);
     status.status = StatusOfTestrun.Cancelling;

modules/ui/src/app/services/test-run.service.spec.ts

@@ -211,13 +211,13 @@ describe('TestRunService', () => {
       const apiUrl = 'http://localhost:8000/system/start';
 
       service.startTestrun(device).subscribe(res => {
-        expect(res).toEqual(true);
+        expect(res).toEqual(MOCK_PROGRESS_DATA_IN_PROGRESS);
       });
 
       const req = httpTestingController.expectOne(apiUrl);
       expect(req.request.method).toBe('POST');
       expect(req.request.body).toEqual(JSON.stringify({ device }));
-      req.flush({});
+      req.flush(MOCK_PROGRESS_DATA_IN_PROGRESS);
     });
   });
 

modules/ui/src/app/services/test-run.service.ts

@@ -181,13 +181,11 @@ export class TestRunService {
     );
   }
 
-  startTestrun(device: Device): Observable<boolean> {
-    return this.http
-      .post<TestrunStatus>(
-        `${API_URL}/system/start`,
-        JSON.stringify({ device })
-      )
-      .pipe(map(() => true));
+  startTestrun(device: Device): Observable<TestrunStatus> {
+    return this.http.post<TestrunStatus>(
+      `${API_URL}/system/start`,
+      JSON.stringify({ device })
+    );
   }
 
   getVersion(): BehaviorSubject<Version | null> {