如何在jQuery on（）方法上編寫Jasmine測試用例

Question

我是Jasmine的新手。感謝有人可以簡單介紹一下如何爲以下jQuery代碼編寫測試用例：

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    logger.debug('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId){...} 

感謝您的期待！

茉莉花測試用例上面的代碼：

describe('Working with transaction details component', function() { 
    beforeEach(function() { 
     spyOnEvent(document, 'startViewDetail'); 
     $(document).trigger('startViewDetail', mockDataObject.transactionId); 
    }); 
    it('test startViewTransaction', function() { 
     spyOn(document, 'startViewTransaction').and.callFake(function(e) {
   console.log("This is a spy call for startViewTransaction");
   }); 
     expect(document.startViewTransaction).toHaveBeenCalled();
   expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId); 
    }); 
}); 

Answer 1

本帖的範圍很廣，所以我會用一種方法啓動

因此，這裏有你需要問你想之前的幾件事單元測試代碼

• 你測試你的代碼的功能或事件的結合
• 如果功能它正在測試事件綁定，那麼恐怕jQuery已經徹底地進行過單元測試了。

我個人並不覺得需要測試jQuery方法。這只是將目標轉向測試實際的手寫代碼。說了這裏是我根據你的代碼準備的一個樣本測試。

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    console.log('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId) { 
    console.log('started transaction with transactionId: ' + transactionId); 
} 

describe('sample test', function() { 
    it('test startViewTransaction', function() { 
    spyOn(window, 'startViewTransaction').and.callFake(function(e) { 
     console.log("This is a spy call for startViewTransaction"); 
    }); 
    var obj = $(document); 
    obj.trigger('startViewDetail', 1); 
    expect(window.startViewTransaction).toHaveBeenCalled(); 
    expect(window.startViewTransaction).toHaveBeenCalledWith(1); 
    }) 
}); 

編輯： 接聽評論：

• startViewDetail不是方法，它是一個事件名稱，所以你的行spyOnEvent(document, 'startViewDetail');是無效的。刪除它，因爲它不起任何作用。
• 我想知道爲什麼你要窺探document對象，javascript的流浪/獨立功能總是在窗口之下。所以切換你的間諜，以反對窗口，而不是文件。
• 你不應該在beforeEach中使用這條線$(document).trigger('startViewDetail', mockDataObject.transactionId);，這應該用在你的測試中，就像我上面使用的那樣。
• spyOn(document, 'startViewTransaction').and.callFake(function(e) {
 console.log("This is a spy call for startViewTransaction");
 });也需要修改，它應該違背窗口對象和NOT文檔。
• 同樣是expect(document.startViewTransaction).toHaveBeenCalled();
 expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId);
  • 茉莉花documentation是瞭解如何beforeEach，它，afterEach塊工作的最佳來源的情況下。