如何对在 Angular 中使用路由器的组件进行单元测试？

Question

在 Angular 2.0.0 中，我正在对使用路由器的组件进行单元测试。但是我得到“提供的参数与调用目标的任何签名都不匹配”。错误。在 spec.ts 的 Visual Studio 代码中，新 Router() 以红色突出显示

如果有人能让我知道正确的语法是什么，我真的很感激？提前致谢。我的代码如下：

规格

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) {}

原文由 Ka Tech 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我们在组件控制器中注入 Route 服务，这里有一个例子：

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

我们还可以测试其他功能，例如 navigate() 。以防万一：

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

我的所有模拟组件文件（mock.components.specs.ts）

 import { Component } from '@angular/core';

@Component({
    selector: 'home',
    template: '<div>Dummy home component</div>',
    styleUrls: []
})

export class DummyHomeComponent { }

原文由 Daniel Delgado 发布，翻译遵循 CC BY-SA 4.0 许可协议