Come testare il debounce di LoDash in Jasmine con Sinon fakeTimer?

Question

Sto provando a scrivere un test per il debouncing dell'input dell'utente in una query di ricerca. La funzione è definita su un Backbone Vista:

SearchView = Backbone.View.extend({ 
    events: { 
     "input .search-input": "search" 
    }, 

    // init, render, etc. 

    search: _.debounce(function() { 
     this.collection.fetch(); 
    }, 200) 
}); 

In origine, la libreria Backbone (v0.9.10) utilizzato sottolineatura (v1.4.4), e il test è stato definito come segue:

describe("SearchView", function() { 
    var view, $viewContainer; 

    beforeEach(function() { 
     appendSetFixtures('<div class="jasmine-container"></div>'); 
     $viewContainer = $(".jasmine-container"); 

     view = new SearchView({ 
      el: $viewContainer 
     }); 
    }); 

    afterEach(function() { 
     view.remove(); 
     view.cleanup(); 
    }); 

    //... 

    describe("wires the search input", function() { 
     var collectionStub, 
      fakeTimer; 

     beforeEach(function() { 
      collectionStub = sinon.stub(
       SearchResultsCollection.prototype, 
       "fetch" 
      );  

      fakeTimer = sinon.useFakeTimers(); 
     }); 

     afterEach(function() { 
      collectionStub.restore(); 
      fakeTimer.restore(); 
     }); 

     it("should not trigger a search before 200ms", function() { 
      fakeTimer.tick(199); 
      expect(collectionStub).not.toHaveBeenCalled(); 
     }); 

     it("should trigger a search after 200ms", function() { 
      fakeTimer.tick(200); 
      expect(collectionStub).toHaveBeenCalled(); 
     }); 
    }); 
}); 

Tuttavia , ora voglio incorporare LoDash invece di Underscore. Usando l'ultima build di compatibilità Underscore sul loro sito (LoDash 2.4.1/Underscore 1.5.6), tutti i miei test passano tranne quello che usa _.debounce!

Ho fatto delle ricerche e ho trovato questi relevantissues per creare una build di LoDash Underscore con runInContext, ma non ho idea di come usarlo a causa della mancanza di esempi. Come posso usare _.runInContext() nelle mie specifiche per lavorare con sinon.fakeTimer?

Answer 1

SearchView = Backbone.View.extend({ 
    events: { 
     "input .search-input": function() { 
      this.search(); 
     } 
    }, 

    initialize: function() { 
     this.search = _.debounce(this.search, 200); 
    } 

    // init, render, etc. 

    search: function() { 
     this.collection.fetch(); 
    } 
});  

describe("SearchView", function() { 
    var view; 
    var $viewContainer; 
    var clock; 
    var lodash = window._; 

    beforeEach(function() { 
     appendSetFixtures('<div class="jasmine-container"></div>'); 
     $viewContainer = $(".jasmine-container"); 

     clock = sinon.useFakeTimers(); 
     window._ = _.runInContext(window); 

     view = new SearchView({ 
      el: $viewContainer 
     }); 
    }); 

    afterEach(function() { 
     view.remove(); 
     view.cleanup(); 

     clock.restore(); 
     window._ = lodash; 
    }); 

    //... 

    describe("wires the search input", function() { 
     var collectionStub; 

     beforeEach(function() { 
      collectionStub = sinon.stub(
       SearchResultsCollection.prototype, 
       "fetch" 
      );  
     }); 

     afterEach(function() { 
      collectionStub.restore(); 
     }); 

     it("should not trigger a search before 200ms", function() { 
      fakeTimer.tick(199); 
      expect(collectionStub).not.toHaveBeenCalled(); 
     }); 

     it("should trigger a search after 200ms", function() { 
      fakeTimer.tick(200); 
      expect(collectionStub).toHaveBeenCalled(); 
     }); 
    }); 
}); 

Answer 2

È necessario aggiungere questa riga

_ = _.runInContext(window); 

prima della creazione (non inizializzazione) di SearchView o di qualsiasi chiamata di _.debounce(). Quindi dovrebbe essere subito dopo aver incluso Lo-Dash.

Ciò consente di eseguire lodash nel contesto della finestra globale in modo da poter essere sovrascritti da SinonJSsetTimeout.