Jak zrobić sprawdzian jaśmin własności display none css wykorzystaniem documet.getElementById i getElementsByClassName

Question

Jestem nowy w przypadku testowego jaśmin starałem się zrobić sprawdzian jaśmin dla modułu wyboru po wykonaniu tej właściwość stylu jest coraz niezdefiniowany

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'; 

    }; 

Moja testcase jest

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'); 

    }); 
}); 

Po wykonaniu tej czynności mam czuło i kod do beforEach

TypeError: Cannot read property 'style' of undefined

usunięte

proszę mnie poprawić, jeśli zrobiłem źle

Answer 1

Masz kilka błędów w tym kodzie.

pierwsze w Selection.prototype.expandFlightDetails upewnij się, aby zdobyć pierwszy wynik tablicy (zapomniałeś [0]):

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

sam komentarz do Selection.prototype.hideFlightDetails

Następnie w swoim apartamencie testowej utworzyć instancję Selection nazwie selection, ale w obu testach używana jest zmienna o nazwie flightselection, która jest zadeklarowana jako nigdzie. Czy nie powinien to być selection?

W końcu twój problem polega na tym, że próbujesz manipulować 'flight-details-container' w teście, chociaż ten element jest tworzony na wywołania zwrotnym afterEach. afterEach oznacza, że ​​zostanie to wykonane po każdym teście, więc nie istnieje podczas testu.