How to make a jasmine test case for displaying none of the css property using documet.getElementById and getElementsByClassName

Question

I am new to jasmine test case. I tried to make a jasmine test case for the select module, after executing this style property it turns out undefined

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

My test file

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

After that, I get and delete the code before each

TypeError: cannot read property 'style' from undefined

please correct me if i am wrong

Answer 1

You have some errors in this code.

First, in Selection.prototype.expandFlightDetails be sure to get the first result of the array (you forgot [0] ):

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

Same comment for Selection.prototype.hideFlightDetails

Then, in your test case, you create an instance of Selection called selection , but then in both tests you use a variable called flightselection that is declared nowhere. Shouldn't it be selection ?

Finally, your problem is that you are trying to manipulate the 'flight-details-container' in your test, although this element is created in the afterEach . afterEach means that this will be done after each test, so it does not exist during the test.