Angular 2 – Teste de Unidade com Roteador

No Angular 2.0.0, estou testando um componente que usa o Roteador. No entanto, recebo os parâmetros “Fornecidos não correspondem a nenhuma assinatura de destino de chamada”. erro. No código do Visual Studio em spec.ts é o novo roteador () que é destacado em vermelho

Eu realmente aprecio se alguém poderia me informar qual seria a syntax correta? Desde já, obrigado. Meu código da seguinte maneira:

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

Construtor de componentes

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

Você também pode apenas usar o RouterTestingModule e apenas espionar a function de navegação como esta …

 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; beforeEach(() => { TestBed.configureTestingModule({ imports: [ MyModule, RouterTestingModule.withRoutes([]), ], }).compileComponents(); fixture = TestBed.createComponent(MyComponent); }); it('should navigate', () => { let component = fixture.componentInstance; let navigateSpy = spyOn((component).router, 'navigate'); component.goSomewhere(); expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']); }); }); 

É porque o Route tem algumas dependencies que ele espera que passem para seu construtor.

Se você estiver usando componentes angulares, você não deve estar tentando fazer testes isolados. Você deve usar a infraestrutura de teste angular para preparar o ambiente de teste. Isso significa deixar Angular criar o componente, permitindo que ele injete todas as dependencies necessárias, em vez de tentar criar tudo.

Para você começar, você deve ter algo como

 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 algo assim. Você usa o TestBed para configurar um módulo do zero para o teste. Você configura praticamente da mesma maneira com um @NgModule .

Aqui estamos apenas mocking do roteador. Já que somos apenas testes de unidade, podemos não querer a facilidade de roteamento real. Nós só queremos ter certeza de que é chamado com os argumentos certos. O simulado e o espião serão capazes de capturar esse chamado para nós.

Se você quiser usar o roteador real, então você precisa usar o RouterTestingModule , onde você pode configurar rotas. Veja um exemplo aqui e aqui

Veja também:

  • Documentos angulares no teste para mais exemplos usando a infraestrutura de teste angular.

Jasmine vai melhor com objects espiões completos …

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