Angular 2 - Test unitaire avec routeur

Question

Dans Angular 2.0.0, je teste à l'unité un composant qui utilise un routeur. Cependant, j'obtiens les «paramètres fournis ne correspondent à aucune signature de la cible d'appel». Erreur. Dans le code Visual studio dans spec.ts, c'est le nouveau routeur () qui est surligné en rouge

J'apprécie vraiment si quelqu'un pouvait me faire savoir quelle serait la syntaxe correcte? Merci d'avance. Mon code comme suit:

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();
  });
});
 

Constructeur de composants

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

Answer 1

Vous pouvez également simplement utiliser le RouterTestingModule et simplement espionner la fonction de navigation comme celle-ci ...

 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']);
    });
});
 

Answer 2

C'est parce que l' Route a certaines dépendances, il s'attend à ce passée à son constructeur.

Si vous utilisez des composants Angulaires, vous ne devriez pas essayer de faire des tests indépendants. Vous devez utiliser l'angle de l'infrastructure de test pour préparer l'environnement de test. Ceci implique de laisser Angulaire créer le composant, lui permettant d' injecter toutes les dépendances nécessaires, au lieu de vous en train d'essayer de créer tout.

Pour commencer, vous devriez avoir quelque chose comme

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).toHaveBeenCalledWith(['/home']);
  });
});

Ou quelque chose comme ça. Vous utilisez l' TestBed pour configurer un module à partir de zéro pour les essais. Vous configurez c'est à peu près de la même façon avec un @NgModule.

Ici, nous sommes juste se moquer du routeur. Depuis que nous sommes juste des tests unitaires, nous ne le voulez le réel de routage installation. Nous voulons juste assurez-vous qu'il est appelé avec les bons arguments. La fantaisie et l' espion sera en mesure de capturer l'appel pour nous.

Si vous ne souhaitez utiliser le vrai routeur, vous devez utiliser l' RouterTestingModule, où vous pouvez configurer des routes. Voir un exemple ici et ici

Voir Aussi:

• Angulaire docs sur les Tests pour plus d'exemples sur l'utilisation de l'Angulaire de l'infrastructure de test.

Answer 3

Jasmine va encore mieux avec des objets d'espionnage complets ...

 describe(..., () => {
    const router = jasmine.createSpyObj('Router', ['navigate']);
    ...
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [  { provide: Router, useValue: router } ],
            ...
    });        
});