通常,订阅函数失败的原因是因为它依赖于异步调用,而测试在等待异步调用完成之前就退出了。要解决这个问题,可以使用 fakeAsync
和 tick
函数来模拟异步调用,并使测试等待其完成。
以下是一个示例组件和相应的单元测试:
组件代码:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService } from '../data.service';
@Component({
selector: 'app-my-component',
template: `
MyComponent
-
{{ item }}
`,
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
items: string[] = [];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getItems().subscribe((items: string[]) => {
this.items = items;
});
}
}
单元测试代码:
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { MyComponentComponent } from './my-component.component';
import { DataService } from '../data.service';
import { Observable } from 'rxjs/Observable';
describe('MyComponentComponent', () => {
let component: MyComponentComponent;
let fixture: ComponentFixture;
let dataServiceStub: Partial;
dataServiceStub = {
getItems(): Observable {
return Observable.of(['item1', 'item2']);
}
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyComponentComponent ],
providers: [ { provide: DataService, useValue: dataServiceStub } ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should display items', fakeAsync(() => {
tick(); // Wait for async data
fixture.detectChanges