đối tượng giả cho các phần tử tài liệu

Question

tôi có mã tiếp theo kiểm tra:

it("Test", function() { 
    loadResources(); 

    expect(document.getElementById('MyElement').innerHTML).toBe("my string"); 
}); 

Body chức năng loadResources():

document.getElementById('MyElement').innerHTML = "my string"; 

thử nghiệm của tôi không thành công với thông báo sau:

TypeError: Cannot set property "innerHTML" of null.

Có vẻ như tôi cần phải tạo đối tượng giả cho innerHTML. Tôi phải làm việc đó như thế nào?

Answer 1

Tôi nghĩ bạn nên thử getElementById để trả lại một phần tử html giả

var dummyElement = document.createElement('div'); 
document.getElementById = jasmine.createSpy('HTML Element').andReturn(dummyElement); 

Vì vậy, bây giờ, cho tất cả các cuộc gọi đến document.getElementById nó sẽ trở lại các yếu tố dummy. Nó sẽ thiết lập innerHTML của phần tử giả và so sánh nó với kết quả mong đợi ở cuối.

EDIT: Và tôi đoán bạn nên thay thế toBe bằng toEqual. toBe có thể không thành công vì nó sẽ kiểm tra định danh đối tượng thay vì bình đẳng giá trị.

EDIT2 (liên quan đến nhiều ID): Tôi không chắc chắn, nhưng thay vào đó bạn có thể gọi giả mạo. Nó sẽ tạo ra một phần tử HTML mới cho mỗi ID (nếu nó chưa hề tồn tại) và lưu nó trong một đối tượng theo nghĩa đen để sử dụng trong tương lai (ví dụ các cuộc gọi khác đến getElementById với cùng một ID)

var HTMLElements = {}; 
document.getElementById = jasmine.createSpy('HTML Element').andCallFake(function(ID) { 
    if(!HTMLElements[ID]) { 
     var newElement = document.createElement('div'); 
     HTMLElements[ID] = newElement; 
    } 
    return HTMLElements[ID]; 
});