Làm thế nào để kiểm tra LoDash debounce trong Jasmine với Sinon fakeTimer?

Question

Tôi đang cố gắng viết một bài kiểm tra để debouncing đầu vào của người dùng trong truy vấn tìm kiếm. Các chức năng được xác định trên một Backbone Xem:

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

    // init, render, etc. 

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

Nguyên, thư viện Backbone (v0.9.10) được sử dụng dấu gạch dưới (v1.4.4), và kiểm tra được quy định như sau:

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

Tuy nhiên , bây giờ tôi muốn kết hợp LoDash thay vì gạch dưới. Sử dụng khả năng tương thích Underscore mới nhất trên trang web của họ (LoDash 2.4.1/Underscore 1.5.6), tất cả các bài kiểm tra của tôi đều vượt qua ngoại trừ bài kiểm tra sử dụng _.debounce!

Tôi đã thực hiện một số nghiên cứu và đã xem qua các số relevantissues này để tạo bản dựng LoDash Underscore với runInContext, nhưng tôi không biết cách sử dụng nó do thiếu ví dụ. Làm cách nào để sử dụng _.runInContext() trong (các) thông số của tôi để làm việc với 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

Bạn cần thêm dòng

_ = _.runInContext(window); 

này trước khi sáng tạo (không khởi tạo) của SearchView hoặc bất kỳ cuộc gọi của _.debounce(). Vì vậy, nó phải được ngay sau khi bao gồm Lo-Dash.

Điều này cho phép bạn chạy lodash trong ngữ cảnh cửa sổ chung để bạn có thể sử dụng ghi đè bởi SinonJSsetTimeout.