jasmine jquery測試以檢查是否已將正確參數傳遞給方法

Question

我是JavaScript測試新手。 我正在使用茉莉花，並需要測試是否正確的參數已傳遞給方法。

這是我的方法：

function myView(){ 
     if($('.view').is('.list')){ 
      myWindow('list'); 
     }else{ 
      myWindow('random'); 
     } 
     $('.view').toggleClass('my-list'); 
    } 

    function myWindow(list) { 
     var url = /test.json; 
     $.post(url, {"list": list}); 
    } 

Here are my tests: 

    describe('#myView', function() { 
    beforeEach(function() { 
     fixture.load('myview.html'); 
    }); 

    it('sets window to list', function(){ 
     expect(window.myWindow).toHaveBeenCalledWith('list'); 
    }); 
    }); 

我碰到下面的錯誤。

Error: Expected a spy, but got Function. 

如果我添加此行之前預期

spyOn(window, myWindow('list')); 

我得到以下錯誤（因爲我指定了正確的PARAM應由試驗確定，這似乎是錯誤的）：

undefined() method does not exist 

有人可以顯示我的一個很好的方式來寫上述測試？

Answer 1

spyOn的第二個參數是您需要監視的屬性的名稱。當你調用spyOn(window, myWindow('list'));，你的第二個參數是的myWindow('list')的返回值是undefined =>拋出錯誤：undefined() method does not exist

在你的代碼，簡單地做這應該工作：

describe('#myView', function() { 
    beforeEach(function() { 
     fixture.load('myview.html'); 
    }); 

    it('sets window to list', function(){ 
     spyOn(window, "myWindow");//spy the function 
     myView();//call your method that in turn should call your spy 
     expect(window.myWindow).toHaveBeenCalledWith('list');//verify 
    }); 
    }); 

在軟件單元測試，有概念叫做stub and mock objects。這些是被測方法的依賴關係。 spyOn是創建你的假對象來測試你的方法。

你訪問全局window對象直接，這是真正的單元測試的一個問題。 雖然 JavaScript是一種動態類型語言，我們還是可以嘲笑你的window對象（這是不可能的一些靜態類型語言，如C＃）。 但是創建一個很好的單元測試代碼，我建議你應該重新設計你的代碼從外部注入它。

function myView(awindow){ //any dependency should be injected, this is an example to inject it via parameter 

     if($('.view').is('.list')){ 
      awindow.myWindow('list'); 
     }else{ 
      awindow.myWindow('random'); 
     } 
     $('.view').toggleClass('my-list'); 
    } 

試試這個：

describe('#myView', function() { 
    beforeEach(function() { 
     fixture.load('myview.html'); 
    }); 

    it('sets window to list', function(){ 
     var spy = {myWindow:function(list){}}; 
     spyOn(spy, "myWindow"); //create a spy 
     myView(spy); //call your method that in turn should call your spy 
     expect(spy.myWindow).toHaveBeenCalledWith('list'); //verify 
    }); 
    }); 

一兩件事，像這樣的jQuery代碼是不是單元測試相當不錯的候選者它涉及您的代碼 DOM操作。如果你有時間，你應該看看angularjs框架，它將你的視圖（DOM）從你的模型（邏輯）中分離出來，使用dependency injection來使你的代碼可測試。