如何为 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){...}

感谢期待！

上述代码的 Jasmine 测试用例：

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

这个 post 的范围很广，所以我将从一种方法开始

因此，在您要对代码进行单元测试之前，您需要了解一些问题

您是在测试代码的功能还是事件绑定的功能
如果是测试事件绑定，恐怕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 的 stray/stand-alone 函数总是在 window 下。所以把你的间谍换成反对 window 而不是 document.
你不应该在 beforeEach 中使用这一行 $(document).trigger('startViewDetail', mockDataObject.transactionId);，这应该像我上面使用的那样在你的测试中使用。
spyOn(document, 'startViewTransaction').and.callFake(function(e) {  console.log("This is a spy call for startViewTransaction");  }); 也需要修改，它应该违背 window 对象而不是文档。
expect(document.startViewTransaction).toHaveBeenCalled();  expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId);也是如此
- Jasmine documentation 是了解 beforeEach、it、afterEach 块如何工作的最佳来源。

如何为 jQuery on() 方法编写 Jasmine 测试用例

How to write Jasmine test cases for jQuery on() method

jquery

jasmine

jasmine-jquery