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

Question

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

我有两个不同的文件夹(unit和e2e文件夹)中的e2e和单元测试,我目前没有利用页面对象设计模式.这些文件是非结构化的,不共享很多代码,所以我多次重复自己.

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

是否有最佳实践以这样的方式重新组织测试我编写最少量的代码,保持测试代码DRY？

Answer 1

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

以下是您的示例,我们目前拥有的项目结构:

$ cd e2e
$ tree -L 1
.
??? config
??? db
??? helpers
??? mocks
??? po
??? specs

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

helpers基本上是我们的"libs"/"utils"目录.我们保留定制的茉莉花匹配器,带辅助功能的附加"辅助"模块.此外,我们有localStorage和sessionStorage模块,方便包装window.localStorage和window.sessionStorage对象.

mocks是我们保持protractor-http-mock模拟的目录.

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

specs 是我们所有规范的所在 - 它们在逻辑上组织成子目录.

有些helpers库是全球可用的global,例如:

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

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

• 使用需要相对路径的require

我也非常喜欢@finspin提出的想法,即从每个Page Object中创建一个节点包.