fix unit test and linting issues

Author: Klath123

src/app/app.component.html

@@ -3,39 +3,33 @@
     <mat-icon>menu</mat-icon>
   </button>
   <a routerLink="/" class="logo">
-    <app-logo class = "logo-icon"></app-logo>
+    <app-logo class="logo-icon"></app-logo>
   </a>
-  <div class = "title-container">
-  <div class="tag-line">
-    <div class="tag-title">
-      {{ title || defaultTitle }}
+  <div class="title-container">
+    <div class="tag-line">
+      <div class="tag-title">
+        {{ title || defaultTitle }}
+      </div>
+      <div class="tag-subtitle" *ngIf="subtitle">
+        {{ subtitle }}
+      </div>
     </div>
-    <div class="tag-subtitle" *ngIf="subtitle">
-      {{ subtitle }}
-    </div>
-  </div>
   </div>
   <span class="spacer"></span>
   <a
-      target="_blank"
-      class="github-fork-ribbon"
-      href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
-      data-ribbon="Fork me on GitHub"
-      title="Fork me on GitHub">
-      Fork me on GitHub
-    </a>
+    target="_blank"
+    class="github-fork-ribbon"
+    href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
+    data-ribbon="Fork me on GitHub"
+    title="Fork me on GitHub">
+    Fork me on GitHub
+  </a>
 </mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
-  <mat-sidenav
-    mode="side"
-    opened
-    class="sidenav"
-    [style.width]="sidenavWidth">
+  <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
     <app-sidenav-buttons></app-sidenav-buttons>
   </mat-sidenav>
-  <mat-sidenav-content
-    class="content"
-    [style.margin-left]="sidenavWidth">
+  <mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
     <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/app.component.spec.ts

@@ -1,15 +1,46 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { ThemeService } from './service/theme.service';
+import { TitleService } from './service/title.service';
+
+class MockThemeService {
+  initTheme() {}
+}
+
+class MockTitleService {
+  titleInfo$ = of({
+    dimension: 'Test Title',
+    level: '1'
+  });
+}
 
 describe('AppComponent', () => {
+
   let app: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
       declarations: [AppComponent],
+      imports: [
+        RouterTestingModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        BrowserAnimationsModule
+      ],
+      providers: [
+        { provide: ThemeService, useClass: MockThemeService },
+        { provide: TitleService, useClass: MockTitleService }
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   });
 
@@ -24,10 +55,9 @@ describe('AppComponent', () => {
   });
 
   it('check for fork me on github ribbon generation', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const HTMLElement: HTMLElement = fixture.nativeElement;
-    var divTag = HTMLElement.querySelector('div')!;
-    var aTag = divTag.querySelector('a')!;
-    expect(aTag.textContent).toContain('GitHub');
+    const compiled = fixture.nativeElement as HTMLElement;
+    const githubLink = compiled.querySelector('.github-fork-ribbon');
+    expect(githubLink).not.toBeNull();
+    expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub');
   });
 });

src/app/app.component.ts

@@ -26,13 +26,11 @@ export class AppComponent implements OnInit, OnDestroy {
     if (menuState === 'false') {
       setTimeout(() => {
         this.menuIsOpen = false;
-         this.sidenavWidth = '0px';
+        this.sidenavWidth = '0px';
       }, 600);
+    } else {
+      this.sidenavWidth = '250px';
     }
-    else {
-    this.sidenavWidth = '250px';
-  }
-
 
     // Subscribe to title changes
     this.titleService.titleInfo$.pipe(takeUntil(this.destroy$)).subscribe(titleInfo => {
@@ -48,8 +46,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   toggleMenu(): void {
     this.menuIsOpen = !this.menuIsOpen;
-     this.sidenavWidth = this.menuIsOpen ? '250px' : '0px';
+    this.sidenavWidth = this.menuIsOpen ? '250px' : '0px';
     localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
   }
-  
 }

src/app/app.module.ts

@@ -6,8 +6,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule } from
-'./material/material.module';
+import { MaterialModule } from './material/material.module';
 import { CircularHeatmapComponent } from './pages/circular-heatmap/circular-heatmap.component';
 import { MatrixComponent } from './pages/matrix/matrix.component';
 import { MappingComponent } from './pages/mapping/mapping.component';
@@ -77,4 +76,4 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {}