我只是想为一个基本的角度2组件编写一个简单的茉莉花规格,我收到了这个错误:
zone.js:388未处理的承诺拒绝:没有路由器的提供商! ; 区域:ProxyZone;任务: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;
}
}
答案 0 :(得分:6)
如果使用路由器,则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);
答案 1 :(得分:5)
如果您确实需要使用路由器中的值,请执行以下操作:
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 }],
})