[Tools] 使用Chutzpath讓Visual Studio整合JavaScript單元測試

在我們測試JavaScript時,都還是必須打開包含測試JS檔的網頁,來觀看測試JavaScript的結果,其實是有點小麻煩,並寫必須透過眼睛來觀看測試的結果,
今天要向大家介紹的Chutzpath這套工具可以幫助我們整合Javascript的測試到Visual Studio中,讓我們的測試進行更加的方便,並且可以讓前後端的測試一目了然,也可以透過Visual Studio的介面一次顯示所有錯誤的清單。

前言

隨著網頁和使用者間的互動越來越頻繁,JavaScript的使用量也越來越大,

針對JavaScript所撰寫的單元測試也越來越重要,

在進行功能變更或Bug修復之後,我們只要執行一遍單元測試就能確保所有功能正常。

測試JavaScript

在我們測試JavaScript時,都還是必須打開包含測試JS檔的網頁,來觀看測試JavaScript的結果,

其實是有點小麻煩,並寫必須透過眼睛來觀看測試的結果,

今天要向大家介紹的Chutzpath這套工具可以幫助我們整合Javascript的測試到Visual Studio中,

讓我們的測試進行更加的方便,並且可以讓前後端的測試一目了然,

也可以透過Visual Studio的介面一次顯示所有錯誤的清單。

Chutzpath介紹

Chutzpath是一套讓我們用Command Line測試網頁上JavaScript的工具,

它主要使用了Phantom.js來實現不使用瀏覽器就可以進行網頁JavaScript的測試,

(Phantom.js是一套基於webkit核心實現的JavaScript API, 可以讓我們不需要開啟瀏覽器就能用Javascript來操作網頁的元素或是Javascript)

並且可以不用特別撰寫Html的Wrapper來包含待測試的JavaScript檔案,就可以進行測試

只要將js的測試檔當作參數執行command,就會自動產生wrapper的html,並回傳測試的結果到command line,

chutzpah.console.exe "測試檔.js"

安裝Extension

在開始介紹使用方法之前,我們必須先安裝Visual Studio的Extension,

安裝完成後重新開啟Visual Studio

撰寫測試

  1. 首先開啟一個空白的Web專案

  2. 建立資料夾給Js檔使用

  3. 新增calculator.js,撰寫加減乘除的基本邏輯

  4. 新增calculatortest.js,驗證邏輯正確 (本處以jasmine為test framework)

    記得要加上預測試檔案的參考路徑如紅框內標示

  5. 在測試檔案點選滑鼠右鍵,選擇"Run Js Tests"

  6. 若測試中有任何錯誤,可以直接在Visual Studio的測試中看到

  7. 執行成功的畫面

  8. 還可以透過測試總管一次執行所有的測試

結語

隨著前端技術的越來越豐富,能夠節省我們瑣碎時間的工具也越來越多,

善用這些工具可以讓我們的開發更佳的順暢,並寫省下更多時間來讓網站的測試更完整,

透過單元測試可以讓我們的程式碼隨時處在一個健康完善的狀態,

更可以整合於CI讓網站的健康情況不再是一個抽象的名詞,而是具體可見的狀態,

關於今天的內容,歡迎大家提出問題或一起討論 ^_^