如何测试从服务接收 Observable 的属性值

问题描述

我想问一下测试从服务内联接收数据的属性的常见做法是什么。

我无法测试从服务接收值的属性 - 内联定义。 这是我的财产

    readonly filters$ = forkJoin({
        institutions: this.dataExtractService.getInstitutions(),dataSetTypes: this.dataExtractService.getDataSetTypes()
    });

getInstitutions() 和 getDataSetTypes() 返回 Observable<string()>

这是我的规格

    let component: ExtractRetrievalComponent;
    let fixture: ComponentFixture<ExtractRetrievalComponent>;
    let formBuilder: FormBuilder;
    let dataExtractService: DataExtractService;

    beforeEach(() => {
        Testbed.configureTestingModule({
            schemas: [NO_ERRORS_SCHEMA],imports: [HttpClientTestingModule],declarations: [ExtractRetrievalComponent],providers: [
                FormBuilder,DataExtractService
            ]
        }).compileComponents();
        fixture = Testbed.createComponent(ExtractRetrievalComponent);
        component = fixture.componentInstance;

        formBuilder = Testbed.inject(FormBuilder);
        dataExtractService = Testbed.inject(DataExtractService);
        fixture.detectChanges();
    });

    it('should create',() => {
        expect(component).toBeTruthy();
    });

    it('should get filters',(done) => {
        const expectedInstitution = ['expectedInstitutions'] as string[];
        const expectedDataSetType = ['expectedDataSetType'] as string[];
        const expectedFilter = {
            institutions: expectedInstitution,dataSetTypes: expectedDataSetType
        };
        spyOn(component.filters$,'subscribe').and.callThrough();

        spyOn(dataExtractService,'getInstitutions').and.returnValue(of(expectedInstitution));
        spyOn(dataExtractService,'getDataSetTypes').and.returnValue(of(expectedDataSetType));
        fixture.detectChanges();

        component.filters$.subscribe(result => {
            expect(result).toEqual(expectedFilter);
            done();
        });
    });

测试失败并显示结果

Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

我也没有运气就增加了超时间隔。 有什么提示吗？

解决方法

由于 filters$ 是一个实例变量，以下几行发生得太晚了：

spyOn(dataExtractService,'getInstitutions').and.returnValue(of(expectedInstitution));
spyOn(dataExtractService,'getDataSetTypes').and.returnValue(of(expectedDataSetType));

第一个 fixture.detectChanges() 调用 ngOnInit，我认为 createComponent 创建类并填充实例变量。要快速修复，请尝试以下操作：

dataExtractService = TestBed.inject(DataExtractService); // get a handle on dataExtractService
// spy on their methods
spyOn(dataExtractService,'getDataSetTypes').and.returnValue(of(expectedDataSetType));
// create the component
fixture = TestBed.createComponent(ExtractRetrievalComponent);
component = fixture.componentInstance;

formBuilder = TestBed.inject(FormBuilder);
fixture.detectChanges();

it('should get filters',(done) => {
        const expectedInstitution = ['expectedInstitutions'] as string[];
        const expectedDataSetType = ['expectedDataSetType'] as string[];
        const expectedFilter = {
            institutions: expectedInstitution,dataSetTypes: expectedDataSetType
        };
        spyOn(component.filters$,'subscribe').and.callThrough();

        component.filters$.subscribe(result => {
            expect(result).toEqual(expectedFilter);
            done();
        });
    });