Test debounce with mocha-chai-sinon - mocha.js

Question

I want to test my debounce function but the same applies to underscore or lodash.
I want to use mocha, chai's assert and possibly sinon.
I prepared a codepen.
Sinon's timers give me a headache; when I ask my debounce to run first I still get a response that debounced callback hasn't been called whereas it was!
Let's see the code:
// sinon timers
it('should not run debounced function too early', function() {
var clock = sinon.useFakeTimers();
var delay = 100;
var targetFn = sinon.spy();
var delayedFn = g3.debounce(targetFn, {delay: delay, fireStart: false, fireLast: true});
// for lodash:
//var delayedFn = _.debounce(targetFn, delay, {leading:false, trailing:true});
delayedFn();
clock.tick(delay - 1);
clock.restore();
sinon.assert.notCalled(targetFn);
});
Erroneous results we take from underscore when we change the values that control run first/last. Can someone propose an alternative? a correction?
I also found this link for tests probably in Jasmine.
I want to modify the next block to mocha:
it('should only happen once', function(){
var count = 0;
runs(function(){
var fn = underscore.debounce(function(){
count += 1;
}, 100);
fn();
fn();
fn();
});
waitsFor(function(){
return count > 0;
}, 'didnt execute', 200);
runs(function(){
expect(count).toBe(1);
});
});
Is this possible?
I can only see this mocha test to success:
it('shouldnt execute immediately', function(){
var hasHappened = false;
var fn = g3.debounce(function(){
hasHappened = true;
}, {fireFirst: false, fireLast: true, delay: 100});
chai.assert(hasHappened === false, 'error: callback has called');
fn();
chai.assert(hasHappened === false, 'error: callback has called');
});
If you know a bunch of test cases out there it would be nice so I can see my errors.

Answer 1

I finally found a solution for sinon's buggy timers as internally they override the Date object, setTimeout(), setInterval() etc.
The question here is if we are wiling to change our code for the shake of a test or even worse integrate testing conditions inside our code.
The solution is to initiate a timer with...a time!
/*** file 'g3.debounceTest.js' ***/
describe('g3.debounce', function() {
it('should not run debounced function with: 1 call at elapsed < delay & fireLast: true', function() {
var clock = sinon.useFakeTimers();
// sinon remedy avoids buggy behavior
clock.tick(1000);
//console.log(Date.now());
var delay = 100;
var spy = sinon.spy();
var targetFn = function(){console.log('eventually debounced was called!'); spy()};
var delayedFn = g3.debounce(targetFn, {delay: delay, fireFirst: false, fireLast: true});
// for lodash:
//var delayedFn = _.debounce(targetFn, delay, {leading: false, trailing: true});
delayedFn();
clock.tick(delay - 1);
//console.log(Date.now());
clock.restore();
sinon.assert.notCalled(spy);
});
it('should run debounced function once with: 1 call at elapsed < delay & fireFirst: true', function() {
var clock = sinon.useFakeTimers();
// sinon remedy avoids buggy behavior
clock.tick(1000);
//console.log(Date.now());
var delay = 100;
var spy = sinon.spy();
var targetFn = function(){console.log('eventually debounced was called!'); spy()};
var delayedFn = g3.debounce(targetFn, {delay: delay, fireFirst: true, fireLast: false});
// for lodash:
//var delayedFn = _.debounce(targetFn, delay, {leading: true, trailing: false});
delayedFn();
clock.tick(delay - 1);
//console.log(Date.now());
clock.restore();
sinon.assert.calledOnce(spy);
});
it('should run debounced function once with: 3 calls at elapsed < delay & fireFirst: true', function() {
var clock = sinon.useFakeTimers();
// sinon remedy avoids buggy behavior
clock.tick(1000);
//console.log(Date.now());
var delay = 100;
var spy = sinon.spy();
var targetFn = function(){console.log('eventually debounced was called!'); spy()};
var delayedFn = g3.debounce(targetFn, {delay: delay, fireFirst: true, fireLast: false});
// for lodash:
//var delayedFn = _.debounce(targetFn, delay, {leading: true, trailing: false});
/* 1 */delayedFn();
/* after 99ms */
clock.tick(delay - 1);
//console.log(Date.now());
/* 2 */delayedFn();
/* after 99ms */
clock.tick(delay - 1);
//console.log(Date.now());
/* 3 */delayedFn();
clock.restore();
sinon.assert.calledOnce(spy);
});
it('should run debounced function once with: 3 calls at elapsed < delay & fireLast: true', function() {
var clock = sinon.useFakeTimers();
// sinon remedy avoids buggy behavior
clock.tick(1000);
//console.log(Date.now());
var delay = 100;
var spy = sinon.spy();
var targetFn = function(){console.log('eventually debounced was called!'); spy()};
var delayedFn = g3.debounce(targetFn, {delay: delay, fireFirst: false, fireLast: true});
// for lodash:
//var delayedFn = _.debounce(targetFn, delay, {leading: true, trailing: false});
/* 1 */delayedFn();
/* after 99ms */
clock.tick(delay - 1);
//console.log(Date.now());
/* 2 */delayedFn();
/* after 99ms */
clock.tick(delay - 1);
//console.log(Date.now());
/* 3 */delayedFn();
/* after 100ms */
clock.tick(delay);
clock.restore();
sinon.assert.calledOnce(spy);
});
});
/***end file 'g3.debounceTest.js' ***/
I also injected a spy() inside a callback as I wanted to see what happens with that callback and I noticed by surprise that the callback runs after we call clock.restore(); but sinon does not have a way to audit this and remains completely ignorant of what happens after clock.restore();.
That's the reason why I forced to write clock.tick(delay); at the last case in order to allow sinon to "see" last invocation happens.
Lastly if you come with more ideas testing such an asynchronous code I'd love to see them.