如何在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是我們所有specs都存在的地方 - 它們在邏輯上被組織成子目錄。

---

一些helpers程序庫通過global實現全局可用 ，例如：

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

此外，為了讓助手和PO進口更加方便，避免遍歷目錄爬在樹上，並以更好地處理嵌套結構，我們已經轉而使用requirePO和requireHelper由@邁克爾Radionov建議輔助功能，請參閱：

• 使用需要相對路徑的require

我也非常喜歡@finspin提出的想法，即從每個Page Object中創建一個節點包。