Angular 2 - Unit Testing mit Router

Question

In Angular 2.0.0, bin ich Gerät testen eine Komponente, die Router verwendet. Allerdings bekomme ich die "mitgelieferten Parameter entsprechen keiner Signatur des Anrufziels." Error. In Visual Studio Code in spec.ts ist es der neue Router(), der in rot hervorgehoben ist

Ich schätze wirklich, wenn jemand mir wissen lassen könnte, was die richtige Syntax wäre? Danke im Voraus. Mein Code wie folgt:

spec.ts

import { TestBed, async } from '@angular/core/testing'; 
import { NavToolComponent } from './nav-tool.component'; 
import { ComponentComm } from '../../shared/component-comm.service'; 
import { Router } from '@angular/router'; 

describe('Component: NavTool',() => { 
    it('should create an instance',() => { 
    let component = new NavToolComponent(new ComponentComm(), new Router()); 
    expect(component).toBeTruthy(); 
    }); 
}); 

Component Konstruktor

constructor(private componentComm: ComponentComm, private router: Router) {} 

Answer 1

Es ist, weil die Route einige Abhängigkeiten hat es an den Konstruktor übergeben erwartet.

Wenn Sie Winkelkomponenten verwenden, sollten Sie nicht versuchen, isolierte Tests durchzuführen. Sie sollten die Angular-Testinfrastruktur verwenden, um die Testumgebung vorzubereiten. Das bedeutet, dass Angular die Komponente erstellen darf, die alle erforderlichen Abhängigkeiten injiziert, anstatt dass Sie versuchen, alles zu erstellen.

Um Ihnen den Einstieg, Sie so etwas wie

import { TestBed } from '@angular/core/testing'; 

describe('Component: NavTool',() => { 
    let mockRouter = { 
    navigate: jasmine.createSpy('navigate') 
    }; 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ NavToolComponent ], 
     providers: [ 
     { provide: Router, useValue: mockRouter }, 
     ComponentComm 
     ] 
    }); 
    }); 
    it('should click link',() => { 
    let fixture = TestBed.createComponent(NavToolComponent); 
    fixture.detectChanges(); 
    let component: NavToolComponent = fixture.componentInstance; 
    component.clickLink('home'); 
    expect(mockRouter.navigate).toHaveBeenCallWith(['/home']); 
    }); 
}); 

Oder so ähnlich haben sollte. Sie verwenden das TestBed, um ein Modul von Grund auf für das Testen zu konfigurieren. Sie konfigurieren es ähnlich wie bei einem @NgModule.

Hier verspotten wir nur den Router. Da wir nur Komponententests durchführen, möchten wir möglicherweise nicht die echte Routing-Möglichkeit. Wir wollen nur sicherstellen, dass es mit den richtigen Argumenten aufgerufen wird. Der Schein und spy können diesen Anruf für uns erfassen.

Wenn Sie tun wollen den echten Router verwenden, dann müssen Sie die RouterTestingModule verwenden, wo Sie Routen konfigurieren können. Sehen Sie ein Beispiel here und here

Siehe auch:

• Angular docs on Testing für weitere Beispiele, die die Winkelprüfung Infrastruktur.

Answer 2

Sie können auch nur die RouterTestingModule verwenden und nur spyOn die navigate Funktion wie diese ...

import { TestBed } from '@angular/core/testing'; 
import { RouterTestingModule } from '@angular/router/testing'; 

import { MyModule } from './my-module'; 
import { MyComponent } from './my-component'; 

describe('something',() => { 

    let fixture: ComponentFixture<LandingComponent>; 

    beforeEach(() => { 

     TestBed.configureTestingModule({ 
      imports: [ 
       MyModule, 
       RouterTestingModule.withRoutes([]), 
      ], 
     }).compileComponents(); 

     fixture = TestBed.createComponent(MyComponent); 

    }); 

    it('should navigate',() => { 
     let component = fixture.componentInstance; 
     let navigateSpy = spyOn((<any>component).router, 'navigate'); 

     component.goSomewhere(); 
     expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']); 
    }); 
});