如何使用documet.getElementById和getElementsByClassName为display none css属性执行jasmine测试用例

时间:2016-04-12 08:58:25

标签: javascript css jasmine karma-jasmine

我是茉莉花测试用例的新手我做了这个样式属性未定义后,我试图为选择模块做茉莉花测试用例

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

    };

我的测试用例是

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

    });
});

执行此操作后,我正在设置并删除代码以便beforEach

  

TypeError:无法读取未定义的属性“样式”

如果我做错了,请纠正我

1 个答案:

答案 0 :(得分:5)

此代码有一些错误。

首先在Selection.prototype.expandFlightDetails中确保获得数组的第一个结果(您忘记了[0]):

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

Selection.prototype.hideFlightDetails

的相同评论

然后在您的测试套件中创建一个名为selection的Selection实例,但在两个测试中,您使用的是名为flightselection的变量,该变量无处声明。不应该是selection而是

最后,您的问题似乎是您尝试在测试中操作'flight-details-container',尽管此元素是在afterEach回调上创建的。 afterEach表示这将在每次测试后执行,因此在测试期间不会存在。