Come fare test case gelsomino per la proprietà di visualizzazione nessuno css usando documet.getElementById e getElementsByClassName

Question

Sono nuovo al banco di prova gelsomini ho cercato di fare banco di prova per il gelsomino modulo di selezione dopo aver fatto questa struttura in stile sta diventando indefinito

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

    }; 

mio testcase è

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

    }); 
}); 

Dopo aver fatto questo che sto geting e rimosso il codice per beforEach

TypeError: Cannot read property 'style' of undefined

per favore correggimi se ho sbagliato

Answer 1

Hai qualche errore su questo codice.

Prima in Selection.prototype.expandFlightDetails assicurarsi di ottenere il primo risultato della matrice (hai dimenticato la [0]):

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

Stessa osservazione per Selection.prototype.hideFlightDetails

Poi nella vostra suite di test si crea un'istanza di selezione di nome selection ma in entrambi i test si sta utilizzando una variabile denominata flightselection che non viene dichiarata da nessuna parte. Non dovrebbe invece essere selection?

Infine, il problema sembra essere che si tenta di manipolare 'flight-details-container' nel test, anche se questo elemento viene creato sul callback afterEach. afterEach significa che questo verrà eseguito dopo ogni test, quindi non esiste durante il test.