Skip to content

Commit

Permalink
Techdebt: adds state for testrun page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sofyakurilova
sofyakurilova committed Apr 12, 2024
1 parent 7062d37 commit 78ddca7
Show file tree
Hide file tree
Showing 27 changed files with 1,094 additions and 575 deletions.
20 changes: 9 additions & 11 deletions modules/ui/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<app-bypass></app-bypass>
<mat-drawer-container
*ngIf="viewModel$ | async as vm"
[class.active-menu]="isMenuOpen | async"
[class.active-menu]="vm.isMenuOpen"
hasBackdrop="false"
class="app-container"
autosize>
Expand Down Expand Up @@ -89,7 +89,7 @@ <h1 class="main-heading">Testrun</h1>
</button>
</mat-toolbar>
<div class="app-content-main" role="main" id="main">
<ng-container *ngIf="settingMissedError$ | async as error">
<ng-container *ngIf="vm.settingMissedError as error">
<app-callout [type]="CalloutType.Error" *ngIf="error.isSettingMissed">
<ng-container
*ngIf="
Expand All @@ -116,7 +116,7 @@ <h1 class="main-heading">Testrun</h1>
</ng-container>
<app-callout
[type]="CalloutType.Info"
*ngIf="(hasConnectionSetting$ | async) === false">
*ngIf="vm.hasConnectionSettings === false">
Step 1: To perform a device test, please, select ports in
<a
(click)="openSetting()"
Expand All @@ -132,9 +132,7 @@ <h1 class="main-heading">Testrun</h1>
</app-callout>
<app-callout
[type]="CalloutType.Info"
*ngIf="
(hasConnectionSetting$ | async) === true && vm.hasDevices === false
">
*ngIf="vm.hasConnectionSettings === true && vm.hasDevices === false">
Step 2: To perform a device test please
<a
(click)="navigateToDeviceRepository()"
Expand All @@ -151,12 +149,12 @@ <h1 class="main-heading">Testrun</h1>
<app-callout
[type]="CalloutType.Info"
*ngIf="
(hasConnectionSetting$ | async) === true &&
vm.hasConnectionSettings === true &&
vm.hasDevices &&
(!(systemStatus$ | async)?.status ||
(systemStatus$ | async)?.status === StatusOfTestrun.Idle) &&
isStatusLoaded === true &&
(isTestrunStarted$ | async) === false
(!vm.systemStatus?.status ||
vm.systemStatus?.status === StatusOfTestrun.Idle) &&
vm.isStatusLoaded === true &&
vm.isTestrunStarted === false
">
Step 3: Once device is created, you are able to
<a
Expand Down
43 changes: 25 additions & 18 deletions modules/ui/src/app/app.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { of } from 'rxjs/internal/observable/of';
import SpyObj = jasmine.SpyObj;
import { BypassComponent } from './components/bypass/bypass.component';
import { CalloutComponent } from './components/callout/callout.component';
Expand All @@ -56,7 +55,10 @@ import {
selectHasConnectionSettings,
selectHasDevices,
selectInterfaces,
selectIsOpenStartTestrun,
selectIsTestrunStarted,
selectMenuOpened,
selectSystemStatus,
} from './store/selectors';
import { MatIconTestingModule } from '@angular/material/icon/testing';

Expand Down Expand Up @@ -97,9 +99,6 @@ describe('AppComponent', () => {
'focusFirstElementInContainer',
]);

(mockService.systemStatus$ as unknown) = of({});
mockService.isTestrunStarted$ = of(true);

TestBed.configureTestingModule({
imports: [
RouterTestingModule,
Expand Down Expand Up @@ -135,6 +134,9 @@ describe('AppComponent', () => {
{ selector: selectError, value: null },
{ selector: selectMenuOpened, value: false },
{ selector: selectHasDevices, value: false },
{ selector: selectIsTestrunStarted, value: false },
{ selector: selectSystemStatus, value: null },
{ selector: selectIsOpenStartTestrun, value: false },
],
}),
{ provide: FocusManagerService, useValue: mockFocusManagerService },
Expand Down Expand Up @@ -386,8 +388,7 @@ describe('AppComponent', () => {
describe('Callout component visibility', () => {
describe('with no connection settings', () => {
beforeEach(() => {
component.hasConnectionSetting$ = of(false);
component.ngOnInit();
store.overrideSelector(selectHasConnectionSettings, false);
fixture.detectChanges();
});

Expand Down Expand Up @@ -426,11 +427,12 @@ describe('AppComponent', () => {

describe('with system status as "Idle"', () => {
beforeEach(() => {
component.hasConnectionSetting$ = of(true);
component.appStore.updateIsStatusLoaded(true);
store.overrideSelector(selectHasConnectionSettings, true);
store.overrideSelector(selectHasDevices, true);
mockService.systemStatus$ = of(MOCK_PROGRESS_DATA_IDLE);
mockService.isTestrunStarted$ = of(false);
component.ngOnInit();
store.overrideSelector(selectSystemStatus, MOCK_PROGRESS_DATA_IDLE);
store.overrideSelector(selectIsTestrunStarted, false);

fixture.detectChanges();
});

Expand Down Expand Up @@ -504,7 +506,11 @@ describe('AppComponent', () => {
describe('with devices setted but without systemStatus data', () => {
beforeEach(() => {
store.overrideSelector(selectHasDevices, true);
mockService.isTestrunStarted$ = of(false);
store.overrideSelector(selectIsTestrunStarted, false);
component.appStore.updateIsStatusLoaded(true);
store.overrideSelector(selectHasConnectionSettings, true);
store.overrideSelector(selectSystemStatus, null);

fixture.detectChanges();
});

Expand Down Expand Up @@ -544,7 +550,7 @@ describe('AppComponent', () => {
describe('with devices setted, without systemStatus data, but run the tests ', () => {
beforeEach(() => {
store.overrideSelector(selectHasDevices, true);
mockService.isTestrunStarted$ = of(true);
store.overrideSelector(selectIsTestrunStarted, true);
fixture.detectChanges();
});

Expand All @@ -558,7 +564,10 @@ describe('AppComponent', () => {
describe('with devices setted and systemStatus data', () => {
beforeEach(() => {
store.overrideSelector(selectHasDevices, true);
mockService.systemStatus$ = of(MOCK_PROGRESS_DATA_IN_PROGRESS);
store.overrideSelector(
selectSystemStatus,
MOCK_PROGRESS_DATA_IN_PROGRESS
);
fixture.detectChanges();
});

Expand All @@ -572,12 +581,11 @@ describe('AppComponent', () => {
describe('error', () => {
describe('with settingMissedError with one port is missed', () => {
beforeEach(() => {
component.settingMissedError$ = of({
store.overrideSelector(selectError, {
isSettingMissed: true,
devicePortMissed: true,
internetPortMissed: false,
});
component.ngOnInit();
fixture.detectChanges();
});

Expand All @@ -592,12 +600,11 @@ describe('AppComponent', () => {

describe('with settingMissedError with two ports are missed', () => {
beforeEach(() => {
component.settingMissedError$ = of({
store.overrideSelector(selectError, {
isSettingMissed: true,
devicePortMissed: true,
internetPortMissed: true,
});
component.ngOnInit();
fixture.detectChanges();
});

Expand All @@ -612,7 +619,7 @@ describe('AppComponent', () => {

describe('with no settingMissedError', () => {
beforeEach(() => {
component.settingMissedError$ = of(null);
store.overrideSelector(selectError, null);
store.overrideSelector(selectHasDevices, true);
fixture.detectChanges();
});
Expand Down
43 changes: 6 additions & 37 deletions modules/ui/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,23 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { MatDrawer } from '@angular/material/sidenav';
import { TestRunService } from './services/test-run.service';
import { Observable } from 'rxjs';
import { TestrunStatus, StatusOfTestrun } from './model/testrun-status';
import { StatusOfTestrun } from './model/testrun-status';
import { Router } from '@angular/router';
import { CalloutType } from './model/callout-type';
import { tap, shareReplay } from 'rxjs/operators';
import { Routes } from './model/routes';
import { FocusManagerService } from './services/focus-manager.service';
import { State, Store } from '@ngrx/store';
import { AppState } from './store/state';
import {
selectError,
selectHasConnectionSettings,
selectInterfaces,
selectMenuOpened,
} from './store/selectors';
import {
setIsOpenAddDevice,
toggleMenu,
updateFocusNavigation,
} from './store/actions';
import { appFeatureKey } from './store/reducers';
import { SettingMissedError, SystemInterfaces } from './model/setting';
import { GeneralSettingsComponent } from './pages/settings/general-settings.component';
import { AppStore } from './app.store';

Expand All @@ -56,22 +46,11 @@ const CLOSE_URL = '/assets/icons/close.svg';
styleUrls: ['./app.component.scss'],
providers: [AppStore],
})
export class AppComponent implements OnInit {
export class AppComponent {
public readonly CalloutType = CalloutType;
public readonly StatusOfTestrun = StatusOfTestrun;
public readonly Routes = Routes;
systemStatus$!: Observable<TestrunStatus>;
isTestrunStarted$!: Observable<boolean>;
hasConnectionSetting$: Observable<boolean | null> = this.store.select(
selectHasConnectionSettings
);
isStatusLoaded = false;
private openedSettingFromToggleBtn = true;
isMenuOpen: Observable<boolean> = this.store.select(selectMenuOpened);
interfaces: Observable<SystemInterfaces> =
this.store.select(selectInterfaces);
settingMissedError$: Observable<SettingMissedError | null> =
this.store.select(selectError);

@ViewChild('settingsDrawer') public settingsDrawer!: MatDrawer;
@ViewChild('toggleSettingsBtn') public toggleSettingsBtn!: HTMLButtonElement;
Expand All @@ -82,15 +61,14 @@ export class AppComponent implements OnInit {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer,
private testRunService: TestRunService,
private route: Router,
private store: Store<AppState>,
private state: State<AppState>,
private readonly focusManagerService: FocusManagerService,
private appStore: AppStore
public appStore: AppStore
) {
this.appStore.getDevices();
this.testRunService.getSystemStatus();
this.appStore.getSystemStatus();
this.matIconRegistry.addSvgIcon(
'devices',
this.domSanitizer.bypassSecurityTrustResourceUrl(DEVICES_LOGO_URL)
Expand All @@ -117,23 +95,14 @@ export class AppComponent implements OnInit {
);
}

ngOnInit(): void {
this.systemStatus$ = this.testRunService.systemStatus$.pipe(
tap(() => (this.isStatusLoaded = true)),
shareReplay({ refCount: true, bufferSize: 1 })
);

this.isTestrunStarted$ = this.testRunService.isTestrunStarted$;
}

navigateToDeviceRepository(): void {
this.route.navigate([Routes.Devices]);
this.store.dispatch(setIsOpenAddDevice({ isOpenAddDevice: true }));
}

navigateToRuntime(): void {
this.route.navigate([Routes.Testing]);
this.testRunService.setIsOpenStartTestrun(true);
this.appStore.setIsOpenStartTestrun();
}

async closeSetting(hasDevices: boolean): Promise<void> {
Expand Down
Loading

0 comments on commit 78ddca7

Please sign in to comment.