如何在 AngularJS 中组织单元测试和 e2e 测试？

Question

我需要为我的 JavaScript 单页应用程序组织单元测试和端到端测试。我使用 AngularJS Protractor/Cucumber 进行 e2e 测试，使用 Chai 进行单元测试。

我在两个不同的文件夹（unit 和 e2e 文件夹）中有 e2e 和单元测试，我目前没有利用 page object 设计模式。这些文件是非结构化的，不共享很多代码，所以我重复了很多次。

我认识到这种方法无法扩大规模

有没有一种最佳实践来重新组织测试，使我编写的代码量最少，同时保持测试代码 DRY？

Answer 1

首先，你绝对应该切换到使用页面对象模式，并将你的页面对象保存在一个单独的目录下——我认为建议调用目录po。

这是一个示例，我们目前的项目结构：

$ cd e2e
$ tree -L 1
.
├── config
├── db
├── helpers
├── mocks
├── po
└── specs

config 是我们保存 protractor 配置的特殊目录 - 可能有多个配置 - 例如，用于本地测试和在 BrowserStack 上进行测试。

helpers 基本上是我们的“libs”/“utils”目录。我们保留了自定义的 jasmine 匹配器、带有辅助功能的附加“辅助”模块。此外，我们还有 localStorage 和 sessionStorage 模块，它们是 window.localStorage 和 window.sessionStorage 对象的便捷包装器。

mocks 是我们保存protractor-http-mock mocks 的目录。

po 是定义页面对象的目录。每个页面对象都在一个单独的文件中。

specs 是我们所有规范所在的位置 - 它们在逻辑上被组织到子目录中。

---

一些helpers 库是made globally available via global，例如：

onPrepare: function () {
     global.helpers = require("../helpers/helpers.js");
     // ...
},

另外，为了使助手和 po 导入更方便，避免遍历树中的目录并更好地处理嵌套，我们已切换到使用 @Michael Radionov 建议的 requirePO 和 requireHelper 助手函数，见：

• Using require with relative paths

我也非常喜欢@finspin 提出的想法，即用每个页面对象制作一个节点包。