如何使用Cypress处理debounced(使用RxJs debounceTime)事件发射器

Question

我正在为一个包含项目列表和搜索筛选器的页面编写测试。搜索过滤器根据输入到搜索过滤器的文本输入中的内容来过滤项目列表。它通过在文本输入的值发生更改时发出事件来操作。此事件使用RxJs的debounceTime进行去抖动。搜索过滤器组件还有一个按钮，用于清除搜索的文本。

private searchStringChanged: Subject<string> = new Subject<string>();
this.searchStringChanged.pipe(
debounceTime(250),
).subscribe((searchString: string) => {
this.filterChange.emit(searchString);
});

public handleClearInput() {
this.searchString = '';
this.searchStringChanged.next(this.searchString);
}

我的问题是，我没有看到在Cypress测试中清除文本输入的结果。我想在每次测试前清除搜索过滤器，所以我从项目的完整列表开始每次测试：

beforeEach(() => {
cy.clock();
searchFilter.getTextInput().clear();
cy.clock().then(clock => {
clock.tick(1000);
clock.restore();
});
});

我已经尝试了上面代码的几个变体，但没有成功。

使用：Cypress 4.3.0，RxJs:6.5.3

Answer 1

虽然通常建议不要使用cy.wait，但在这种情况下，我发现它是唯一可行的解决方案，因为Cypress不知道你有去抖动，所以只使用是安全的

cy.wait(1000) // debounceTime

同样重要的是要理解，Cypress不建议使用任意数字的wait的原因是因为你实际上不知道事情需要多少时间。

如果使用cy.wait等待网络请求，有时可能需要2秒，有时甚至更长时间。即使你使用自己的数据，事情也会波动和变化，因为这取决于你运行它的环境和不同的因素。

然而，在你的情况下，你只是在等待一个稳定的东西，这就是为什么它可以安全使用的原因。