Karma-Mocha -如何测试侦听DOMContentLoaded事件的方法

Question

我正在为我的公司维护的一个内部框架编写测试。其中有一个方法等同于jQuery的$(document).ready(handler)方法。该方法如下所示：

export function $ready(fn) {
    document.readyState === 'complete' ?
        $exec(fn) :
        document.addEventListener('DOMContentLoaded', function() {
            $exec(fn);
        });
}

我希望能够编写一个测试来执行事件侦听器回调，而不是立即执行fn，但是我不知道在readyState设置为complete之前执行测试的方法，也不知道重新触发DOMContentLoaded事件的方法。任何建议都将不胜感激。

Answer 1

重新触发DOMContentLoaded

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'DOMContentLoaded'.
event.initEvent('DOMContentLoaded', true, true);

window.document.dispatchEvent(event);

然后你就可以测试它了

describe('Some feature', function() {
  it('should increase the number of div', function(){
    expect(document.querySelector('div')).to.equal(10);
    // retrigger DOMContentLoaded event here
    expect(document.querySelector('div')).to.equal(15);
  });
});

createEvent API