68067: Add unsubscribes on open subscriptions in menu component

src/app/shared/menu/menu.component.spec.ts

@@ -12,7 +12,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MenuItemType } from './initial-menus-state';
 import { LinkMenuItemModel } from './menu-item/models/link.model';
 
-fdescribe('MenuComponent', () => {
+describe('MenuComponent', () => {
   let comp: MenuComponent;
   let fixture: ComponentFixture<MenuComponent>;
   let menuService: MenuService;

src/app/shared/menu/menu.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from './menu.service';
 import { MenuID } from './initial-menus-state';
@@ -9,6 +9,7 @@ import { hasNoValue, hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs/internal/Subscription';
 
 /**
  * A basic implementation of a MenuComponent
@@ -17,7 +18,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
   selector: 'ds-menu',
   template: ''
 })
-export class MenuComponent implements OnInit {
+export class MenuComponent implements OnInit, OnDestroy {
   /**
    * The ID of the Menu (See MenuID)
    */
@@ -63,6 +64,12 @@ export class MenuComponent implements OnInit {
    */
   private previewTimer;
 
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  subs: Subscription[] = [];
+
   constructor(protected menuService: MenuService,
               protected injector: Injector,
               protected route: ActivatedRoute,
@@ -78,19 +85,19 @@ export class MenuComponent implements OnInit {
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
     this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged((x, y) => JSON.stringify(x) === JSON.stringify(y)));
-    this.sections.subscribe((sections: MenuSection[]) => {
+    this.subs.push(this.sections.subscribe((sections: MenuSection[]) => {
       sections.forEach((section: MenuSection) => {
         this.sectionInjectors.set(section.id, this.getSectionDataInjector(section));
         this.getSectionComponent(section).pipe(first()).subscribe((constr) => this.sectionComponents.set(section.id, constr));
       });
-    });
+    }));
   }
 
   /**
    * Initialize all menu sections and add them to the menu's store
    */
   initSections() {
-    this.router.events.pipe(
+    this.subs.push(this.router.events.pipe(
       filter((e): e is NavigationEnd => e instanceof NavigationEnd),
       tap(() => this.menuService.resetSections(this.menuID)),
       map(() => this.resolveMenuSections(this.route.root))
@@ -99,7 +106,7 @@ export class MenuComponent implements OnInit {
       sections.forEach((section: MenuSection) => {
         this.menuService.addSection(this.menuID, section);
       });
-    });
+    }));
   }
 
   /**
@@ -212,4 +219,13 @@ export class MenuComponent implements OnInit {
       parent: this.injector
     });
   }
+
+  /**
+   * Unsubscribe from open subscriptions
+   */
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription) => hasValue(subscription))
+      .forEach((subscription) => subscription.unsubscribe());
+  }
 }