Góc 2 - Kiểm tra đơn vị với Bộ định tuyến

Question

Trong Angular 2.0.0, tôi kiểm tra đơn vị một thành phần sử dụng Bộ định tuyến. Tuy nhiên tôi nhận được 'Thông số được cung cấp không khớp với bất kỳ chữ ký nào của mục tiêu cuộc gọi.' lỗi. Trong Visual studio code trong spec.ts nó là mới Router() được đánh dấu màu đỏ

Tôi thực sự đánh giá cao nếu ai đó có thể cho tôi biết cú pháp chính xác sẽ là gì? Cảm ơn trước. Mã của tôi như sau:

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 constructor

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

Answer 1

Đó là bởi vì Route có một số phụ thuộc nó hy vọng được truyền cho constructor của nó.

Nếu bạn đang sử dụng các thành phần Góc, bạn không nên cố gắng thực hiện các thử nghiệm riêng biệt. Bạn nên sử dụng cơ sở hạ tầng kiểm tra góc để chuẩn bị môi trường thử nghiệm. Điều này có nghĩa là để Angular tạo thành phần, cho phép nó tiêm tất cả các phụ thuộc bắt buộc, thay vì bạn cố gắng tạo mọi thứ.

Để giúp bạn bắt đầu, bạn nên có một cái gì đó giống như

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

Hoặc một cái gì đó như thế. Bạn sử dụng TestBed để định cấu hình mô-đun từ đầu cho thử nghiệm. Bạn cấu hình nó khá nhiều theo cùng một cách với một @NgModule.

Ở đây chúng tôi chỉ đang chế nhạo bộ định tuyến. Vì chúng tôi chỉ là thử nghiệm đơn vị, chúng tôi có thể không muốn cơ sở định tuyến thực sự. Chúng tôi chỉ muốn đảm bảo rằng nó được gọi với các đối số đúng. Mô hình và spy sẽ có thể ghi lại cuộc gọi đó cho chúng tôi.

Nếu bạn làm muốn sử dụng bộ định tuyến thực, thì bạn cần sử dụng RouterTestingModule, nơi bạn có thể định cấu hình tuyến đường. Xem ví dụ here và here

Xem thêm:

• Angular docs on Testing để biết thêm ví dụ bằng cách sử dụng cơ sở hạ tầng kiểm tra góc.

Answer 2

Bạn cũng có thể chỉ cần sử dụng RouterTestingModule và chỉ spyOn chức năng điều hướng như thế này ...

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