日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
初步了解Angular2端到端的測試

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

秀洲網(wǎng)站建設公司創(chuàng)新互聯(lián),秀洲網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為秀洲1000多家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的秀洲做網(wǎng)站的公司定做！

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

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

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

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

被測試的場景

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

Todo 應用程序概述

讓我們簡單的描述一下TODO應用程序。應用程序?qū)⑹紫仍谥黜撋狭谐龃k事項清單。有三個待辦事項會詳細列出。

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

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

克隆并設置Todo 應用程序

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

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

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

 
 
    
  
  
  1. npm install 
    2.

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

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

 
 
    
  
  
  1. npm install -g angular-cli@latest 
    2.

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

 
 
    
  
  
  1. npm install -g protractor 
    2.

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

 
 
    
  
  
  1. ng serve 
    2.

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

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

Angular 2測試相關的重要概念

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

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

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

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

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

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

在描述代碼塊內(nèi)，每個回調(diào)傳遞給 beforeEach 都需要測試。

每個測試再把里面的回調(diào)函數(shù)傳遞給它。

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

 
 
    
  
  
  1. protractor 
    2.

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

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

或者

 
 
    
  
  
  1. webdriver-manager update 
    2.

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

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

導航到頁面

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

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

你現(xiàn)在可以添加上。

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

 
 
    
  
  
  1. browser.get('/'); 
    2.

到你的主頁，和

 
 
    
  
  
  1. browser.get('/users'); 
    2.

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

選擇元素

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

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

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

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

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

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

抓取元素文本

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

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

點擊元素

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

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

統(tǒng)計元素

我們也可以使用下面的語法來統(tǒng)計元素個數(shù)。

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

Test Scenarios測試方案

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

確認要做的首要三件事

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

在測試文件 e2e/app.e2e-spec.ts 的內(nèi)部， beforeEach 代碼塊的下面，刪除調(diào)用它的函數(shù)，并在下面添加

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

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

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

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

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

添加一個新的待辦事項

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

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

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

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

查看待辦事項的詳情頁

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

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

刪除一個待辦事項

我們應該能刪除一個待辦事項?，F(xiàn)在讓我們試著刪除一個待辦事項看看能不能成功。

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

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

編輯一個待辦事項的標題

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

 
 
    
  
  
  1. it("should be able to edit a todo title", () => {  
    2.   
  
  2. browser.get("/");  
    3.   
  
  3. let firstTodo = element.all(by.css(".todos .todo")).first();  
    4.   
  
  4. firstTodo.click();  
    5.   
  
  5. let todoInputField = element(by.css("todo input[type=text]"));  
    6.   
  
  6. todoInputField.clear();  
    7.   
  
  7. todoInputField.sendKeys("Editted Todo1 Title");  
    8.   
  
  8. let saveButton = element(by.css("todo button[type=submit]"));  
    9.   
  
  9. saveButton.click();  
    10.   
  
  10. firstTodo = element.all(by.css(".todos .todo")).first();  
    11.   
  
  11. let firstTodoText = firstTodo.getText();  
    12.   
  
  12. expect(firstTodoText).toEqual("Editted Todo1 Title");  
    13.   
  
  13. }) 
    14.

不能保存空的待辦事項

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

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

保存按鈕在初始化時禁用

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

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

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

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

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

結論

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

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

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


文章題目：初步了解Angular2端到端的測試
本文來源：http://www.dlmjj.cn/article/cdiodsh.html