Thursday, April 21, 2016

How to do jasmine test case for display none css property using documet.getElementById and getElementsByClassName

Leave a Comment

I am new to the jasmine test case I tried to do jasmine test case for selection module after doing this style property is getting 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 testcase is

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 doing this I'm geting and removed code to beforEach

TypeError: Cannot read property 'style' of undefined

please correct me if I have done wrong

1 Answers

Answers 1

You have a few errors on this code.

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

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

Same comment for Selection.prototype.hideFlightDetails

Then in your test suite you create a Selection instance named selection but then in both tests you are using a variable called flightselection which is declared nowhere. Shouldn't it be selection instead?

Finally your problem seems to be that you try to manipulate 'flight-details-container' in your test, although this element is created on the afterEach callback. afterEach means that this will be executed after each test, so it doesn't exist during the test.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment