In Angular 2.0.0 teste ich eine Komponente, die Router verwendet. Ich erhalte jedoch die Meldung "Die angegebenen Parameter stimmen nicht mit der Signatur des Anrufziels überein." Error. In Visual Studio-Code in spec.ts ist es der neue Router (), der rot hervorgehoben ist
Ich weiß es wirklich zu schätzen, wenn mir jemand mitteilen könnte, wie die richtige Syntax lauten würde. 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();
});
});
Komponentenkonstruktor
constructor(private componentComm: ComponentComm, private router: Router) {}
router = TestBed.get(Router)
und speichere meinen Router auch in einer Variablen neben dem Gerät, anstatt eine Komponente in eine beliebige zu gießengoSomewhere()
, die den Code enthältthis.router.navigate([/expectedUrl'])
(der zu navigieren würde/expectedUrl
.console.warn ../../../node_modules/@angular/core/bundles/core.umd.js:27337 Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
Es ist , weil die
Route
einige Abhängigkeiten hat es an den Konstruktor übergeben erwartet.Wenn Sie Angular-Komponenten verwenden, sollten Sie nicht versuchen, isolierte Tests durchzuführen. Sie sollten die Angular-Testinfrastruktur verwenden, um die Testumgebung vorzubereiten. Dies bedeutet, dass Angular die Komponente erstellen und alle erforderlichen Abhängigkeiten einfügen muss, anstatt zu versuchen, alles zu erstellen.
Um Ihnen den Einstieg zu erleichtern, sollten Sie so etwas wie haben
Oder sowas ähnliches. Mit verwenden Sie das
TestBed
, um ein Modul für den Test von Grund auf neu zu konfigurieren. Sie konfigurieren es so ziemlich genauso mit einem@NgModule
.Hier verspotten wir nur den Router. Da wir nur Unit-Tests durchführen, möchten wir möglicherweise nicht die echte Routing-Funktion. Wir wollen nur sicherstellen, dass es mit den richtigen Argumenten aufgerufen wird. Der Spott und der Spion werden in der Lage sein, diesen Anruf für uns zu erfassen.
Wenn Sie den realen Router verwenden möchten, müssen Sie den verwenden
RouterTestingModule
, auf dem Sie Routen konfigurieren können. Sehen Sie hier und hier ein BeispielSiehe auch:
quelle
Hier ein Beispiel, wenn wir den Routenservice in unsere Komponentensteuerung einfügen:
import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; // Because we inject service in our component import { Router } from '@angular/router'; // Just if we need to test Route Service functionality import { AppComponent } from './app.component'; import { DummyLoginLayoutComponent } from '../../../testing/mock.components.spec'; // Because we inject service in your component describe('AppComponent', () => { let router: Router; // Just if we need to test Route Service functionality beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, DummyLoginLayoutComponent // Because we inject service in our component ], imports: [ RouterTestingModule.withRoutes([ { path: 'login', component: DummyLoginLayoutComponent }, ]) // Because we inject service in our component ], }).compileComponents(); router = TestBed.get(Router); // Just if we need to test Route Service functionality router.initialNavigation(); // Just if we need to test Route Service functionality })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); });
Wir können auch andere Funktionalitäten wie testen
navigate()
. Nur für den Fall:it('should call eventPage once with /register path if event is instanceof NavigationStart', fakeAsync(() => { spyOn(analyticService, 'eventPage'); router.navigate(['register']) .then(() => { const baseUrl = window.location.origin; const url = `${baseUrl}/register`; expect(analyticService.eventPage).toHaveBeenCalledTimes(1); expect(analyticService.eventPage).toHaveBeenCalledWith(url); }); }));
Meine Datei mit allen Scheinkomponenten (mock.components.specs.ts)
import { Component } from '@angular/core'; @Component({ selector: 'home', template: '<div>Dummy home component</div>', styleUrls: [] }) export class DummyHomeComponent { }
quelle
Jasmine geht mit vollen Spionageobjekten besser ...
quelle