在茉莉花無提供商路由器誤差符合規範

Question

我只是想寫一個簡單的茉莉規範的基本角2成分和我得到這個錯誤：

zone.js:388 Unhandled Promise rejection: No provider for Router! ; Zone: ProxyZone ; Task: Promise.then ; Value:

我該如何解決這個問題？

我的茉莉花測試：

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

如果你確實需要使用值從你想要做這樣的路由器：

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 }], 
        }) 

Answer 2

如果路由器使用，那麼該TestBed.configureTestingModule在beforeEach需要包含這樣的提供商領域：

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