JavaScript用戶端測試之旅__Java

進行測試是很重要的。測試能讓我們不費勁地擴充和重構我們的代碼。許多開發人員遵循測試驅動的開發流程。我相信寫測試能讓軟體開發變得更有趣，並且通常會帶來更好的代碼。良好設計以及經過測試的系統更容易維護。

在過去的幾年裡，開發人員開始把許多的應用邏輯放到瀏覽器中，我們也開始寫越來越多的JavaScript代碼。因為這種語言非常流行，開發人員們開始建立用於改善JavaScript開發體驗的工具。在這篇文章中，我們將談論一些專門用於測試用戶端JavaScript代碼的工具。

測試設定

我們來討論一下能夠進行測試的工具類型，它們能讓我們構建、分組以及運行我們的測試。

測試架構

架構套件含一些函數如suite、describe、test 或 it。這些能讓我們建立測試的分組，這些分組經常被稱為套件（suit）。例如：

describe('Testing user management', function () {

  it('should register a new user', function(done) {

    // the actual testing goes here

  });

  it('should remove a user', function(done) {

    // the actual testing goes here

  });

});

我們把應用邏輯分割成塊，每個塊都有自己的套件。該套件包括我們想在代碼上啟動並執行相關測試。流行的JavaScript測試架構有QUnit、Jasmine 或Mocha.

聲明庫

我們用聲明庫來做實際的檢查。它們提供了易用的函數，如下面的例子：

expect(5).to.be.a('number');

有很多的模組可供我們使用。Node.js甚至就有一個內建的模組，也有一些開源的工具供我們選擇，如Chai、Expect 或 should.js。

應該提醒的是，一些測試架構擁有自己的斷言庫。

運行器

我們可以需要或者也可以不需要一個運行器（runner）。有些情況下單一的測試架構不能滿足，因而我們需要在一個特定的上下文來運行測試。為了完成這件事，我們使用一個運行器。有些情況下這些工具被稱為“spec runners”或“test runners.”。這些工具封裝了我們的測試套件，並且在一個特殊的環境下運行。我們將會講到這一點。

應用程式

我們需要一個待測試的應用程式。儘管這隻是用於舉例說明，但它不能太過簡單。TODOMVC 看起來是個不錯的選擇。它基本上跟其他的TODO app一樣，使用了許多不同的架構。我們用Backbone.js 的變種。這就是該應用程式的樣子：

假設這是我們上個月在做的一個項目，並且計划下周發布。我們想確保它通過一些測試，也假設後端的已經測試過了。唯一的問題是用戶端的JavaScript代碼。在這個時候，由於應用程式已經完成了，我們最感興趣的是它是否能正常地工作。它是一個TODO app，因此我們需要保證使用者能夠添加、刪除以及編輯任務。

在瀏覽器中測試

我們需要對瀏覽器中啟動並執行代碼執行檢查，因此在瀏覽器中進行測試是很合理的。我們將使用Mocha來作為架構。由於該架構不帶斷言庫，我們將在項目中引用Chai。我們從todomvc.com 下載了app，並且瀏覽了檔案：

├── bower_components

├── js

│   ├── collections

│   ├── models

│   ├── routers

│   ├── views

│   └── app.js

└── bower.json

└── index.html

└── readme.md

這篇文章是關於測試的，因此我們不打算深入Backbone.js工作原理的細節。然而，這裡介紹一下檔案和目錄的基本細節：

bower_components – 包含Backbone.js庫、本機存放區助手、jQuery、Underscore.js以及TODOMVC通用檔案

js – 這個目錄包含這個app的實際代碼

bower.json – 定義項目的依賴

index.html – 包含HTML標籤（模板）

在平常的開發流程中，我們開啟一個瀏覽器、載入應用程式並且使用UI。我們在輸入框敲入了一些文字建立了一個TODO，按Enter鍵然後任務顯示在下面。通過點擊小小的X標誌來移除記錄，通過雙擊TODO來編輯任務。我們有很多涉及不同滑鼠事件的動作。

為了測試app，我們不想一遍遍重複上面的步驟。自動化測試可以幫到我們。我們將有效地運行這個應用程式，並且寫能夠與頁面互動就像我們手動操作一樣的代碼。讓我們建立一個tests_mocha檔案夾存放我們的測試。

├── bower_components

├── js

│   ├── collections

│   ├── models

│   ├── routers

│   ├── views

│   └── app.js

├── tests_mocha

│   ├── package.json

│   ├── spec.js

│   └── TestRunner.html

└── bower.json

└──