qunit - 如何 qunit 测试函数绑定(bind)到被触发的事件

Question

js文件

window.onload = function() {
    document.getElementById('example').addEventListener('mousedown', myFunction, false);
};

function myFunction(e) {
    x = e.clientX-parseInt(document.getElementById('example').offsetLeft);
    window.addEventListener('mousemove', anotherFunction, true);
}

试图找出如何使用 QUnit 进行测试。该页面不使用 jQuery，只是直接使用 JavaScsript。如您所见，onload 包括一个添加到元素的事件监听器，当触发该鼠标事件时，将调用 myFunction 函数。请给出 qunit 代码。

Answer 1

在我看来，这应该是两个测试:

一:您想测试以确保事件监听器已正确附加。为此，您可以覆盖 myFunction(或使用来自 sinon 的 spy )。然后触发鼠标点击(参见 MDN for triggering events)。

然后对于下一个函数，只附加 spy 或重写 anotherFunction，然后直接调用您的方法。

** 编辑有关 spy 的信息 **

如果您已经加载了 sinon，并且 myFunction 在作用域内可用，您就可以让 myFunction 成为 spy 。

From the docs for spies和 event triggering

test('callback', function(){
    sinon.spy(myFunction);
    // or
    var oldFunc = myFunction;
    myFunction = function(){
        ok(true, true, 'function called');
    }
    var event = new MouseEvent('down', {
        'view': window,
        'bubbles': true,
        'cancelable': true
     });

    // trigger event 
    document.getElementById('example').dispatchEvent(event);

    ok(myFunction.called, true, 'function called');
    myFunction.restore();
    //or
    myFunction = oldFunc;
});