如何测试 RxJS 事件

Question

我正在使用 Observable.fromEvent() 和各种链接运算符处理鼠标悬停事件。我将如何对此进行单元测试？

export const bindMouseover = (link) => Observable.fromEvent(link, 'mouseover')
    .filter(event => Nav.hasSubNav(event.target))
    .map(event => Nav.getSubNav(event.target))
    .filter(target => !Nav.elementIsVisible(target))
    .subscribe((target) => {
      Nav.hideElements(subNavs);
      Nav.showElement(target);
    });

Answer 1

RxJS 4 文档中有一章是关于测试 RxJS 链的，但这些原则也适用于 RxJS 5：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/testing.md

如果你想对 RxJS 自定义运算符或运算符链进行单元测试，可以使用官方文档：https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md（但是，该文档没有告诉你在哪里可以导入你自己的代码中列出的功能）。

另外，看看 RxJS 本身是如何测试的。例如 testing map() operator (btw, these are mocha tests). Note how Hot and Cold Observables are made with this short notation cold('--1--2--3--|') and then compared with the expected '--x--y--z--|' using expectObservable that comes from TestScheduler.

如果你还想使用 cold(...)、hot(...) 等短符号，你需要获取源代码，用 npm run build_test 编译它，然后使用mocha 的选项与原始选项相同。 See package.json and the default options for mocha in default.opts。我现在不知道有什么更简单的解决方案。

短符号只是让事情变得更容易和更易读，但实际上你并不需要它。您已经可以使用常规测试 Observables（TestScheduler、ColdObservable 和 HotObservable），因为它们是标准 rxjs 包的一部分。 https://github.com/ReactiveX/rxjs/tree/master/src/testing (node_modules/rxjs/testing)

另见：

如何测试 RxJS 事件

How to test RxJS events

javascript

rxjs

rxjs5

rxjs-dom