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

Question

我是茉莉花测试用例的新手我尝试做茉莉花测试用例选择模块后做了这个样式属性变得不确定

 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:无法读取未定义的属性"样式"

如果我做错了,请纠正我

Answer 1

您在此代码上有一些错误.

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

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

同样的评论 Selection.prototype.hideFlightDetails

然后在您的测试套件中创建一个名为的Selection实例,selection但在两个测试中,您使用的是一个名为flightselectionnowhere 的变量.不应该这样selection吗？

最后你的问题似乎是你尝试'flight-details-container'在测试中操作,尽管这个元素是在afterEach回调上创建的.afterEach意味着这将在每次测试后执行,因此在测试期间不存在.