Angular组件的单元和集成测试。 第1部分(共3部分)

随着应用程序的增长,我们会问自己如何构造代码,以便于理解和维护。 如果您没有明确定义应该如何编写单元测试,那么有时单元测试也会在地球上变成地狱。

我猜我们团队的技术水平很普遍:业力+茉莉花。

业力(Karma)和茉莉(Jasmine)都很酷,而且很好用,但是在我们的日常生活中有一种使我的心脏融化的工具- 小袋鼠 (https://wallabyjs.com/)。 您可以在他们的网站上阅读有关它的更多信息,但是不久,wallaby是一个集成的测试运行程序,它可以为您的测试提供即时反馈,因此JavaScript中的TDD从未如此简单。 使用袋鼠的另一个好处是可以对测试覆盖率不断反馈。

袋鼠会立即更新报告,并为您提供每个文件的详细信息。 很棒的工具,绝对值得推荐!

开发人员通常编写两种类型的测试:

  1. 单元测试 :一次测试一件事,测试不应在乎应用程序不同单元之间的交互点
  2. 整合测试 检查多个单位是否正确交互

Angular组件的通用测试可以分为两类:

  1. 隔离测试 :仅测试组件功能时。
  2. 浅层单元测试 :测试组件模板而不渲染其子级。 只需在TestBed函数内部不注册子组件即可实现。

现在让我们更详细地讨论这些类型的测试。

隔离单元测试

假设我们在folder.component.ts中具有以下功能

我们正在检查selectedFolder设置是否正确的单元测试看起来像这样:

在这种情况下,我们根本不会触摸模板,而只专注于组件的内部功能。

浅单元测试

模板浅层测试允许我们测试子组件的Input()Output()属性。

测试输入属性

假设我们有以下简单的folder-name.component.html ,其中包含子组件。

让我们测试一下输入属性文本是否在HTML模板中正确设置。

因此,我们检查了子元素是否具有填充了期望值的特殊Angular属性。

测试输出事件

我们记得在HTML中的folder-name.component.html 我们发生了Output()事件(editConfirmed)

这是此事件的代码,位于folder-name.component.ts中

为了测试事件和内部功能的正确绑定,我们将使用triggerEventHandler并在其中传递Output ()属性名称:

使用这种技术时,我们将能够对父组件中的子绑定进行适当的单元测试。