[[176204]]

有許多原因使我過去不愿對自己的應用添加自動化測試。原因之一是不知道其中的效益成本比率，另一個原因是考慮到集成到現有生產環境的應用可能比較難。測試應用而不用從頭重構代碼，僅僅只是引入測試要怎么做呢?

首先我們先從簡單區分測試的類型開始。應用測試有很多類型，但最為常見的是單元測試及端對端測試(亦稱為集成測試)。單元測試是測試代碼自身行為的一種測試。在用戶看來什么也沒有做，但可以確保其方法能達到期望的目的。集成測試是模仿用戶行為的一種測試。比如說，登陸系統，創建帖子，退出系統等這些操作都可以自動化，并且你可以用眼睛看到其過程是怎么發生的。

 

這兩種類型的測試，它們通常彼此結合使用。對于新的開發來說，這將是理想的。如果時間有限制，或繼承于現有項目的情況下，端對端測試或許比單元測試更加合適。因為我們并不需要過多了解先前的代碼庫，同樣可以覆蓋更多場景，這將比單元測試更快，因為單元測試并不測試單個單元而是整個場景。

單元測試依然重要，但如果你必須要在開始的時候選擇一個，我認為端對端測試會是更好的選擇。在這篇文章中，我將測試一個現有的Angular 2的待辦事項的項目。我將使用集成測試，并覆蓋一系列的場景。

如果你需要熟悉Angular 2的入門，請看這篇文章 Angular 2 article from Jscrambler。

 

被測試的場景

• 當應用初始化加載時，有3件待處理的事情
• 需要加載新待辦事項
• 點擊一個待辦事項，然后跳到待辦事項的詳細頁
• 刪除一個待辦事項
• 編輯一個待辦事項標題，然后保存后，可以在首頁的待辦事項列表中看到新標題
• 不允許保存一個空的待辦事項，在點了禁用的保存按鈕后，待辦事項的列表依然還是原來的總數
• 起初加載首頁時，添加新待辦事項的按鈕應處于禁用狀態
• 保存待辦事項的按鈕僅應在輸入待辦事項標題后處于編輯狀體

Todo 應用程序概述

讓我們簡單的描述一下TODO應用程序。應用程序將首先在主頁上列出待辦事項清單。有三個待辦事項會詳細列出。

這寫數據不會由服務端提供，而是從設備文件硬編碼中加載。

在首頁上，我們可以添加新的待辦事項。我們可以通過點擊代辦事項的標題來訪問其詳細信息頁面。在此頁面上，我們可以編輯代辦事項標題或刪除待辦事項。

克隆并設置Todo 應用程序

1、首先克隆我已經推送到存儲庫這里但未經測試的應用程序，確保你是在主分支克隆的。接下來，你需要安裝幾個工具以便能進行下面的操作，在本教程中，使用Candidate已經發布的Angular 2，版本為2。

2、確保您已安裝NodeJS的版本是Node 4.x.x或更高版本。

3、使用以下命令安裝節點依賴項：

npm install 

當然是在克隆的存儲庫中操作

4.使用Angular-CLI進行開發。安裝Angular-CLI 全局使用下面命令：

npm install -g angular-cli@latest 

5.Angular 2 端到端測試使用被稱為 protractor的工具來運行，安裝protractor 全局使用下面命令：

npm install -g protractor 

6.安裝所有依賴項后，使用以下命令啟動開發服務器：

ng serve 

然后導航到瀏覽器地址：http://localhost:4200，您將看到三個待辦事項列表。

如果您在啟動服務器時遇到問題，您可以參考stackoverflow issue來解決問題。

 

Angular 2測試相關的重要概念

端對端測試的文件夾在e2e。 其中有一個已預備好的案列文件，文件名為es2/app.e2e-spec.ts。

其中的測試文件是用 jasmine 框架開發的。有很多方式模塊化、組織Angular 2端對端測試，但這里為了方便，這篇文章都將在一個文件中進行。

我們這個應用僅有一個功能那就是待辦事項。為了滿足大家的好奇心或有人在想比上述更復雜的情況，試想一個需要測試訂單、用戶配置等功能更復雜的應用的場景。對此測試的場景，我將在e2e文件夾中分別為每個待測試功能創建一個文件夾，并將各自測試文件放置其中。

這種情況下，我們將有兩個文件夾分別命名為e2e/orders 和 e2e/userProfile。每個文件夾中僅會有一個測試文件，或者為了滿足更多待測試功能的需要而創建多個測試文件。需要注意的一點是每個測試文件都以word e2e-spec.ts結尾，這樣Protractor測試工具才可以加載到。

Ok，還是回到我們簡單的單個測試文件。如果你略有查看此文件，你會發現文件的頭部有個導入聲明(import statement)。導入是聲明若干測試文件中所用的普通函數是源于哪里。然而這篇文章，我們不會使用這個，而將這個視為函數庫。

 

在引入聲明(import statement)之后，我們有一個描述性的代碼塊，它的兩個函數調用即 beforeEach 和它里面的回調。

在描述代碼塊內，每個回調傳遞給 beforeEach 都需要測試。

每個測試再把里面的回調函數傳遞給它。

讓我們用命令運行當前的測試

protractor 

如果你在運行 protractor 兩個命令中的一個時有問題，請參考這里。

./node_modules/protractor/bin/webdriver-manager update 

或者

webdriver-manager update 

要是當前的測試失敗，可能會在首頁看到“app works”這樣的文本提示。這并不是因為我們修改了首頁的內容就出現這種情況。

在我們開始編寫我們的測試之前，讓我們理解一些重要的通用函數，然后使用 Angular 2 的端到端測試。

 

導航到頁面

在測試文件中，有一個browser全局變量。它使用import語句引入

import { browser, element, by } from 'protractor/globals'; 

你現在可以添加上。

例如，我們使用下面語句導航到你的應用程序中可用的任何頁面

browser.get('/'); 

到你的主頁，和

browser.get('/users'); 

到users頁面。請注意，這些網址是相對的URL，我們也可以使用絕對URL，但是我建議使用相對URL，因為如果你的域名改變，這更易于維護。

選擇元素

通常的做法是在當前頁面上選擇元素。你可以通過一個叫做element的全局變量選擇元素。它接受可以使用全局by創建的定位器。

使用選擇具有green類的p標簽例子如下

let greenParagraph = element(by.css('p.green')); 

選擇多個元素，有些輕微的變化

let greenParagraphs = element.all(by.css('p.green')); 

這將給出一個數組，而不是一個單一的元素。

抓取元素文本

要得到一個元素的文本，你必須先選擇它，然后調用getText方法，想下面這樣。

 

let greenParagraph = element(by.css('p.green'));  
let text = greenParagraph.getText(); 

點擊元素

點擊元素可以使用下面的語法完成

 

let submitButton = element(by("form .submit-button"));  
submitButton.click(); 

統計元素

我們也可以使用下面的語法來統計元素個數。

 

let blueParagraphsList = elements.all(by("p.blue"));  
let count = blueParagraphsList.count(); 

 

Test Scenarios測試方案

對于那些不太尋常的概念，我們列出了上面覆蓋的場景。

確認要做的首要三件事

當應用程序初次被加載的時候，我們有將要做三件事。

在測試文件 e2e/app.e2e-spec.ts 的內部， beforeEach 代碼塊的下面，刪除調用它的函數，并在下面添加

 

it("should show three todos when we first load the todo app", () => {  
browser.get("/");  
let todos = element.all(by.css(".todos .todo"));  
expect(todos.count()).toEqual(3);  
}) 

不要忘記在這個文件的頂部添加這個導入聲明

import { browser, element, by } from 'protractor/globals'; 

現在，當你運行 protractor 命令，另一個瀏覽器將會被打開且迅速關閉，在你的控制臺上你能看到通過測試的時候顯示為綠色。

好的!我們剛剛已經寫完了我們第一個通過 Angular 2 的端到端測試。

 

添加一個新的待辦事項

現在進行下一個，我們可以添加一個待辦事項。讓我們用下面的代碼添加一個測試塊

 

it("should be able to add a new todo", () => {  
browser.get("/");  
let newTodoInput = element(by.css(".add-todo input[type=text]"));  
newTodoInput.sendKeys("Todo 4");  
let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
newTodoSubmitButton.click();  
let todos = element.all(by.css(".todos .todo"));  
expect(todos.count()).toEqual(4);  
}) 

我們在這里要做的是在待辦事項輸入框中輸入文本并提交表單。然后我們檢查是否有四個待辦事項。 如果是的話，測試通過。

我們剛剛介紹了另一個函數sendKeys，它可以訪問一個選中的元素，常用于輸入文本到輸入框這類元素中。

查看待辦事項的詳情頁

我們應該能單擊一個待辦事項轉到該待辦事項的詳情頁，讓我們用下面的測試實現它吧。

 

it("should be able to click on a todo on the homepage and get to the details page", () => {  
browser.get("/");  
let firstTodo = element.all(by.css(".todos .todo")).first();  
let firstTodoText = firstTodo.getText();  
firstTodo.click();  
let inputFieldText = element(by.css("todo input[type=text]")).getAttribute("value");  
expect(inputFieldText).toEqual(firstTodoText);  
}) 

刪除一個待辦事項

我們應該能刪除一個待辦事項。現在讓我們試著刪除一個待辦事項看看能不能成功。

我們將轉到待辦事項頁并單擊刪除鏈接，當我們返回主頁時，我們能看到減少了一個待辦事項。

 

it("should be able to delete a todo", () => {  
browser.get("/");  
let firstTodo = element.all(by.css(".todos .todo")).first();  
firstTodo.click();  
let deleteLink = element(by.cssContainingText("span", "Delete"));  
deleteLink.click();  
let todosList = element.all(by.css(".todos .todo"));  
expect(todosList.count()).toEqual(2);  
}) 

編輯一個待辦事項的標題

我們能編輯待辦事項的標題，保存后能在主頁的待辦事項列表中顯示新標題。

 

it("should be able to edit a todo title", () => {  
browser.get("/");  
let firstTodo = element.all(by.css(".todos .todo")).first();  
firstTodo.click();  
let todoInputField = element(by.css("todo input[type=text]"));  
todoInputField.clear();  
todoInputField.sendKeys("Editted Todo1 Title");  
let saveButton = element(by.css("todo button[type=submit]"));  
saveButton.click();  
firstTodo = element.all(by.css(".todos .todo")).first();  
let firstTodoText = firstTodo.getText();  
expect(firstTodoText).toEqual("Editted Todo1 Title");  
}) 

不能保存空的待辦事項

當我們想保存一個空的待辦事項時，我們無法進行操作，并且單擊禁用按鈕時，待辦事項列表依然保持同樣的長度。

 

it("should not be able to save an empty todo", () => {  
browser.get("/");  
let newTodoInput = element(by.css(".add-todo input[type=text]"));  
let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
newTodoSubmitButton.click();  
let todos = element.all(by.css(".todos .todo"));  
expect(todos.count()).toEqual(3);  
}) 

保存按鈕在初始化時禁用

初始化時添加待辦事項按鈕被禁用，所以我們添加下列代碼

it("should have add todo button be disabled initially", () => {  
browser.get("/");  
let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
expect(newTodoSubmitButton.isEnabled()).toEqual(false);  
}) 

當我們開始輸入時啟用保存按鈕

只用當我們開始輸入待辦事項標題時，待辦事項保存按鈕才被啟用。

 

it("should only enable save todo button when we start typing a new todo title", () => {  
browser.get("/");  
let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
let newTodoInputField = element(by.css(".add-todo input[type=text]"));  
newTodoInputField.sendKeys("New Todo 4");  
expect(newTodoSubmitButton.isEnabled()).toEqual(true); 
}) 

 

結論

現在，我們來總結一下 Angular2 的“端對端”測試。即使您沒有任何的編程基礎，也可以快速上手編寫“端對端”測試。對于那些被引入代碼庫而又可能存在漏洞的部分，“端對端”測試是一個高效便捷的方法來捕獲問題所在。

我們在概念部分中介紹了一些其他方法。您可以點擊這里來瀏覽這些 Protractor API。并且可以在 GitHub repository 上找到這個應用的完整版和測試版。

我希望您看完這個介紹之后，在您修改任何一行代碼之前都能興奮的開始您的前端應用測試。如果您高興，和我們交流一些您在日常測試中的高見。或者是您關于 Javascript 框架及 Angular2 的想法。感謝您的閱讀。