added all tests

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts

@@ -1,14 +1,34 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { MenuService } from '../../../shared/menu/menu.service';
+import { MenuServiceStub } from '../../../shared/testing/menu-service-stub';
+import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service-stub';
+import { Component } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AdminSidebarSectionComponent } from './admin-sidebar-section.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
 
 describe('AdminSidebarSectionComponent', () => {
   let component: AdminSidebarSectionComponent;
   let fixture: ComponentFixture<AdminSidebarSectionComponent>;
+  const menuService = new MenuServiceStub();
+  const iconString = 'test';
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminSidebarSectionComponent ]
+      imports: [NoopAnimationsModule, RouterTestingModule],
+      declarations: [AdminSidebarSectionComponent, TestComponent],
+      providers: [
+        { provide: 'sectionDataProvider', useValue: { model: { link: 'google.com' }, icon: iconString } },
+        { provide: MenuService, useValue: menuService },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+      ]
+    }).overrideComponent(AdminSidebarSectionComponent, {
+      set: {
+        entryComponents: [TestComponent]
+      }
     })
       .compileComponents();
   }));
@@ -16,10 +36,24 @@ describe('AdminSidebarSectionComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AdminSidebarSectionComponent);
     component = fixture.componentInstance;
+    spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set the right icon', () => {
+    const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
+    expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
   });
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+}

src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts

@@ -9,36 +9,38 @@ import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service-stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service-stub';
 import { AuthService } from '../../core/auth/auth.service';
-import { NgComponentOutlet } from '@angular/common';
-import { MockDirective } from 'ng-mocks';
 
-fdescribe('AdminSidebarComponent', () => {
+import { of as observableOf } from 'rxjs';
+import { By } from '@angular/platform-browser';
+
+describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
   let fixture: ComponentFixture<AdminSidebarComponent>;
-  let menuService: AdminSidebarComponent;
+  const menuService = new MenuServiceStub();
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule],
-      declarations: [AdminSidebarComponent, MockDirective(NgComponentOutlet)],
+      declarations: [AdminSidebarComponent],
       providers: [
         { provide: Injector, useValue: {} },
-        { provide: MenuService, useClass: MenuServiceStub },
+        { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: AuthService, useClass: AuthServiceStub }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(AdminSidebarComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
+      set: {
+        changeDetection: ChangeDetectionStrategy.Default,
+      }
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([]));
     fixture = TestBed.createComponent(AdminSidebarComponent);
     comp = fixture.componentInstance; // SearchPageComponent test instance
-    menuService = (comp as any).menuService;
+    comp.sections = observableOf([]);
-    // spyOn(comp as any, 'getSectionDataInjector').and.returnValue(new Map());
-    // spyOn(comp as any, 'getSectionComponent').and.returnValue(observableOf(MenuSection));
     fixture.detectChanges();
   });
 
@@ -60,19 +62,80 @@ fdescribe('AdminSidebarComponent', () => {
         comp.startSlide({ toState: 'collapsed' } as any);
       });
 
-      it('should set the sidebarClosed to false', () => {
+      it('should set the sidebarOpen to false', () => {
-        expect(comp.sidebarClosed).toBeTruthy();
+        expect(comp.sidebarOpen).toBeFalsy();
       })
     })
   });
 
-  // describe('expand', () => {
+  describe('finishSlide', () => {
-  //   beforeEach(() => {
+    describe('when expanding', () => {
-  //     spyOn(menuService, 'expandMenu');
+      beforeEach(() => {
-  //     comp.expand(new Event('click'));
+        comp.sidebarClosed = true;
-  //   });
+        comp.startSlide({ fromState: 'expanded' } as any);
-  //   it('should trigger the expandMenu function on the menu service', () => {
+      });
-  //     expect(menuService.expandMenu).toHaveBeenCalledWith(comp.menuID);
+
-  //   })
+      it('should set the sidebarClosed to true', () => {
-  // });
+        expect(comp.sidebarClosed).toBeTruthy();
+      })
+    });
+
+    describe('when collapsing', () => {
+      beforeEach(() => {
+        comp.sidebarClosed = false;
+        comp.startSlide({ fromState: 'collapsed' } as any);
+      });
+
+      it('should set the sidebarOpen to true', () => {
+        expect(comp.sidebarOpen).toBeTruthy();
+      })
+    })
+  });
+
+  describe('when the collapse icon is clicked', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'toggleMenu');
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('a.shortcut-icon'));
+      sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}});
+    });
+
+    it('should call toggleMenu on the menuService', () => {
+      expect(menuService.toggleMenu).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the collapse link is clicked', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'toggleMenu');
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('.sidebar-collapsible')).query(By.css('a'));
+      sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}});
+    });
+
+    it('should call toggleMenu on the menuService', () => {
+      expect(menuService.toggleMenu).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the the mouse enters the nav tag', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'expandMenuPreview');
+      const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
+      sidebarToggler.triggerEventHandler('mouseenter', {preventDefault: () => {/**/}});
+    });
+
+    it('should call expandPreview on the menuService', () => {
+      expect(menuService.expandMenuPreview).toHaveBeenCalled();
+    });
+  });
+  describe('when the the mouse leaves the nav tag', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'collapseMenuPreview');
+      const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
+      sidebarToggler.triggerEventHandler('mouseleave', {preventDefault: () => {/**/}});
+    });
+
+    it('should call collapseMenuPreview on the menuService', () => {
+      expect(menuService.collapseMenuPreview).toHaveBeenCalled();
+    });
+  });
 });

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts

@@ -1,25 +1,83 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
+import { MenuService } from '../../../shared/menu/menu.service';
+import { MenuServiceStub } from '../../../shared/testing/menu-service-stub';
+import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service-stub';
+import { of as observableOf } from 'rxjs';
+import { Component } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
 
 describe('ExpandableAdminSidebarSectionComponent', () => {
   let component: ExpandableAdminSidebarSectionComponent;
   let fixture: ComponentFixture<ExpandableAdminSidebarSectionComponent>;
-
+  const menuService = new MenuServiceStub();
+  const iconString = 'test';
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ExpandableAdminSidebarSectionComponent ]
+      imports: [NoopAnimationsModule],
+      declarations: [ExpandableAdminSidebarSectionComponent, TestComponent],
+      providers: [
+        { provide: 'sectionDataProvider', useValue: {icon: iconString} },
+        { provide: MenuService, useValue: menuService },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+      ]
+    }).overrideComponent(ExpandableAdminSidebarSectionComponent, {
+      set: {
+        entryComponents: [TestComponent]
+      }
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
+    spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([]));
     fixture = TestBed.createComponent(ExpandableAdminSidebarSectionComponent);
     component = fixture.componentInstance;
+    spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set the right icon', () => {
+    const icon = fixture.debugElement.query(By.css('.icon-wrapper')).query(By.css('i.fas'));
+    expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
   });
+
+  describe('when the icon is clicked', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'toggleActiveSection');
+      const sidebarToggler = fixture.debugElement.query(By.css('a.shortcut-icon'));
+      sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}});
+    });
+
+    it('should call toggleActiveSection on the menuService', () => {
+      expect(menuService.toggleActiveSection).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the header text is clicked', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'toggleActiveSection');
+      const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-collapsible')).query(By.css('a'));
+      sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}});
+    });
+
+    it('should call toggleActiveSection on the menuService', () => {
+      expect(menuService.toggleActiveSection).toHaveBeenCalled();
+    });
+  });
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+}

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts

@@ -58,7 +58,6 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id);
     this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);

src/app/app.component.spec.ts

@@ -35,11 +35,18 @@ import { AngularticsMock } from './shared/mocks/mock-angulartics.service';
 import { AuthServiceMock } from './shared/mocks/mock-auth.service';
 import { AuthService } from './core/auth/auth.service';
 import { Router } from '@angular/router';
+import { MenuService } from './shared/menu/menu.service';
+import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableServiceStub } from './shared/testing/css-variable-service-stub';
+import { MenuServiceStub } from './shared/testing/menu-service-stub';
+import { HostWindowService } from './shared/host-window.service';
+import { HostWindowServiceStub } from './shared/testing/host-window-service-stub';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 let de: DebugElement;
 let el: HTMLElement;
+const menuService = new MenuServiceStub();
 
 describe('App component', () => {
 
@@ -64,6 +71,9 @@ describe('App component', () => {
         { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsMock() },
         { provide: AuthService, useValue: new AuthServiceMock() },
         { provide: Router, useValue: {} },
+        { provide: MenuService, useValue: menuService },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
         AppComponent
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -75,7 +85,6 @@ describe('App component', () => {
     fixture = TestBed.createComponent(AppComponent);
 
     comp = fixture.componentInstance; // component test instance
-
     // query for the <div class='outer-wrapper'> by CSS element selector
     de = fixture.debugElement.query(By.css('div.outer-wrapper'));
     el = de.nativeElement;

src/app/app.component.ts

@@ -91,7 +91,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
 
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
-    //TODO FIX THIS: 
     this.slideSidebarOver = combineLatestObservable(sidebarCollapsed, this.windowService.isXsOrSm())
       .pipe(
         map(([collapsed, mobile]) => collapsed || mobile)
@@ -99,7 +98,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   private storeCSSVariables() {
-    const vars = variables.locals;
+    const vars = variables.locals || {};
     Object.keys(vars).forEach((name: string) => {
       this.cssService.addCSSVariable(name, vars[name]);
     })

src/app/header/header.component.spec.ts

@@ -0,0 +1,58 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { of as observableOf } from 'rxjs';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuServiceStub } from '../shared/testing/menu-service-stub';
+import { HeaderComponent } from './header.component';
+
+let comp: HeaderComponent;
+let fixture: ComponentFixture<HeaderComponent>;
+
+describe('HeaderComponent', () => {
+  const menuService = new MenuServiceStub();
+
+  // async beforeEach
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        NoopAnimationsModule,
+        ReactiveFormsModule],
+      declarations: [HeaderComponent],
+      providers: [
+        { provide: MenuService, useValue: menuService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();  // compile template and css
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([]));
+
+    fixture = TestBed.createComponent(HeaderComponent);
+
+    comp = fixture.componentInstance;
+
+  });
+
+  describe('when the toggle button is clicked', () => {
+
+    beforeEach(() => {
+      spyOn(menuService, 'toggleMenu');
+      const navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler'));
+      navbarToggler.triggerEventHandler('click', null);
+    });
+
+    it('should call toggleMenu on the menuService', () => {
+      expect(menuService.toggleMenu).toHaveBeenCalled();
+    });
+
+  });
+});

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts

@@ -1,25 +1,176 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
+import { By } from '@angular/platform-browser';
+import { MenuServiceStub } from '../../shared/testing/menu-service-stub';
+import { Component } from '@angular/core';
+import { of as observableOf } from 'rxjs';
+import { HostWindowService } from '../../shared/host-window.service';
+import { MenuService } from '../../shared/menu/menu.service';
+import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ExpandableNavbarSectionComponent', () => {
   let component: ExpandableNavbarSectionComponent;
   let fixture: ComponentFixture<ExpandableNavbarSectionComponent>;
+  const menuService = new MenuServiceStub();
 
+  describe('on larger screens', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-      declarations: [ ExpandableNavbarSectionComponent ]
+        imports: [NoopAnimationsModule],
+        declarations: [ExpandableNavbarSectionComponent, TestComponent],
+        providers: [
+          { provide: 'sectionDataProvider', useValue: {} },
+          { provide: MenuService, useValue: menuService },
+          { provide: HostWindowService, useValue: new HostWindowServiceStub(800) }
+        ]
+      }).overrideComponent(ExpandableNavbarSectionComponent, {
+        set: {
+          entryComponents: [TestComponent]
+        }
       })
         .compileComponents();
     }));
 
     beforeEach(() => {
+      spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([]));
+
       fixture = TestBed.createComponent(ExpandableNavbarSectionComponent);
       component = fixture.componentInstance;
+      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
       fixture.detectChanges();
     });
 
     it('should create', () => {
       expect(component).toBeTruthy();
     });
+
+    describe('when the mouse enters the section header', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'activateSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown'));
+        sidebarToggler.triggerEventHandler('mouseenter', {
+          preventDefault: () => {/**/
+          }
         });
+      });
+
+      it('should call activateSection on the menuService', () => {
+        expect(menuService.activateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('when the mouse leaves the section header', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'deactivateSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown'));
+        sidebarToggler.triggerEventHandler('mouseleave', {
+          preventDefault: () => {/**/
+          }
+        });
+      });
+
+      it('should call deactivateSection on the menuService', () => {
+        expect(menuService.deactivateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('when a click occurs on the section header', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'toggleActiveSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a'));
+        sidebarToggler.triggerEventHandler('click', {
+          preventDefault: () => {/**/
+          }
+        });
+      });
+
+      it('should not call toggleActiveSection on the menuService', () => {
+        expect(menuService.toggleActiveSection).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('on smaller, mobile screens', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [NoopAnimationsModule],
+        declarations: [ExpandableNavbarSectionComponent, TestComponent],
+        providers: [
+          { provide: 'sectionDataProvider', useValue: {} },
+          { provide: MenuService, useValue: menuService },
+          { provide: HostWindowService, useValue: new HostWindowServiceStub(300) }
+        ]
+      }).overrideComponent(ExpandableNavbarSectionComponent, {
+        set: {
+          entryComponents: [TestComponent]
+        }
+      })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+      spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([]));
+
+      fixture = TestBed.createComponent(ExpandableNavbarSectionComponent);
+      component = fixture.componentInstance;
+      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      fixture.detectChanges();
+    });
+
+    describe('when the mouse enters the section header', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'activateSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown'));
+        sidebarToggler.triggerEventHandler('mouseenter', {
+          preventDefault: () => {/**/
+          }
+        });
+      });
+
+      it('should not call activateSection on the menuService', () => {
+        expect(menuService.activateSection).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when the mouse leaves the section header', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'deactivateSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown'));
+        sidebarToggler.triggerEventHandler('mouseleave', {
+          preventDefault: () => {/**/
+          }
+        });
+      });
+
+      it('should not call deactivateSection on the menuService', () => {
+        expect(menuService.deactivateSection).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when a click occurs on the section header link', () => {
+      beforeEach(() => {
+        spyOn(menuService, 'toggleActiveSection');
+        const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a'));
+        sidebarToggler.triggerEventHandler('click', {
+          preventDefault: () => {/**/
+          }
+        });
+      });
+
+      it('should call toggleActiveSection on the menuService', () => {
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
+      });
+    });
+  });
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+}

src/app/navbar/navbar-section/navbar-section.component.spec.ts

@@ -1,21 +1,42 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NavbarSectionComponent } from './navbar-section.component';
+import { HostWindowService } from '../../shared/host-window.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MenuService } from '../../shared/menu/menu.service';
+import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub';
+import { Component } from '@angular/core';
+import { MenuServiceStub } from '../../shared/testing/menu-service-stub';
+import { of as observableOf } from 'rxjs';
 
 describe('NavbarSectionComponent', () => {
   let component: NavbarSectionComponent;
   let fixture: ComponentFixture<NavbarSectionComponent>;
+  const menuService = new MenuServiceStub();
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NavbarSectionComponent ]
+      imports: [NoopAnimationsModule],
+      declarations: [NavbarSectionComponent, TestComponent],
+      providers: [
+        { provide: 'sectionDataProvider', useValue: {} },
+        { provide: MenuService, useValue: menuService },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(800) }
+      ]
+    }).overrideComponent(NavbarSectionComponent, {
+      set: {
+        entryComponents: [TestComponent]
+      }
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
+    spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([]));
+
     fixture = TestBed.createComponent(NavbarSectionComponent);
     component = fixture.componentInstance;
+    spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
     fixture.detectChanges();
   });
 
@@ -23,3 +44,10 @@ describe('NavbarSectionComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+}

src/app/navbar/navbar.component.spec.ts

@@ -1,8 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { Store, StoreModule } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { of as observableOf } from 'rxjs';
 
@@ -10,34 +7,29 @@ import { NavbarComponent } from './navbar.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HostWindowService } from '../shared/host-window.service';
 import { HostWindowServiceStub } from '../shared/testing/host-window-service-stub';
-import { RouterStub } from '../shared/testing/router-stub';
-import { Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import * as ngrx from '@ngrx/store';
+import { Injector, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MenuService } from '../shared/menu/menu.service';
-import { ToggleMenuAction } from '../shared/menu/menu.actions';
+import { MenuServiceStub } from '../shared/testing/menu-service-stub';
-import { MenuID } from '../shared/menu/initial-menus-state';
-import { MenusState } from '../shared/menu/menu.reducer';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
-let store: Store<MenusState>;
 
 describe('NavbarComponent', () => {
+  const menuService = new MenuServiceStub();
 
   // async beforeEach
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        StoreModule.forRoot({}),
         TranslateModule.forRoot(),
-        NgbCollapseModule.forRoot(),
         NoopAnimationsModule,
         ReactiveFormsModule],
       declarations: [NavbarComponent],
       providers: [
+        { provide: Injector, useValue: {} },
+        { provide: MenuService, useValue: menuService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
-        { provide: Router, useClass: RouterStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
@@ -46,63 +38,15 @@ describe('NavbarComponent', () => {
 
   // synchronous beforeEach
   beforeEach(() => {
+    spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([]));
+
     fixture = TestBed.createComponent(NavbarComponent);
 
     comp = fixture.componentInstance;
 
-    store = fixture.debugElement.injector.get(Store) as Store<MenusState>;
-    spyOn(store, 'dispatch');
   });
 
-  describe('when the toggle button is clicked', () => {
+  it('should create', () => {
-
+    expect(comp).toBeTruthy();
-    beforeEach(() => {
-      const navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler'));
-      navbarToggler.triggerEventHandler('click', null);
   });
-
-    it('should dispatch a NavbarToggleAction', () => {
-      expect(store.dispatch).toHaveBeenCalledWith(new ToggleMenuAction(MenuID.PUBLIC));
-    });
-
-  });
-
-  describe('when navCollapsed in the store is true', () => {
-    let menu: HTMLElement;
-
-    beforeEach(() => {
-      menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement;
-      spyOnProperty(ngrx, 'select').and.callFake(() => {
-        return () => {
-          return () => observableOf({ navCollapsed: true })
-        };
-      });
-      fixture.detectChanges();
-    });
-
-    it('should close the menu', () => {
-      expect(menu.classList).not.toContain('show');
-    });
-
-  });
-
-  describe('when navCollapsed in the store is false', () => {
-    let menu: HTMLElement;
-
-    beforeEach(() => {
-      menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement;
-      spyOnProperty(ngrx, 'select').and.callFake(() => {
-        return () => {
-          return () => observableOf(false)
-        };
-      });
-      fixture.detectChanges();
-    });
-
-    it('should open the menu', () => {
-      expect(menu.classList).toContain('show');
-    });
-
-  });
-
 });

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -22,8 +22,6 @@
   </li>
   <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
     <a id="logoutLink" routerLink="/logout" routerLinkActive="active" class="px-1"><i class="fas fa-user-circle fa-lg fa-fw"></i><span class="sr-only">(current)</span></a>
-
-    <!--<a id="logoutLink" routerLink="/logout" routerLinkActive="active"><i class="fas fa-sign-out-alt fa-fw" aria-hidden="true"></i> {{ 'nav.logout' | translate }}<span class="sr-only">(current)</span></a>-->
   </li>
 </ul>
 

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -229,7 +229,7 @@ describe('AuthNavMenuComponent', () => {
           component = null;
         });
         it('should render logout dropdown menu', () => {
-          const logoutDropdownMenu = deNavMenuItem.query(By.css('div[id=logoutDropdownMenu]'));
+          const logoutDropdownMenu = deNavMenuItem.query(By.css('ul[id=logoutDropdownMenu]'));
           expect(logoutDropdownMenu.nativeElement).toBeDefined();
         });
       })

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

@@ -148,7 +148,7 @@ describe('ChipsComponent test suite', () => {
           name: 'mainField',
           config: {
             withAuthority:{
-              style: 'fa-user'
+              style: 'fas-user'
             }
           }
         },
@@ -156,10 +156,10 @@ describe('ChipsComponent test suite', () => {
           name: 'relatedField',
           config: {
             withAuthority:{
-              style: 'fa-user-alt'
+              style: 'fas-user-alt'
             },
             withoutAuthority:{
-              style: 'fa-user-alt text-muted'
+              style: 'fas-user-alt text-muted'
             }
           }
         },
@@ -167,10 +167,10 @@ describe('ChipsComponent test suite', () => {
           name: 'otherRelatedField',
           config: {
             withAuthority:{
-              style: 'fa-user-alt'
+              style: 'fas-user-alt'
             },
             withoutAuthority:{
-              style: 'fa-user-alt text-muted'
+              style: 'fas-user-alt text-muted'
             }
           }
         },
@@ -190,7 +190,7 @@ describe('ChipsComponent test suite', () => {
 
     it('should show icon for every field that has a configured icon', () => {
       const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-      const icons = de.queryAll(By.css('i.fa'));
+      const icons = de.queryAll(By.css('i.fas'));
 
       expect(icons.length).toBe(4);
 
@@ -198,14 +198,14 @@ describe('ChipsComponent test suite', () => {
 
     it('should has text-muted on icon style when field value had not authority', () => {
       const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-      const icons = de.queryAll(By.css('i.fa'));
+      const icons = de.queryAll(By.css('i.fas'));
 
       expect(hasClass(icons[2].nativeElement, 'text-muted')).toBeTruthy();
     });
 
     it('should show tooltip on mouse over an icon', () => {
       const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-      const icons = de.queryAll(By.css('i.fa'));
+      const icons = de.queryAll(By.css('i.fas'));
 
       icons[0].triggerEventHandler('mouseover', null);
 

src/app/shared/host-window.service.spec.ts

@@ -4,22 +4,22 @@ import { of as observableOf } from 'rxjs';
 import { AppState } from '../app.reducer';
 
 import { HostWindowService, WidthCategory } from './host-window.service';
+import { CSSVariableServiceStub } from './testing/css-variable-service-stub';
+describe('HostWindowService', () => {
+  let service: HostWindowService;
+  let store: Store<AppState>;
   enum GridBreakpoint {
     SM_MIN = 576,
     MD_MIN = 768,
     LG_MIN = 992,
     XL_MIN = 1200
-}
+  };
-
-describe('HostWindowService', () => {
-  let service: HostWindowService;
-  let store: Store<AppState>;
 
   describe('', () => {
     beforeEach(() => {
       const _initialState = { hostWindow: { width: 1600, height: 770 } };
       store = new Store<AppState>(observableOf(_initialState), undefined, undefined);
-      service = new HostWindowService(store, null);
+      service = new HostWindowService(store, new CSSVariableServiceStub() as any);
     });
 
     it('isXs() should return false with width = 1600', () => {
@@ -55,7 +55,7 @@ describe('HostWindowService', () => {
     beforeEach(() => {
       const _initialState = { hostWindow: { width: 1100, height: 770 } };
       store = new Store<AppState>(observableOf(_initialState), undefined, undefined);
-      service = new HostWindowService(store, null);
+      service = new HostWindowService(store, new CSSVariableServiceStub() as any);
     });
 
     it('isXs() should return false with width = 1100', () => {
@@ -91,7 +91,7 @@ describe('HostWindowService', () => {
     beforeEach(() => {
       const _initialState = { hostWindow: { width: 800, height: 770 } };
       store = new Store<AppState>(observableOf(_initialState), undefined, undefined);
-      service = new HostWindowService(store, null);
+      service = new HostWindowService(store, new CSSVariableServiceStub() as any);
     });
 
     it('isXs() should return false with width = 800', () => {
@@ -127,7 +127,7 @@ describe('HostWindowService', () => {
     beforeEach(() => {
       const _initialState = { hostWindow: { width: 600, height: 770 } };
       store = new Store<AppState>(observableOf(_initialState), undefined, undefined);
-      service = new HostWindowService(store, null);
+      service = new HostWindowService(store, new CSSVariableServiceStub() as any);
     });
 
     it('isXs() should return false with width = 600', () => {
@@ -163,7 +163,7 @@ describe('HostWindowService', () => {
     beforeEach(() => {
       const _initialState = { hostWindow: { width: 400, height: 770 } };
       store = new Store<AppState>(observableOf(_initialState), undefined, undefined);
-      service = new HostWindowService(store, null);
+      service = new HostWindowService(store, new CSSVariableServiceStub() as any);
     });
 
     it('isXs() should return true with width = 400', () => {
@@ -197,7 +197,7 @@ describe('HostWindowService', () => {
 
   describe('widthCategory', () => {
     beforeEach(() => {
-      service = new HostWindowService({} as Store<AppState>, null);
+      service = new HostWindowService({} as Store<AppState>,  new CSSVariableServiceStub() as any);
     });
 
     it('should call getWithObs to get the current width', () => {

src/app/shared/menu/menu.service.ts

@@ -3,7 +3,7 @@ import { MemoizedSelector, select, Store } from '@ngrx/store';
 import { MenuSection, MenuSectionIndex, MenuSections, MenusState, MenuState } from './menu.reducer';
 import { AppState, keySelector } from '../../app.reducer';
 import { MenuID } from './initial-menus-state';
-import { Observable } from 'rxjs/internal/Observable';
+import { Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import {
   ActivateMenuSectionAction,

src/app/shared/testing/css-variable-service-stub.ts

@@ -1,8 +1,23 @@
 import { Observable } from 'rxjs/internal/Observable';
 import { of as observableOf } from 'rxjs';
+const variables = {
+  smMin: '576px,',
+  mdMin: '768px,',
+  lgMin: '992px',
+  xlMin: '1200px',
+} as any;
 
 export class CSSVariableServiceStub {
   getVariable(name: string): Observable<string> {
     return observableOf('500px');
   }
+
+  getAllVariables(name: string): Observable<string> {
+    return observableOf(variables);
   }
+
+  addCSSVariable(name: string, value: string): void {
+    /**/
+  }
+}
+