Làm thế nào để làm trường hợp thử nghiệm hoa nhài cho bất động sản sử dụng documet.getElementById và getElementsByClassName

Question

Tôi mới vào các trường hợp thử nghiệm hoa nhài Tôi cố gắng để làm trường hợp thử nghiệm hoa nhài cho module lựa chọn sau khi làm sở hữu phong cách này hiển thị không có css là nhận được xác định

function Selection() { 

    } 
    Selection.prototype.expandFlightDetails = function() { 

     document.getElementsByClassName("flight-details-container").style.display = 'none'; 
     document.getElementById("expandedFlightDetails").style.display = 'block'; 
    }; 
    Selection.prototype.hideFlightDetails = function() { 
     document.getElementById("expandedFlightDetails").style.display = 'none'; 
     document.getElementsByClassName("flight-details-container").style.display = 'block'; 

    }; 

testcase của tôi là

describe("selection module", function() { 
    var selection; 

    beforeEach(function() { 
     selection= new Selection(); 

    }); 
    afterEach(function() { 

    }); 
    it('expand the flight details part ' , function(){ 
     selection.expandFlightDetails(); 
     expect(document.body.getElementsByClassName('flight-details-container')[0].style.display).toEqual('none'); 

    }); 
    xit('hide the flight details part ', function(){ 
     selection.hideFlightDetails(); 
     expect(document.getElementById('expandedFlightDetails').style.display).toEqual('none'); 

    }); 
}); 

Sau khi thực hiện này tôi geting và loại bỏ mã để beforEach

TypeError: Cannot read property 'style' of undefined

hãy sửa tôi nếu tôi đã làm sai

Answer 1

Bạn có một vài lỗi trên mã này.

đầu tiên trong Selection.prototype.expandFlightDetails chắc chắn để có được những kết quả đầu tiên của mảng (bạn quên [0]):

document.getElementsByClassName("flight-details-container")[0] 

Cùng bình luận cho Selection.prototype.hideFlightDetails

Sau đó, trong bộ kiểm tra của bạn, bạn tạo một đối tượng Selection tên selection nhưng sau đó trong cả hai bài kiểm tra bạn đang sử dụng một biến gọi là flightselection được khai báo hư không. Chẳng phải nó sẽ là selection thay vào đó?

Cuối cùng vấn đề của bạn có vẻ là bạn cố gắng thao tác 'flight-details-container' trong thử nghiệm của mình, mặc dù phần tử này được tạo trên cuộc gọi lại afterEach. afterEach có nghĩa là điều này sẽ được thực thi sau mỗi lần kiểm tra, vì vậy nó không tồn tại trong quá trình thử nghiệm.