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

Question

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

Answer 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.