Sinon fakeTimer로 재스민에서 LoDash 디 바운딩을 테스트하는 방법은 무엇입니까?

Question

검색 쿼리에서 사용자 입력을 디 바운스 (debouncing)하는 테스트를 작성하려고합니다. 이 기능은 백본보기에 정의됩니다

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

    // init, render, etc. 

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

원래, 백본 라이브러리 (v0.9.10)는 밑줄 (v1.4.4)를 사용하고, 테스트가 정의를 다음과 같이 그러나

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(); 
     }); 
    }); 
}); 

, 이제 Underscore 대신 LoDash를 통합하려고합니다. 그들의 사이트 (LoDash 2.4.1/Underscore 1.5.6)에서 최신 Underscore 호환성 빌드를 사용하면 _desbounce를 사용하는 것을 제외하고 모든 테스트가 통과됩니다!

나는 약간의 연구를했고 이것들을 통해issues을 만들었으며 runInContext를 사용하여 LoDash Underscore 빌드를 만들었지 만, 예제가 없어서 어떻게 사용하는지 전혀 모릅니다. 내 사양에 _.runInContext()을 사용하여 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

당신은 SearchView 또는 _.debounce()의 호출의 (초기 환경되지 않음) 생성하기 전에이 줄

_ = _.runInContext(window); 

를 추가해야합니다. 따라서 바로 뒤에 Lo-Dash을 포함해야합니다.

SinonJSsetTimeout에 의해 재정의 될 수 있도록 전체 창 컨텍스트에서 lodash을 실행할 수 있습니다.