Kiểm tra chế độ xem Backbone.js bằng cách sử dụng Sinon Spies trong trình duyệt

Question

Tôi đang viết một thử nghiệm cho Chế độ xem xương sống để kiểm tra hàm render được gọi sau khi tìm nạp mô hình. Bài kiểm tra là:

beforeEach(function() { 
    $('body').append('<div class="sidebar"></div>'); 
    profileView = new ProfileView(); 
}); 

it('should call the render function after the model has been fetched', function (done) { 
    profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'}); 
    var spy = sinon.spy(profileView, 'render'); 
    profileView.model.fetch({ 
     success: function() { 
      sinon.assert.called(spy); 
      done(); 
     } 
    }); 
}); 

Tôi đang sử dụng Sinon Spies để đính kèm một đối tượng gián điệp vào hàm render của đối tượng ViewView.

Quan điểm là:

var ProfileView = Backbone.View.extend({ 
    el: '.sidebar' 
    , template: Hogan.compile(ProfileTemplate) 
    , model: new UserModel() 
    , initialize: function() { 
     this.model.bind('change', this.render, this); 
     this.model.fetch(); 
    } 
    , render: function() { 
     $(this.el).html(this.template.render()); 
     console.log("Profile Rendered"); 
     return this; 
    } 
}); 

Sau Truy xuất được gọi trong các thử nghiệm, sự kiện thay đổi được bắn và của render xem chức năng là nhận được gọi, nhưng Sinon Spy không phát hiện rằng làm đang được gọi và thất bại.

Là một thử nghiệm, tôi đã cố gắng gọi render chức năng trong các thử nghiệm để xem nếu Spy xác định nó:

it('should call the render function after the model has been fetched', function (done) { 
    profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'}); 
    var spy = sinon.spy(profileView, 'render'); 
    profileView.render(); 
    profileView.model.fetch({ 
     success: function() { 
      sinon.assert.called(spy); 
      done(); 
     } 
    }); 
}); 

The Spy phát hiện được gọi đã được thực hiện trong trường hợp trên.

Có ai biết tại sao gián điệp không nhận dạng được lệnh gọi kết xuất trong thử nghiệm ban đầu của tôi không?

Answer 1

Vấn đề là trong khi xây dựng chế độ xem, hàm khởi tạo liên kết một sự kiện trực tiếp đến hàm render. Bạn không thể ngăn chặn sự kiện này với một điệp viên vì ràng buộc đã xảy ra trước khi bạn thiết lập gián điệp của bạn (mà bạn làm sau khi xây dựng).

Giải pháp là theo dõi nguyên mẫu trước khi bạn xây dựng chế độ xem. Vì vậy, bạn sẽ phải di chuyển các điệp viên vào beforeEach, hoặc di chuyển xây dựng quan điểm vào thử nghiệm.

Để thiết lập các gián điệp:

this.renderSpy = sinon.spy(ProfileView.prototype, 'render'); 
this.view = new ProfileView(); 

Rồi sau đó, để loại bỏ các gián điệp:

ProfileView.prototype.render.restore() 

Điều này sau đó sẽ do thám 'bình thường' gọi để render, cũng như các sự kiện thay đổi từ ngươi mâu.

Answer 2

Chỉ cần 3 đoán:

1. Bạn đang giả rằng callback fetch({ success }) đang được gọi sau khi Model đã được cập nhật và sự kiện Mẫu kích hoạt .. và có thể là không như thế này. Giải pháp: cố gắng phát gỡ lỗi xung quanh here.
2. Có thể gọi fetch không phải là thành công để gọi lại thành công không được gọi. Giải pháp: thử thêm lỗi gọi lại vào số fetch để xem liệu chúng tôi có đang được sửa đổi hay không.
3. Các câu trả lời Model.validatefalse, không phải là rất có thể xảy ra nếu bạn chưa triển khai.

(Tôi đặt cược cho 2.)

Answer 3

này làm việc cho tôi, mặc dù các điệp viên được sử dụng trong bộ sưu tập:

var thatzzz = this; 
    this.hcns.fetch({ 
     success: function(){ 
      expect(thatzzz.hcnsFetchSpy).toHaveBeenCalled(); 
     } 
}); 

• gián điệp đã được xác định trên beforeEach