如何在 jasmine 中测试 RxJs 回调

Question

我在我的组件中使用 NgbTypeAhead，其中回调必须是 (text: Observable<string>) => Observable<any[]> 。现在，我想测试搜索的副作用，但我正在努力用 jasmine 编写该测试。

有人可以帮忙吗？提前致谢。

component.ts

search = (text$: Observable<string>) =>
        text$
            .debounceTime(200)
            .distinctUntilChanged()
            .do((term: string) => {
                console.log("do 1", term)
                this.isSearching = true && term !== "";
                this.cd.markForCheck();
            })
            .map(term => {
                console.log("map", term)
                return term === ""
                    ? this.list
                    : this.filter(term)
            })
            .do(list => {
                console.log("do 2", list)
                this.searchResultsCount = list.length;
                this.cd.markForCheck();
            });

component.html

<input #initiativeSearch type="text" id="initiativeSearch" 
    [ngbTypeahead]="search"/>

component.spec.ts

 it("should update searching flags", () => {
       // how do I test this ? here is what I tried
        let spyObj = jasmine.createSpyObj<Observable<string>>("text$", ["debounceTime", "distinctUntilChanged", "do", "map"]);

        spyObj.debounceTime.and.returnValue(spyObj)
        spyObj.distinctUntilChanged.and.returnValue(spyObj)
        spyObj.do.and.returnValues(Observable.of("blabla"), Observable.of([]))
        spyObj.map.and.returnValue(Observable.of([]))
        component.searchInitiatives(spyObj);

        expect(spyObj.debounceTime).toHaveBeenCalledWith(200);
        expect(spyObj.distinctUntilChanged).toHaveBeenCalledTimes(1);
        expect(spyObj.do).toHaveBeenCalledTimes(2);
    });

这会在控制台中记录spy text$.do to have been called 2 times. It was called 1 times.，并且不会显示任何console.log

Answer 1

听起来您的测试方向错误。如果您进行单元测试，您只需一次测试一个组件即可。

您只需要直接测试您的搜索组件。你可以这样做：

let observableSpy = {
  debounceTime: observableSpy,
  distinctUntilChanged: observableSpy,
  // ... repeat for all properties
};
let spyObj = jasmine.createSpyObj(observableSpy);

然后将spyObj 传递给您的搜索功能：

search(spyObj)

最后，运行一些断言：

expect(spyObj.debounceTime).toHaveBeenCalledWith(...);
// ... test all calls.

这样做更像是一个单元测试。

Answer 2

您可以测试此功能，但您需要在 Angular 的“主区域”之外使用 fakeAsync 装饰器对其进行测试。

也就是说，我强烈建议不要这样做。对我来说，您似乎正在尝试测试不在您的单元测试范围内的 ReactiveX 运算符。使用这些库时，应该假设该库有自己的单元测试。您可能想要测试是否传入了以毫秒为单位的正确值，但您实际上不需要或不想测试 debounceTime 运算符。

请让我们知道这是否有意义，如果没有，我们可以找到其他更好的方法来为您的断言找到覆盖范围，但是我不建议您将精力集中在测试 RXJS 框架上。