用于 Angular 8 应用中 RxJS 代码单元测试的工具 [+ 免费视频课程]

方法 3 - 使用 TestScheduler 进行 Marble 测试

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这是对我最近发布的免费视频课程“Angular应用程序中的RxJS单元测试：全貌”的简短评论。

如果您已经尝试为 Observables 编写单元测试，那么您可能会被各种各样的方法弄得不知所措。
哪一种方法才适合您呢？

让我们简要回顾一下 Jasmine、Angular 和 RxJS 为我们提供便捷的单元测试体验的工具。

方法 1 - 使用 'done' 回调的 jasmine。

最简单的
例子： 但缺点是测试时的非生产环境（较小）延迟时间较长。

方法二——使用虚拟时间或模拟时间进行测试。

使用 VirtualTimeScheduler 进行测试

为了测试我们的代码，我们将函数中的 RxJS AsyncScheduler 替换为 VirtualTimeScheduler。VirtualTimeScheduler
会阻止实际调用 setInterval，并将任务放入内部队列（按延迟排序）。
当我们调用 VirtualTimeScheduler 的flush()函数时，所有延迟的值都会按顺序发出。
例如：

缺点——我们需要在被测代码中添加额外的调度器参数。

来自 Angular 的 'fakeAsync'。

fakeAsync 的工作原理是什么？
它使用fakeAsyncTestZoneSpec区域而不是标准的ngZone。
在这个区域中，标准的浏览器 API（例如 setInterval、setTimeout 和 Promise）被修改。当这些 API 被调用时，计划任务不会进入浏览器事件队列，而是被放入内部队列。
当我们调用另一个 Angular 辅助函数 tick() 时，内部队列中的任务会立即执行。
例如：

这两种方法的优点在于，我们可以在测试中使用生产值来计时。


方法 3 - 使用 TestScheduler 进行 Marble 测试

TestScheduler.flush 方法（旧方法，RxJS 版本 6 之前）和 jasmine-marbles。

RxJS TestScheduler 提供了一些特殊方法，使我们能够创建带有 Marble 图的测试。Marble
图是 RxJS 的一种领域特定语言，可以帮助您以可视化的方式呈现测试中随时间变化的值。
例如：

此方法的缺点：延迟值并非生产环境中的常用值。这是因为默认的弹珠帧长度仅为 10 毫秒。

TestScheduler.run（新方法，RxJS 版本 6+，采用时间渐进式语法）

但从 RxJS 版本 6 开始，TestScheduler 中添加了一个新的 run 方法，允许在流水线图中采用时间渐进语法。
例如：

茉莉花弹珠自由

Jasmine-marbles 只是 RxJS TestScheduler 的一个封装库，
因此它提供的功能与 RxJS TestScheduler 相同。
此外，它还提供了一些优化功能，使测试代码更加简洁。
例如：

rxjs-marbles 库

既然我们已经有了 jasmine-marbles，为什么还要再添加一个 TestScheduler 的包装库呢？

截至本文撰写之时，jasmine-marbles 的主要缺陷是它不支持新的 TestScheduler.run 方法——因此我们无法使用时间递进语法。

rxjs-marbles 同时支持两种测试方法：TestScheduler.flush 和 TestScheduler.run，并减少了测试代码样板。

例子：

结论：

本文简要回顾了可观察对象单元测试的几种可能方法。篇幅很短，所以你可能有很多疑问，对吧？你可以在我的免费视频课程中找到答案！

你喜欢这篇文章吗？那就转发分享，然后请我喝杯咖啡吧☕️🤓

关注我的推特！

如果你想深入了解 Angular 中的 RxJS 单元测试，请观看我的免费视频课程“Angular 应用中的 RxJS 单元测试：全貌”。想成为 RxJS 单元测试高手吗？那就试试吧！