chore(ui): reduce warnings in test (#926)

springwolf-ui/src/app/app.component.ts

@@ -12,16 +12,7 @@ import { MatIconRegistry } from "@angular/material/icon";
 export class AppComponent implements OnInit {
   isNewUi: boolean = true;
 
-  constructor(
-    private iconRegistry: MatIconRegistry,
-    private sanitizer: DomSanitizer,
-    private uiService: UiService
-  ) {
-    this.iconRegistry.addSvgIcon(
-      "github",
-      this.sanitizer.bypassSecurityTrustResourceUrl("assets/github.svg")
-    );
-  }
+  constructor(private uiService: UiService) {}
 
   ngOnInit() {
     this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value));

springwolf-ui/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { SchemaNewComponent } from "./components/new/schema/schema.component";
 import { ServersNewComponent } from "./components/new/servers/servers.component";
 import { SchemasNewComponent } from "./components/new/schemas/schemas.component";
 import { RangeNewComponent } from "./components/new/schema/range/range.component";
+import { AssetService, IAssetService } from "./service/asset.service";
 
 @NgModule({
   imports: [],
@@ -86,6 +87,7 @@ export const providers = [
       ),
   provideMarkdown(),
 
+  { provide: IAssetService, useClass: AssetService },
   AsyncApiService,
   AsyncApiMapperService,
   { provide: INotificationService, useClass: NotificationService },

springwolf-ui/src/app/components/header/header.component.spec.ts

@@ -5,25 +5,26 @@ import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { render } from "@testing-library/angular";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import { mockedAsyncApiService } from "../../service/mock/mock-asyncapi.service";
-import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
+import { IAssetService } from "../../service/asset.service";
+import { mockedAssetService } from "../../service/mock/mock-asset.service";
+import { MockMatIcon } from "../mock-components.spec";
 
 describe("HeaderComponent", () => {
   beforeEach(async () => {
     await render(HeaderComponent, {
-      imports: [
-        MatToolbarModule,
-        MatSlideToggleModule,
-        MatIconModule,
-        MatMenuModule,
-      ],
+      declarations: [MockMatIcon],
+      imports: [MatToolbarModule, MatSlideToggleModule, MatMenuModule],
       providers: [
+        { provide: IAssetService, useValue: mockedAssetService },
         { provide: AsyncApiService, useValue: mockedAsyncApiService },
       ],
     });
   });
 
   it("should create the component", () => {
     expect(screen).toBeTruthy();
+
+    expect(mockedAssetService.load).toHaveBeenCalled();
   });
 });

springwolf-ui/src/app/components/header/header.component.ts

@@ -2,6 +2,7 @@
 import { Component, OnInit } from "@angular/core";
 import { UiService } from "../../service/ui.service";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
+import { IAssetService } from "../../service/asset.service";
 
 @Component({
   selector: "app-header",
@@ -15,10 +16,13 @@ export class HeaderComponent implements OnInit {
 
   constructor(
     private uiService: UiService,
-    private asyncApiService: AsyncApiService
+    private asyncApiService: AsyncApiService,
+    private assetService: IAssetService
   ) {}
 
   ngOnInit() {
+    this.assetService.load();
+
     this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value));
     this.uiService.isShowBindings$.subscribe(
       (value) => (this.isShowBindings = value)

springwolf-ui/src/app/components/mock-components.spec.ts

@@ -43,3 +43,8 @@ export class MockPrismEditorComponent {
 export class MockAppSchemaNewComponent {
   schema = input.required<Schema>();
 }
+
+@Component({ selector: "mat-icon", template: "" })
+export class MockMatIcon {
+  svgIcon = input.required<string>();
+}

springwolf-ui/src/app/components/new/sidenav/sidenav.component.html

@@ -11,7 +11,7 @@
           <mat-icon *ngIf="link.icon" fontIcon="{{ link.icon }}" />
           <b>
             <a [href]="link.href">
-              @for (linkEl of link.name; track linkEl) {{{linkEl}}&#x200B;}
+              @for (linkEl of link.name; track $index) {{{linkEl}}&#x200B;}
             </a>
           </b>
         </span>
@@ -24,7 +24,7 @@
           >
             <span>
               <a [href]="child.href">
-                @for (linkEl of child.name; track linkEl)
+                @for (linkEl of child.name; track $index)
                 {{{linkEl}}&#x200B;}
               </a>
               @for (childTag of child.tags; track childTag) {
@@ -43,7 +43,7 @@
               >
                 <span>
                   <a [href]="subchild.href">
-                    @for (linkEl of subchild.name; track linkEl)
+                    @for (linkEl of subchild.name; track $index)
                     {{{linkEl}}&#x200B;}
                   </a>
 

springwolf-ui/src/app/service/asset.service.ts

@@ -0,0 +1,23 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { Injectable } from "@angular/core";
+import { MatIconRegistry } from "@angular/material/icon";
+import { DomSanitizer } from "@angular/platform-browser";
+
+export abstract class IAssetService {
+  abstract load(): void;
+}
+
+@Injectable()
+export class AssetService implements IAssetService {
+  constructor(
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  public load() {
+    this.iconRegistry.addSvgIcon(
+      "github",
+      this.sanitizer.bypassSecurityTrustResourceUrl("assets/github.svg")
+    );
+  }
+}

springwolf-ui/src/app/service/mock/mock-asset.service.ts

@@ -0,0 +1,9 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { of } from "rxjs";
+import { AsyncApiMapperService } from "../asyncapi/asyncapi-mapper.service";
+import { exampleSchemas } from "./example-data";
+import { IAssetService } from "../asset.service";
+
+export const mockedAssetService: IAssetService = {
+  load: jest.fn(),
+};