一种可能的解决方法是在测试中手动触发Observable,并通过spyOn()函数监测关键函数的调用。以下是一个可能的示例:
component.ts文件:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: '{{ title$ | async }}
'
})
export class AppComponent {
public title$: Observable;
constructor() {
this.title$ = this.getTitle();
}
private getTitle() {
return new Observable(observer => {
observer.next('Hello, World!');
observer.complete();
});
}
}
spec.ts文件:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Observable } from 'rxjs';
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AppComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
});
it('should display the title from Observable', () => {
spyOn(component, 'getTitle').and.callThrough();
fixture.detectChanges();
expect(component.title$).toBeDefined();
expect(component.getTitle).toHaveBeenCalled();
});
});
这个测试用例创建了应用组件实例,并通过spyOn()函数监控getTitle()函数的调用,然后手动触发了变更检测。在断言中,我们确保了Observable已经定义,并验证了getTitle()函数已被调用。这个测试用例可以作为你的测试代码的基础,你可以进一步调整这个测试用例来满足你的具体需求。