如何使用documet.getElementById和getElementsByClassName为display no

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

本文关键字：display no getElementsByClassName 何使用 documet getElementById      更新时间：2024-05-03

我是茉莉花测试用例的新手，我尝试为选择模块做茉莉花测试，在做了这个样式之后，属性得到了未定义的

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

在完成这项工作后，我正在获取并删除beforeEach 的代码

TypeError:无法读取未定义的属性"style"

如果我做了错误的，请纠正我

您在这段代码中有一些错误。

首先在Selection.prototype.expandFlightDetails中，确保获得数组的第一个结果（您忘记了[0]）：

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

Selection.prototype.hideFlightDetails 的相同注释

然后，在您的测试套件中，您创建了一个名为selection的Selection实例，但在两个测试中，您都使用了一个称为flightselection的变量，该变量在任何地方都没有声明。不应该是selection吗？

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

相关文章：