javascript - 测试 rxjs : How to fake-click an element and check the resulting stream with marble diagrams?

Question

我的意图:我有一个 View 组件，它在点击时发出一系列指令 给其成员。我想测试单击按钮是否会发出 按所有交互元素的预期顺序进行说明。

我已经编译了一个带有按钮 a 和 b 的小示例，它应该发出 将字符串 'a' 和 'b' 放入同一个 observable 中。

为了方便起见，我将添加导入语句:

import $ from 'jquery';
import { TestScheduler } from 'rxjs/testing/TestScheduler';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do;
import 'rxjs/add/observable/merge';

创建一个容器，并附加 a 和 b 按钮。

const container = document.createElement('div');
const a = document.createElement('button');
const b = document.createElement('button');
container.append(a);
container.append(b);

从两个按钮的点击事件创建点击流并将它们合并。

const stream = Observable.merge(
  Observable.fromEvent(a, 'click').map(() => 'a'),
  Observable.fromEvent(b, 'click').map(() => 'b')
);

为弹珠测试创建一个测试调度程序。

const marbles = new TestScheduler((x, y) => expect(x).to.deep.equal(y));

这个冷可观察应该，作为副作用，点击按钮。我不是 当然可以，事实上，我很确定不是。 为什么？

marbles.createColdObservable('-a-b', { a, b }).do(element => $(element).click());

我希望按照上面的 const stream 的定义看到两个按钮的发射。

marbles.expectObservable(stream).toBe('-a-b');
marbles.flush();

结果是:

AssertionError: expected [] to deeply equal [ Array(2) ]

因为不会生成任何点击事件。为什么？我假设我的假设 错误的是上面的代码实际上生成了点击事件。如果是的话，(不然怎么办) 我可以使用弹珠图测试实际的 DOM 点击事件吗？

注意:这是一个最小的示例，我要测试的实际代码更复杂， 并涉及一些按钮由于我操纵的条件而改变状态 通过其他弹珠图。我不想测试 Observable.fromEvent，我会 想要测试我在 const stream 中的流定义是否正确。

Answer 1

解决方案是订阅通过弹珠创建的冷可观察对象。

marbles
  .createColdObservable('-a-b', { a, b })
  .do(element => $(element).click())
  .subscribe();

否则弹珠的副作用不会被执行。事实证明，我犯了一个愚蠢的错误!