header component tests

src/app/app.component.ts

@@ -52,7 +52,7 @@ export class AppComponent implements OnDestroy, OnInit {
   @HostListener('window:resize', ['$event'])
   private onResize(event): void {
     this.store.dispatch(
-      new HostWindowResizeAction(event.target.innerWidth, event.target.innerHeight)
+      new HostWindowResizeAction(event.target.target.innerWidth, event.target.innerHeight)
     );
   }
 

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

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { HeaderComponent } from "./header.component";
+import { Store, StoreModule } from "@ngrx/store";
+import { HeaderState } from "./header.reducer";
+import Spy = jasmine.Spy;
+import { HeaderToggleAction } from "./header.actions";
+import { TranslateModule } from "ng2-translate";
+import { NgbCollapseModule } from "@ng-bootstrap/ng-bootstrap";
+import { Observable } from "rxjs";
+
+let comp: HeaderComponent;
+let fixture: ComponentFixture<HeaderComponent>;
+let store: Store<HeaderState>;
+
+describe('HeaderComponent', () => {
+
+  // async beforeEach
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ StoreModule.provideStore({}), TranslateModule.forRoot(), NgbCollapseModule.forRoot() ],
+      declarations: [ HeaderComponent ]
+    })
+      .compileComponents();  // compile template and css
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+
+    comp = fixture.componentInstance;
+
+
+    store = fixture.debugElement.injector.get(Store);
+    spyOn(store, 'dispatch');
+  });
+
+  describe('when the toggle button is clicked', () => {
+
+    beforeEach(() => {
+      let navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler'));
+      navbarToggler.triggerEventHandler('click', null);
+    });
+
+    it("should dispatch a HeaderToggleAction", () => {
+      expect(store.dispatch).toHaveBeenCalledWith(new HeaderToggleAction());
+    });
+
+  });
+
+  describe("when navCollapsed in the store is true", () => {
+    let menu: HTMLElement;
+
+    beforeEach(() => {
+      menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement;
+      spyOn(store, 'select').and.returnValue(Observable.of({ navCollapsed: true }));
+      fixture.detectChanges();
+    });
+
+    it("should close the menu", () => {
+      expect(menu.classList).not.toContain('in');
+    });
+
+  });
+
+  describe("when navCollapsed in the store is false", () => {
+    let menu: HTMLElement;
+
+    beforeEach(() => {
+      menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement;
+      spyOn(store, 'select').and.returnValue(Observable.of({ navCollapsed: false }));
+      fixture.detectChanges();
+    });
+
+    it("should open the menu", () => {
+      expect(menu.classList).toContain('in');
+    });
+
+  });
+
+});

src/app/header/header.component.ts

@@ -2,11 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { Store } from "@ngrx/store";
 import { HeaderState } from "./header.reducer";
 import { Observable } from "rxjs";
-import {
+import { HeaderToggleAction } from "./header.actions";
-  HeaderCollapseAction,
-  HeaderExpandAction,
-  HeaderToggleAction
-} from "./header.actions";
 
 @Component({
   selector: 'ds-header',
@@ -27,14 +23,6 @@ export class HeaderComponent implements OnInit {
       .map(({ navCollapsed }: HeaderState) => navCollapsed);
   }
 
-  private collapse(): void {
-    this.store.dispatch(new HeaderCollapseAction());
-  }
-
-  private expand(): void {
-    this.store.dispatch(new HeaderExpandAction());
-  }
-
   public toggle(): void {
     this.store.dispatch(new HeaderToggleAction());
   }