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

Question

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

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

我知道这种方法无法扩大规模

是否有最佳实践来重新组织测试，使我编写的代码量最少，同时保持测试代码干燥？

Answer 1

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

这是给你的一个例子，我们目前的项目结构：

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

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

helpers 基本上就是我们的 "libs"/"utils" 目录。我们保留自定义 jasmine 匹配器，附加 "helper" 具有辅助函数的模块。此外，我们还有 localStorage 和 sessionStorage 模块，它们是 window.localStorage 和 window.sessionStorage 对象的方便包装器。

mocks是我们保存protractor-http-mock mocks.

的目录

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

specs 是我们所有规范所在的地方 - 它们按逻辑组织到子目录中。

---

部分 helpers 库是 ，示例：

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

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

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