fix: ToolbarService uses signals

FraunhoferIOSB · Jun 18, 2024 · 343fabb · 343fabb
1 parent 3e14728
commit 343fabb
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 72 deletions.
diff --git a/projects/aas-portal/src/app/main/main.component.html b/projects/aas-portal/src/app/main/main.component.html
@@ -17,7 +17,7 @@
       </button>
       <div class="collapse navbar-collapse" id="navbar">
         <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="navbar-nav me-auto">
-          @for (link of links; track link) {
+          @for (link of links(); track link) {
             <li [ngbNavItem]="link.id">
               <a ngbNavLink routerLink="{{link.url}}" routerLinkActive="active" skipLocationChange="true">{{link.name | translate}}</a>
             </li>
@@ -33,7 +33,7 @@
   </nav>
   <div class="container-fluid">
     <div class="btn-toolbar" role="toolbar">
-      <ng-container *ngTemplateOutlet="toolbarTemplate | async"></ng-container>
+      <ng-container *ngTemplateOutlet="toolbarTemplate()"></ng-container>
     </div>
     <fhg-notify class="toast-container position-fixed end-0 p-1" style="z-index: 1200;"></fhg-notify>
   </div>

diff --git a/projects/aas-portal/src/app/main/main.component.ts b/projects/aas-portal/src/app/main/main.component.ts
@@ -6,10 +6,10 @@
  *
  *****************************************************************************/
 
-import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild, model, signal } from '@angular/core';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { Observable, Subscription, first, map } from 'rxjs';
+import { first } from 'rxjs';
 import { AuthComponent, LocalizeComponent, NotifyComponent, WindowService } from 'aas-lib';
 import { ToolbarService } from '../toolbar.service';
 import { MainApiService } from './main-api.service';
@@ -47,9 +47,22 @@ export interface LinkDescriptor {
         AuthComponent,
     ],
 })
-export class MainComponent implements OnInit, OnDestroy {
-    private readonly subscription = new Subscription();
-    private readonly _links: LinkDescriptor[] = [
+export class MainComponent implements OnInit {
+    public constructor(
+        private readonly router: Router,
+        private readonly window: WindowService,
+        private readonly api: MainApiService,
+        private readonly toolbar: ToolbarService,
+    ) {}
+
+    @ViewChild('emptyToolbar', { read: TemplateRef })
+    public emptyToolbar!: TemplateRef<unknown>;
+
+    public readonly toolbarTemplate = this.toolbar.toolbarTemplate;
+
+    public readonly activeId = model(LinkId.START);
+
+    public readonly links = signal<LinkDescriptor[]>([
         {
             id: LinkId.START,
             name: 'CAPTION_START',
@@ -75,27 +88,7 @@ export class MainComponent implements OnInit, OnDestroy {
             name: 'CAPTION_ABOUT',
             url: '/about',
         },
-    ];
-
-    public constructor(
-        private readonly router: Router,
-        private readonly window: WindowService,
-        private readonly api: MainApiService,
-        private readonly toolbar: ToolbarService,
-    ) {
-        this.toolbarTemplate = this.toolbar.toolbarTemplate.pipe(map(value => this.nextToolbar(value)));
-    }
-
-    @ViewChild('emptyToolbar', { read: TemplateRef })
-    public emptyToolbar!: TemplateRef<unknown>;
-
-    public toolbarTemplate: Observable<TemplateRef<unknown> | null>;
-
-    public activeId = LinkId.START;
-
-    public get links(): LinkDescriptor[] {
-        return this._links;
-    }
+    ]).asReadonly();
 
     public ngOnInit(): void {
         const params = this.window.getQueryParams();
@@ -118,12 +111,4 @@ export class MainComponent implements OnInit, OnDestroy {
             this.router.navigate(['/start'], { skipLocationChange: true });
         }
     }
-
-    public ngOnDestroy(): void {
-        this.subscription.unsubscribe();
-    }
-
-    private nextToolbar(value: TemplateRef<unknown> | null): TemplateRef<unknown> {
-        return value ?? this.emptyToolbar;
-    }
 }
diff --git a/projects/aas-portal/src/app/toolbar.service.ts b/projects/aas-portal/src/app/toolbar.service.ts
@@ -6,26 +6,21 @@
  *
  *****************************************************************************/
 
-import { Injectable, TemplateRef } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Injectable, TemplateRef, signal } from '@angular/core';
 
 @Injectable({
     providedIn: 'root',
 })
 export class ToolbarService {
-    private readonly toolbarTemplate$ = new BehaviorSubject<TemplateRef<unknown> | null>(null);
+    private _toolbarTemplate = signal<TemplateRef<unknown> | null>(null);
 
-    public constructor() {
-        this.toolbarTemplate = this.toolbarTemplate$.asObservable();
-    }
-
-    public readonly toolbarTemplate: Observable<TemplateRef<unknown> | null>;
+    public readonly toolbarTemplate = this._toolbarTemplate.asReadonly();
 
-    public set(value: TemplateRef<unknown>): void {
-        Promise.resolve().then(() => this.toolbarTemplate$.next(value));
+    public set(value: TemplateRef<unknown>): Promise<void> {
+        return Promise.resolve().then(() => this._toolbarTemplate.set(value));
     }
 
-    public clear(): void {
-        Promise.resolve().then(() => this.toolbarTemplate$.next(null));
+    public clear(): Promise<void> {
+        return Promise.resolve().then(() => this._toolbarTemplate.set(null));
     }
 }
diff --git a/projects/aas-portal/src/test/about/about.component.spec.ts b/projects/aas-portal/src/test/about/about.component.spec.ts
@@ -7,14 +7,14 @@
  *****************************************************************************/
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { PackageInfo } from 'common';
 
 import { AboutComponent } from '../../app/about/about.component';
 import { ServerApiService } from '../../app/about/server-api.service';
 import { ToolbarService } from '../../app/toolbar.service';
+import { signal } from '@angular/core';
 
 describe('AboutComponent', () => {
     let component: AboutComponent;
@@ -44,11 +44,10 @@ describe('AboutComponent', () => {
                 },
                 {
                     provide: ToolbarService,
-                    useValue: jasmine.createSpyObj<ToolbarService>(['set', 'clear'], { toolbarTemplate: of(null) }),
+                    useValue: jasmine.createSpyObj<ToolbarService>(['set', 'clear'], { toolbarTemplate: signal(null) }),
                 },
             ],
             imports: [
-                HttpClientTestingModule,
                 TranslateModule.forRoot({
                     loader: {
                         provide: TranslateLoader,

diff --git a/projects/aas-portal/src/test/main/main.component.spec.ts b/projects/aas-portal/src/test/main/main.component.spec.ts
@@ -9,14 +9,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { provideRouter } from '@angular/router';
-import { Subject, of } from 'rxjs';
+import { Subject } from 'rxjs';
 import { AASDocument } from 'common';
 import { AuthComponent, LocalizeComponent, NotifyComponent, WindowService } from 'aas-lib';
 
 import { MainComponent } from '../../app/main/main.component';
 import { MainApiService } from '../../app/main/main-api.service';
 import { ToolbarService } from '../../app/toolbar.service';
-import { Component, Input } from '@angular/core';
+import { Component, input, signal } from '@angular/core';
 
 @Component({
     selector: 'fhg-auth',
@@ -31,7 +31,7 @@ class TestAuthComponent {}
     standalone: true,
 })
 class TestLocalizeComponent {
-    @Input() public languages: string[] = ['en-us'];
+    public readonly languages = input(['en-us']);
 }
 
 @Component({
@@ -55,7 +55,7 @@ describe('MainComponent', () => {
         api = jasmine.createSpyObj<MainApiService>('ProjectService', ['getDocument']);
         window = jasmine.createSpyObj<WindowService>(['getQueryParams']);
         window.getQueryParams.and.returnValue(new URLSearchParams());
-        toolbar = jasmine.createSpyObj<ToolbarService>(['set', 'clear'], { toolbarTemplate: of(null) });
+        toolbar = jasmine.createSpyObj<ToolbarService>(['set', 'clear'], { toolbarTemplate: signal(null) });
 
         TestBed.configureTestingModule({
             providers: [
@@ -102,7 +102,7 @@ describe('MainComponent', () => {
     });
 
     it('provides a list of route links', function () {
-        expect(component.links).toBeDefined();
-        expect(component.links.map(link => link.url)).toEqual(['/start', '/aas', '/view', '/dashboard', '/about']);
+        expect(component.links()).toBeDefined();
+        expect(component.links().map(link => link.url)).toEqual(['/start', '/aas', '/view', '/dashboard', '/about']);
     });
 });
diff --git a/projects/aas-portal/src/test/start/start.component.spec.ts b/projects/aas-portal/src/test/start/start.component.spec.ts
@@ -112,7 +112,7 @@ describe('StartComponent', () => {
                 },
                 {
                     provide: ToolbarService,
-                    useValue: jasmine.createSpyObj<ToolbarService>(['clear', 'set'], { toolbarTemplate: of(null) }),
+                    useValue: jasmine.createSpyObj<ToolbarService>(['clear', 'set'], { toolbarTemplate: signal(null) }),
                 },
                 provideHttpClientTesting(),
                 provideRouter([]),

diff --git a/projects/aas-portal/src/test/toolbar.service.spec.ts b/projects/aas-portal/src/test/toolbar.service.spec.ts
@@ -7,9 +7,9 @@
  *****************************************************************************/
 
 import { TestBed } from '@angular/core/testing';
-import { ToolbarService } from '../app/toolbar.service';
 import { TemplateRef } from '@angular/core';
-import { first } from 'rxjs';
+
+import { ToolbarService } from '../app/toolbar.service';
 
 describe('ToolbarService', () => {
     let service: ToolbarService;
@@ -28,13 +28,10 @@ describe('ToolbarService', () => {
             service.clear();
         });
 
-        it('sets a new toolbar', function (done: DoneFn) {
+        it('sets a new toolbar', async () => {
             const template = jasmine.createSpyObj<TemplateRef<unknown>>(['createEmbeddedView']);
-            service.set(template);
-            service.toolbarTemplate.pipe(first(value => value !== null)).subscribe(value => {
-                expect(value).toEqual(template);
-                done();
-            });
+            await service.set(template);
+            expect(service.toolbarTemplate()).toEqual(template);
         });
     });
 
@@ -44,12 +41,9 @@ describe('ToolbarService', () => {
             service.set(template);
         });
 
-        it('removes a toolbar', function (done: DoneFn) {
-            service.clear();
-            service.toolbarTemplate.pipe(first(value => value === null)).subscribe(value => {
-                expect(value).toBeNull();
-                done();
-            });
+        it('removes a toolbar', async () => {
+            await service.clear();
+            expect(service.toolbarTemplate()).toBeNull();
         });
     });
 });