Question

我的意图：我有一个视图组件，可以发出关于点击的指令流对其成员。我想测试单击按钮发出的所有互动元素的预期顺序的说明。

我编写了一个带有a和b按钮的小例子，它应该发出将字符串'a'和'b'放入相同的可观察对象中。

为方便起见，我将添加import语句：

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();

否则大理石＆＃39;副作用不会被执行。结果我犯了愚蠢的错误！

测试rxjs：如何伪造元素并使用大理石图检查生成的流？

1 个答案: