Угловой 2 - Тестирование устройства с помощью маршрутизатора

Question

В Angular 2.0.0 я тестирую компонент, использующий маршрутизатор. Однако я получаю, что «Поставляемые параметры не соответствуют какой-либо сигнатуре целевого вызова». ошибка. В Visual Studio код в spec.ts это новый Router(), который выделен красным цветом

Я действительно признателен, если кто-то может сообщить мне, какой будет правильный синтаксис? Заранее спасибо. Мой код выглядит следующим образом:

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

конструктор компонентов

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

Answer 1

Это потому, что Route имеет некоторые зависимости он ожидает, что передаваемые в его конструктор.

Если вы используете угловые компоненты, вы не должны пытаться проводить изолированные тесты. Вы должны использовать инфраструктуру Углового тестирования для подготовки тестовой среды. Это означает, что Angular создает компонент, позволяя ему вводить все необходимые зависимости, а не пытаться создать все.

Для начала, вы должны иметь что-то вроде

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

Или что-то подобное. Вы используете TestBed для настройки модуля с нуля для тестирования. Вы настраиваете его примерно так же, как с @NgModule.

Здесь мы просто издеваемся над маршрутизатором. Поскольку мы всего лишь модульное тестирование, нам может не понадобиться реальное средство маршрутизации. Мы просто хотим убедиться, что он вызывается с правильными аргументами. Макет и spy смогут захватить этот звонок для нас.

Если вы хотите использовать реальный маршрутизатор, то вам необходимо использовать RouterTestingModule, где вы можете настроить маршруты. Смотрите пример here и here

Смотрите также:

• Angular docs on Testing для большего количества примеров, используя угловую тестирования инфраструктуры.

Answer 2

Вы также можете просто использовать RouterTestingModule и просто spyOn функцию NAVIGATE как это ...

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