src/app/common-components/main-navigation/main-navigation.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { click } from '../../testing/index';
import { NgModule } from '@angular/core';
import { DebugElement } from '@angular/core';
import { MockComponent } from '../../testing/mock.component';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '../../testing/router-stubs';
import { MdDialogModule, MaterialModule, MdDialog } from '@angular/material';
import { SessionContext } from '../../common/session-context';
import { MainNavigationComponent } from './main-navigation.component';
//import { LogoutComponent } from '../../dialogs/logout/logout.component';

class FakeRouter {
  navigate(commands: any[]) {
    return commands[0];
  }
}

@NgModule({
  declarations: [],
  entryComponents: [
    //LogoutComponent
  ]
})
class TestModule { }

describe('MainNavigationComponent', () => {
  let component: MainNavigationComponent;
  let fixture: ComponentFixture<MainNavigationComponent>;
  let routerStub: FakeRouter;
  let router: Router;

  routerStub = {
    navigate: jasmine.createSpy('navigate').and.callThrough()
  };

  beforeEach(async(() => {
    router = new FakeRouter() as any as Router;
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([]),
        MaterialModule.forRoot()
      ],
      declarations: [
        MainNavigationComponent,
        MockComponent({ selector: 'input', inputs: ['options'] })
      ],
      providers: [
        { provide: Router, useValue: routerStub },
        { provide: MdDialog, useClass: MdDialog },
        { provide: SessionContext, useClass: SessionContext }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MainNavigationComponent);
    component = fixture.componentInstance;
  });

  it('should navigate to overview on home-button click', () => {
    component.goToOverview();    
    expect(routerStub.navigate).toHaveBeenCalledWith(['/overview']);
  });

  xit('should open the filter on click on the filter button', () => {    
    //WIP
    component.goToOverview();
    fixture.detectChanges(); // update view with array

    fixture.whenStable().then(() => { // wait for async getFinishedNotifications
      //fixture.detectChanges(); // update view with array
      const des = fixture.debugElement.queryAll(By.css('button'));
      click(des[0]);
    });
  });

  it('should navigate to search on search-button click', () => {    
    component.goToSearchPage();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/search']);
  });

  it('should navigate to reminder on calendar-button click', () => {    
    component.goToReminderPage();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/reminders']);
  });

  it('should navigate to shiftChangeOverview on clock-button click', () => {    
    component.goToShiftChangeOverview();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/shiftChangeOverview']);
  });

  it('should navigate to mainview on logout', () => {    
    component.logout();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/']);
  });

});