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

【问题标题】：How to test property values receiving Observable from service如何测试从服务接收 Observable 的属性值
【发布时间】：2021-06-10 05:27:35
【问题描述】：

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

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

    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)

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

【问题讨论】：

forkJoin 仅在每个 observable 关闭时返回。如果添加.pipe(take(1))，是否还会出现超时？
感谢您的建议，即使在 .pipe(take(1)) 之后我仍然遇到同样的错误

标签： angular jasmine testbed spyon

【解决方案1】：

由于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, 'getInstitutions').and.returnValue(of(expectedInstitution));
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();
        });
    });

【讨论】：