如何使用 documet.getElementById 和 getElementsByClassName 显示 none css 属性 的茉莉花测试用例

Question

我是 jasmine 测试用例的新手 我尝试在完成此样式后为选择模块做 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: Cannot read property 'style' of undefined

如有错误请指正

Answer 1

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

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

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

对 Selection.prototype.hideFlightDetails

的相同评论

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

最后，您的问题似乎是您试图在测试中操纵 'flight-details-container'，尽管此元素是在 afterEach 回调中创建的。 afterEach表示这个会在每次测试后执行，所以在测试的时候是不存在的。