如何用Jasmine測試JQuery插件？

Question

用Jasmine對JQuery代碼進行單元測試的最佳方法是什麼？

我有這個簡單的jQuery的測試程序：

<div id='log'>log goes here</div> 
<button id='btnClearLog'>Clear log</button> 
<button id='btnAddLog'>Add log</button> 

<script> 
$(document).ready(function() { 

    $('#log').empty(); 

    $('#btnClearLog').click(function() { 
     $('#log').empty(); 
    }); 

    $('#btnAddLog').click(function() { 
     $('#log').append("<br />something");  
    }); 
}); 
</script> 

可正常工作 - DIV＃日誌爲空文件時的負荷，增加點擊時#log和明確#log。

但我不認爲這是可能的單元測試，因爲JQuery代碼是在HTML頁面內。

所以，我重新寫這樣的：

<div id='log'>log goes here</div> 
<button id='btnClearLog'>Clear log</button> 
<button id='btnAddLog'>Add log</button> 

<script> 
$(document).ready(function() { 

    $('#log').tester(); 

}); 
</script> 

，並外在jQuery代碼到一個單獨的文件 - 像這樣 - 基於生成的jQuery插件代碼http://starter.pixelgraphics.us/

(function($){ 

    $.Tester = function(el){ 

    var base = this; 

      base.init = function(){ 

     $('#log').empty(); 

     $('#btnClearLog').click(function() { 
      base.clear(); 
     }); 

     $('#btnAddLog').click(function() { 
      base.add(); 
     }); 
      }; 

    base.clear = function(){ 
     $('#log').empty(); 
      }; 

    base.add = function(){ 
     $('#log').append("<br />something"); 
      }; 

      base.init(); 
    }; 

    $.fn.tester = function(){ 
     return this.each(function(){ 
      (new $.Tester(this)); 
     }); 
    }; 

})(jQuery); 

這也符合預期。

但是，我試圖在Jasmine腳本不起作用。

describe('tester', function() { 

    it('log should be empty', function() { 
     var log = "<div id='log'>log</div>"; 
     var result = $(log).tester(); 
     expect(result).toBeEmpty(); 
    } 

}); 

我已經試過以上的各種排列 - 所有失敗：

"Expected '<div id="log">log</div>' to be empty" 

是否有可能測試這種寫法的插件嗎？

以另一種方式編寫代碼以使其更易於測試是否更好？

Answer 1

這裏有一些問題。首先，將測試代碼與查詢代碼的測試功能混合使用。因此，expect(result).toBeEmpty();將測試這段代碼被調用，這是正確的測試，但它也測試元素是空的，這不是你的工作。

其次，你在你想要測試的代碼中創建新的實例，是什麼讓它很難測試，因爲你已經處理了$。所以，畢竟這將是隻有更好，以測試你的Tester()功能和插入的所有元素對想：

(function($){ 

    $.Tester = function(el, log, btnClearLog, btnAddLog){ 

    var base = this; 

      base.init = function(){ 

     log.empty(); 

     btnClearLog.click(function() { 
      base.clear(); 
     }); 

     btnAddLog.click(function() { 
      base.add(); 
     }); 
      }; 

    base.clear = function(){ 
     log.empty(); 
      }; 

    base.add = function(){ 
     log.append("<br />something"); 
      }; 

      base.init(); 
    }; 

    $.fn.tester = function(){ 
     return this.each(function(){ 
      (new $.Tester(this, $('#log'), $('#btnClearLog'), $('#btnAddLog'))); 
     }); 
    }; 

})(jQuery); 

這樣做，所以你可以測試只有你測試儀，通過在一些嘲笑，而不是真正的DOM元素。看看如何創建和使用mock的sinon。正如我們在JavaScript世界中一樣，你也可以嘲笑JQuery，簡單地說不要將jquery插入你的測試端，而是通過模擬替代它。