Wie Jasmin Testfall für die Anzeige keine CSS-Eigenschaft mit documet.getElementById und getElementsByClassName

Question

Ich bin neu in dem Jasmin Testfall habe ich versucht zu tun, Jasmin Testfall für die Auswahlmodul zu tun, nachdem diese Art Eigenschaft zu tun ist immer undefiniert

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

    }; 

Mein Testfall ist

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

    }); 
}); 

Nachdem Sie das getan ich bin geting und entfernt Code

TypeError: Cannot read property 'style' of undefined

beforEach

Bitte korrigieren Sie mich, wenn ich falsch gemacht habe

Answer 1

Sie haben ein paar Fehler in diesem Code.

Zuerst in Selection.prototype.expandFlightDetails sicherstellen, dass das erste Ergebnis des Arrays erhalten (vergessen Sie die [0]):

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

Same Kommentar für Selection.prototype.hideFlightDetails

Dann in Ihrer Testsuite Sie eine Auswahl Instanz erstellen benannt selection aber in beiden Tests verwenden Sie eine Variable namens flightselection, die nirgendwo deklariert wird. Sollte es nicht selection stattdessen sein?

Schließlich scheint Ihr Problem zu sein, dass Sie versuchen, 'flight-details-container' in Ihrem Test zu manipulieren, obwohl dieses Element auf dem afterEach Rückruf erstellt wird. afterEach bedeutet, dass dies nach jedem Test ausgeführt wird, so dass es während des Tests nicht existiert.