Jasmine 规范中没有路由器错误的提供者

Question

我只是想为一个基本的 angular 2 组件编写一个简单的 jasmine 规范，但我收到了这个错误：

zone.js:388 未处理的承诺拒绝：路由器没有提供者！ ; 区域：代理区域；任务：Promise.then；价值：

我该如何解决这个问题？

我的茉莉花测试：

import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MiddleRowComponent } from './middle-row.component';
import { CirclesComponent } from './circles.component';
import { ButtonComponent } from '../../shared/subcomponents/button.component';
import { Router } from '@angular/router';

let comp: MiddleRowComponent;
let fixture: ComponentFixture<MiddleRowComponent>;
let de: DebugElement;
let el: HTMLElement;

describe('MiddleRowComponent', () => {
   var fixture: any;
   var comp: any;
    beforeAll(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
            platformBrowserDynamicTesting());
    });

    beforeEach((done) => {
        TestBed.configureTestingModule({
            declarations: [MiddleRowComponent, CirclesComponent, ButtonComponent], // declare the test component
            providers: [Router]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MiddleRowComponent);
            comp = fixture.componentInstance; // MiddleRowComponent test instance
            // query for the title <h1> by CSS element selector
            de = fixture.debugElement.query(By.css('h1'));
            el = de.nativeElement;
            done();
        });
    });

    it('should display original title', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain(comp.word);
    });

    it('should display a different test title', () => {
        comp.word = 'Test Title';
        fixture.detectChanges();
        expect(el.textContent).toContain('Test Title');
    });
});

编辑：

我看到我的规范确实使用了路由器。我在哪里添加路由器作为提供者？

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

@Component({
    selector: 'middle-row',
    templateUrl: 'app/landing-page/subcomponents/middle-row.component.html',
    styleUrls: ['app/landing-page/subcomponents/middle-row.component.css']
})
export class MiddleRowComponent {
    public word: string = "stuff";
    private isGreen: boolean;
    constructor(private router: Router) { };

    private tryNowClick(): void {
        this.router.navigateByUrl('/find');
    };

    private onWordChanged(event: any): void {
        this.isGreen = event.isGreen;
        this.word = event.word;
    }
}

Answer 1

如果使用路由器，那么beforeEach 中的TestBed.configureTestingModule 需要包含一个providers 字段，如下所示：

providers: [ { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } }]

例如：

 beforeEach((done) => {
        TestBed.configureTestingModule({
            declarations: [MiddleRowComponent, CirclesComponent, ButtonComponent], // declare the test component
            providers: [ { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } }]

        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MiddleRowComponent);

Answer 2

如果您确实需要使用来自路由器的值，您可以执行以下操作：

let mockRouter:any;
    class MockRouter {
        //noinspection TypeScriptUnresolvedFunction
        navigate = jasmine.createSpy('navigate');
    }





describe('Example Test', () => {
        beforeEach( async(() => {
                    mockRouter = new MockRouter();
                    TestBed.configureTestingModule({
                        imports: [ AppModule ],
                        providers: [ { provide: Router, useValue: mockRouter }],
                    })