經過Jasmine和Guard自動測試JavaScript

原文標題：Autotesting JavaScript with Jasmine and Guard

原文地址：http://edspencer.net/2013/06/15/autotesting-javascript-with-jasmine-and-guard/

經過Jasmine和Guard自動測試JavaScript

我喜歡Rails的一個緣由是：他介紹了自動測試的理念給我，即一個監聽你文件系統改變的文本，而後在文件發生改變時，自動運行你的單元測試。

由於單元測試一般狀況下運行得很快，你可能在你一兩次保存文件後就獲得了你的測試結果。容許你繼續在編輯器中繼續編輯代碼，只有你在須要詳細調試的狀況下時，纔將轉向到瀏覽器中進行調試――由於有了命令行輸出和操做系統的提醒，你能夠大部分時間內集中你的主要注意力在問題解決上。

這是一個使人嚮往的工做方式，而且因爲我工做上從新用到了JavsScript。由於我使用過不少ruby的程序，並且我很是熟練輕鬆地實現了這種方式，證實了這是一個很容易就實現的方式，並且，這是很是明智的，我嘗試了這種方式。

安裝Guard

Guard 的是「守衛」的意思，這裏指是一個 ruby 小插件，他可以掃描你的文件系統中所改變的東西，而後在你所關心文件改變時運行你指定的代碼。他爲自動測試提供了簡單而又有效的，基於文件系統的觸發器。首先，讓咱們確認一下，咱們安裝了全部必需的ruby gem小插件。

gem install jasmine jasmine-headless-webkit guard-jasmine-headless-webkit guard \

 guard-livereload terminal-notifier-guard --no-rdoc --no-ri

這僅僅只是安裝了一小部分的ruby插件，用於咱們的測試。首先咱們先經過安裝ruby插件安裝優秀的JavaScript行爲驅動開發（BDD）測試框架：Jasmine，固然你可以使用你本身所喜好框架，可是，我認爲Jasmine用起來很順手而且徹底能夠勝任咱們的要求。而後，咱們添加jasmine-headless-webkit插件，以及他的 "guard 雙胞胎"(經過使用phantomjs在命令行上執行你的測試代碼，而不須要在瀏覽器中執行)。

接下來，咱們安裝了「guard-livereload」，它可以使得Guard可以做爲一個 livereload 的服務器，在你修改文件後自動地在瀏覽器運行全部測試用例。這初步看起來很強大。同時這有一點疑惑，既然咱們已經能夠在精簡webkit環境運行咱們的測試，那爲何還要給本身找麻煩去支持在瀏覽器中運行呢？恩，由於在咱們測試用例發現錯誤時，咱們能夠從瀏覽器中獲得更多的信息，例如堆棧跟蹤，而這些信息對於實時調試是很是有幫助的。

最後咱們安裝了「terminal-notifier-guard 」插件，它可以在每次運行完測試用例後給咱們一個通知。如今咱們已經安裝了全部必須的插件了，如今咱們開始搭建軟件環境了，很是感謝jasmine和guard提供了很簡單明瞭的操做說明。

jasmine init

guard init

接下來，咱們要開始運行了，讓咱們經過運行「guard」命令測試是否搭建成功。
guard

你應該看到的是這樣的(原文的圖片看不到，這是我本身的截圖，注意我這裏只裝成功gaurd和livereload，因此與原文的圖可能有區別)：



咱們看到guard已經啓動完畢，告訴咱們在每次測試用例完成運行時，將會經過使用終端監聽的方式給操做系統一個響應，同時，將會使用JasmineHeadlessWebkit運行這些測試用例，而不是經過瀏覽器。你將看到在5ms內運行了5個測試用例，而且你應該看到有一個閃屏的操做系統提示告訴你完成了測試。當你不想一直保持一個終端窗口可見時，例如使用筆記本工做時，這是很是棒的！

這5個測試的內容是什麼？它們僅僅是咱們經過「jasmine init」建立的示例，你可以在 spec/javascripts 目錄找到它們，一般狀況下，只有一個文件 PlayerSpec.js

如今，咱們嘗試去修改這個文件，而且修改後立刻保存。結果什麼也沒發生。緣由是經過「guard init」 生成的 Guardfile 文件中的監聽文件條件與 jasmine 的文件結構不相符形成的。咱們得稍微麻煩一點，手動修改這個 Guardfile 這個文件。

若是你如今打開 Guardfile 文件，你將看到有30行左右的配置選項(不知怎的，筆者這隻有11行)。文件中大部分是註釋和可選項，這些你均可以隨意刪除掉的。Guard 指望你的測試文件遵循以下格式「my_spec.js」，注意js文件須要以 "_spec" 結尾。

一個簡便的辦法是直接修改 spec_location 變量，將後面的 _spec 移除掉就行。而後對  `guard ‘jasmine-headless-webkit’ do` 這一塊作一樣的操做。最終處理後的結果應該是這樣的：

spec_location = "spec/javascripts/%s"

guard 'jasmine-headless-webkit' do

watch(%r{^app/views/.*\.jst$})

watch(%r{^public/javascripts/(.*)\.js$}) { |m| newest_js_file(spec_location % m[1]) }

watch(%r{^app/assets/javascripts/(.*)\.(js|coffee)$}) { |m| newest_js_file(spec_location % m[1]) }

watch(%r{^spec/javascripts/(.*)\..*}) { |m| newest_js_file(spec_location % m[1]) }

end

一旦你修改完畢 Guard，不須要重啓 guard，它可以監聽到Guardfile的改變，而且自動重啓。如今一旦你保存 PlayerSpec.js 文件，你可以看到你的終端馬上運行了你的測試用例，而且給了你測試結束的提示，固然假定你的測試仍然是經過的。

你是否是對 `guard ‘jasmine-headless-webkit’ do` 這塊的內容有些疑惑呢？可能你已經猜到了，這就是設置guard將監聽的文件。不管何時，知足當前匹配的文件一旦發生更改，guard 將會自動運行jasmine-headless-webkit命令，就是運行你的測試用例。這些是默認的選項，因此若是你的js文件沒有在這些匹配選項中找到時，你所要作的就是僅僅將它放到正確的目錄下便可。

Livereload

這篇文章的最後一個部分是關於我使用Livereload插件。Livereload由兩部分組成：1個瀏覽器插件（支持Chrome, Firefox 和 其餘瀏覽器），另一個是咱們已經啓動過的Guard。首先你要作的是安裝瀏覽器插件([http://livereload.com/])，這是至關簡單的。

由於livereload的服務器已經在Guard運行起來了，如今咱們要作的是僅僅設置咱們的瀏覽器去加載這些測試用例（在 chrome 網上應用商店，中搜索 livereload，找到「擴展程序」中 LiveReload 安裝，注意不是「應用」的那個
）。不幸的是，我找到的惟一一個辦法是，從新打開另一個終端，而且在同一個目錄下運行：

rake jasmine

這個操做將會啓動一個輕量級的Web服務器，訪問地址爲：[http://localhost:8888。] 若是如今你在瀏覽器訪問這個網址，將會看到以下內容：


點擊一下瀏覽器中的livereload按鈕（前提是你在瀏覽器中安裝了這個插件），再次編輯你的文件，而後你將發現瀏覽器自動刷新了，而且運行了你的測試用例。這個操做是可選的，可是有一點我以爲是至關有用的，就是在存在某些測試不經過時，我可以立馬切換到瀏覽器中經過追蹤堆棧信息和調試工具來查找問題。

到此爲止，咱們介紹完了循環自動測試和怎麼搭建運行環境。下一次當你返回如今代碼，僅僅只須要執行 "guard" 和 "rake jasmine" ，而後，你立馬就擁有了自動測試環境。最後，若是你發現一種能夠不經過打開第二個終端窗口就啓動guard服務器的方法，請在下面留言，謝謝！

譯者所遇到的問題

安裝 jasmine-headless-webkit

因爲公司的電腦是XP系統的，嘗試了多種方法都沒有裝上這個插件。暫時放下了，等有空到本身的電腦上的centos系統在嘗試一下。

failed to build native extension

* 安裝 DevKit
* 找不到 gmake

  gem install libv8

  執行這條命令仍是不行的

找不到不包含內核的測試插件

 

gem install bundler-1.3.5.gem -l
gem install bundle-0.0.1.gem -l

17:18:49 - ERROR - Could not load 'guard/jasmine-headless-webkit' or find class Guard::Jasmineheadlesswebkit

cd /d e:/software/gem

下載 jasmine-headless-webkit.gem 而後安裝：
gem install jasmine-headless-webkit-0.8.4.gem -l

安裝失敗，好像用到了 QT 中的 qmake 工具

Building native extensions.  This could take a while...
ERROR:  Error installing jasmine-headless-webkit:
        ERROR: Failed to build gem native extension.

        D:/Ruby187/bin/ruby.exe extconf.rb
make: *** No rule to make target `clean'.  Stop.
D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib/qt/qmake.rb:
97:in ``': No such file or directory - which gmake (Errno::ENOENT)
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:97:in `get_exe_path'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:53:in `make_path'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:16:in `make_installed?'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:103:in `check_make!'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:37:in `make!'
        from extconf.rb:8

Gem files will remain installed in D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-hea
dless-webkit-0.8.4 for inspection.
Results logged to D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.
4/ext/jasmine-webkit-specrunner/gem_make.out

 

 

安裝gem

從以下網址上下載須要安裝的 gem 軟件
[http://rubygems.org/]

gem install jasmine-1.3.2.gem -l

安裝jasmine

官方推薦的是用這種方式安裝：

gem install jasmine

asmine requires rspec (>= 1.3.1, runtime)
從新安裝 rspec

gem install rspec

jasmine requires selenium-webdriver (>= 0.1.3, runtime)
從新安裝 rspec

gem install selenium-webdriver

從新裝完這個後，終於能夠裝 jasmine 了，我但是等了很久啊...

jasmine init 失敗

  C:\>jasmine init

  D:/Ruby187/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:29:in `gem_original

  _require': no such file to load -- json (LoadError)

 
  好像是確實json的庫，看到Jasmine的requirement列表中，運行時是不須要的，可是開發版是須要的。因此從開發版中下在了gem，發現缺乏了rake，就將rake也裝上了。
 

  gem install rake-10.1.0.gem

  gem install json_pure-1.8.0.gem

livereload

編輯 GuardFile，將：

watch(%r{public\.+\.(css|js|html)})

改爲

watch(%r{.+\.(css|js|html)})

須要先啓動服務器，再啓動瀏覽器中鏈接，修改被監聽的文件，保存後，瀏覽器中會自動刷新

版本問題

    gem install guard guard-livereload --no-rdoc --no-ri

    多是由於裝的 2.0 版本的緣故
    安裝 1.8.7 就沒問題了

    gem install guard guard-livereload --no-rdoc --no-ri
    多是由於裝的 2.0 版本的緣故
    安裝 1.8.7 就沒問題了

    可是啓動 Guard 後，瀏覽器鏈接到服務器上仍是出現問題了。

總結

我只實現了監聽文件，使用livereload插件鏈接guard，這樣，在apache下調試簡單的js文件仍是比較方便的。但由於個人項目是在 MyEclipse 部署服務器，同時在 emacs 中編輯 js 文件，每次更新完畢 js 文件確實會使瀏覽器從新刷新，可是因爲 MyEclipse 沒有部署最新的 js 文件，在瀏覽器上的效果仍是比價舊的，因此感受對我沒太大的幫助。固然，若是你是在 MyEclipse 中編輯 js 文件仍是比較方便的，至少幫你省去了從新刷新瀏覽器的操做。 總有些好的工具咱們還不瞭解。要是早些知道的話，能大大提升開發效率，加快項目地開發。因此，有經驗的程序員是很值得尊敬的，也不用擔憂老程序員被新程序員替代，這些經驗是很寶貴的財富。同時，這是我第一篇翻譯的開發資料，學到了不少，只是花費的時間有些多，但這些花費時間是很值得的。 我沒有在 XP 中搭建成這篇文章中最終要的自動測試和終端提醒功能，若是你們知道有安裝成功的辦法，請在留言中告訴我，謝謝。